// Name: List // Description: Styles for lists // // Component: `uk-list` // // Modifiers: `uk-list-disc` // `uk-list-circle` // `uk-list-square` // `uk-list-decimal` // `uk-list-hyphen` // `uk-list-muted` // `uk-list-emphasis` // `uk-list-primary` // `uk-list-secondary` // `uk-list-bullet` // `uk-list-divider` // `uk-list-striped` // `uk-list-large` // `uk-list-collapse` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: List ========================================================================== */ .uk-list { padding: 0; list-style: none; } /* * Avoid column break within the list item, when using `column-count` */ .uk-list > * { break-inside: avoid-column; } /* * Remove margin from the last-child */ .uk-list > * > :last-child { margin-bottom: 0; } /* * Style */ .uk-list > :nth-child(n+2), .uk-list > * > ul { margin-top: $list-margin-top; } /* Marker modifiers * Moving `::marker` inside `::before` to style it differently * To style the `::marker` is currently only supported in Firefox and Safari ========================================================================== */ .uk-list-disc > *, .uk-list-circle > *, .uk-list-square > *, .uk-list-decimal > *, .uk-list-hyphen > * { padding-left: $list-padding-left; } /* * Type modifiers */ .uk-list-decimal { counter-reset: decimal; } .uk-list-decimal > * { counter-increment: decimal; } .uk-list-disc > ::before, .uk-list-circle > ::before, .uk-list-square > ::before, .uk-list-decimal > ::before, .uk-list-hyphen > ::before { content: ""; position: relative; left: (-$list-padding-left); width: $list-padding-left; height: $list-marker-height; margin-bottom: (-$list-marker-height); display: list-item; list-style-position: inside; text-align: right; } .uk-list-disc > ::before { list-style-type: disc; } .uk-list-circle > ::before { list-style-type: circle; } .uk-list-square > ::before { list-style-type: square; } .uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; } .uk-list-hyphen > ::before { content: '–\00A0\00A0'; } /* * Color modifiers */ .uk-list-muted > ::before { color: $list-muted-color !important; } .uk-list-emphasis > ::before { color: $list-emphasis-color !important; } .uk-list-primary > ::before { color: $list-primary-color !important; } .uk-list-secondary > ::before { color: $list-secondary-color !important; } /* Image bullet modifier ========================================================================== */ .uk-list-bullet > * { padding-left: $list-padding-left; } .uk-list-bullet > ::before { content: ""; display: list-item; position: relative; left: (-$list-padding-left); width: $list-padding-left; height: $list-marker-height; margin-bottom: (-$list-marker-height); @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color); background-repeat: no-repeat; background-position: 50% 50%; } /* Style modifiers ========================================================================== */ /* * Divider */ .uk-list-divider > :nth-child(n+2) { margin-top: $list-divider-margin-top; padding-top: $list-divider-margin-top; border-top: $list-divider-border-width solid $list-divider-border; @if(mixin-exists(hook-list-divider)) {@include hook-list-divider();} } /* * Striped */ .uk-list-striped > * { padding: $list-striped-padding-vertical $list-striped-padding-horizontal; @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();} } .uk-list-striped > :nth-of-type(odd) { background: $list-striped-background; } .uk-list-striped > :nth-child(n+2) { margin-top: 0; } /* Size modifier ========================================================================== */ .uk-list-large > :nth-child(n+2), .uk-list-large > * > ul { margin-top: $list-large-margin-top; } .uk-list-collapse > :nth-child(n+2), .uk-list-collapse > * > ul { margin-top: 0; } /* * Divider */ .uk-list-large.uk-list-divider > :nth-child(n+2) { margin-top: $list-large-divider-margin-top; padding-top: $list-large-divider-margin-top; } .uk-list-collapse.uk-list-divider > :nth-child(n+2) { margin-top: 0; padding-top: 0; } /* * Striped */ .uk-list-large.uk-list-striped > * { padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; } .uk-list-collapse.uk-list-striped > * { padding-top: 0; padding-bottom: 0; } .uk-list-large.uk-list-striped > :nth-child(n+2), .uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; } // Hooks // ======================================================================== @if(mixin-exists(hook-list-misc)) {@include hook-list-misc();} // @mixin hook-list-divider(){} // @mixin hook-list-striped(){} // @mixin hook-list-misc(){} // Inverse // ======================================================================== // @mixin hook-inverse-list-divider(){} // @mixin hook-inverse-list-striped(){}