kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity
twbs--bootstrap/scss/_list-group.scss

116 lines
2.9 KiB
SCSS
Raw Normal View History

add list group component
2013-03-30 23:07:50 +00:00
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs
2013-12-07 22:09:03 +00:00
add list group component
2013-03-30 23:07:50 +00:00
.list-group {
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
2016-12-22 04:26:17 +00:00
display: flex;
flex-direction: column;
Resolves #18978 - flexbox list-group implementation. Requires the pull-right and pull-left flex change from PR #18976
2016-01-20 22:39:43 +00:00
add list group component
2013-03-30 23:07:50 +00:00
// No need to set list-style: none; since .list-group-item is block level
Improve alignment of navbar brand and fix up left padding on list groups
2013-06-22 00:21:44 +00:00
padding-left: 0; // reset padding because ul and ol
rewrite much of cards and the docs
2015-05-28 21:07:34 +00:00
margin-bottom: 0;
add list group component
2013-03-30 23:07:50 +00:00
}
Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs
2013-12-07 22:09:03 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
// 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-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
&:active {
color: $list-group-link-active-color;
background-color: $list-group-link-active-bg;
}
}
add list group component
2013-03-30 23:07:50 +00:00
// Individual list items
Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs
2013-12-07 22:09:03 +00:00
//
// Use on `li`s or `div`s within the `.list-group` parent.
add list group component
2013-03-30 23:07:50 +00:00
.list-group-item {
position: relative;
fixes #21584 - revert back to display block for list items to prevent unwanted behaviors - fixes a handful of other linked issues (see main thread) - updates docs to include more utilities for the one example
2017-03-18 23:30:12 +00:00
display: block;
Add $list-group-item-padding-{x,y} variables [skip sauce] [skip validator]
2016-02-17 06:57:10 +00:00
padding: $list-group-item-padding-y $list-group-item-padding-x;
add list group component
2013-03-30 23:07:50 +00:00
// Place the border on the list items and negative margin up for better styling
Add $list-group-border-width; refs #18150 [skip sauce]
2015-11-15 20:46:35 +00:00
margin-bottom: -$list-group-border-width;
convert to scss
2014-12-02 22:02:35 +00:00
background-color: $list-group-bg;
Add $list-group-border-width; refs #18150 [skip sauce]
2015-11-15 20:46:35 +00:00
border: $list-group-border-width solid $list-group-border-color;
add list group component
2013-03-30 23:07:50 +00:00
Make more components mixin-friendly
2013-07-02 00:32:07 +00:00
&:first-child {
convert to scss
2014-12-02 22:02:35 +00:00
@include border-top-radius($list-group-border-radius);
Make more components mixin-friendly
2013-07-02 00:32:07 +00:00
}
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
Make more components mixin-friendly
2013-07-02 00:32:07 +00:00
&:last-child {
margin-bottom: 0;
convert to scss
2014-12-02 22:02:35 +00:00
@include border-bottom-radius($list-group-border-radius);
Make more components mixin-friendly
2013-07-02 00:32:07 +00:00
}
add list group component
2013-03-30 23:07:50 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
@include hover-focus {
text-decoration: none;
}
&.disabled,
&:disabled {
color: $list-group-disabled-color;
background-color: $list-group-disabled-bg;
Added .list-group-item.disabled Added support for disabled List group item.
2014-01-31 20:17:49 +00:00
}
add list group component
2013-03-30 23:07:50 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
// Include both here for `<a>`s and `<button>`s
put all :hover styles within @media (hover: hover)
2015-01-01 09:05:01 +00:00
&.active {
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
Rename variable $input-border-focus to $input-border-color-focus (#22413) * Rename variable $input-border-focus to $input-border-color-focus * Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively * Rename variables $state-*-border to $state-*-border-color, respectively * Rename variables $alert-*-border to $alert-*-border-color * Rename $list-group-active-border to $list-group-active-border-color * Rename $table-inverse-border to $table-inverse-border-color * Rename $btn-*-border to $btn-*-border-color * Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color
2017-04-16 22:45:10 +00:00
border-color: $list-group-active-border-color;
Make more components mixin-friendly
2013-07-02 00:32:07 +00:00
}
add list group component
2013-03-30 23:07:50 +00:00
}
fixes #8835: make it so active list group items aren't dependent on an <a> tag
2013-08-12 08:38:06 +00:00
Revamp list group states and docs to match - Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
2016-12-28 21:45:07 +00:00
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
// useful within other components (e.g., cards).
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
.list-group-flush {
.list-group-item {
Reset the left and right border on list items for flush list groups Avoid the resetting of the already set values in #20397. Fixes #20395.
2016-10-09 23:57:32 +00:00
border-right: 0;
border-left: 0;
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
border-radius: 0;
}
Remove borders on the top and/or bottom when .list-group-flush is the first and/or last child Fully fixes #20395
2016-10-15 19:57:36 +00:00
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
}
}
Revamp list group items built with anchors and buttons - Make it an explicit class instead of qualifying with elements (.list-group-item-action) - Rearrange the entire file for more straightforward flow - Fix text-decoration bug as a result of the reorder - Switch from h4's to h5's in docs - Update docs to merge anchors and buttons sections; clearify usage guidelines there, too - Nullify #17479 in the process
2016-02-07 03:50:00 +00:00
}
Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs
2013-12-07 22:09:03 +00:00
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
convert to scss
2014-12-02 22:02:35 +00:00
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);