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

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