spaCy/website/assets/css/_components/_lists.sass
2016-04-01 01:24:48 +11:00

60 lines
1.6 KiB
Sass

// Lists - Variables
// ============================================================================
$list-alternatives : (letters, upper-latin), (roman, lower-roman)
$list-icon-color : color($theme)
$list-icon-size : 2.4rem
$list-item-padding : 1em
$list-margin-side : 5%
$list-padding-side : 2rem
// Lists - Style
// ============================================================================
// .list - list of items
// .list--bullets - unordered list with bullets
// .list--numbers - ordered list with numbers
// .list--letters - ordered list with letters
// .list--roman - ordered list with roman numerals
// .list-item - list item
.list
@extend .block, .text
padding-left: $list-margin-side
&--bullets
margin-left: $list-margin-side
.list-item
@include icon(bullet, none, 0 $list-padding-side 0 0, $list-icon-size)
&--numbers
counter-reset: li
margin-left: $list-margin-side
.list-item:before
@extend .h3
content: counter(li) '.'
counter-increment: li
padding-right: $list-padding-side
@each $list-type, $list-counter in $list-alternatives
&--#{$list-type}
@extend .list--numbers
.list-item:before
content: counter(li, #{$list-counter}) '.'
.list-item
margin-bottom: $list-item-padding
text-indent: -$list-margin-side
&:before
color: $list-icon-color
display: inline-block
line-height: 1
text-align: center
width: $list-icon-size
vertical-align: middle