ArticleTemplates/assets/scss/modules/_alerts.scss (53 lines of code) (raw):
// /*doc
// ---
// title: Alerts
// name: alerts
// category: Modules
// ---
// Display an alerts toggle.
//
// ```html_example
// <a class="alerts my-guardian-follow-tag " href="x-gu://follow-contributor-tag/tag-contributor///profile/elle-hunt" data-follow-tag-id="tag-contributor///profile/elle-hunt" style="display: block;">
// <span class="alerts__state--unfollow-tag">
// <span data-icon="" aria-hidden="true" class="not-following"></span>
// <span class="alerts__label">Follow Elle Hunt</span>
// </span>
// <span class="alerts__state--follow-tag">
// <span data-icon="" aria-hidden="true" class="following"></span>
// <span class="alerts__label">Following Elle Hunt</span>
// </span>
// </a>
// <a class="alerts " href="x-gu://follow/tag-contributor///profile/elle-hunt" data-follow-alert-id="tag-contributor///profile/elle-hunt">
// <span class="alerts__state--unfollow-notifications">
// <span data-icon="" aria-hidden="true" class="not-following"></span>
// <span class="alerts__label">Notifications off</span>
// </span>
// <span class="alerts__state--follow-notifications">
// <span data-icon="" aria-hidden="true" class="following"></span>
// <span class="alerts__label">Notifications on</span>
// </span>
// </a>
//
//
// <a class="alerts my-guardian-follow-tag followingTag" href="x-gu://follow-contributor-tag/tag-contributor///profile/elle-hunt" data-follow-tag-id="tag-contributor///profile/elle-hunt" style="display: block;">
// <span class="alerts__state--unfollow-tag">
// <span data-icon="" aria-hidden="true" class="not-following"></span>
// <span class="alerts__label">Follow Elle Hunt</span>
// </span>
// <span class="alerts__state--follow-tag">
// <span data-icon="" aria-hidden="true" class="following"></span>
// <span class="alerts__label">Following Elle Hunt</span>
// </span>
// </a>
// <a class="alerts following" href="x-gu://follow/tag-contributor///profile/elle-hunt" data-follow-alert-id="tag-contributor///profile/elle-hunt">
// <span class="alerts__state--unfollow-notifications">
// <span data-icon="" aria-hidden="true" class="not-following"></span>
// <span class="alerts__label">Notifications off</span>
// </span>
// <span class="alerts__state--follow-notifications">
// <span data-icon="" aria-hidden="true" class="following"></span>
// <span class="alerts__label">Notifications on</span>
// </span>
// </a>
// ```
// */
.alerts {
@include meta(.875);
font-family: $guardian-sans;
white-space: nowrap;
margin: base-px(0);
display: inline-block;
border-radius: 30px;
max-width: 100%;
color: color(brightness-7);
transition: background-color .3s;
transform: translateX(-1px);
padding-bottom: .25em;
&.my-guardian-follow-tag {
display: none;
}
svg {
path {
fill: currentColor;
}
}
&__label {
font-weight: normal;
margin-left: 2px;
margin-top: 4px;
font-size: 15px;
color: color(brightness-0);
}
&__state--unfollow-notifications, &__state--unfollow-tag {
display: flex;
align-items: center;
}
&__state--follow-notifications, &__state--follow-tag {
display: none;
}
&.following {
.alerts__state--follow-notifications {
display: flex;
align-items: center;
}
.alerts__state--unfollow-notifications {
display: none;
}
}
&.followingTag {
.alerts__state--follow-tag {
display: flex;
align-items: center;
}
.alerts__state--unfollow-tag {
display: none;
}
}
}