diff options
Diffstat (limited to 'alphabetlearning/static/bootstrap/scss/_list-group.scss')
| -rw-r--r-- | alphabetlearning/static/bootstrap/scss/_list-group.scss | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/alphabetlearning/static/bootstrap/scss/_list-group.scss b/alphabetlearning/static/bootstrap/scss/_list-group.scss new file mode 100644 index 0000000..dcd61d2 --- /dev/null +++ b/alphabetlearning/static/bootstrap/scss/_list-group.scss @@ -0,0 +1,174 @@ +// Base class +// +// Easily usable on <ul>, <ol>, or <div>. + +.list-group { + display: flex; + flex-direction: column; + + // No need to set list-style: none; since .list-group-item is block level + padding-left: 0; // reset padding because ul and ol + margin-bottom: 0; + @include border-radius($list-group-border-radius); +} + +.list-group-numbered { + list-style-type: none; + counter-reset: section; + + > li::before { + // Increments only this instance of the section counter + content: counters(section, ".") ". "; + counter-increment: section; + } +} + + +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. + +.list-group-item-action { + width: 100%; // For `<button>`s (anchors become 100% by default though) + color: $list-group-action-color; + text-align: inherit; // For `<button>`s (anchors inherit) + + // Hover state + &:hover, + &:focus { + z-index: 1; // Place hover/focus items above their siblings for proper border styling + color: $list-group-action-hover-color; + text-decoration: none; + background-color: $list-group-hover-bg; + } + + &:active { + color: $list-group-action-active-color; + background-color: $list-group-action-active-bg; + } +} + + +// Individual list items +// +// Use on `li`s or `div`s within the `.list-group` parent. + +.list-group-item { + position: relative; + display: block; + padding: $list-group-item-padding-y $list-group-item-padding-x; + color: $list-group-color; + text-decoration: if($link-decoration == none, null, none); + background-color: $list-group-bg; + border: $list-group-border-width solid $list-group-border-color; + + &:first-child { + @include border-top-radius(inherit); + } + + &:last-child { + @include border-bottom-radius(inherit); + } + + &.disabled, + &:disabled { + color: $list-group-disabled-color; + pointer-events: none; + background-color: $list-group-disabled-bg; + } + + // Include both here for `<a>`s and `<button>`s + &.active { + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border-color; + } + + & + & { + border-top-width: 0; + + &.active { + margin-top: -$list-group-border-width; + border-top-width: $list-group-border-width; + } + } +} + + +// Horizontal +// +// Change the layout of list group items from vertical (default) to horizontal. + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .list-group-horizontal#{$infix} { + flex-direction: row; + + > .list-group-item { + &:first-child { + @include border-bottom-start-radius($list-group-border-radius); + @include border-top-end-radius(0); + } + + &:last-child { + @include border-top-end-radius($list-group-border-radius); + @include border-bottom-start-radius(0); + } + + &.active { + margin-top: 0; + } + + + .list-group-item { + border-top-width: $list-group-border-width; + border-left-width: 0; + + &.active { + margin-left: -$list-group-border-width; + border-left-width: $list-group-border-width; + } + } + } + } + } +} + + +// Flush list items +// +// Remove borders and border-radius to keep list group items edge-to-edge. Most +// useful within other components (e.g., cards). + +.list-group-flush { + @include border-radius(0); + + > .list-group-item { + border-width: 0 0 $list-group-border-width; + + &:last-child { + border-bottom-width: 0; + } + } +} + + +// scss-docs-start list-group-modifiers +// List group contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +@each $state, $value in $theme-colors { + $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale); + $list-group-variant-color: shift-color($value, $list-group-item-color-scale); + @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) { + $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale)); + } + + @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color); +} +// scss-docs-end list-group-modifiers |