`s.
5 |
6 | .nav {
7 | display: flex;
8 | flex-wrap: wrap;
9 | padding-left: 0;
10 | margin-bottom: 0;
11 | list-style: none;
12 | }
13 |
14 | .nav-link {
15 | display: block;
16 | padding: $nav-link-padding-y $nav-link-padding-x;
17 |
18 | @include hover-focus {
19 | text-decoration: none;
20 | }
21 |
22 | // Disabled state lightens text
23 | &.disabled {
24 | color: $nav-link-disabled-color;
25 | }
26 | }
27 |
28 | //
29 | // Tabs
30 | //
31 |
32 | .nav-tabs {
33 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
34 |
35 | .nav-item {
36 | margin-bottom: -$nav-tabs-border-width;
37 | }
38 |
39 | .nav-link {
40 | border: $nav-tabs-border-width solid transparent;
41 | @include border-top-radius($nav-tabs-border-radius);
42 |
43 | @include hover-focus {
44 | border-color: $nav-tabs-link-hover-border-color;
45 | }
46 |
47 | &.disabled {
48 | color: $nav-link-disabled-color;
49 | background-color: transparent;
50 | border-color: transparent;
51 | }
52 | }
53 |
54 | .nav-link.active,
55 | .nav-item.show .nav-link {
56 | color: $nav-tabs-link-active-color;
57 | background-color: $nav-tabs-link-active-bg;
58 | border-color: $nav-tabs-link-active-border-color;
59 | }
60 |
61 | .dropdown-menu {
62 | // Make dropdown border overlap tab border
63 | margin-top: -$nav-tabs-border-width;
64 | // Remove the top rounded corners here since there is a hard edge above the menu
65 | @include border-top-radius(0);
66 | }
67 | }
68 |
69 |
70 | //
71 | // Pills
72 | //
73 |
74 | .nav-pills {
75 | .nav-link {
76 | @include border-radius($nav-pills-border-radius);
77 | }
78 |
79 | .nav-link.active,
80 | .show > .nav-link {
81 | color: $nav-pills-link-active-color;
82 | background-color: $nav-pills-link-active-bg;
83 | }
84 | }
85 |
86 |
87 | //
88 | // Justified variants
89 | //
90 |
91 | .nav-fill {
92 | .nav-item {
93 | flex: 1 1 auto;
94 | text-align: center;
95 | }
96 | }
97 |
98 | .nav-justified {
99 | .nav-item {
100 | flex-basis: 0;
101 | flex-grow: 1;
102 | text-align: center;
103 | }
104 | }
105 |
106 |
107 | // Tabbable tabs
108 | //
109 | // Hide tabbable panes to start, show them when `.active`
110 |
111 | .tab-content {
112 | > .tab-pane {
113 | display: none;
114 | }
115 | > .active {
116 | display: block;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/scss/_navbar.scss:
--------------------------------------------------------------------------------
1 | // Contents
2 | //
3 | // Navbar
4 | // Navbar brand
5 | // Navbar nav
6 | // Navbar text
7 | // Navbar divider
8 | // Responsive navbar
9 | // Navbar position
10 | // Navbar themes
11 |
12 |
13 | // Navbar
14 | //
15 | // Provide a static navbar from which we expand to create full-width, fixed, and
16 | // other navbar variations.
17 |
18 | .navbar {
19 | position: relative;
20 | display: flex;
21 | flex-wrap: wrap; // allow us to do the line break for collapsing content
22 | align-items: center;
23 | justify-content: space-between; // space out brand from logo
24 | padding: $navbar-padding-y $navbar-padding-x;
25 |
26 | // Because flex properties aren't inherited, we need to redeclare these first
27 | // few properties so that content nested within behave properly.
28 | > .container,
29 | > .container-fluid {
30 | display: flex;
31 | flex-wrap: wrap;
32 | align-items: center;
33 | justify-content: space-between;
34 | }
35 | }
36 |
37 |
38 | // Navbar brand
39 | //
40 | // Used for brand, project, or site names.
41 |
42 | .navbar-brand {
43 | display: inline-block;
44 | padding-top: $navbar-brand-padding-y;
45 | padding-bottom: $navbar-brand-padding-y;
46 | margin-right: $navbar-padding-x;
47 | font-size: $navbar-brand-font-size;
48 | line-height: inherit;
49 | white-space: nowrap;
50 |
51 | @include hover-focus {
52 | text-decoration: none;
53 | }
54 | }
55 |
56 |
57 | // Navbar nav
58 | //
59 | // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
60 |
61 | .navbar-nav {
62 | display: flex;
63 | flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
64 | padding-left: 0;
65 | margin-bottom: 0;
66 | list-style: none;
67 |
68 | .nav-link {
69 | padding-right: 0;
70 | padding-left: 0;
71 | }
72 |
73 | .dropdown-menu {
74 | position: static;
75 | float: none;
76 | }
77 | }
78 |
79 |
80 | // Navbar text
81 | //
82 | //
83 |
84 | .navbar-text {
85 | display: inline-block;
86 | padding-top: $nav-link-padding-y;
87 | padding-bottom: $nav-link-padding-y;
88 | }
89 |
90 |
91 | // Responsive navbar
92 | //
93 | // Custom styles for responsive collapsing and toggling of navbar contents.
94 | // Powered by the collapse Bootstrap JavaScript plugin.
95 |
96 | // When collapsed, prevent the toggleable navbar contents from appearing in
97 | // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
98 | // on the `.navbar` parent.
99 | .navbar-collapse {
100 | flex-basis: 100%;
101 | flex-grow: 1;
102 | // For always expanded or extra full navbars, ensure content aligns itself
103 | // properly vertically. Can be easily overridden with flex utilities.
104 | align-items: center;
105 | }
106 |
107 | // Button for toggling the navbar when in its collapsed state
108 | .navbar-toggler {
109 | padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
110 | font-size: $navbar-toggler-font-size;
111 | line-height: 1;
112 | background-color: transparent; // remove default button style
113 | border: $border-width solid transparent; // remove default button style
114 | @include border-radius($navbar-toggler-border-radius);
115 |
116 | @include hover-focus {
117 | text-decoration: none;
118 | }
119 |
120 | // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
121 | &:not(:disabled):not(.disabled) {
122 | cursor: pointer;
123 | }
124 | }
125 |
126 | // Keep as a separate element so folks can easily override it with another icon
127 | // or image file as needed.
128 | .navbar-toggler-icon {
129 | display: inline-block;
130 | width: 1.5em;
131 | height: 1.5em;
132 | vertical-align: middle;
133 | content: "";
134 | background: no-repeat center center;
135 | background-size: 100% 100%;
136 | }
137 |
138 | // Generate series of `.navbar-expand-*` responsive classes for configuring
139 | // where your navbar collapses.
140 | .navbar-expand {
141 | @each $breakpoint in map-keys($grid-breakpoints) {
142 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
143 | $infix: breakpoint-infix($next, $grid-breakpoints);
144 |
145 | &#{$infix} {
146 | @include media-breakpoint-down($breakpoint) {
147 | > .container,
148 | > .container-fluid {
149 | padding-right: 0;
150 | padding-left: 0;
151 | }
152 | }
153 |
154 | @include media-breakpoint-up($next) {
155 | flex-flow: row nowrap;
156 | justify-content: flex-start;
157 |
158 | .navbar-nav {
159 | flex-direction: row;
160 |
161 | .dropdown-menu {
162 | position: absolute;
163 | }
164 |
165 | .nav-link {
166 | padding-right: $navbar-nav-link-padding-x;
167 | padding-left: $navbar-nav-link-padding-x;
168 | }
169 | }
170 |
171 | // For nesting containers, have to redeclare for alignment purposes
172 | > .container,
173 | > .container-fluid {
174 | flex-wrap: nowrap;
175 | }
176 |
177 | .navbar-collapse {
178 | display: flex !important; // stylelint-disable-line declaration-no-important
179 |
180 | // Changes flex-bases to auto because of an IE10 bug
181 | flex-basis: auto;
182 | }
183 |
184 | .navbar-toggler {
185 | display: none;
186 | }
187 | }
188 | }
189 | }
190 | }
191 |
192 |
193 | // Navbar themes
194 | //
195 | // Styles for switching between navbars with light or dark background.
196 |
197 | // Dark links against a light background
198 | .navbar-light {
199 | .navbar-brand {
200 | color: $navbar-light-active-color;
201 |
202 | @include hover-focus {
203 | color: $navbar-light-active-color;
204 | }
205 | }
206 |
207 | .navbar-nav {
208 | .nav-link {
209 | color: $navbar-light-color;
210 |
211 | @include hover-focus {
212 | color: $navbar-light-hover-color;
213 | }
214 |
215 | &.disabled {
216 | color: $navbar-light-disabled-color;
217 | }
218 | }
219 |
220 | .show > .nav-link,
221 | .active > .nav-link,
222 | .nav-link.show,
223 | .nav-link.active {
224 | color: $navbar-light-active-color;
225 | }
226 | }
227 |
228 | .navbar-toggler {
229 | color: $navbar-light-color;
230 | border-color: $navbar-light-toggler-border-color;
231 | }
232 |
233 | .navbar-toggler-icon {
234 | background-image: $navbar-light-toggler-icon-bg;
235 | }
236 |
237 | .navbar-text {
238 | color: $navbar-light-color;
239 | a {
240 | color: $navbar-light-active-color;
241 |
242 | @include hover-focus {
243 | color: $navbar-light-active-color;
244 | }
245 | }
246 | }
247 | }
248 |
249 | // White links against a dark background
250 | .navbar-dark {
251 | .navbar-brand {
252 | color: $navbar-dark-active-color;
253 |
254 | @include hover-focus {
255 | color: $navbar-dark-active-color;
256 | }
257 | }
258 |
259 | .navbar-nav {
260 | .nav-link {
261 | color: $navbar-dark-color;
262 |
263 | @include hover-focus {
264 | color: $navbar-dark-hover-color;
265 | }
266 |
267 | &.disabled {
268 | color: $navbar-dark-disabled-color;
269 | }
270 | }
271 |
272 | .show > .nav-link,
273 | .active > .nav-link,
274 | .nav-link.show,
275 | .nav-link.active {
276 | color: $navbar-dark-active-color;
277 | }
278 | }
279 |
280 | .navbar-toggler {
281 | color: $navbar-dark-color;
282 | border-color: $navbar-dark-toggler-border-color;
283 | }
284 |
285 | .navbar-toggler-icon {
286 | background-image: $navbar-dark-toggler-icon-bg;
287 | }
288 |
289 | .navbar-text {
290 | color: $navbar-dark-color;
291 | a {
292 | color: $navbar-dark-active-color;
293 |
294 | @include hover-focus {
295 | color: $navbar-dark-active-color;
296 | }
297 | }
298 | }
299 | }
300 |
--------------------------------------------------------------------------------
/scss/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | @include list-unstyled();
4 | @include border-radius();
5 | }
6 |
7 | .page-link {
8 | position: relative;
9 | display: block;
10 | padding: $pagination-padding-y $pagination-padding-x;
11 | margin-left: -$pagination-border-width;
12 | line-height: $pagination-line-height;
13 | color: $pagination-color;
14 | background-color: $pagination-bg;
15 | border: $pagination-border-width solid $pagination-border-color;
16 |
17 | &:hover {
18 | z-index: 2;
19 | color: $pagination-hover-color;
20 | text-decoration: none;
21 | background-color: $pagination-hover-bg;
22 | border-color: $pagination-hover-border-color;
23 | }
24 |
25 | &:focus {
26 | z-index: 2;
27 | outline: $pagination-focus-outline;
28 | box-shadow: $pagination-focus-box-shadow;
29 | }
30 |
31 | // Opinionated: add "hand" cursor to non-disabled .page-link elements
32 | &:not(:disabled):not(.disabled) {
33 | cursor: pointer;
34 | }
35 | }
36 |
37 | .page-item {
38 | &:first-child {
39 | .page-link {
40 | margin-left: 0;
41 | @include border-left-radius($border-radius);
42 | }
43 | }
44 | &:last-child {
45 | .page-link {
46 | @include border-right-radius($border-radius);
47 | }
48 | }
49 |
50 | &.active .page-link {
51 | z-index: 1;
52 | color: $pagination-active-color;
53 | background-color: $pagination-active-bg;
54 | border-color: $pagination-active-border-color;
55 | }
56 |
57 | &.disabled .page-link {
58 | color: $pagination-disabled-color;
59 | pointer-events: none;
60 | // Opinionated: remove the "hand" cursor set previously for .page-link
61 | cursor: auto;
62 | background-color: $pagination-disabled-bg;
63 | border-color: $pagination-disabled-border-color;
64 | }
65 | }
66 |
67 |
68 | //
69 | // Sizing
70 | //
71 |
72 | .pagination-lg {
73 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
74 | }
75 |
76 | .pagination-sm {
77 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
78 | }
79 |
--------------------------------------------------------------------------------
/scss/_popover.scss:
--------------------------------------------------------------------------------
1 | .popover {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | z-index: $zindex-popover;
6 | display: block;
7 | max-width: $popover-max-width;
8 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9 | // So reset our font and text properties to avoid inheriting weird values.
10 | @include reset-text();
11 | font-size: $popover-font-size;
12 | // Allow breaking very long words so they don't overflow the popover's bounds
13 | word-wrap: break-word;
14 | background-color: $popover-bg;
15 | background-clip: padding-box;
16 | border: $popover-border-width solid $popover-border-color;
17 | @include border-radius($popover-border-radius);
18 | @include box-shadow($popover-box-shadow);
19 |
20 | .arrow {
21 | position: absolute;
22 | display: block;
23 | width: $popover-arrow-width;
24 | height: $popover-arrow-height;
25 | margin: 0 $border-radius-lg;
26 |
27 | &::before,
28 | &::after {
29 | position: absolute;
30 | display: block;
31 | content: "";
32 | border-color: transparent;
33 | border-style: solid;
34 | }
35 | }
36 | }
37 |
38 | .bs-popover-top {
39 | margin-bottom: $popover-arrow-height;
40 |
41 | .arrow {
42 | bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
43 | }
44 |
45 | .arrow::before,
46 | .arrow::after {
47 | border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
48 | }
49 |
50 | .arrow::before {
51 | bottom: 0;
52 | border-top-color: $popover-arrow-outer-color;
53 | }
54 |
55 | .arrow::after {
56 | bottom: $popover-border-width;
57 | border-top-color: $popover-arrow-color;
58 | }
59 | }
60 |
61 | .bs-popover-right {
62 | margin-left: $popover-arrow-height;
63 |
64 | .arrow {
65 | left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
66 | width: $popover-arrow-height;
67 | height: $popover-arrow-width;
68 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
69 | }
70 |
71 | .arrow::before,
72 | .arrow::after {
73 | border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
74 | }
75 |
76 | .arrow::before {
77 | left: 0;
78 | border-right-color: $popover-arrow-outer-color;
79 | }
80 |
81 | .arrow::after {
82 | left: $popover-border-width;
83 | border-right-color: $popover-arrow-color;
84 | }
85 | }
86 |
87 | .bs-popover-bottom {
88 | margin-top: $popover-arrow-height;
89 |
90 | .arrow {
91 | top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
92 | }
93 |
94 | .arrow::before,
95 | .arrow::after {
96 | border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
97 | }
98 |
99 | .arrow::before {
100 | top: 0;
101 | border-bottom-color: $popover-arrow-outer-color;
102 | }
103 |
104 | .arrow::after {
105 | top: $popover-border-width;
106 | border-bottom-color: $popover-arrow-color;
107 | }
108 |
109 | // This will remove the popover-header's border just below the arrow
110 | .popover-header::before {
111 | position: absolute;
112 | top: 0;
113 | left: 50%;
114 | display: block;
115 | width: $popover-arrow-width;
116 | margin-left: ($popover-arrow-width / -2);
117 | content: "";
118 | border-bottom: $popover-border-width solid $popover-header-bg;
119 | }
120 | }
121 |
122 | .bs-popover-left {
123 | margin-right: $popover-arrow-height;
124 |
125 | .arrow {
126 | right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
127 | width: $popover-arrow-height;
128 | height: $popover-arrow-width;
129 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
130 | }
131 |
132 | .arrow::before,
133 | .arrow::after {
134 | border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
135 | }
136 |
137 | .arrow::before {
138 | right: 0;
139 | border-left-color: $popover-arrow-outer-color;
140 | }
141 |
142 | .arrow::after {
143 | right: $popover-border-width;
144 | border-left-color: $popover-arrow-color;
145 | }
146 | }
147 |
148 | .bs-popover-auto {
149 | &[x-placement^="top"] {
150 | @extend .bs-popover-top;
151 | }
152 | &[x-placement^="right"] {
153 | @extend .bs-popover-right;
154 | }
155 | &[x-placement^="bottom"] {
156 | @extend .bs-popover-bottom;
157 | }
158 | &[x-placement^="left"] {
159 | @extend .bs-popover-left;
160 | }
161 | }
162 |
163 |
164 | // Offset the popover to account for the popover arrow
165 | .popover-header {
166 | padding: $popover-header-padding-y $popover-header-padding-x;
167 | margin-bottom: 0; // Reset the default from Reboot
168 | font-size: $font-size-base;
169 | color: $popover-header-color;
170 | background-color: $popover-header-bg;
171 | border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
172 | $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
173 | @include border-top-radius($offset-border-width);
174 |
175 | &:empty {
176 | display: none;
177 | }
178 | }
179 |
180 | .popover-body {
181 | padding: $popover-body-padding-y $popover-body-padding-x;
182 | color: $popover-body-color;
183 | }
184 |
--------------------------------------------------------------------------------
/scss/_print.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type
2 |
3 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
4 |
5 | // ==========================================================================
6 | // Print styles.
7 | // Inlined to avoid the additional HTTP request:
8 | // https://www.phpied.com/delay-loading-your-print-css/
9 | // ==========================================================================
10 |
11 | @if $enable-print-styles {
12 | @media print {
13 | *,
14 | *::before,
15 | *::after {
16 | // Bootstrap specific; comment out `color` and `background`
17 | //color: $black !important; // Black prints faster
18 | text-shadow: none !important;
19 | //background: transparent !important;
20 | box-shadow: none !important;
21 | }
22 |
23 | a {
24 | &:not(.btn) {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | // Bootstrap specific; comment the following selector out
30 | //a[href]::after {
31 | // content: " (" attr(href) ")";
32 | //}
33 |
34 | abbr[title]::after {
35 | content: " (" attr(title) ")";
36 | }
37 |
38 | // Bootstrap specific; comment the following selector out
39 | //
40 | // Don't show links that are fragment identifiers,
41 | // or use the `javascript:` pseudo protocol
42 | //
43 |
44 | //a[href^="#"]::after,
45 | //a[href^="javascript:"]::after {
46 | // content: "";
47 | //}
48 |
49 | pre {
50 | white-space: pre-wrap !important;
51 | }
52 | pre,
53 | blockquote {
54 | border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
55 | page-break-inside: avoid;
56 | }
57 |
58 | //
59 | // Printing Tables:
60 | // http://css-discuss.incutio.com/wiki/Printing_Tables
61 | //
62 |
63 | thead {
64 | display: table-header-group;
65 | }
66 |
67 | tr,
68 | img {
69 | page-break-inside: avoid;
70 | }
71 |
72 | p,
73 | h2,
74 | h3 {
75 | orphans: 3;
76 | widows: 3;
77 | }
78 |
79 | h2,
80 | h3 {
81 | page-break-after: avoid;
82 | }
83 |
84 | // Bootstrap specific changes start
85 |
86 | // Specify a size and min-width to make printing closer across browsers.
87 | // We don't set margin here because it breaks `size` in Chrome. We also
88 | // don't use `!important` on `size` as it breaks in Chrome.
89 | @page {
90 | size: $print-page-size;
91 | }
92 | body {
93 | min-width: $print-body-min-width !important;
94 | }
95 | .container {
96 | min-width: $print-body-min-width !important;
97 | }
98 |
99 | // Bootstrap components
100 | .navbar {
101 | display: none;
102 | }
103 | .badge {
104 | border: $border-width solid $black;
105 | }
106 |
107 | .table {
108 | border-collapse: collapse !important;
109 |
110 | td,
111 | th {
112 | background-color: $white !important;
113 | }
114 | }
115 |
116 | .table-bordered {
117 | th,
118 | td {
119 | border: 1px solid $gray-300 !important;
120 | }
121 | }
122 |
123 | .table-dark {
124 | color: inherit;
125 |
126 | th,
127 | td,
128 | thead th,
129 | tbody + tbody {
130 | border-color: $table-border-color;
131 | }
132 | }
133 |
134 | .table .thead-dark th {
135 | color: inherit;
136 | border-color: $table-border-color;
137 | }
138 |
139 | // Bootstrap specific changes end
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/scss/_progress.scss:
--------------------------------------------------------------------------------
1 | @keyframes progress-bar-stripes {
2 | from { background-position: $progress-height 0; }
3 | to { background-position: 0 0; }
4 | }
5 |
6 | .progress {
7 | display: flex;
8 | height: $progress-height;
9 | overflow: hidden; // force rounded corners by cropping it
10 | font-size: $progress-font-size;
11 | background-color: $progress-bg;
12 | @include border-radius($progress-border-radius);
13 | @include box-shadow($progress-box-shadow);
14 | }
15 |
16 | .progress-bar {
17 | display: flex;
18 | flex-direction: column;
19 | justify-content: center;
20 | color: $progress-bar-color;
21 | text-align: center;
22 | white-space: nowrap;
23 | background-color: $progress-bar-bg;
24 | @include transition($progress-bar-transition);
25 | }
26 |
27 | .progress-bar-striped {
28 | @include gradient-striped();
29 | background-size: $progress-height $progress-height;
30 | }
31 |
32 | .progress-bar-animated {
33 | animation: progress-bar-stripes $progress-bar-animation-timing;
34 | }
35 |
--------------------------------------------------------------------------------
/scss/_reboot.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2 |
3 | // Reboot
4 | //
5 | // Normalization of HTML elements, manually forked from Normalize.css to remove
6 | // styles targeting irrelevant browsers while applying new styles.
7 | //
8 | // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9 |
10 |
11 | // Document
12 | //
13 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14 | // 2. Change the default font family in all browsers.
15 | // 3. Correct the line height in all browsers.
16 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17 | // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
18 | // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
19 | // 6. Change the default tap highlight to be completely transparent in iOS.
20 |
21 | *,
22 | *::before,
23 | *::after {
24 | box-sizing: border-box; // 1
25 | }
26 |
27 | html {
28 | font-family: sans-serif; // 2
29 | line-height: 1.15; // 3
30 | -webkit-text-size-adjust: 100%; // 4
31 | -ms-text-size-adjust: 100%; // 4
32 | -ms-overflow-style: scrollbar; // 5
33 | -webkit-tap-highlight-color: rgba($black, 0); // 6
34 | }
35 |
36 | // IE10+ doesn't honor `` in some cases.
37 | @at-root {
38 | @-ms-viewport {
39 | width: device-width;
40 | }
41 | }
42 |
43 | // stylelint-disable selector-list-comma-newline-after
44 | // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
45 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
46 | display: block;
47 | }
48 | // stylelint-enable selector-list-comma-newline-after
49 |
50 | // Body
51 | //
52 | // 1. Remove the margin in all browsers.
53 | // 2. As a best practice, apply a default `background-color`.
54 | // 3. Set an explicit initial text-align value so that we can later use the
55 | // the `inherit` value on things like `` elements.
56 |
57 | body {
58 | margin: 0; // 1
59 | font-family: $font-family-base;
60 | font-size: $font-size-base;
61 | font-weight: $font-weight-base;
62 | line-height: $line-height-base;
63 | color: $body-color;
64 | text-align: left; // 3
65 | background-color: $body-bg; // 2
66 | }
67 |
68 | // Suppress the focus outline on elements that cannot be accessed via keyboard.
69 | // This prevents an unwanted focus outline from appearing around elements that
70 | // might still respond to pointer events.
71 | //
72 | // Credit: https://github.com/suitcss/base
73 | [tabindex="-1"]:focus {
74 | outline: 0 !important;
75 | }
76 |
77 |
78 | // Content grouping
79 | //
80 | // 1. Add the correct box sizing in Firefox.
81 | // 2. Show the overflow in Edge and IE.
82 |
83 | hr {
84 | box-sizing: content-box; // 1
85 | height: 0; // 1
86 | overflow: visible; // 2
87 | }
88 |
89 |
90 | //
91 | // Typography
92 | //
93 |
94 | // Remove top margins from headings
95 | //
96 | // By default, ``-`` all receive top and bottom margins. We nuke the top
97 | // margin for easier control within type scales as it avoids margin collapsing.
98 | // stylelint-disable selector-list-comma-newline-after
99 | h1, h2, h3, h4, h5, h6 {
100 | margin-top: 0;
101 | margin-bottom: $headings-margin-bottom;
102 | }
103 | // stylelint-enable selector-list-comma-newline-after
104 |
105 | // Reset margins on paragraphs
106 | //
107 | // Similarly, the top margin on ``s get reset. However, we also reset the
108 | // bottom margin to use `rem` units instead of `em`.
109 | p {
110 | margin-top: 0;
111 | margin-bottom: $paragraph-margin-bottom;
112 | }
113 |
114 | // Abbreviations
115 | //
116 | // 1. Remove the bottom border in Firefox 39-.
117 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
118 | // 3. Add explicit cursor to indicate changed behavior.
119 | // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
120 |
121 | abbr[title],
122 | abbr[data-original-title] { // 4
123 | text-decoration: underline; // 2
124 | text-decoration: underline dotted; // 2
125 | cursor: help; // 3
126 | border-bottom: 0; // 1
127 | }
128 |
129 | address {
130 | margin-bottom: 1rem;
131 | font-style: normal;
132 | line-height: inherit;
133 | }
134 |
135 | ol,
136 | ul,
137 | dl {
138 | margin-top: 0;
139 | margin-bottom: 1rem;
140 | }
141 |
142 | ol ol,
143 | ul ul,
144 | ol ul,
145 | ul ol {
146 | margin-bottom: 0;
147 | }
148 |
149 | dt {
150 | font-weight: $dt-font-weight;
151 | }
152 |
153 | dd {
154 | margin-bottom: .5rem;
155 | margin-left: 0; // Undo browser default
156 | }
157 |
158 | blockquote {
159 | margin: 0 0 1rem;
160 | }
161 |
162 | dfn {
163 | font-style: italic; // Add the correct font style in Android 4.3-
164 | }
165 |
166 | // stylelint-disable font-weight-notation
167 | b,
168 | strong {
169 | font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
170 | }
171 | // stylelint-enable font-weight-notation
172 |
173 | small {
174 | font-size: 80%; // Add the correct font size in all browsers
175 | }
176 |
177 | //
178 | // Prevent `sub` and `sup` elements from affecting the line height in
179 | // all browsers.
180 | //
181 |
182 | sub,
183 | sup {
184 | position: relative;
185 | font-size: 75%;
186 | line-height: 0;
187 | vertical-align: baseline;
188 | }
189 |
190 | sub { bottom: -.25em; }
191 | sup { top: -.5em; }
192 |
193 |
194 | //
195 | // Links
196 | //
197 |
198 | a {
199 | color: $link-color;
200 | text-decoration: $link-decoration;
201 | background-color: transparent; // Remove the gray background on active links in IE 10.
202 | -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
203 |
204 | @include hover {
205 | color: $link-hover-color;
206 | text-decoration: $link-hover-decoration;
207 | }
208 | }
209 |
210 | // And undo these styles for placeholder links/named anchors (without href)
211 | // which have not been made explicitly keyboard-focusable (without tabindex).
212 | // It would be more straightforward to just use a[href] in previous block, but that
213 | // causes specificity issues in many other styles that are too complex to fix.
214 | // See https://github.com/twbs/bootstrap/issues/19402
215 |
216 | a:not([href]):not([tabindex]) {
217 | color: inherit;
218 | text-decoration: none;
219 |
220 | @include hover-focus {
221 | color: inherit;
222 | text-decoration: none;
223 | }
224 |
225 | &:focus {
226 | outline: 0;
227 | }
228 | }
229 |
230 |
231 | //
232 | // Code
233 | //
234 |
235 | pre,
236 | code,
237 | kbd,
238 | samp {
239 | font-family: $font-family-monospace;
240 | font-size: 1em; // Correct the odd `em` font sizing in all browsers.
241 | }
242 |
243 | pre {
244 | // Remove browser default top margin
245 | margin-top: 0;
246 | // Reset browser default of `1em` to use `rem`s
247 | margin-bottom: 1rem;
248 | // Don't allow content to break outside
249 | overflow: auto;
250 | // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
251 | // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
252 | -ms-overflow-style: scrollbar;
253 | }
254 |
255 |
256 | //
257 | // Figures
258 | //
259 |
260 | figure {
261 | // Apply a consistent margin strategy (matches our type styles).
262 | margin: 0 0 1rem;
263 | }
264 |
265 |
266 | //
267 | // Images and content
268 | //
269 |
270 | img {
271 | vertical-align: middle;
272 | border-style: none; // Remove the border on images inside links in IE 10-.
273 | }
274 |
275 | svg {
276 | // Workaround for the SVG overflow bug in IE10/11 is still required.
277 | // See https://github.com/twbs/bootstrap/issues/26878
278 | overflow: hidden;
279 | vertical-align: middle;
280 | }
281 |
282 |
283 | //
284 | // Tables
285 | //
286 |
287 | table {
288 | border-collapse: collapse; // Prevent double borders
289 | }
290 |
291 | caption {
292 | padding-top: $table-cell-padding;
293 | padding-bottom: $table-cell-padding;
294 | color: $table-caption-color;
295 | text-align: left;
296 | caption-side: bottom;
297 | }
298 |
299 | th {
300 | // Matches default ` | ` alignment by inheriting from the ``, or the
301 | // closest parent with a set `text-align`.
302 | text-align: inherit;
303 | }
304 |
305 |
306 | //
307 | // Forms
308 | //
309 |
310 | label {
311 | // Allow labels to use `margin` for spacing.
312 | display: inline-block;
313 | margin-bottom: $label-margin-bottom;
314 | }
315 |
316 | // Remove the default `border-radius` that macOS Chrome adds.
317 | //
318 | // Details at https://github.com/twbs/bootstrap/issues/24093
319 | button {
320 | border-radius: 0;
321 | }
322 |
323 | // Work around a Firefox/IE bug where the transparent `button` background
324 | // results in a loss of the default `button` focus styles.
325 | //
326 | // Credit: https://github.com/suitcss/base/
327 | button:focus {
328 | outline: 1px dotted;
329 | outline: 5px auto -webkit-focus-ring-color;
330 | }
331 |
332 | input,
333 | button,
334 | select,
335 | optgroup,
336 | textarea {
337 | margin: 0; // Remove the margin in Firefox and Safari
338 | font-family: inherit;
339 | font-size: inherit;
340 | line-height: inherit;
341 | }
342 |
343 | button,
344 | input {
345 | overflow: visible; // Show the overflow in Edge
346 | }
347 |
348 | button,
349 | select {
350 | text-transform: none; // Remove the inheritance of text transform in Firefox
351 | }
352 |
353 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
354 | // controls in Android 4.
355 | // 2. Correct the inability to style clickable types in iOS and Safari.
356 | button,
357 | html [type="button"], // 1
358 | [type="reset"],
359 | [type="submit"] {
360 | -webkit-appearance: button; // 2
361 | }
362 |
363 | // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
364 | button::-moz-focus-inner,
365 | [type="button"]::-moz-focus-inner,
366 | [type="reset"]::-moz-focus-inner,
367 | [type="submit"]::-moz-focus-inner {
368 | padding: 0;
369 | border-style: none;
370 | }
371 |
372 | input[type="radio"],
373 | input[type="checkbox"] {
374 | box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
375 | padding: 0; // 2. Remove the padding in IE 10-
376 | }
377 |
378 |
379 | input[type="date"],
380 | input[type="time"],
381 | input[type="datetime-local"],
382 | input[type="month"] {
383 | // Remove the default appearance of temporal inputs to avoid a Mobile Safari
384 | // bug where setting a custom line-height prevents text from being vertically
385 | // centered within the input.
386 | // See https://bugs.webkit.org/show_bug.cgi?id=139848
387 | // and https://github.com/twbs/bootstrap/issues/11266
388 | -webkit-appearance: listbox;
389 | }
390 |
391 | textarea {
392 | overflow: auto; // Remove the default vertical scrollbar in IE.
393 | // Textareas should really only resize vertically so they don't break their (horizontal) containers.
394 | resize: vertical;
395 | }
396 |
397 | fieldset {
398 | // Browsers set a default `min-width: min-content;` on fieldsets,
399 | // unlike e.g. ` `s, which have `min-width: 0;` by default.
400 | // So we reset that to ensure fieldsets behave more like a standard block element.
401 | // See https://github.com/twbs/bootstrap/issues/12359
402 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
403 | min-width: 0;
404 | // Reset the default outline behavior of fieldsets so they don't affect page layout.
405 | padding: 0;
406 | margin: 0;
407 | border: 0;
408 | }
409 |
410 | // 1. Correct the text wrapping in Edge and IE.
411 | // 2. Correct the color inheritance from `fieldset` elements in IE.
412 | legend {
413 | display: block;
414 | width: 100%;
415 | max-width: 100%; // 1
416 | padding: 0;
417 | margin-bottom: .5rem;
418 | font-size: 1.5rem;
419 | line-height: inherit;
420 | color: inherit; // 2
421 | white-space: normal; // 1
422 | }
423 |
424 | progress {
425 | vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
426 | }
427 |
428 | // Correct the cursor style of increment and decrement buttons in Chrome.
429 | [type="number"]::-webkit-inner-spin-button,
430 | [type="number"]::-webkit-outer-spin-button {
431 | height: auto;
432 | }
433 |
434 | [type="search"] {
435 | // This overrides the extra rounded corners on search inputs in iOS so that our
436 | // `.form-control` class can properly style them. Note that this cannot simply
437 | // be added to `.form-control` as it's not specific enough. For details, see
438 | // https://github.com/twbs/bootstrap/issues/11586.
439 | outline-offset: -2px; // 2. Correct the outline style in Safari.
440 | -webkit-appearance: none;
441 | }
442 |
443 | //
444 | // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
445 | //
446 |
447 | [type="search"]::-webkit-search-cancel-button,
448 | [type="search"]::-webkit-search-decoration {
449 | -webkit-appearance: none;
450 | }
451 |
452 | //
453 | // 1. Correct the inability to style clickable types in iOS and Safari.
454 | // 2. Change font properties to `inherit` in Safari.
455 | //
456 |
457 | ::-webkit-file-upload-button {
458 | font: inherit; // 2
459 | -webkit-appearance: button; // 1
460 | }
461 |
462 | //
463 | // Correct element displays
464 | //
465 |
466 | output {
467 | display: inline-block;
468 | }
469 |
470 | summary {
471 | display: list-item; // Add the correct display in all browsers
472 | cursor: pointer;
473 | }
474 |
475 | template {
476 | display: none; // Add the correct display in IE
477 | }
478 |
479 | // Always hide an element with the `hidden` HTML attribute (from PureCSS).
480 | // Needed for proper display in IE 10-.
481 | [hidden] {
482 | display: none !important;
483 | }
484 |
--------------------------------------------------------------------------------
/scss/_root.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Custom variable values only support SassScript inside `#{}`.
3 | @each $color, $value in $colors {
4 | --#{$color}: #{$value};
5 | }
6 |
7 | @each $color, $value in $theme-colors {
8 | --#{$color}: #{$value};
9 | }
10 |
11 | @each $bp, $value in $grid-breakpoints {
12 | --breakpoint-#{$bp}: #{$value};
13 | }
14 |
15 | // Use `inspect` for lists so that quoted items keep the quotes.
16 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
17 | --font-family-sans-serif: #{inspect($font-family-sans-serif)};
18 | --font-family-monospace: #{inspect($font-family-monospace)};
19 | }
20 |
--------------------------------------------------------------------------------
/scss/_tables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Basic Bootstrap table
3 | //
4 |
5 | .table {
6 | width: 100%;
7 | margin-bottom: $spacer;
8 | background-color: $table-bg; // Reset for nesting within parents with `background-color`.
9 |
10 | th,
11 | td {
12 | padding: $table-cell-padding;
13 | vertical-align: top;
14 | border-top: $table-border-width solid $table-border-color;
15 | }
16 |
17 | thead th {
18 | vertical-align: bottom;
19 | border-bottom: (2 * $table-border-width) solid $table-border-color;
20 | }
21 |
22 | tbody + tbody {
23 | border-top: (2 * $table-border-width) solid $table-border-color;
24 | }
25 |
26 | .table {
27 | background-color: $body-bg;
28 | }
29 | }
30 |
31 |
32 | //
33 | // Condensed table w/ half padding
34 | //
35 |
36 | .table-sm {
37 | th,
38 | td {
39 | padding: $table-cell-padding-sm;
40 | }
41 | }
42 |
43 |
44 | // Border versions
45 | //
46 | // Add or remove borders all around the table and between all the columns.
47 |
48 | .table-bordered {
49 | border: $table-border-width solid $table-border-color;
50 |
51 | th,
52 | td {
53 | border: $table-border-width solid $table-border-color;
54 | }
55 |
56 | thead {
57 | th,
58 | td {
59 | border-bottom-width: (2 * $table-border-width);
60 | }
61 | }
62 | }
63 |
64 | .table-borderless {
65 | th,
66 | td,
67 | thead th,
68 | tbody + tbody {
69 | border: 0;
70 | }
71 | }
72 |
73 | // Zebra-striping
74 | //
75 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
76 |
77 | .table-striped {
78 | tbody tr:nth-of-type(#{$table-striped-order}) {
79 | background-color: $table-accent-bg;
80 | }
81 | }
82 |
83 |
84 | // Hover effect
85 | //
86 | // Placed here since it has to come after the potential zebra striping
87 |
88 | .table-hover {
89 | tbody tr {
90 | @include hover {
91 | background-color: $table-hover-bg;
92 | }
93 | }
94 | }
95 |
96 |
97 | // Table backgrounds
98 | //
99 | // Exact selectors below required to override `.table-striped` and prevent
100 | // inheritance to nested tables.
101 |
102 | @each $color, $value in $theme-colors {
103 | @include table-row-variant($color, theme-color-level($color, -9));
104 | }
105 |
106 | @include table-row-variant(active, $table-active-bg);
107 |
108 |
109 | // Dark styles
110 | //
111 | // Same table markup, but inverted color scheme: dark background and light text.
112 |
113 | // stylelint-disable-next-line no-duplicate-selectors
114 | .table {
115 | .thead-dark {
116 | th {
117 | color: $table-dark-color;
118 | background-color: $table-dark-bg;
119 | border-color: $table-dark-border-color;
120 | }
121 | }
122 |
123 | .thead-light {
124 | th {
125 | color: $table-head-color;
126 | background-color: $table-head-bg;
127 | border-color: $table-border-color;
128 | }
129 | }
130 | }
131 |
132 | .table-dark {
133 | color: $table-dark-color;
134 | background-color: $table-dark-bg;
135 |
136 | th,
137 | td,
138 | thead th {
139 | border-color: $table-dark-border-color;
140 | }
141 |
142 | &.table-bordered {
143 | border: 0;
144 | }
145 |
146 | &.table-striped {
147 | tbody tr:nth-of-type(odd) {
148 | background-color: $table-dark-accent-bg;
149 | }
150 | }
151 |
152 | &.table-hover {
153 | tbody tr {
154 | @include hover {
155 | background-color: $table-dark-hover-bg;
156 | }
157 | }
158 | }
159 | }
160 |
161 |
162 | // Responsive tables
163 | //
164 | // Generate series of `.table-responsive-*` classes for configuring the screen
165 | // size of where your table will overflow.
166 |
167 | .table-responsive {
168 | @each $breakpoint in map-keys($grid-breakpoints) {
169 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
170 | $infix: breakpoint-infix($next, $grid-breakpoints);
171 |
172 | &#{$infix} {
173 | @include media-breakpoint-down($breakpoint) {
174 | display: block;
175 | width: 100%;
176 | overflow-x: auto;
177 | -webkit-overflow-scrolling: touch;
178 | -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
179 |
180 | // Prevent double border on horizontal scroll due to use of `display: block;`
181 | > .table-bordered {
182 | border: 0;
183 | }
184 | }
185 | }
186 | }
187 | }
188 |
--------------------------------------------------------------------------------
/scss/_tooltip.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | .tooltip {
3 | position: absolute;
4 | z-index: $zindex-tooltip;
5 | display: block;
6 | margin: $tooltip-margin;
7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8 | // So reset our font and text properties to avoid inheriting weird values.
9 | @include reset-text();
10 | font-size: $tooltip-font-size;
11 | // Allow breaking very long words so they don't overflow the tooltip's bounds
12 | word-wrap: break-word;
13 | opacity: 0;
14 |
15 | &.show { opacity: $tooltip-opacity; }
16 |
17 | .arrow {
18 | position: absolute;
19 | display: block;
20 | width: $tooltip-arrow-width;
21 | height: $tooltip-arrow-height;
22 |
23 | &::before {
24 | position: absolute;
25 | content: "";
26 | border-color: transparent;
27 | border-style: solid;
28 | }
29 | }
30 | }
31 |
32 | .bs-tooltip-top {
33 | padding: $tooltip-arrow-height 0;
34 |
35 | .arrow {
36 | bottom: 0;
37 |
38 | &::before {
39 | top: 0;
40 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41 | border-top-color: $tooltip-arrow-color;
42 | }
43 | }
44 | }
45 |
46 | .bs-tooltip-right {
47 | padding: 0 $tooltip-arrow-height;
48 |
49 | .arrow {
50 | left: 0;
51 | width: $tooltip-arrow-height;
52 | height: $tooltip-arrow-width;
53 |
54 | &::before {
55 | right: 0;
56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57 | border-right-color: $tooltip-arrow-color;
58 | }
59 | }
60 | }
61 |
62 | .bs-tooltip-bottom {
63 | padding: $tooltip-arrow-height 0;
64 |
65 | .arrow {
66 | top: 0;
67 |
68 | &::before {
69 | bottom: 0;
70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71 | border-bottom-color: $tooltip-arrow-color;
72 | }
73 | }
74 | }
75 |
76 | .bs-tooltip-left {
77 | padding: 0 $tooltip-arrow-height;
78 |
79 | .arrow {
80 | right: 0;
81 | width: $tooltip-arrow-height;
82 | height: $tooltip-arrow-width;
83 |
84 | &::before {
85 | left: 0;
86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87 | border-left-color: $tooltip-arrow-color;
88 | }
89 | }
90 | }
91 |
92 | .bs-tooltip-auto {
93 | &[x-placement^="top"] {
94 | @extend .bs-tooltip-top;
95 | }
96 | &[x-placement^="right"] {
97 | @extend .bs-tooltip-right;
98 | }
99 | &[x-placement^="bottom"] {
100 | @extend .bs-tooltip-bottom;
101 | }
102 | &[x-placement^="left"] {
103 | @extend .bs-tooltip-left;
104 | }
105 | }
106 |
107 | // Wrapper for the tooltip content
108 | .tooltip-inner {
109 | max-width: $tooltip-max-width;
110 | padding: $tooltip-padding-y $tooltip-padding-x;
111 | color: $tooltip-color;
112 | text-align: center;
113 | background-color: $tooltip-bg;
114 | @include border-radius($tooltip-border-radius);
115 | }
116 |
--------------------------------------------------------------------------------
/scss/_transitions.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-no-qualifying-type
2 |
3 | .fade {
4 | @include transition($transition-fade);
5 |
6 | &:not(.show) {
7 | opacity: 0;
8 | }
9 | }
10 |
11 | .collapse {
12 | &:not(.show) {
13 | display: none;
14 | }
15 | }
16 |
17 | .collapsing {
18 | position: relative;
19 | height: 0;
20 | overflow: hidden;
21 | @include transition($transition-collapse);
22 | }
23 |
--------------------------------------------------------------------------------
/scss/_type.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-list-comma-newline-after
2 |
3 | //
4 | // Headings
5 | //
6 |
7 | h1, h2, h3, h4, h5, h6,
8 | .h1, .h2, .h3, .h4, .h5, .h6 {
9 | margin-bottom: $headings-margin-bottom;
10 | font-family: $headings-font-family;
11 | font-weight: $headings-font-weight;
12 | line-height: $headings-line-height;
13 | color: $headings-color;
14 | }
15 |
16 | h1, .h1 { font-size: $h1-font-size; }
17 | h2, .h2 { font-size: $h2-font-size; }
18 | h3, .h3 { font-size: $h3-font-size; }
19 | h4, .h4 { font-size: $h4-font-size; }
20 | h5, .h5 { font-size: $h5-font-size; }
21 | h6, .h6 { font-size: $h6-font-size; }
22 |
23 | .lead {
24 | font-size: $lead-font-size;
25 | font-weight: $lead-font-weight;
26 | }
27 |
28 | // Type display classes
29 | .display-1 {
30 | font-size: $display1-size;
31 | font-weight: $display1-weight;
32 | line-height: $display-line-height;
33 | }
34 | .display-2 {
35 | font-size: $display2-size;
36 | font-weight: $display2-weight;
37 | line-height: $display-line-height;
38 | }
39 | .display-3 {
40 | font-size: $display3-size;
41 | font-weight: $display3-weight;
42 | line-height: $display-line-height;
43 | }
44 | .display-4 {
45 | font-size: $display4-size;
46 | font-weight: $display4-weight;
47 | line-height: $display-line-height;
48 | }
49 |
50 |
51 | //
52 | // Horizontal rules
53 | //
54 |
55 | hr {
56 | margin-top: $hr-margin-y;
57 | margin-bottom: $hr-margin-y;
58 | border: 0;
59 | border-top: $hr-border-width solid $hr-border-color;
60 | }
61 |
62 |
63 | //
64 | // Emphasis
65 | //
66 |
67 | small,
68 | .small {
69 | font-size: $small-font-size;
70 | font-weight: $font-weight-normal;
71 | }
72 |
73 | mark,
74 | .mark {
75 | padding: $mark-padding;
76 | background-color: $mark-bg;
77 | }
78 |
79 |
80 | //
81 | // Lists
82 | //
83 |
84 | .list-unstyled {
85 | @include list-unstyled;
86 | }
87 |
88 | // Inline turns list items into inline-block
89 | .list-inline {
90 | @include list-unstyled;
91 | }
92 | .list-inline-item {
93 | display: inline-block;
94 |
95 | &:not(:last-child) {
96 | margin-right: $list-inline-padding;
97 | }
98 | }
99 |
100 |
101 | //
102 | // Misc
103 | //
104 |
105 | // Builds on `abbr`
106 | .initialism {
107 | font-size: 90%;
108 | text-transform: uppercase;
109 | }
110 |
111 | // Blockquotes
112 | .blockquote {
113 | margin-bottom: $spacer;
114 | font-size: $blockquote-font-size;
115 | }
116 |
117 | .blockquote-footer {
118 | display: block;
119 | font-size: 80%; // back to default font-size
120 | color: $blockquote-small-color;
121 |
122 | &::before {
123 | content: "\2014 \00A0"; // em dash, nbsp
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/scss/_utilities.scss:
--------------------------------------------------------------------------------
1 | @import "utilities/align";
2 | @import "utilities/background";
3 | @import "utilities/borders";
4 | @import "utilities/clearfix";
5 | @import "utilities/display";
6 | @import "utilities/embed";
7 | @import "utilities/flex";
8 | @import "utilities/float";
9 | @import "utilities/position";
10 | @import "utilities/screenreaders";
11 | @import "utilities/shadows";
12 | @import "utilities/sizing";
13 | @import "utilities/spacing";
14 | @import "utilities/text";
15 | @import "utilities/visibility";
16 |
--------------------------------------------------------------------------------
/scss/bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v4.1.3 (https://getbootstrap.com/)
3 | * Copyright 2011-2018 The Bootstrap Authors
4 | * Copyright 2011-2018 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | @import "functions";
9 | @import "variables";
10 | @import "mixins";
11 | @import "root";
12 | @import "reboot";
13 | @import "type";
14 | @import "images";
15 | @import "code";
16 | @import "grid";
17 | @import "tables";
18 | @import "forms";
19 | @import "buttons";
20 | @import "transitions";
21 | @import "dropdown";
22 | @import "button-group";
23 | @import "input-group";
24 | @import "custom-forms";
25 | @import "nav";
26 | @import "navbar";
27 | @import "card";
28 | @import "breadcrumb";
29 | @import "pagination";
30 | @import "badge";
31 | @import "jumbotron";
32 | @import "alert";
33 | @import "progress";
34 | @import "media";
35 | @import "list-group";
36 | @import "close";
37 | @import "modal";
38 | @import "tooltip";
39 | @import "popover";
40 | @import "carousel";
41 | @import "utilities";
42 | @import "print";
43 |
--------------------------------------------------------------------------------
/scss/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | @mixin alert-variant($background, $border, $color) {
2 | color: $color;
3 | @include gradient-bg($background);
4 | border-color: $border;
5 |
6 | hr {
7 | border-top-color: darken($border, 5%);
8 | }
9 |
10 | .alert-link {
11 | color: darken($color, 10%);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/scss/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Contextual backgrounds
4 |
5 | @mixin bg-variant($parent, $color) {
6 | #{$parent} {
7 | background-color: $color !important;
8 | }
9 | a#{$parent},
10 | button#{$parent} {
11 | @include hover-focus {
12 | background-color: darken($color, 10%) !important;
13 | }
14 | }
15 | }
16 |
17 | @mixin bg-gradient-variant($parent, $color) {
18 | #{$parent} {
19 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/scss/mixins/_badge.scss:
--------------------------------------------------------------------------------
1 | @mixin badge-variant($bg) {
2 | color: color-yiq($bg);
3 | background-color: $bg;
4 |
5 | &[href] {
6 | @include hover-focus {
7 | color: color-yiq($bg);
8 | text-decoration: none;
9 | background-color: darken($bg, 10%);
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/scss/mixins/_border-radius.scss:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | @mixin border-radius($radius: $border-radius) {
4 | @if $enable-rounded {
5 | border-radius: $radius;
6 | }
7 | }
8 |
9 | @mixin border-top-radius($radius) {
10 | @if $enable-rounded {
11 | border-top-left-radius: $radius;
12 | border-top-right-radius: $radius;
13 | }
14 | }
15 |
16 | @mixin border-right-radius($radius) {
17 | @if $enable-rounded {
18 | border-top-right-radius: $radius;
19 | border-bottom-right-radius: $radius;
20 | }
21 | }
22 |
23 | @mixin border-bottom-radius($radius) {
24 | @if $enable-rounded {
25 | border-bottom-right-radius: $radius;
26 | border-bottom-left-radius: $radius;
27 | }
28 | }
29 |
30 | @mixin border-left-radius($radius) {
31 | @if $enable-rounded {
32 | border-top-left-radius: $radius;
33 | border-bottom-left-radius: $radius;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/scss/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow($shadow...) {
2 | @if $enable-shadows {
3 | box-shadow: $shadow;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/scss/mixins/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | // Breakpoint viewport sizes and media queries.
2 | //
3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4 | //
5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
6 | //
7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8 |
9 | // Name of the next breakpoint, or null for the last breakpoint.
10 | //
11 | // >> breakpoint-next(sm)
12 | // md
13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
14 | // md
15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
16 | // md
17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18 | $n: index($breakpoint-names, $name);
19 | @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20 | }
21 |
22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint.
23 | //
24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
25 | // 576px
26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27 | $min: map-get($breakpoints, $name);
28 | @return if($min != 0, $min, null);
29 | }
30 |
31 | // Maximum breakpoint width. Null for the largest (last) breakpoint.
32 | // The maximum value is calculated as the minimum of the next one less 0.02px
33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261
37 | //
38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
39 | // 767.98px
40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
41 | $next: breakpoint-next($name, $breakpoints);
42 | @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
43 | }
44 |
45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
46 | // Useful for making responsive utilities.
47 | //
48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
49 | // "" (Returns a blank string)
50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
51 | // "-sm"
52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
54 | }
55 |
56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
57 | // Makes the @content apply to the given breakpoint and wider.
58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
59 | $min: breakpoint-min($name, $breakpoints);
60 | @if $min {
61 | @media (min-width: $min) {
62 | @content;
63 | }
64 | } @else {
65 | @content;
66 | }
67 | }
68 |
69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
70 | // Makes the @content apply to the given breakpoint and narrower.
71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
72 | $max: breakpoint-max($name, $breakpoints);
73 | @if $max {
74 | @media (max-width: $max) {
75 | @content;
76 | }
77 | } @else {
78 | @content;
79 | }
80 | }
81 |
82 | // Media that spans multiple breakpoint widths.
83 | // Makes the @content apply between the min and max breakpoints
84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
85 | $min: breakpoint-min($lower, $breakpoints);
86 | $max: breakpoint-max($upper, $breakpoints);
87 |
88 | @if $min != null and $max != null {
89 | @media (min-width: $min) and (max-width: $max) {
90 | @content;
91 | }
92 | } @else if $max == null {
93 | @include media-breakpoint-up($lower, $breakpoints) {
94 | @content;
95 | }
96 | } @else if $min == null {
97 | @include media-breakpoint-down($upper, $breakpoints) {
98 | @content;
99 | }
100 | }
101 | }
102 |
103 | // Media between the breakpoint's minimum and maximum widths.
104 | // No minimum for the smallest breakpoint, and no maximum for the largest one.
105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107 | $min: breakpoint-min($name, $breakpoints);
108 | $max: breakpoint-max($name, $breakpoints);
109 |
110 | @if $min != null and $max != null {
111 | @media (min-width: $min) and (max-width: $max) {
112 | @content;
113 | }
114 | } @else if $max == null {
115 | @include media-breakpoint-up($name, $breakpoints) {
116 | @content;
117 | }
118 | } @else if $min == null {
119 | @include media-breakpoint-down($name, $breakpoints) {
120 | @content;
121 | }
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/scss/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
7 | color: color-yiq($background);
8 | @include gradient-bg($background);
9 | border-color: $border;
10 | @include box-shadow($btn-box-shadow);
11 |
12 | @include hover {
13 | color: color-yiq($hover-background);
14 | @include gradient-bg($hover-background);
15 | border-color: $hover-border;
16 | }
17 |
18 | &:focus,
19 | &.focus {
20 | // Avoid using mixin so we can pass custom focus shadow properly
21 | @if $enable-shadows {
22 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
23 | } @else {
24 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
25 | }
26 | }
27 |
28 | // Disabled comes first so active can properly restyle
29 | &.disabled,
30 | &:disabled {
31 | color: color-yiq($background);
32 | background-color: $background;
33 | border-color: $border;
34 | }
35 |
36 | &:not(:disabled):not(.disabled):active,
37 | &:not(:disabled):not(.disabled).active,
38 | .show > &.dropdown-toggle {
39 | color: color-yiq($active-background);
40 | background-color: $active-background;
41 | @if $enable-gradients {
42 | background-image: none; // Remove the gradient for the pressed/active state
43 | }
44 | border-color: $active-border;
45 |
46 | &:focus {
47 | // Avoid using mixin so we can pass custom focus shadow properly
48 | @if $enable-shadows {
49 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
50 | } @else {
51 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
52 | }
53 | }
54 | }
55 | }
56 |
57 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
58 | color: $color;
59 | background-color: transparent;
60 | background-image: none;
61 | border-color: $color;
62 |
63 | &:hover {
64 | color: $color-hover;
65 | background-color: $active-background;
66 | border-color: $active-border;
67 | }
68 |
69 | &:focus,
70 | &.focus {
71 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
72 | }
73 |
74 | &.disabled,
75 | &:disabled {
76 | color: $color;
77 | background-color: transparent;
78 | }
79 |
80 | &:not(:disabled):not(.disabled):active,
81 | &:not(:disabled):not(.disabled).active,
82 | .show > &.dropdown-toggle {
83 | color: color-yiq($active-background);
84 | background-color: $active-background;
85 | border-color: $active-border;
86 |
87 | &:focus {
88 | // Avoid using mixin so we can pass custom focus shadow properly
89 | @if $enable-shadows and $btn-active-box-shadow != none {
90 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
91 | } @else {
92 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
93 | }
94 | }
95 | }
96 | }
97 |
98 | // Button sizes
99 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
100 | padding: $padding-y $padding-x;
101 | font-size: $font-size;
102 | line-height: $line-height;
103 | // Manually declare to provide an override to the browser default
104 | @if $enable-rounded {
105 | border-radius: $border-radius;
106 | } @else {
107 | border-radius: 0;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/scss/mixins/_caret.scss:
--------------------------------------------------------------------------------
1 | @mixin caret-down {
2 | border-top: $caret-width solid;
3 | border-right: $caret-width solid transparent;
4 | border-bottom: 0;
5 | border-left: $caret-width solid transparent;
6 | }
7 |
8 | @mixin caret-up {
9 | border-top: 0;
10 | border-right: $caret-width solid transparent;
11 | border-bottom: $caret-width solid;
12 | border-left: $caret-width solid transparent;
13 | }
14 |
15 | @mixin caret-right {
16 | border-top: $caret-width solid transparent;
17 | border-right: 0;
18 | border-bottom: $caret-width solid transparent;
19 | border-left: $caret-width solid;
20 | }
21 |
22 | @mixin caret-left {
23 | border-top: $caret-width solid transparent;
24 | border-right: $caret-width solid;
25 | border-bottom: $caret-width solid transparent;
26 | }
27 |
28 | @mixin caret($direction: down) {
29 | @if $enable-caret {
30 | &::after {
31 | display: inline-block;
32 | width: 0;
33 | height: 0;
34 | margin-left: $caret-width * .85;
35 | vertical-align: $caret-width * .85;
36 | content: "";
37 | @if $direction == down {
38 | @include caret-down;
39 | } @else if $direction == up {
40 | @include caret-up;
41 | } @else if $direction == right {
42 | @include caret-right;
43 | }
44 | }
45 |
46 | @if $direction == left {
47 | &::after {
48 | display: none;
49 | }
50 |
51 | &::before {
52 | display: inline-block;
53 | width: 0;
54 | height: 0;
55 | margin-right: $caret-width * .85;
56 | vertical-align: $caret-width * .85;
57 | content: "";
58 | @include caret-left;
59 | }
60 | }
61 |
62 | &:empty::after {
63 | margin-left: 0;
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/scss/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix() {
2 | &::after {
3 | display: block;
4 | clear: both;
5 | content: "";
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/scss/mixins/_float.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @mixin float-left {
4 | float: left !important;
5 | }
6 | @mixin float-right {
7 | float: right !important;
8 | }
9 | @mixin float-none {
10 | float: none !important;
11 | }
12 |
--------------------------------------------------------------------------------
/scss/mixins/_forms.scss:
--------------------------------------------------------------------------------
1 | // Form control focus state
2 | //
3 | // Generate a customized focus state and for any input with the specified color,
4 | // which defaults to the `$input-focus-border-color` variable.
5 | //
6 | // We highly encourage you to not customize the default value, but instead use
7 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
8 | // WebKit's default styles, but applicable to a wider range of browsers. Its
9 | // usability and accessibility should be taken into account with any change.
10 | //
11 | // Example usage: change the default blue border and shadow to white for better
12 | // contrast against a dark gray background.
13 | @mixin form-control-focus() {
14 | &:focus {
15 | color: $input-focus-color;
16 | background-color: $input-focus-bg;
17 | border-color: $input-focus-border-color;
18 | outline: 0;
19 | // Avoid using mixin so we can pass custom focus shadow properly
20 | @if $enable-shadows {
21 | box-shadow: $input-box-shadow, $input-focus-box-shadow;
22 | } @else {
23 | box-shadow: $input-focus-box-shadow;
24 | }
25 | }
26 | }
27 |
28 |
29 | @mixin form-validation-state($state, $color) {
30 | .#{$state}-feedback {
31 | display: none;
32 | width: 100%;
33 | margin-top: $form-feedback-margin-top;
34 | font-size: $form-feedback-font-size;
35 | color: $color;
36 | }
37 |
38 | .#{$state}-tooltip {
39 | position: absolute;
40 | top: 100%;
41 | z-index: 5;
42 | display: none;
43 | max-width: 100%; // Contain to parent when possible
44 | padding: $tooltip-padding-y $tooltip-padding-x;
45 | margin-top: .1rem;
46 | font-size: $tooltip-font-size;
47 | line-height: $line-height-base;
48 | color: color-yiq($color);
49 | background-color: rgba($color, $tooltip-opacity);
50 | @include border-radius($tooltip-border-radius);
51 | }
52 |
53 | .form-control,
54 | .custom-select {
55 | .was-validated &:#{$state},
56 | &.is-#{$state} {
57 | border-color: $color;
58 |
59 | &:focus {
60 | border-color: $color;
61 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
62 | }
63 |
64 | ~ .#{$state}-feedback,
65 | ~ .#{$state}-tooltip {
66 | display: block;
67 | }
68 | }
69 | }
70 |
71 | .form-control-file {
72 | .was-validated &:#{$state},
73 | &.is-#{$state} {
74 | ~ .#{$state}-feedback,
75 | ~ .#{$state}-tooltip {
76 | display: block;
77 | }
78 | }
79 | }
80 |
81 | .form-check-input {
82 | .was-validated &:#{$state},
83 | &.is-#{$state} {
84 | ~ .form-check-label {
85 | color: $color;
86 | }
87 |
88 | ~ .#{$state}-feedback,
89 | ~ .#{$state}-tooltip {
90 | display: block;
91 | }
92 | }
93 | }
94 |
95 | .custom-control-input {
96 | .was-validated &:#{$state},
97 | &.is-#{$state} {
98 | ~ .custom-control-label {
99 | color: $color;
100 |
101 | &::before {
102 | background-color: lighten($color, 25%);
103 | }
104 | }
105 |
106 | ~ .#{$state}-feedback,
107 | ~ .#{$state}-tooltip {
108 | display: block;
109 | }
110 |
111 | &:checked {
112 | ~ .custom-control-label::before {
113 | @include gradient-bg(lighten($color, 10%));
114 | }
115 | }
116 |
117 | &:focus {
118 | ~ .custom-control-label::before {
119 | box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
120 | }
121 | }
122 | }
123 | }
124 |
125 | // custom file
126 | .custom-file-input {
127 | .was-validated &:#{$state},
128 | &.is-#{$state} {
129 | ~ .custom-file-label {
130 | border-color: $color;
131 |
132 | &::after { border-color: inherit; }
133 | }
134 |
135 | ~ .#{$state}-feedback,
136 | ~ .#{$state}-tooltip {
137 | display: block;
138 | }
139 |
140 | &:focus {
141 | ~ .custom-file-label {
142 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
143 | }
144 | }
145 | }
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/scss/mixins/_gradients.scss:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 | @mixin gradient-bg($color) {
4 | @if $enable-gradients {
5 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
6 | } @else {
7 | background-color: $color;
8 | }
9 | }
10 |
11 | // Horizontal gradient, from left to right
12 | //
13 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
14 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
15 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
16 | background-repeat: repeat-x;
17 | }
18 |
19 | // Vertical gradient, from top to bottom
20 | //
21 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
22 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
23 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
24 | background-repeat: repeat-x;
25 | }
26 |
27 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
28 | background-image: linear-gradient($deg, $start-color, $end-color);
29 | background-repeat: repeat-x;
30 | }
31 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
32 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33 | background-repeat: no-repeat;
34 | }
35 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
36 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37 | background-repeat: no-repeat;
38 | }
39 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
40 | background-image: radial-gradient(circle, $inner-color, $outer-color);
41 | background-repeat: no-repeat;
42 | }
43 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
44 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
45 | }
46 |
--------------------------------------------------------------------------------
/scss/mixins/_grid-framework.scss:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `$grid-columns`.
5 |
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 | // Common properties for all breakpoints
8 | %grid-column {
9 | position: relative;
10 | width: 100%;
11 | min-height: 1px; // Prevent columns from collapsing when empty
12 | padding-right: ($gutter / 2);
13 | padding-left: ($gutter / 2);
14 | }
15 |
16 | @each $breakpoint in map-keys($breakpoints) {
17 | $infix: breakpoint-infix($breakpoint, $breakpoints);
18 |
19 | // Allow columns to stretch full width below their breakpoints
20 | @for $i from 1 through $columns {
21 | .col#{$infix}-#{$i} {
22 | @extend %grid-column;
23 | }
24 | }
25 | .col#{$infix},
26 | .col#{$infix}-auto {
27 | @extend %grid-column;
28 | }
29 |
30 | @include media-breakpoint-up($breakpoint, $breakpoints) {
31 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
32 | .col#{$infix} {
33 | flex-basis: 0;
34 | flex-grow: 1;
35 | max-width: 100%;
36 | }
37 | .col#{$infix}-auto {
38 | flex: 0 0 auto;
39 | width: auto;
40 | max-width: none; // Reset earlier grid tiers
41 | }
42 |
43 | @for $i from 1 through $columns {
44 | .col#{$infix}-#{$i} {
45 | @include make-col($i, $columns);
46 | }
47 | }
48 |
49 | .order#{$infix}-first { order: -1; }
50 |
51 | .order#{$infix}-last { order: $columns + 1; }
52 |
53 | @for $i from 0 through $columns {
54 | .order#{$infix}-#{$i} { order: $i; }
55 | }
56 |
57 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
58 | @for $i from 0 through ($columns - 1) {
59 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
60 | .offset#{$infix}-#{$i} {
61 | @include make-col-offset($i, $columns);
62 | }
63 | }
64 | }
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/scss/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container() {
6 | width: 100%;
7 | padding-right: ($grid-gutter-width / 2);
8 | padding-left: ($grid-gutter-width / 2);
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
13 |
14 | // For each breakpoint, define the maximum width of the container in a media query
15 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16 | @each $breakpoint, $container-max-width in $max-widths {
17 | @include media-breakpoint-up($breakpoint, $breakpoints) {
18 | max-width: $container-max-width;
19 | }
20 | }
21 | }
22 |
23 | @mixin make-row() {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: ($grid-gutter-width / -2);
27 | margin-left: ($grid-gutter-width / -2);
28 | }
29 |
30 | @mixin make-col-ready() {
31 | position: relative;
32 | // Prevent columns from becoming too narrow when at smaller grid tiers by
33 | // always setting `width: 100%;`. This works because we use `flex` values
34 | // later on to override this initial width.
35 | width: 100%;
36 | min-height: 1px; // Prevent collapsing
37 | padding-right: ($grid-gutter-width / 2);
38 | padding-left: ($grid-gutter-width / 2);
39 | }
40 |
41 | @mixin make-col($size, $columns: $grid-columns) {
42 | flex: 0 0 percentage($size / $columns);
43 | // Add a `max-width` to ensure content within each column does not blow out
44 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
45 | // do not appear to require this.
46 | max-width: percentage($size / $columns);
47 | }
48 |
49 | @mixin make-col-offset($size, $columns: $grid-columns) {
50 | $num: $size / $columns;
51 | margin-left: if($num == 0, 0, percentage($num));
52 | }
53 |
--------------------------------------------------------------------------------
/scss/mixins/_hover.scss:
--------------------------------------------------------------------------------
1 | // Hover mixin and `$enable-hover-media-query` are deprecated.
2 | //
3 | // Originally added during our alphas and maintained during betas, this mixin was
4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles
5 | // would persist after initial touch.
6 | //
7 | // For backward compatibility, we've kept these mixins and updated them to
8 | // always return their regular pseudo-classes instead of a shimmed media query.
9 | //
10 | // Issue: https://github.com/twbs/bootstrap/issues/25195
11 |
12 | @mixin hover {
13 | &:hover { @content; }
14 | }
15 |
16 | @mixin hover-focus {
17 | &:hover,
18 | &:focus {
19 | @content;
20 | }
21 | }
22 |
23 | @mixin plain-hover-focus {
24 | &,
25 | &:hover,
26 | &:focus {
27 | @content;
28 | }
29 | }
30 |
31 | @mixin hover-focus-active {
32 | &:hover,
33 | &:focus,
34 | &:active {
35 | @content;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/scss/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 |
6 | // Responsive image
7 | //
8 | // Keep images from scaling beyond the width of their parents.
9 |
10 | @mixin img-fluid {
11 | // Part 1: Set a maximum relative to the parent
12 | max-width: 100%;
13 | // Part 2: Override the height to auto, otherwise images will be stretched
14 | // when setting a width and height attribute on the img element.
15 | height: auto;
16 | }
17 |
18 |
19 | // Retina image
20 | //
21 | // Short retina mixin for setting background-image and -size.
22 |
23 | // stylelint-disable indentation, media-query-list-comma-newline-after
24 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
25 | background-image: url($file-1x);
26 |
27 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
28 | // but doesn't convert dppx=>dpi.
29 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
30 | // Compatibility info: https://caniuse.com/#feat=css-media-resolution
31 | @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
32 | only screen and (min-resolution: 2dppx) { // Standardized
33 | background-image: url($file-2x);
34 | background-size: $width-1x $height-1x;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/scss/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | @mixin list-group-item-variant($state, $background, $color) {
4 | .list-group-item-#{$state} {
5 | color: $color;
6 | background-color: $background;
7 |
8 | &.list-group-item-action {
9 | @include hover-focus {
10 | color: $color;
11 | background-color: darken($background, 5%);
12 | }
13 |
14 | &.active {
15 | color: $white;
16 | background-color: $color;
17 | border-color: $color;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/scss/mixins/_lists.scss:
--------------------------------------------------------------------------------
1 | // Lists
2 |
3 | // Unstyled keeps list items block level, just removes default browser padding and list-style
4 | @mixin list-unstyled {
5 | padding-left: 0;
6 | list-style: none;
7 | }
8 |
--------------------------------------------------------------------------------
/scss/mixins/_nav-divider.scss:
--------------------------------------------------------------------------------
1 | // Horizontal dividers
2 | //
3 | // Dividers (basically an hr) within dropdowns and nav lists
4 |
5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
6 | height: 0;
7 | margin: $margin-y 0;
8 | overflow: hidden;
9 | border-top: 1px solid $color;
10 | }
11 |
--------------------------------------------------------------------------------
/scss/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
4 | .page-link {
5 | padding: $padding-y $padding-x;
6 | font-size: $font-size;
7 | line-height: $line-height;
8 | }
9 |
10 | .page-item {
11 | &:first-child {
12 | .page-link {
13 | @include border-left-radius($border-radius);
14 | }
15 | }
16 | &:last-child {
17 | .page-link {
18 | @include border-right-radius($border-radius);
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/scss/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size or word-wrap.
4 | font-style: normal;
5 | font-weight: $font-weight-normal;
6 | line-height: $line-height-base;
7 | text-align: left; // Fallback for where `start` is not supported
8 | text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
9 | text-decoration: none;
10 | text-shadow: none;
11 | text-transform: none;
12 | letter-spacing: normal;
13 | word-break: normal;
14 | word-spacing: normal;
15 | white-space: normal;
16 | line-break: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/scss/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5 | resize: $direction; // Options: horizontal, vertical, both
6 | }
7 |
--------------------------------------------------------------------------------
/scss/mixins/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Only display content to screen readers
2 | //
3 | // See: https://a11yproject.com/posts/how-to-hide-content/
4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
5 |
6 | @mixin sr-only {
7 | position: absolute;
8 | width: 1px;
9 | height: 1px;
10 | padding: 0;
11 | overflow: hidden;
12 | clip: rect(0, 0, 0, 0);
13 | white-space: nowrap;
14 | border: 0;
15 | }
16 |
17 | // Use in conjunction with .sr-only to only display content when it's focused.
18 | //
19 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
20 | //
21 | // Credit: HTML5 Boilerplate
22 |
23 | @mixin sr-only-focusable {
24 | &:active,
25 | &:focus {
26 | position: static;
27 | width: auto;
28 | height: auto;
29 | overflow: visible;
30 | clip: auto;
31 | white-space: normal;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/scss/mixins/_size.scss:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | @mixin size($width, $height: $width) {
4 | width: $width;
5 | height: $height;
6 | }
7 |
--------------------------------------------------------------------------------
/scss/mixins/_table-row.scss:
--------------------------------------------------------------------------------
1 | // Tables
2 |
3 | @mixin table-row-variant($state, $background) {
4 | // Exact selectors below required to override `.table-striped` and prevent
5 | // inheritance to nested tables.
6 | .table-#{$state} {
7 | &,
8 | > th,
9 | > td {
10 | background-color: $background;
11 | }
12 | }
13 |
14 | // Hover states for `.table-hover`
15 | // Note: this is not available for cells or rows within `thead` or `tfoot`.
16 | .table-hover {
17 | $hover-background: darken($background, 5%);
18 |
19 | .table-#{$state} {
20 | @include hover {
21 | background-color: $hover-background;
22 |
23 | > td,
24 | > th {
25 | background-color: $hover-background;
26 | }
27 | }
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/scss/mixins/_text-emphasis.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Typography
4 |
5 | @mixin text-emphasis-variant($parent, $color) {
6 | #{$parent} {
7 | color: $color !important;
8 | }
9 | a#{$parent} {
10 | @include hover-focus {
11 | color: darken($color, 10%) !important;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/scss/mixins/_text-hide.scss:
--------------------------------------------------------------------------------
1 | // CSS image replacement
2 | @mixin text-hide($ignore-warning: false) {
3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
4 | font: 0/0 a;
5 | color: transparent;
6 | text-shadow: none;
7 | background-color: transparent;
8 | border: 0;
9 |
10 | @if ($ignore-warning != true) {
11 | @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/scss/mixins/_text-truncate.scss:
--------------------------------------------------------------------------------
1 | // Text truncate
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-truncate() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/scss/mixins/_transition.scss:
--------------------------------------------------------------------------------
1 | @mixin transition($transition...) {
2 | @if $enable-transitions {
3 | @if length($transition) == 0 {
4 | transition: $transition-base;
5 | } @else {
6 | transition: $transition;
7 | }
8 | }
9 |
10 | @media screen and (prefers-reduced-motion: reduce) {
11 | transition: none;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/scss/mixins/_visibility.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Visibility
4 |
5 | @mixin invisible($visibility) {
6 | visibility: $visibility !important;
7 | }
8 |
--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/bs4-sass-starter/2b6d3d1777d947635b74d545f3e004e51f706c98/scss/style.scss
--------------------------------------------------------------------------------
/scss/utilities/_align.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .align-baseline { vertical-align: baseline !important; } // Browser default
4 | .align-top { vertical-align: top !important; }
5 | .align-middle { vertical-align: middle !important; }
6 | .align-bottom { vertical-align: bottom !important; }
7 | .align-text-bottom { vertical-align: text-bottom !important; }
8 | .align-text-top { vertical-align: text-top !important; }
9 |
--------------------------------------------------------------------------------
/scss/utilities/_background.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $color, $value in $theme-colors {
4 | @include bg-variant(".bg-#{$color}", $value);
5 | }
6 |
7 | @if $enable-gradients {
8 | @each $color, $value in $theme-colors {
9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
10 | }
11 | }
12 |
13 | .bg-white {
14 | background-color: $white !important;
15 | }
16 |
17 | .bg-transparent {
18 | background-color: transparent !important;
19 | }
20 |
--------------------------------------------------------------------------------
/scss/utilities/_borders.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Border
5 | //
6 |
7 | .border { border: $border-width solid $border-color !important; }
8 | .border-top { border-top: $border-width solid $border-color !important; }
9 | .border-right { border-right: $border-width solid $border-color !important; }
10 | .border-bottom { border-bottom: $border-width solid $border-color !important; }
11 | .border-left { border-left: $border-width solid $border-color !important; }
12 |
13 | .border-0 { border: 0 !important; }
14 | .border-top-0 { border-top: 0 !important; }
15 | .border-right-0 { border-right: 0 !important; }
16 | .border-bottom-0 { border-bottom: 0 !important; }
17 | .border-left-0 { border-left: 0 !important; }
18 |
19 | @each $color, $value in $theme-colors {
20 | .border-#{$color} {
21 | border-color: $value !important;
22 | }
23 | }
24 |
25 | .border-white {
26 | border-color: $white !important;
27 | }
28 |
29 | //
30 | // Border-radius
31 | //
32 |
33 | .rounded {
34 | border-radius: $border-radius !important;
35 | }
36 | .rounded-top {
37 | border-top-left-radius: $border-radius !important;
38 | border-top-right-radius: $border-radius !important;
39 | }
40 | .rounded-right {
41 | border-top-right-radius: $border-radius !important;
42 | border-bottom-right-radius: $border-radius !important;
43 | }
44 | .rounded-bottom {
45 | border-bottom-right-radius: $border-radius !important;
46 | border-bottom-left-radius: $border-radius !important;
47 | }
48 | .rounded-left {
49 | border-top-left-radius: $border-radius !important;
50 | border-bottom-left-radius: $border-radius !important;
51 | }
52 |
53 | .rounded-circle {
54 | border-radius: 50% !important;
55 | }
56 |
57 | .rounded-0 {
58 | border-radius: 0 !important;
59 | }
60 |
--------------------------------------------------------------------------------
/scss/utilities/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | @include clearfix();
3 | }
4 |
--------------------------------------------------------------------------------
/scss/utilities/_display.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Utilities for common `display` values
5 | //
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | .d#{$infix}-none { display: none !important; }
12 | .d#{$infix}-inline { display: inline !important; }
13 | .d#{$infix}-inline-block { display: inline-block !important; }
14 | .d#{$infix}-block { display: block !important; }
15 | .d#{$infix}-table { display: table !important; }
16 | .d#{$infix}-table-row { display: table-row !important; }
17 | .d#{$infix}-table-cell { display: table-cell !important; }
18 | .d#{$infix}-flex { display: flex !important; }
19 | .d#{$infix}-inline-flex { display: inline-flex !important; }
20 | }
21 | }
22 |
23 |
24 | //
25 | // Utilities for toggling `display` in print
26 | //
27 |
28 | @media print {
29 | .d-print-none { display: none !important; }
30 | .d-print-inline { display: inline !important; }
31 | .d-print-inline-block { display: inline-block !important; }
32 | .d-print-block { display: block !important; }
33 | .d-print-table { display: table !important; }
34 | .d-print-table-row { display: table-row !important; }
35 | .d-print-table-cell { display: table-cell !important; }
36 | .d-print-flex { display: flex !important; }
37 | .d-print-inline-flex { display: inline-flex !important; }
38 | }
39 |
--------------------------------------------------------------------------------
/scss/utilities/_embed.scss:
--------------------------------------------------------------------------------
1 | // Credit: Nicolas Gallagher and SUIT CSS.
2 |
3 | .embed-responsive {
4 | position: relative;
5 | display: block;
6 | width: 100%;
7 | padding: 0;
8 | overflow: hidden;
9 |
10 | &::before {
11 | display: block;
12 | content: "";
13 | }
14 |
15 | .embed-responsive-item,
16 | iframe,
17 | embed,
18 | object,
19 | video {
20 | position: absolute;
21 | top: 0;
22 | bottom: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 100%;
26 | border: 0;
27 | }
28 | }
29 |
30 | .embed-responsive-21by9 {
31 | &::before {
32 | padding-top: percentage(9 / 21);
33 | }
34 | }
35 |
36 | .embed-responsive-16by9 {
37 | &::before {
38 | padding-top: percentage(9 / 16);
39 | }
40 | }
41 |
42 | .embed-responsive-4by3 {
43 | &::before {
44 | padding-top: percentage(3 / 4);
45 | }
46 | }
47 |
48 | .embed-responsive-1by1 {
49 | &::before {
50 | padding-top: percentage(1 / 1);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/scss/utilities/_flex.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Flex variation
4 | //
5 | // Custom styles for additional flex alignment options.
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | .flex#{$infix}-row { flex-direction: row !important; }
12 | .flex#{$infix}-column { flex-direction: column !important; }
13 | .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
14 | .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
15 |
16 | .flex#{$infix}-wrap { flex-wrap: wrap !important; }
17 | .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
18 | .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
19 | .flex#{$infix}-fill { flex: 1 1 auto !important; }
20 | .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
21 | .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
22 | .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
23 | .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
24 |
25 | .justify-content#{$infix}-start { justify-content: flex-start !important; }
26 | .justify-content#{$infix}-end { justify-content: flex-end !important; }
27 | .justify-content#{$infix}-center { justify-content: center !important; }
28 | .justify-content#{$infix}-between { justify-content: space-between !important; }
29 | .justify-content#{$infix}-around { justify-content: space-around !important; }
30 |
31 | .align-items#{$infix}-start { align-items: flex-start !important; }
32 | .align-items#{$infix}-end { align-items: flex-end !important; }
33 | .align-items#{$infix}-center { align-items: center !important; }
34 | .align-items#{$infix}-baseline { align-items: baseline !important; }
35 | .align-items#{$infix}-stretch { align-items: stretch !important; }
36 |
37 | .align-content#{$infix}-start { align-content: flex-start !important; }
38 | .align-content#{$infix}-end { align-content: flex-end !important; }
39 | .align-content#{$infix}-center { align-content: center !important; }
40 | .align-content#{$infix}-between { align-content: space-between !important; }
41 | .align-content#{$infix}-around { align-content: space-around !important; }
42 | .align-content#{$infix}-stretch { align-content: stretch !important; }
43 |
44 | .align-self#{$infix}-auto { align-self: auto !important; }
45 | .align-self#{$infix}-start { align-self: flex-start !important; }
46 | .align-self#{$infix}-end { align-self: flex-end !important; }
47 | .align-self#{$infix}-center { align-self: center !important; }
48 | .align-self#{$infix}-baseline { align-self: baseline !important; }
49 | .align-self#{$infix}-stretch { align-self: stretch !important; }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/scss/utilities/_float.scss:
--------------------------------------------------------------------------------
1 | @each $breakpoint in map-keys($grid-breakpoints) {
2 | @include media-breakpoint-up($breakpoint) {
3 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
4 |
5 | .float#{$infix}-left { @include float-left; }
6 | .float#{$infix}-right { @include float-right; }
7 | .float#{$infix}-none { @include float-none; }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/scss/utilities/_position.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Common values
4 |
5 | // Sass list not in variables since it's not intended for customization.
6 | // stylelint-disable-next-line scss/dollar-variable-default
7 | $positions: static, relative, absolute, fixed, sticky;
8 |
9 | @each $position in $positions {
10 | .position-#{$position} { position: $position !important; }
11 | }
12 |
13 | // Shorthand
14 |
15 | .fixed-top {
16 | position: fixed;
17 | top: 0;
18 | right: 0;
19 | left: 0;
20 | z-index: $zindex-fixed;
21 | }
22 |
23 | .fixed-bottom {
24 | position: fixed;
25 | right: 0;
26 | bottom: 0;
27 | left: 0;
28 | z-index: $zindex-fixed;
29 | }
30 |
31 | .sticky-top {
32 | @supports (position: sticky) {
33 | position: sticky;
34 | top: 0;
35 | z-index: $zindex-sticky;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/scss/utilities/_screenreaders.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Screenreaders
3 | //
4 |
5 | .sr-only {
6 | @include sr-only();
7 | }
8 |
9 | .sr-only-focusable {
10 | @include sr-only-focusable();
11 | }
12 |
--------------------------------------------------------------------------------
/scss/utilities/_shadows.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .shadow-sm { box-shadow: $box-shadow-sm !important; }
4 | .shadow { box-shadow: $box-shadow !important; }
5 | .shadow-lg { box-shadow: $box-shadow-lg !important; }
6 | .shadow-none { box-shadow: none !important; }
7 |
--------------------------------------------------------------------------------
/scss/utilities/_sizing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Width and height
4 |
5 | @each $prop, $abbrev in (width: w, height: h) {
6 | @each $size, $length in $sizes {
7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
8 | }
9 | }
10 |
11 | .mw-100 { max-width: 100% !important; }
12 | .mh-100 { max-height: 100% !important; }
13 |
--------------------------------------------------------------------------------
/scss/utilities/_spacing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Margin and Padding
4 |
5 | @each $breakpoint in map-keys($grid-breakpoints) {
6 | @include media-breakpoint-up($breakpoint) {
7 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8 |
9 | @each $prop, $abbrev in (margin: m, padding: p) {
10 | @each $size, $length in $spacers {
11 |
12 | .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
13 | .#{$abbrev}t#{$infix}-#{$size},
14 | .#{$abbrev}y#{$infix}-#{$size} {
15 | #{$prop}-top: $length !important;
16 | }
17 | .#{$abbrev}r#{$infix}-#{$size},
18 | .#{$abbrev}x#{$infix}-#{$size} {
19 | #{$prop}-right: $length !important;
20 | }
21 | .#{$abbrev}b#{$infix}-#{$size},
22 | .#{$abbrev}y#{$infix}-#{$size} {
23 | #{$prop}-bottom: $length !important;
24 | }
25 | .#{$abbrev}l#{$infix}-#{$size},
26 | .#{$abbrev}x#{$infix}-#{$size} {
27 | #{$prop}-left: $length !important;
28 | }
29 | }
30 | }
31 |
32 | // Some special margin utils
33 | .m#{$infix}-auto { margin: auto !important; }
34 | .mt#{$infix}-auto,
35 | .my#{$infix}-auto {
36 | margin-top: auto !important;
37 | }
38 | .mr#{$infix}-auto,
39 | .mx#{$infix}-auto {
40 | margin-right: auto !important;
41 | }
42 | .mb#{$infix}-auto,
43 | .my#{$infix}-auto {
44 | margin-bottom: auto !important;
45 | }
46 | .ml#{$infix}-auto,
47 | .mx#{$infix}-auto {
48 | margin-left: auto !important;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/scss/utilities/_text.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Text
5 | //
6 |
7 | .text-monospace { font-family: $font-family-monospace; }
8 |
9 | // Alignment
10 |
11 | .text-justify { text-align: justify !important; }
12 | .text-nowrap { white-space: nowrap !important; }
13 | .text-truncate { @include text-truncate; }
14 |
15 | // Responsive alignment
16 |
17 | @each $breakpoint in map-keys($grid-breakpoints) {
18 | @include media-breakpoint-up($breakpoint) {
19 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
20 |
21 | .text#{$infix}-left { text-align: left !important; }
22 | .text#{$infix}-right { text-align: right !important; }
23 | .text#{$infix}-center { text-align: center !important; }
24 | }
25 | }
26 |
27 | // Transformation
28 |
29 | .text-lowercase { text-transform: lowercase !important; }
30 | .text-uppercase { text-transform: uppercase !important; }
31 | .text-capitalize { text-transform: capitalize !important; }
32 |
33 | // Weight and italics
34 |
35 | .font-weight-light { font-weight: $font-weight-light !important; }
36 | .font-weight-normal { font-weight: $font-weight-normal !important; }
37 | .font-weight-bold { font-weight: $font-weight-bold !important; }
38 | .font-italic { font-style: italic !important; }
39 |
40 | // Contextual colors
41 |
42 | .text-white { color: $white !important; }
43 |
44 | @each $color, $value in $theme-colors {
45 | @include text-emphasis-variant(".text-#{$color}", $value);
46 | }
47 |
48 | .text-body { color: $body-color !important; }
49 | .text-muted { color: $text-muted !important; }
50 |
51 | .text-black-50 { color: rgba($black, .5) !important; }
52 | .text-white-50 { color: rgba($white, .5) !important; }
53 |
54 | // Misc
55 |
56 | .text-hide {
57 | @include text-hide($ignore-warning: true);
58 | }
59 |
--------------------------------------------------------------------------------
/scss/utilities/_visibility.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Visibility utilities
3 | //
4 |
5 | .visible {
6 | @include invisible(visible);
7 | }
8 |
9 | .invisible {
10 | @include invisible(hidden);
11 | }
12 |
--------------------------------------------------------------------------------
|
