resources/tools/dash/app/pal/static/sass/bootstrap/_list-group.scss

   1 // Base class
   2 //
   3 // Easily usable on <ul>, <ol>, or <div>.
   4
   5 .list-group {
   6   // scss-docs-start list-group-css-vars
   7   --#{$prefix}list-group-color: #{$list-group-color};
   8   --#{$prefix}list-group-bg: #{$list-group-bg};
   9   --#{$prefix}list-group-border-color: #{$list-group-border-color};
  10   --#{$prefix}list-group-border-width: #{$list-group-border-width};
  11   --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  12   --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  13   --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  14   --#{$prefix}list-group-action-color: #{$list-group-action-color};
  15   --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  16   --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  17   --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  18   --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  19   --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  20   --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  21   --#{$prefix}list-group-active-color: #{$list-group-active-color};
  22   --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  23   --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
  24   // scss-docs-end list-group-css-vars
  25
  26   display: flex;
  27   flex-direction: column;
  28
  29   // No need to set list-style: none; since .list-group-item is block level
  30   padding-left: 0; // reset padding because ul and ol
  31   margin-bottom: 0;
  32   @include border-radius(var(--#{$prefix}list-group-border-radius));
  33 }
  34
  35 .list-group-numbered {
  36   list-style-type: none;
  37   counter-reset: section;
  38
  39   > .list-group-item::before {
  40     // Increments only this instance of the section counter
  41     content: counters(section, ".") ". ";
  42     counter-increment: section;
  43   }
  44 }
  45
  46 // Interactive list items
  47 //
  48 // Use anchor or button elements instead of `li`s or `div`s to create interactive
  49 // list items. Includes an extra `.active` modifier class for selected items.
  50
  51 .list-group-item-action {
  52   width: 100%; // For `<button>`s (anchors become 100% by default though)
  53   color: var(--#{$prefix}list-group-action-color);
  54   text-align: inherit; // For `<button>`s (anchors inherit)
  55
  56   // Hover state
  57   &:hover,
  58   &:focus {
  59     z-index: 1; // Place hover/focus items above their siblings for proper border styling
  60     color: var(--#{$prefix}list-group-action-hover-color);
  61     text-decoration: none;
  62     background-color: var(--#{$prefix}list-group-action-hover-bg);
  63   }
  64
  65   &:active {
  66     color: var(--#{$prefix}list-group-action-active-color);
  67     background-color: var(--#{$prefix}list-group-action-active-bg);
  68   }
  69 }
  70
  71 // Individual list items
  72 //
  73 // Use on `li`s or `div`s within the `.list-group` parent.
  74
  75 .list-group-item {
  76   position: relative;
  77   display: block;
  78   padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
  79   color: var(--#{$prefix}list-group-color);
  80   text-decoration: if($link-decoration == none, null, none);
  81   background-color: var(--#{$prefix}list-group-bg);
  82   border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
  83
  84   &:first-child {
  85     @include border-top-radius(inherit);
  86   }
  87
  88   &:last-child {
  89     @include border-bottom-radius(inherit);
  90   }
  91
  92   &.disabled,
  93   &:disabled {
  94     color: var(--#{$prefix}list-group-disabled-color);
  95     pointer-events: none;
  96     background-color: var(--#{$prefix}list-group-disabled-bg);
  97   }
  98
  99   // Include both here for `<a>`s and `<button>`s
 100   &.active {
 101     z-index: 2; // Place active items above their siblings for proper border styling
 102     color: var(--#{$prefix}list-group-active-color);
 103     background-color: var(--#{$prefix}list-group-active-bg);
 104     border-color: var(--#{$prefix}list-group-active-border-color);
 105   }
 106
 107   // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
 108   & + .list-group-item {
 109     border-top-width: 0;
 110
 111     &.active {
 112       margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
 113       border-top-width: var(--#{$prefix}list-group-border-width);
 114     }
 115   }
 116 }
 117
 118 // Horizontal
 119 //
 120 // Change the layout of list group items from vertical (default) to horizontal.
 121
 122 @each $breakpoint in map-keys($grid-breakpoints) {
 123   @include media-breakpoint-up($breakpoint) {
 124     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 125
 126     .list-group-horizontal#{$infix} {
 127       flex-direction: row;
 128
 129       > .list-group-item {
 130         &:first-child:not(:last-child) {
 131           @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
 132           @include border-top-end-radius(0);
 133         }
 134
 135         &:last-child:not(:first-child) {
 136           @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
 137           @include border-bottom-start-radius(0);
 138         }
 139
 140         &.active {
 141           margin-top: 0;
 142         }
 143
 144         + .list-group-item {
 145           border-top-width: var(--#{$prefix}list-group-border-width);
 146           border-left-width: 0;
 147
 148           &.active {
 149             margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
 150             border-left-width: var(--#{$prefix}list-group-border-width);
 151           }
 152         }
 153       }
 154     }
 155   }
 156 }
 157
 158
 159 // Flush list items
 160 //
 161 // Remove borders and border-radius to keep list group items edge-to-edge. Most
 162 // useful within other components (e.g., cards).
 163
 164 .list-group-flush {
 165   @include border-radius(0);
 166
 167   > .list-group-item {
 168     border-width: 0 0 var(--#{$prefix}list-group-border-width);
 169
 170     &:last-child {
 171       border-bottom-width: 0;
 172     }
 173   }
 174 }
 175
 176
 177 // scss-docs-start list-group-modifiers
 178 // List group contextual variants
 179 //
 180 // Add modifier classes to change text and background color on individual items.
 181 // Organizationally, this must come after the `:hover` states.
 182
 183 @each $state, $value in $theme-colors {
 184   $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
 185   $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
 186   @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
 187     $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
 188   }
 189
 190   @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
 191 }
 192 // scss-docs-end list-group-modifiers