.
4 |
5 | .list-group {
6 | // No need to set list-style: none; since .list-group-item is block level
7 | padding-left: 0; // reset padding because ul and ol
8 | margin-bottom: 0;
9 | }
10 |
11 |
12 | // Individual list items
13 | //
14 | // Use on `li`s or `div`s within the `.list-group` parent.
15 |
16 | .list-group-item {
17 | position: relative;
18 | display: block;
19 | padding: .75rem 1.25rem;
20 | // Place the border on the list items and negative margin up for better styling
21 | margin-bottom: -$list-group-border-width;
22 | background-color: $list-group-bg;
23 | border: $list-group-border-width solid $list-group-border-color;
24 |
25 | // Round the first and last items
26 | &:first-child {
27 | @include border-top-radius($list-group-border-radius);
28 | }
29 | &:last-child {
30 | margin-bottom: 0;
31 | @include border-bottom-radius($list-group-border-radius);
32 | }
33 | }
34 |
35 | .list-group-flush {
36 | .list-group-item {
37 | border-width: $list-group-border-width 0;
38 | border-radius: 0;
39 | }
40 |
41 | &:first-child {
42 | .list-group-item:first-child {
43 | border-top: 0;
44 | }
45 | }
46 |
47 | &:last-child {
48 | .list-group-item:last-child {
49 | border-bottom: 0;
50 | }
51 | }
52 | }
53 |
54 |
55 | // Interactive list items
56 | //
57 | // Use anchor or button elements instead of `li`s or `div`s to create interactive
58 | // list items. Includes an extra `.active` modifier class for selected items.
59 |
60 | a.list-group-item,
61 | button.list-group-item {
62 | width: 100%;
63 | color: $list-group-link-color;
64 | text-align: inherit;
65 |
66 | .list-group-item-heading {
67 | color: $list-group-link-heading-color;
68 | }
69 |
70 | // Hover state
71 | @include hover-focus {
72 | color: $list-group-link-hover-color;
73 | text-decoration: none;
74 | background-color: $list-group-hover-bg;
75 | }
76 | }
77 |
78 | .list-group-item {
79 | // Disabled state
80 | &.disabled {
81 | @include plain-hover-focus {
82 | color: $list-group-disabled-color;
83 | cursor: $cursor-disabled;
84 | background-color: $list-group-disabled-bg;
85 |
86 | // Force color to inherit for custom content
87 | .list-group-item-heading {
88 | color: inherit;
89 | }
90 | .list-group-item-text {
91 | color: $list-group-disabled-text-color;
92 | }
93 | }
94 | }
95 |
96 | // Active class on item itself, not parent
97 | &.active {
98 | @include plain-hover-focus {
99 | z-index: 2; // Place active items above their siblings for proper border styling
100 | color: $list-group-active-color;
101 | background-color: $list-group-active-bg;
102 | border-color: $list-group-active-border;
103 |
104 | // Force color to inherit for custom content
105 | .list-group-item-heading,
106 | .list-group-item-heading > small,
107 | .list-group-item-heading > .small {
108 | color: inherit;
109 | }
110 | .list-group-item-text {
111 | color: $list-group-active-text-color;
112 | }
113 | }
114 | }
115 | }
116 |
117 |
118 | // Contextual variants
119 | //
120 | // Add modifier classes to change text and background color on individual items.
121 | // Organizationally, this must come after the `:hover` states.
122 |
123 | @include list-group-item-variant(success, $state-success-bg, $state-success-text);
124 | @include list-group-item-variant(info, $state-info-bg, $state-info-text);
125 | @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
126 | @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
127 |
128 |
129 | // Custom content options
130 | //
131 | // Extra classes for creating well-formatted content within `.list-group-item`s.
132 |
133 | .list-group-item-heading {
134 | margin-top: 0;
135 | margin-bottom: 5px;
136 | }
137 | .list-group-item-text {
138 | margin-bottom: 0;
139 | line-height: 1.3;
140 | }
141 |
--------------------------------------------------------------------------------
/bootstrap/scss/_media.scss:
--------------------------------------------------------------------------------
1 | @if $enable-flex {
2 | .media {
3 | display: flex;
4 | margin-bottom: $spacer;
5 | }
6 | .media-body {
7 | flex: 1;
8 | }
9 | .media-middle {
10 | align-self: center;
11 | }
12 | .media-bottom {
13 | align-self: flex-end;
14 | }
15 | } @else {
16 | .media {
17 | margin-top: 15px;
18 |
19 | &:first-child {
20 | margin-top: 0;
21 | }
22 | }
23 | .media,
24 | .media-body {
25 | overflow: hidden;
26 | zoom: 1;
27 | }
28 | .media-body {
29 | width: 10000px;
30 | }
31 | .media-left,
32 | .media-right,
33 | .media-body {
34 | display: table-cell;
35 | vertical-align: top;
36 | }
37 | .media-middle {
38 | vertical-align: middle;
39 | }
40 | .media-bottom {
41 | vertical-align: bottom;
42 | }
43 | }
44 |
45 |
46 | //
47 | // Images/elements as the media anchor
48 | //
49 |
50 | .media-object {
51 | display: block;
52 |
53 | // Fix collapse in webkit from max-width: 100% and display: table-cell.
54 | &.img-thumbnail {
55 | max-width: none;
56 | }
57 | }
58 |
59 |
60 | //
61 | // Alignment
62 | //
63 |
64 | .media-right {
65 | padding-left: 10px;
66 | }
67 |
68 | .media-left {
69 | padding-right: 10px;
70 | }
71 |
72 |
73 | //
74 | // Headings
75 | //
76 |
77 | .media-heading {
78 | margin-top: 0;
79 | margin-bottom: 5px;
80 | }
81 |
82 |
83 | //
84 | // Media list variation
85 | //
86 |
87 | .media-list {
88 | padding-left: 0;
89 | list-style: none;
90 | }
91 |
--------------------------------------------------------------------------------
/bootstrap/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Toggles
2 | //
3 | // Used in conjunction with global variables to enable certain theme features.
4 |
5 | @mixin box-shadow($shadow...) {
6 | @if $enable-shadows {
7 | box-shadow: $shadow;
8 | }
9 | }
10 |
11 | @mixin transition($transition...) {
12 | @if $enable-transitions {
13 | transition: $transition;
14 | }
15 | }
16 |
17 | // Utilities
18 | @import "mixins/breakpoints";
19 | @import "mixins/hover";
20 | @import "mixins/image";
21 | @import "mixins/label";
22 | @import "mixins/reset-filter";
23 | @import "mixins/resize";
24 | @import "mixins/screen-reader";
25 | @import "mixins/size";
26 | @import "mixins/tab-focus";
27 | @import "mixins/reset-text";
28 | @import "mixins/text-emphasis";
29 | @import "mixins/text-hide";
30 | @import "mixins/text-truncate";
31 |
32 | // // Components
33 | @import "mixins/alert";
34 | @import "mixins/buttons";
35 | @import "mixins/cards";
36 | @import "mixins/pagination";
37 | @import "mixins/lists";
38 | @import "mixins/list-group";
39 | @import "mixins/nav-divider";
40 | @import "mixins/forms";
41 | @import "mixins/progress";
42 | @import "mixins/table-row";
43 |
44 | // // Skins
45 | @import "mixins/background-variant";
46 | @import "mixins/border-radius";
47 | @import "mixins/gradients";
48 |
49 | // // Layout
50 | @import "mixins/clearfix";
51 | @import "mixins/center-block";
52 | // @import "mixins/navbar-align";
53 | @import "mixins/grid-framework";
54 | @import "mixins/grid";
55 | @import "mixins/pulls";
56 |
--------------------------------------------------------------------------------
/bootstrap/scss/_modal.scss:
--------------------------------------------------------------------------------
1 | // .modal-open - body class for killing the scroll
2 | // .modal - container to scroll within
3 | // .modal-dialog - positioning shell for the actual modal
4 | // .modal-content - actual modal w/ bg and corners and shit
5 |
6 |
7 | // Kill the scroll on the body
8 | .modal-open {
9 | overflow: hidden;
10 | }
11 |
12 | // Container that the modal scrolls within
13 | .modal {
14 | position: fixed;
15 | top: 0;
16 | right: 0;
17 | bottom: 0;
18 | left: 0;
19 | z-index: $zindex-modal;
20 | display: none;
21 | overflow: hidden;
22 | // Prevent Chrome on Windows from adding a focus outline. For details, see
23 | // https://github.com/twbs/bootstrap/pull/10951.
24 | outline: 0;
25 | -webkit-overflow-scrolling: touch;
26 |
27 | // When fading in the modal, animate it to slide down
28 | &.fade .modal-dialog {
29 | transition: transform .3s ease-out;
30 | transform: translate(0, -25%);
31 | }
32 | &.in .modal-dialog { transform: translate(0, 0); }
33 | }
34 | .modal-open .modal {
35 | overflow-x: hidden;
36 | overflow-y: auto;
37 | }
38 |
39 | // Shell div to position the modal with bottom padding
40 | .modal-dialog {
41 | position: relative;
42 | width: auto;
43 | margin: 10px;
44 | }
45 |
46 | // Actual modal
47 | .modal-content {
48 | position: relative;
49 | background-color: $modal-content-bg;
50 | background-clip: padding-box;
51 | border: 1px solid $modal-content-border-color;
52 | border-radius: $border-radius-lg;
53 | @include box-shadow(0 3px 9px rgba(0,0,0,.5));
54 | // Remove focus outline from opened modal
55 | outline: 0;
56 | }
57 |
58 | // Modal background
59 | .modal-backdrop {
60 | position: fixed;
61 | top: 0;
62 | right: 0;
63 | bottom: 0;
64 | left: 0;
65 | z-index: $zindex-modal-bg;
66 | background-color: $modal-backdrop-bg;
67 |
68 | // Fade for backdrop
69 | &.fade { opacity: 0; }
70 | &.in { opacity: $modal-backdrop-opacity; }
71 | }
72 |
73 | // Modal header
74 | // Top section of the modal w/ title and dismiss
75 | .modal-header {
76 | padding: $modal-title-padding;
77 | border-bottom: 1px solid $modal-header-border-color;
78 | @include clearfix;
79 | }
80 | // Close icon
81 | .modal-header .close {
82 | margin-top: -2px;
83 | }
84 |
85 | // Title text within header
86 | .modal-title {
87 | margin: 0;
88 | line-height: $modal-title-line-height;
89 | }
90 |
91 | // Modal body
92 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
93 | .modal-body {
94 | position: relative;
95 | padding: $modal-inner-padding;
96 | }
97 |
98 | // Footer (for actions)
99 | .modal-footer {
100 | padding: $modal-inner-padding;
101 | text-align: right; // right align buttons
102 | border-top: 1px solid $modal-footer-border-color;
103 | @include clearfix(); // clear it in case folks use .pull-* classes on buttons
104 |
105 | // Properly space out buttons
106 | .btn + .btn {
107 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
108 | margin-left: 5px;
109 | }
110 | // but override that for button groups
111 | .btn-group .btn + .btn {
112 | margin-left: -1px;
113 | }
114 | // and override it for block buttons as well
115 | .btn-block + .btn-block {
116 | margin-left: 0;
117 | }
118 | }
119 |
120 | // Measure scrollbar width for padding body during modal show/hide
121 | .modal-scrollbar-measure {
122 | position: absolute;
123 | top: -9999px;
124 | width: 50px;
125 | height: 50px;
126 | overflow: scroll;
127 | }
128 |
129 | // Scale up the modal
130 | @include media-breakpoint-up(sm) {
131 | // Automatically set modal's width for larger viewports
132 | .modal-dialog {
133 | width: $modal-md;
134 | margin: 30px auto;
135 | }
136 | .modal-content {
137 | @include box-shadow(0 5px 15px rgba(0,0,0,.5));
138 | }
139 |
140 | // Modal sizes
141 | .modal-sm { width: $modal-sm; }
142 | }
143 |
144 | @include media-breakpoint-up(md) {
145 | .modal-lg { width: $modal-lg; }
146 | }
147 |
--------------------------------------------------------------------------------
/bootstrap/scss/_nav.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Kickstart any navigation component with a set of style resets. Works with
4 | // `