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; } } }