Permalink
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (81 sloc) 2.15 KB
// @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
// <ul class='us-numbered-list {$modifiers}'>
// <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
// <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
// </ul>
%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
// <ul class='us-ticked-list'>
// <li>
// <svg role="presentation" aria-hidden="true" class="us-icon us-icon--small us-icon--before us-icon--typegrey"><use xlink:href="/images/icons.svg#icon-tick"/></svg>
// Lorem ipsum dolor sit amet, consectetur adipiscing elit.
// </li>
// <li>
// <svg role="presentation" aria-hidden="true" class="us-icon us-icon--small us-icon--before us-icon--typegrey"><use xlink:href="/images/icons.svg#icon-tick"/></svg>
// Lorem ipsum dolor sit amet, consectetur adipiscing elit.
// </li>
// </ul>
.us-ticked-list {
@extend %base-custom-list;
li {
padding-left: 0;
&:before {
top: 50%;
margin-top: - 8px;
}
}
}