mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
5.4 KiB
189 lines
5.4 KiB
// Name: List
|
|
// Description: Styles for lists
|
|
//
|
|
// Component: `uk-list`
|
|
//
|
|
// Modifiers: `uk-list-divider`
|
|
// `uk-list-striped`
|
|
// `uk-list-bullet`
|
|
// `uk-list-large`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$list-margin-top: $global-small-margin !default;
|
|
|
|
$list-nested-padding-left: $global-gutter !default;
|
|
|
|
$list-divider-margin-top: $global-small-margin !default;
|
|
$list-divider-border-width: $global-border-width !default;
|
|
$list-divider-border: $global-border !default;
|
|
|
|
$list-striped-padding-vertical: $global-small-margin !default;
|
|
$list-striped-padding-horizontal: $global-small-margin !default;
|
|
$list-striped-background: $global-muted-background !default;
|
|
|
|
$list-bullet-width: ($global-line-height * 1em) !default;
|
|
$list-bullet-height: $list-bullet-width !default;
|
|
$list-bullet-margin-right: $global-small-margin !default;
|
|
$list-bullet-icon-color: $global-color !default;
|
|
|
|
$list-large-margin-top: $global-margin !default;
|
|
$list-large-divider-margin-top: $global-margin !default;
|
|
$list-large-striped-padding-vertical: $global-margin !default;
|
|
$list-large-striped-padding-horizontal: $global-small-margin !default;
|
|
|
|
$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: List
|
|
========================================================================== */
|
|
|
|
.uk-list {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/*
|
|
* Micro clearfix
|
|
*/
|
|
|
|
.uk-list > li::before,
|
|
.uk-list > li::after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
|
|
.uk-list > li::after { clear: both; }
|
|
|
|
/*
|
|
* Remove margin from the last-child
|
|
*/
|
|
|
|
.uk-list > li > :last-child { margin-bottom: 0; }
|
|
|
|
/*
|
|
* Nested lists
|
|
*/
|
|
|
|
.uk-list ul {
|
|
margin: 0;
|
|
padding-left: $list-nested-padding-left;
|
|
list-style: none;
|
|
}
|
|
|
|
/*
|
|
* Style
|
|
*/
|
|
|
|
.uk-list > li:nth-child(n+2),
|
|
.uk-list > li > ul { margin-top: $list-margin-top; }
|
|
|
|
|
|
/* Style modifiers
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Divider
|
|
*/
|
|
|
|
.uk-list-divider > li: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 > li {
|
|
padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
|
|
@if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
|
|
}
|
|
|
|
.uk-list-striped > li:nth-of-type(odd) { background: $list-striped-background; }
|
|
|
|
.uk-list-striped > li:nth-child(n+2) { margin-top: 0; }
|
|
|
|
/*
|
|
* Bullet
|
|
* 1. Reset display table which causes issues in combination with multi column layouts
|
|
*/
|
|
|
|
.uk-list-bullet > li {
|
|
position: relative;
|
|
padding-left: unquote('calc(#{$list-bullet-width} + #{$list-bullet-margin-right})');
|
|
}
|
|
|
|
.uk-list-bullet > li::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: $list-bullet-width;
|
|
height: $list-bullet-height;
|
|
@include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
/* 1 */
|
|
display: block;
|
|
@if(mixin-exists(hook-list-bullet)) {@include hook-list-bullet();}
|
|
}
|
|
|
|
|
|
/* Size modifier
|
|
========================================================================== */
|
|
|
|
.uk-list-large > li:nth-child(n+2),
|
|
.uk-list-large > li > ul { margin-top: $list-large-margin-top; }
|
|
|
|
/*
|
|
* Divider
|
|
*/
|
|
|
|
.uk-list-large.uk-list-divider > li:nth-child(n+2) {
|
|
margin-top: $list-large-divider-margin-top;
|
|
padding-top: $list-large-divider-margin-top;
|
|
}
|
|
|
|
/*
|
|
* Striped
|
|
*/
|
|
|
|
.uk-list-large.uk-list-striped > li {
|
|
padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal;
|
|
@if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
|
|
}
|
|
|
|
.uk-list-large.uk-list-striped > li: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-bullet(){}
|
|
// @mixin hook-list-misc(){}
|
|
|
|
|
|
// Inverse
|
|
// ========================================================================
|
|
|
|
$inverse-list-divider-border: $inverse-global-border !default;
|
|
$inverse-list-striped-background: $inverse-global-muted-background !default;
|
|
$inverse-list-bullet-icon-color: $inverse-global-color !default;
|
|
|
|
|
|
|
|
// @mixin hook-inverse-list-divider(){}
|
|
// @mixin hook-inverse-list-striped(){}
|
|
// @mixin hook-inverse-list-bullet(){}
|
|
|