/_object.list-ui.scss
Sass | 124 lines | 70 code | 42 blank | 12 comment | 4 complexity | 58c656fdff4f5474c733f4ef553a57eb MD5 | raw file
- // *************************************
- //
- // #LIST-UI
- //
- // *************************************
-
- // The UI list object creates blocky list items with a keyline separator out of
- // a `ul` or `ol`.
-
- // Predefine the variables below in order to alter and enable specific features.
- $tree-list-ui-namespace: $tree-namespace !default;
-
- $tree-list-ui-padding: $tree-base-spacing-unit !default;
- $tree-list-ui-padding--tiny: quarter($tree-list-ui-padding) !default;
- $tree-list-ui-padding--small: halve($tree-list-ui-padding) !default;
- $tree-list-ui-padding--large: double($tree-list-ui-padding) !default;
- $tree-list-ui-padding--huge: quadruple($tree-list-ui-padding) !default;
-
- $tree-list-ui-border-width: 1px !default;
- $tree-list-ui-border-style: solid !default;
- $tree-list-ui-border-color: #edece4 !default;
-
- $tree-enable-list-ui--tiny: false !default;
- $tree-enable-list-ui--small: false !default;
- $tree-enable-list-ui--large: false !default;
- $tree-enable-list-ui--huge: false !default;
-
-
-
-
-
- .#{$tree-list-ui-namespace}list-ui,
- %#{$tree-list-ui-namespace}list-ui,
- .#{$tree-list-ui-namespace}list-ui__item,
- %#{$tree-list-ui-namespace}list-ui__item {
- border: 0 $tree-list-ui-border-style $tree-list-ui-border-color;
- }
-
- .#{$tree-list-ui-namespace}list-ui,
- %#{$tree-list-ui-namespace}list-ui {
- margin: 0;
- padding: 0;
- list-style: none;
- border-top-width: $tree-list-ui-border-width;
-
- > li {
- @extend %#{$tree-list-ui-namespace}list-ui__item;
- }
-
- }
-
- .#{$tree-list-ui-namespace}list-ui__item,
- %#{$tree-list-ui-namespace}list-ui__item {
- padding: $tree-list-ui-padding;
- border-bottom-width: $tree-list-ui-border-width;
- }
-
-
-
-
-
- @if ($tree-enable-list-ui--tiny == true) {
-
- // Tiny list-uis.
-
- .#{$tree-list-ui-namespace}list-ui--tiny,
- %#{$tree-list-ui-namespace}list-ui--tiny {
-
- > .#{$tree-list-ui-namespace}list-ui__item,
- > %#{$tree-list-ui-namespace}list-ui__item {
- padding: $tree-list-ui-padding--tiny;
- }
-
- }
-
- }
-
- @if ($tree-enable-list-ui--small == true) {
-
- // Small list-uis.
-
- .#{$tree-list-ui-namespace}list-ui--small,
- %#{$tree-list-ui-namespace}list-ui--small {
-
- > .#{$tree-list-ui-namespace}list-ui__item,
- > %#{$tree-list-ui-namespace}list-ui__item {
- padding: $tree-list-ui-padding--small;
- }
-
- }
-
- }
-
- @if ($tree-enable-list-ui--large == true) {
-
- // Large list-uis.
-
- .#{$tree-list-ui-namespace}list-ui--large,
- %#{$tree-list-ui-namespace}list-ui--large {
-
- > .#{$tree-list-ui-namespace}list-ui__item,
- > %#{$tree-list-ui-namespace}list-ui__item {
- padding: $tree-list-ui-padding--large;
- }
-
- }
-
- }
-
- @if ($tree-enable-list-ui--huge == true) {
-
- // Huge list-uis.
-
- .#{$tree-list-ui-namespace}list-ui--huge,
- %#{$tree-list-ui-namespace}list-ui--huge {
-
- > .#{$tree-list-ui-namespace}list-ui__item,
- > %#{$tree-list-ui-namespace}list-ui__item {
- padding: $tree-list-ui-padding--huge;
- }
-
- }
-
- }