afm-client/bower_components/foundation-apps/scss/components/_block-list.scss

   1 /*\r
   2   BLOCK LIST\r
   3   ----------\r
   4 \r
   5   A generic list component that can accomodate a variety of styles and controls.\r
   6 \r
   7   Features:\r
   8    - Icons\r
   9    - Labels\r
  10    - Chevrons\r
  11    - Text fields\r
  12    - Dropdown menus\r
  13    - Checkbox/radio inputs\r
  14 */\r
  15 \r
  16 /// @Foundation.settings\r
  17 // Block List\r
  18 $blocklist-background: #fff !default;\r
  19 $blocklist-fullbleed: true !default;\r
  20 $blocklist-fontsize: 1rem !default;\r
  21 \r
  22 $blocklist-item-padding: 0.8rem 1rem !default;\r
  23 $blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;\r
  24 $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;\r
  25 $blocklist-item-color-disabled: #999 !default;\r
  26 $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;\r
  27 \r
  28 $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;\r
  29 $blocklist-item-icon-size: 0.8 !default;\r
  30 \r
  31 $blocklist-header-fontsize: 0.8em !default;\r
  32 $blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;\r
  33 $blocklist-header-uppercase: true;\r
  34 \r
  35 $blocklist-check-icons: true !default;\r
  36 ///\r
  37 \r
  38 /*\r
  39   Adds styles for a block list container.\r
  40 \r
  41   $font-size: global font size for the list.\r
  42   $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.\r
  43 */\r
  44 %block-list-container {\r
  45   margin-bottom: 1rem;\r
  46   line-height: 1;\r
  47   user-select: none;\r
  48 \r
  49   &, ul {\r
  50     list-style-type: none;\r
  51   }\r
  52   ul {\r
  53     margin-left: 0;\r
  54   }\r
  55 }\r
  56 @mixin block-list-container(\r
  57   $font-size: $blocklist-fontsize,\r
  58   $full-bleed: $blocklist-fullbleed\r
  59 ) {\r
  60   @extend %block-list-container;\r
  61   font-size: $font-size;\r
  62 \r
  63   @if $full-bleed {\r
  64     margin-left: -$global-padding;\r
  65     margin-right: -$global-padding;\r
  66   }\r
  67 }\r
  68 \r
  69 /*\r
  70   Styles block list headers on the selector you include this mixin in (normally a <header>).\r
  71 \r
  72   $color - color of the header.\r
  73   $font-size - font size of the header.\r
  74   $offset - left margin to add to the header, to line it up with the list items.\r
  75 */\r
  76 @mixin block-list-header(\r
  77   $color: $blocklist-header-color,\r
  78   $font-size: $blocklist-header-fontsize,\r
  79   $uppercase: $blocklist-header-uppercase,\r
  80   $offset: get-side($blocklist-item-padding, left)\r
  81 ) {\r
  82   margin-top: 1em;\r
  83   color: $color;\r
  84   font-weight: bold;\r
  85   margin-bottom: 0.5em;\r
  86   margin-left: $offset;\r
  87   font-size: $font-size;\r
  88   cursor: default;\r
  89   @if $uppercase { text-transform: uppercase; }\r
  90 }\r
  91 \r
  92 /*\r
  93   Styles block list items on the selector you include this mixin in (normally an <li>).\r
  94 \r
  95   $color - color of items.\r
  96   $color-hover - color of items on hover.\r
  97   $background - background of items.\r
  98   $background-hover - background of items on hover.\r
  99   $border - border between items.\r
 100   $padding - padding on items.\r
 101 */\r
 102 @mixin block-list-item(\r
 103   $color: $blocklist-item-color,\r
 104   $color-hover: $blocklist-item-color,\r
 105   $color-disabled: $blocklist-item-color-disabled,\r
 106   $background: transparent,\r
 107   $background-hover: $blocklist-item-background-hover,\r
 108   $border: $blocklist-item-border,\r
 109   $padding: $blocklist-item-padding\r
 110 ) {\r
 111   position: relative;\r
 112 \r
 113   @if hasvalue($border) {\r
 114     border-bottom: $border;\r
 115     &:first-child {\r
 116       border-top: $border;\r
 117     }\r
 118   }\r
 119 \r
 120   // Inner elements share the same basic styles\r
 121   > a, > span, > label {\r
 122     display: block;\r
 123     padding: $padding;\r
 124     padding-left: get-side($padding, left);\r
 125     color: $color;\r
 126     line-height: 1;\r
 127   }\r
 128   > span {\r
 129     cursor: default;\r
 130   }\r
 131   > a, > label {\r
 132     cursor: pointer;\r
 133 \r
 134     &:hover {\r
 135       color: $color-hover;\r
 136     }\r
 137   }\r
 138   > a, > label, select {\r
 139     &:hover {\r
 140       background: $background-hover;\r
 141     }\r
 142   }\r
 143 \r
 144   // Coloring classes\r
 145   &.caution > a {\r
 146     &, &:hover { color: $alert-color; }\r
 147   }\r
 148   &.disabled > a {\r
 149     cursor: default;\r
 150     &, &:hover { color: $color-disabled; }\r
 151     &:hover { background: transparent; }\r
 152   }\r
 153 }\r
 154 \r
 155 /*\r
 156   Adds label styles to the class you include this mixin in.\r
 157 \r
 158   $color - color of the label.\r
 159   $left-class - extra class to flip the orientation of the label.\r
 160   $left-padding - left padding to use for left-hand labels.\r
 161 */\r
 162 @mixin block-list-label(\r
 163   $color: $blocklist-item-label-color,\r
 164   $left-class: 'left',\r
 165   $left-padding: get-side($blocklist-item-padding, top)\r
 166 ) {\r
 167   display: inline-block;\r
 168   float: right;\r
 169   padding: 0;\r
 170   color: $color;\r
 171   pointer-events: none;\r
 172 \r
 173   &.#{$left-class} {\r
 174     margin-left: $left-padding;\r
 175     float: none;\r
 176   }\r
 177 }\r
 178 \r
 179 /*\r
 180   Adds support for chevrons, which appear on the right-hand side of the item.\r
 181 \r
 182   $color - color of the chevron.\r
 183   $padding - include the global padding of block list items here.\r
 184 */\r
 185 @mixin block-list-chevron(\r
 186   $color: $blocklist-header-color,\r
 187   $padding: $blocklist-item-padding,\r
 188   $label-class: 'block-list-label'\r
 189 ) {\r
 190   // Chevrons are a pseudo-element\r
 191   &::after {\r
 192     content: '\203A';\r
 193     display: block;\r
 194     position: absolute;\r
 195     right: get-side($padding, right);\r
 196     top: 50%;\r
 197     transform: translateY(-50%);\r
 198     font-weight: bold;\r
 199     color: $color;\r
 200     font-size: 2em;\r
 201   }\r
 202 \r
 203   // Labels next to links move over to make room for the chevron\r
 204   // TODO: this selector needs to be customiable, but adding a setting just for it might be weird\r
 205   .#{$label-class} {\r
 206     padding-right: get-side($padding, right) * 1.5;\r
 207   }\r
 208 }\r
 209 \r
 210 /*\r
 211   Adds icon styles. Call this mixin on a block list container.\r
 212 \r
 213   $size - size of the icon as a percentage (decimal) of the list item's height.\r
 214   $item-selector - overrides the 'li' selector used for list items.\r
 215 */\r
 216 @mixin block-list-icons(\r
 217   $size: $blocklist-item-icon-size,\r
 218   $item-selector: 'li'\r
 219 ) {\r
 220   // PH - need a better solution\r
 221   $item-height:\r
 222     $blocklist-fontsize\r
 223     + get-side($blocklist-item-padding, top)\r
 224     + get-side($blocklist-item-padding, top);\r
 225 \r
 226   $icon-height: $item-height * $blocklist-item-icon-size;\r
 227   $icon-offset: ($item-height - $icon-height) / 2;\r
 228 \r
 229   #{$item-selector} {\r
 230     > a, > span, > label {\r
 231       padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;\r
 232     }\r
 233     img, .iconic {\r
 234       position: absolute;\r
 235       top: $icon-offset;\r
 236       left: $icon-offset;\r
 237       width: $icon-height;\r
 238       height: $icon-height;\r
 239       border-radius: 8px;\r
 240       pointer-events: none;\r
 241     }\r
 242   }\r
 243 }\r
 244 \r
 245 /*\r
 246   Adds support for text fields, select menus, and checkbox/radio groups in block lists.\r
 247 \r
 248   $color - color of select menu arrow.\r
 249   $background-hover - color of select menu when hovered over.\r
 250   $padding - include the global padding of block list items here.\r
 251   $dropdown-class - class to use for list items that contain a dropdown.\r
 252   $switch-class - class to use for switches inside list items.\r
 253 */\r
 254 @mixin block-list-inputs(\r
 255   $color: $blocklist-item-color,\r
 256   $background: $blocklist-background,\r
 257   $background-hover: $blocklist-item-background-hover,\r
 258   $padding: $blocklist-item-padding,\r
 259   $icons: $blocklist-check-icons,\r
 260   $dropdown-class: 'with-dropdown',\r
 261   $switch-class: 'switch'\r
 262 ) {\r
 263   // Text fields\r
 264   #{$text-input-selectors} {\r
 265     margin: 0;\r
 266     border: 0;\r
 267     line-height: 1;\r
 268     height: auto;\r
 269     padding: $padding;\r
 270     color: inherit;\r
 271 \r
 272     &:hover, &:focus {\r
 273       border: 0;\r
 274     }\r
 275   }\r
 276 \r
 277   // Multiple select\r
 278   li > input[type="checkbox"], li > input[type="radio"] {\r
 279     position: absolute;\r
 280     left: -9999px;\r
 281 \r
 282     & + label {\r
 283       display: block;\r
 284       font-size: $blocklist-fontsize;\r
 285       margin: 0;\r
 286     }\r
 287 \r
 288     @if $icons == true {\r
 289       &:checked + label {\r
 290         &::before {\r
 291           @include image-checkmark($color);\r
 292           content: '';\r
 293           background-size: 100% 100%;\r
 294           width: 1.5em;\r
 295           height: 1.5em;\r
 296           color: $primary-color;\r
 297           float: right;\r
 298           pointer-events: none;\r
 299           margin-top: -0.25em;\r
 300         }\r
 301       }\r
 302     }\r
 303   }\r
 304 \r
 305   // Dropdowns\r
 306   .#{$dropdown-class} {\r
 307     color: inherit;\r
 308 \r
 309     select {\r
 310       // Reset pesky <select> styles\r
 311       -webkit-appearance: none;\r
 312          -moz-appearance: none;\r
 313       outline: 0;\r
 314       background: 0;\r
 315       border: 0;\r
 316       height: auto;\r
 317       padding: $padding;\r
 318       margin: 0;\r
 319       font-size: 1em; // Same size as its parent\r
 320       line-height: 1;\r
 321       color: inherit;\r
 322       background-color: transparent;\r
 323     }\r
 324   }\r
 325 \r
 326   // Switches\r
 327   .#{$switch-class} {\r
 328     position: absolute;\r
 329     top: 50%;\r
 330     right: get-side($padding, right);\r
 331     transform: translateY(-50%);\r
 332   }\r
 333 }\r
 334 \r
 335 @include exports(block-list) {\r
 336   .block-list {\r
 337     @include block-list-container;\r
 338     @include block-list-inputs;\r
 339 \r
 340     &.with-icons { @include block-list-icons; }\r
 341     header       { @include block-list-header; }\r
 342 \r
 343     li {\r
 344       @include block-list-item;\r
 345 \r
 346       &.with-chevron    { @include block-list-chevron; }\r
 347       .block-list-label { @include block-list-label; }\r
 348     }\r
 349   }\r
 350 }\r