aboutsummaryrefslogtreecommitdiffstats
path: root/scss/uikit/components/list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/uikit/components/list.scss')
-rw-r--r--scss/uikit/components/list.scss187
1 files changed, 187 insertions, 0 deletions
diff --git a/scss/uikit/components/list.scss b/scss/uikit/components/list.scss
new file mode 100644
index 00000000..ed810bb0
--- /dev/null
+++ b/scss/uikit/components/list.scss
@@ -0,0 +1,187 @@
+// 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
+ */
+
+.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%;
+ float: left;
+ @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(){}