diff options
| author | Matt Rude <[email protected]> | 2018-02-03 21:08:46 -0600 |
|---|---|---|
| committer | Matt Rude <[email protected]> | 2018-02-03 21:08:46 -0600 |
| commit | c5c60729062cc3d89be7447b5d330367417aa6f7 (patch) | |
| tree | 74330b48908247623f48b01420d833c7feb3fab7 /assets/node_modules/bootstrap/scss/_list-group.scss | |
| parent | 0c0cde3923440b2d293549c7e430a38082cc0457 (diff) | |
| download | xmpp-site-lite-c5c60729062cc3d89be7447b5d330367417aa6f7.tar.gz xmpp-site-lite-c5c60729062cc3d89be7447b5d330367417aa6f7.tar.bz2 xmpp-site-lite-c5c60729062cc3d89be7447b5d330367417aa6f7.zip | |
Update
Diffstat (limited to 'assets/node_modules/bootstrap/scss/_list-group.scss')
| -rw-r--r-- | assets/node_modules/bootstrap/scss/_list-group.scss | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/assets/node_modules/bootstrap/scss/_list-group.scss b/assets/node_modules/bootstrap/scss/_list-group.scss new file mode 100644 index 0000000..9f145c1 --- /dev/null +++ b/assets/node_modules/bootstrap/scss/_list-group.scss @@ -0,0 +1,115 @@ +// 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; +} + + +// 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 + @include hover-focus { + 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; + // Place the border on the list items and negative margin up for better styling + margin-bottom: -$list-group-border-width; + background-color: $list-group-bg; + border: $list-group-border-width solid $list-group-border-color; + + &:first-child { + @include border-top-radius($list-group-border-radius); + } + + &:last-child { + margin-bottom: 0; + @include border-bottom-radius($list-group-border-radius); + } + + @include hover-focus { + z-index: 1; // Place hover/active items above their siblings for proper border styling + text-decoration: none; + } + + &.disabled, + &:disabled { + color: $list-group-disabled-color; + 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; + } +} + + +// 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 { + .list-group-item { + border-right: 0; + border-left: 0; + @include border-radius(0); + } + + &:first-child { + .list-group-item:first-child { + border-top: 0; + } + } + + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + } + } +} + + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +@each $color, $value in $theme-colors { + @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); +} |