--- /dev/null
+/*\r
+ BLOCK LIST\r
+ ----------\r
+\r
+ A generic list component that can accomodate a variety of styles and controls.\r
+\r
+ Features:\r
+ - Icons\r
+ - Labels\r
+ - Chevrons\r
+ - Text fields\r
+ - Dropdown menus\r
+ - Checkbox/radio inputs\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Block List\r
+$blocklist-background: #fff !default;\r
+$blocklist-fullbleed: true !default;\r
+$blocklist-fontsize: 1rem !default;\r
+\r
+$blocklist-item-padding: 0.8rem 1rem !default;\r
+$blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;\r
+$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;\r
+$blocklist-item-color-disabled: #999 !default;\r
+$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;\r
+\r
+$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;\r
+$blocklist-item-icon-size: 0.8 !default;\r
+\r
+$blocklist-header-fontsize: 0.8em !default;\r
+$blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;\r
+$blocklist-header-uppercase: true;\r
+\r
+$blocklist-check-icons: true !default;\r
+///\r
+\r
+/*\r
+ Adds styles for a block list container.\r
+\r
+ $font-size: global font size for the list.\r
+ $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.\r
+*/\r
+%block-list-container {\r
+ margin-bottom: 1rem;\r
+ line-height: 1;\r
+ user-select: none;\r
+\r
+ &, ul {\r
+ list-style-type: none;\r
+ }\r
+ ul {\r
+ margin-left: 0;\r
+ }\r
+}\r
+@mixin block-list-container(\r
+ $font-size: $blocklist-fontsize,\r
+ $full-bleed: $blocklist-fullbleed\r
+) {\r
+ @extend %block-list-container;\r
+ font-size: $font-size;\r
+\r
+ @if $full-bleed {\r
+ margin-left: -$global-padding;\r
+ margin-right: -$global-padding;\r
+ }\r
+}\r
+\r
+/*\r
+ Styles block list headers on the selector you include this mixin in (normally a <header>).\r
+\r
+ $color - color of the header.\r
+ $font-size - font size of the header.\r
+ $offset - left margin to add to the header, to line it up with the list items.\r
+*/\r
+@mixin block-list-header(\r
+ $color: $blocklist-header-color,\r
+ $font-size: $blocklist-header-fontsize,\r
+ $uppercase: $blocklist-header-uppercase,\r
+ $offset: get-side($blocklist-item-padding, left)\r
+) {\r
+ margin-top: 1em;\r
+ color: $color;\r
+ font-weight: bold;\r
+ margin-bottom: 0.5em;\r
+ margin-left: $offset;\r
+ font-size: $font-size;\r
+ cursor: default;\r
+ @if $uppercase { text-transform: uppercase; }\r
+}\r
+\r
+/*\r
+ Styles block list items on the selector you include this mixin in (normally an <li>).\r
+\r
+ $color - color of items.\r
+ $color-hover - color of items on hover.\r
+ $background - background of items.\r
+ $background-hover - background of items on hover.\r
+ $border - border between items.\r
+ $padding - padding on items.\r
+*/\r
+@mixin block-list-item(\r
+ $color: $blocklist-item-color,\r
+ $color-hover: $blocklist-item-color,\r
+ $color-disabled: $blocklist-item-color-disabled,\r
+ $background: transparent,\r
+ $background-hover: $blocklist-item-background-hover,\r
+ $border: $blocklist-item-border,\r
+ $padding: $blocklist-item-padding\r
+) {\r
+ position: relative;\r
+\r
+ @if hasvalue($border) {\r
+ border-bottom: $border;\r
+ &:first-child {\r
+ border-top: $border;\r
+ }\r
+ }\r
+\r
+ // Inner elements share the same basic styles\r
+ > a, > span, > label {\r
+ display: block;\r
+ padding: $padding;\r
+ padding-left: get-side($padding, left);\r
+ color: $color;\r
+ line-height: 1;\r
+ }\r
+ > span {\r
+ cursor: default;\r
+ }\r
+ > a, > label {\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ color: $color-hover;\r
+ }\r
+ }\r
+ > a, > label, select {\r
+ &:hover {\r
+ background: $background-hover;\r
+ }\r
+ }\r
+\r
+ // Coloring classes\r
+ &.caution > a {\r
+ &, &:hover { color: $alert-color; }\r
+ }\r
+ &.disabled > a {\r
+ cursor: default;\r
+ &, &:hover { color: $color-disabled; }\r
+ &:hover { background: transparent; }\r
+ }\r
+}\r
+\r
+/*\r
+ Adds label styles to the class you include this mixin in.\r
+\r
+ $color - color of the label.\r
+ $left-class - extra class to flip the orientation of the label.\r
+ $left-padding - left padding to use for left-hand labels.\r
+*/\r
+@mixin block-list-label(\r
+ $color: $blocklist-item-label-color,\r
+ $left-class: 'left',\r
+ $left-padding: get-side($blocklist-item-padding, top)\r
+) {\r
+ display: inline-block;\r
+ float: right;\r
+ padding: 0;\r
+ color: $color;\r
+ pointer-events: none;\r
+\r
+ &.#{$left-class} {\r
+ margin-left: $left-padding;\r
+ float: none;\r
+ }\r
+}\r
+\r
+/*\r
+ Adds support for chevrons, which appear on the right-hand side of the item.\r
+\r
+ $color - color of the chevron.\r
+ $padding - include the global padding of block list items here.\r
+*/\r
+@mixin block-list-chevron(\r
+ $color: $blocklist-header-color,\r
+ $padding: $blocklist-item-padding,\r
+ $label-class: 'block-list-label'\r
+) {\r
+ // Chevrons are a pseudo-element\r
+ &::after {\r
+ content: '\203A';\r
+ display: block;\r
+ position: absolute;\r
+ right: get-side($padding, right);\r
+ top: 50%;\r
+ transform: translateY(-50%);\r
+ font-weight: bold;\r
+ color: $color;\r
+ font-size: 2em;\r
+ }\r
+\r
+ // Labels next to links move over to make room for the chevron\r
+ // TODO: this selector needs to be customiable, but adding a setting just for it might be weird\r
+ .#{$label-class} {\r
+ padding-right: get-side($padding, right) * 1.5;\r
+ }\r
+}\r
+\r
+/*\r
+ Adds icon styles. Call this mixin on a block list container.\r
+\r
+ $size - size of the icon as a percentage (decimal) of the list item's height.\r
+ $item-selector - overrides the 'li' selector used for list items.\r
+*/\r
+@mixin block-list-icons(\r
+ $size: $blocklist-item-icon-size,\r
+ $item-selector: 'li'\r
+) {\r
+ // PH - need a better solution\r
+ $item-height:\r
+ $blocklist-fontsize\r
+ + get-side($blocklist-item-padding, top)\r
+ + get-side($blocklist-item-padding, top);\r
+\r
+ $icon-height: $item-height * $blocklist-item-icon-size;\r
+ $icon-offset: ($item-height - $icon-height) / 2;\r
+\r
+ #{$item-selector} {\r
+ > a, > span, > label {\r
+ padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;\r
+ }\r
+ img, .iconic {\r
+ position: absolute;\r
+ top: $icon-offset;\r
+ left: $icon-offset;\r
+ width: $icon-height;\r
+ height: $icon-height;\r
+ border-radius: 8px;\r
+ pointer-events: none;\r
+ }\r
+ }\r
+}\r
+\r
+/*\r
+ Adds support for text fields, select menus, and checkbox/radio groups in block lists.\r
+\r
+ $color - color of select menu arrow.\r
+ $background-hover - color of select menu when hovered over.\r
+ $padding - include the global padding of block list items here.\r
+ $dropdown-class - class to use for list items that contain a dropdown.\r
+ $switch-class - class to use for switches inside list items.\r
+*/\r
+@mixin block-list-inputs(\r
+ $color: $blocklist-item-color,\r
+ $background: $blocklist-background,\r
+ $background-hover: $blocklist-item-background-hover,\r
+ $padding: $blocklist-item-padding,\r
+ $icons: $blocklist-check-icons,\r
+ $dropdown-class: 'with-dropdown',\r
+ $switch-class: 'switch'\r
+) {\r
+ // Text fields\r
+ #{$text-input-selectors} {\r
+ margin: 0;\r
+ border: 0;\r
+ line-height: 1;\r
+ height: auto;\r
+ padding: $padding;\r
+ color: inherit;\r
+\r
+ &:hover, &:focus {\r
+ border: 0;\r
+ }\r
+ }\r
+\r
+ // Multiple select\r
+ li > input[type="checkbox"], li > input[type="radio"] {\r
+ position: absolute;\r
+ left: -9999px;\r
+\r
+ & + label {\r
+ display: block;\r
+ font-size: $blocklist-fontsize;\r
+ margin: 0;\r
+ }\r
+\r
+ @if $icons == true {\r
+ &:checked + label {\r
+ &::before {\r
+ @include image-checkmark($color);\r
+ content: '';\r
+ background-size: 100% 100%;\r
+ width: 1.5em;\r
+ height: 1.5em;\r
+ color: $primary-color;\r
+ float: right;\r
+ pointer-events: none;\r
+ margin-top: -0.25em;\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ // Dropdowns\r
+ .#{$dropdown-class} {\r
+ color: inherit;\r
+\r
+ select {\r
+ // Reset pesky <select> styles\r
+ -webkit-appearance: none;\r
+ -moz-appearance: none;\r
+ outline: 0;\r
+ background: 0;\r
+ border: 0;\r
+ height: auto;\r
+ padding: $padding;\r
+ margin: 0;\r
+ font-size: 1em; // Same size as its parent\r
+ line-height: 1;\r
+ color: inherit;\r
+ background-color: transparent;\r
+ }\r
+ }\r
+\r
+ // Switches\r
+ .#{$switch-class} {\r
+ position: absolute;\r
+ top: 50%;\r
+ right: get-side($padding, right);\r
+ transform: translateY(-50%);\r
+ }\r
+}\r
+\r
+@include exports(block-list) {\r
+ .block-list {\r
+ @include block-list-container;\r
+ @include block-list-inputs;\r
+\r
+ &.with-icons { @include block-list-icons; }\r
+ header { @include block-list-header; }\r
+\r
+ li {\r
+ @include block-list-item;\r
+\r
+ &.with-chevron { @include block-list-chevron; }\r
+ .block-list-label { @include block-list-label; }\r
+ }\r
+ }\r
+}\r
Code Review / src / app-framework-demo.git / blobdiff