// @page Pattern Library/Typography // @name Numbered list // // @description // Our default numbered list styling. // // @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds. // // @markup // %base-custom-list { padding: 0; margin: 1.5em 0; list-style: none; li { position: relative; padding-left: 2em; margin: .5em 0; &:before { position: absolute; left: 0; } } } .us-numbered-list { @extend %base-custom-list; counter-reset: number-counter; li { counter-increment: number-counter; &:before { top: 0; width: 1.5em; height: 1.5em; padding-top: .25em; line-height: 1; color: $c-typecyan; text-align: center; border-radius: 2em; content: counter(number-counter); box-sizing: border-box; } } .us-hero & li:before, &.us-custom-list-alt li:before { color: $c-navy; background: #fff; background: rgba(255, 255, 255, .7); } } // @page Pattern Library/Typography // @name Ticked list // // @description // Our default ticked list styling. // // @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds. // // @markup // .us-ticked-list { @extend %base-custom-list; li { &:before { top: 50%; margin-top: - 8px; } .us-custom-list-alt &:before { @include icon-color("white"); } } }