bootstrap 4.5.2 → 5.0.0.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/javascripts/bootstrap-sprockets.js +12 -8
- data/assets/javascripts/bootstrap.js +1876 -1220
- data/assets/javascripts/bootstrap.min.js +2 -2
- data/assets/javascripts/bootstrap/alert.js +133 -48
- data/assets/javascripts/bootstrap/button.js +56 -123
- data/assets/javascripts/bootstrap/carousel.js +268 -129
- data/assets/javascripts/bootstrap/collapse.js +285 -106
- data/assets/javascripts/bootstrap/dom/data.js +81 -0
- data/assets/javascripts/bootstrap/dom/event-handler.js +311 -0
- data/assets/javascripts/bootstrap/dom/manipulator.js +100 -0
- data/assets/javascripts/bootstrap/dom/polyfill.js +110 -0
- data/assets/javascripts/bootstrap/dom/selector-engine.js +98 -0
- data/assets/javascripts/bootstrap/dropdown.js +235 -161
- data/assets/javascripts/bootstrap/modal.js +322 -193
- data/assets/javascripts/bootstrap/popover.js +72 -41
- data/assets/javascripts/bootstrap/scrollspy.js +151 -56
- data/assets/javascripts/bootstrap/tab.js +151 -64
- data/assets/javascripts/bootstrap/toast.js +163 -65
- data/assets/javascripts/bootstrap/tooltip.js +336 -155
- data/assets/stylesheets/_bootstrap-grid.scss +51 -15
- data/assets/stylesheets/_bootstrap-reboot.scss +4 -1
- data/assets/stylesheets/_bootstrap.scss +14 -8
- data/assets/stylesheets/bootstrap/_alert.scss +3 -3
- data/assets/stylesheets/bootstrap/_badge.scss +2 -27
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +3 -17
- data/assets/stylesheets/bootstrap/_button-group.scss +16 -38
- data/assets/stylesheets/bootstrap/_buttons.scss +27 -45
- data/assets/stylesheets/bootstrap/_card.scss +18 -64
- data/assets/stylesheets/bootstrap/_carousel.scss +13 -15
- data/assets/stylesheets/bootstrap/_close.scss +9 -13
- data/assets/stylesheets/bootstrap/_containers.scss +41 -0
- data/assets/stylesheets/bootstrap/_dropdown.scss +10 -7
- data/assets/stylesheets/bootstrap/_forms.scss +9 -347
- data/assets/stylesheets/bootstrap/_functions.scss +82 -20
- data/assets/stylesheets/bootstrap/_grid.scss +3 -54
- data/assets/stylesheets/bootstrap/_helpers.scss +7 -0
- data/assets/stylesheets/bootstrap/_list-group.scss +6 -3
- data/assets/stylesheets/bootstrap/_mixins.scss +6 -12
- data/assets/stylesheets/bootstrap/_modal.scss +34 -39
- data/assets/stylesheets/bootstrap/_nav.scss +8 -8
- data/assets/stylesheets/bootstrap/_navbar.scss +42 -74
- data/assets/stylesheets/bootstrap/_pagination.scss +7 -20
- data/assets/stylesheets/bootstrap/_popover.scss +5 -5
- data/assets/stylesheets/bootstrap/_progress.scss +2 -4
- data/assets/stylesheets/bootstrap/_reboot.scss +300 -164
- data/assets/stylesheets/bootstrap/_root.scss +5 -9
- data/assets/stylesheets/bootstrap/_spinners.scss +2 -2
- data/assets/stylesheets/bootstrap/_tables.scss +80 -114
- data/assets/stylesheets/bootstrap/_toasts.scss +2 -4
- data/assets/stylesheets/bootstrap/_tooltip.scss +5 -5
- data/assets/stylesheets/bootstrap/_transitions.scss +0 -1
- data/assets/stylesheets/bootstrap/_type.scss +38 -59
- data/assets/stylesheets/bootstrap/_utilities.scss +503 -18
- data/assets/stylesheets/bootstrap/_variables.scss +544 -424
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
- data/assets/stylesheets/bootstrap/forms/_form-check.scss +142 -0
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +116 -0
- data/assets/stylesheets/bootstrap/forms/_form-file.scss +91 -0
- data/assets/stylesheets/bootstrap/forms/_form-range.scss +136 -0
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +82 -0
- data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
- data/assets/stylesheets/bootstrap/forms/_input-group.scss +140 -0
- data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
- data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
- data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
- data/assets/stylesheets/bootstrap/helpers/_embed.scss +31 -0
- data/assets/stylesheets/bootstrap/helpers/_position.scss +30 -0
- data/assets/stylesheets/bootstrap/helpers/_screenreaders.scss +8 -0
- data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
- data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -4
- data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +11 -8
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +62 -47
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +4 -4
- data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_container.scss +9 -0
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +22 -67
- data/assets/stylesheets/bootstrap/mixins/_gradients.scss +9 -11
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +84 -32
- data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -1
- data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +15 -8
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
- data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +16 -22
- data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +21 -0
- data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +49 -0
- data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
- data/assets/stylesheets/bootstrap/vendor/_rfs.scss +234 -126
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +3 -3
- metadata +31 -39
- data/assets/javascripts/bootstrap/util.js +0 -192
- data/assets/stylesheets/bootstrap/_code.scss +0 -48
- data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -523
- data/assets/stylesheets/bootstrap/_input-group.scss +0 -192
- data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
- data/assets/stylesheets/bootstrap/_media.scss +0 -8
- data/assets/stylesheets/bootstrap/_print.scss +0 -141
- data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
- data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
- data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
- data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
- data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
- data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
- data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
- data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
- data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
- data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
- data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
- data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
- data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
- data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
- data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
- data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
- data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
- data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
- data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
- data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
- data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
- data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
- data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
- data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
- data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
- data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
- data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
- data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
@@ -32,6 +32,29 @@
|
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
35
|
+
// Internal Bootstrap function to turn maps into its negative variant.
|
36
|
+
// It prefixes the keys with `n` and makes the value negative.
|
37
|
+
@function negativify-map($map) {
|
38
|
+
$result: ();
|
39
|
+
@each $key, $value in $map {
|
40
|
+
@if $key != 0 {
|
41
|
+
$result: map-merge($result, ("n" + $key: (-$value)));
|
42
|
+
}
|
43
|
+
}
|
44
|
+
@return $result;
|
45
|
+
}
|
46
|
+
|
47
|
+
// Get multiple keys from a sass map
|
48
|
+
@function map-get-multiple($map, $values) {
|
49
|
+
$result: ();
|
50
|
+
@each $key, $value in $map {
|
51
|
+
@if (index($values, $key) != null) {
|
52
|
+
$result: map-merge($result, ($key: $value));
|
53
|
+
}
|
54
|
+
}
|
55
|
+
@return $result;
|
56
|
+
}
|
57
|
+
|
35
58
|
// Replace `$search` with `$replace` in `$string`
|
36
59
|
// Used on our SVG icon backgrounds for custom forms.
|
37
60
|
//
|
@@ -67,41 +90,80 @@
|
|
67
90
|
}
|
68
91
|
|
69
92
|
// Color contrast
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
93
|
+
// See https://github.com/twbs/bootstrap/pull/30168
|
94
|
+
|
95
|
+
// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
|
96
|
+
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
|
97
|
+
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
98
|
+
|
99
|
+
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
100
|
+
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
101
|
+
$max-ratio: 0;
|
102
|
+
$max-ratio-color: null;
|
103
|
+
|
104
|
+
@each $color in $foregrounds {
|
105
|
+
$contrast-ratio: contrast-ratio($background, $color);
|
106
|
+
@if $contrast-ratio > $min-contrast-ratio {
|
107
|
+
@return $color;
|
108
|
+
} @else if $contrast-ratio > $max-ratio {
|
109
|
+
$max-ratio: $contrast-ratio;
|
110
|
+
$max-ratio-color: $color;
|
111
|
+
}
|
112
|
+
}
|
74
113
|
|
75
|
-
|
114
|
+
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…";
|
76
115
|
|
77
|
-
@
|
78
|
-
@return $dark;
|
79
|
-
} @else {
|
80
|
-
@return $light;
|
81
|
-
}
|
116
|
+
@return $max-ratio-color;
|
82
117
|
}
|
83
118
|
|
84
|
-
|
85
|
-
|
86
|
-
|
119
|
+
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
120
|
+
$l1: luminance($background);
|
121
|
+
$l2: luminance(opaque($background, $foreground));
|
122
|
+
|
123
|
+
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
|
87
124
|
}
|
88
125
|
|
89
|
-
|
90
|
-
|
126
|
+
// Return WCAG2.0 relative luminance
|
127
|
+
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
128
|
+
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
129
|
+
@function luminance($color) {
|
130
|
+
$rgb: (
|
131
|
+
"r": red($color),
|
132
|
+
"g": green($color),
|
133
|
+
"b": blue($color)
|
134
|
+
);
|
135
|
+
|
136
|
+
@each $name, $value in $rgb {
|
137
|
+
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
|
138
|
+
$rgb: map-merge($rgb, ($name: $value));
|
139
|
+
}
|
140
|
+
|
141
|
+
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
|
91
142
|
}
|
92
143
|
|
93
|
-
|
94
|
-
|
144
|
+
// Return opaque color
|
145
|
+
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
146
|
+
@function opaque($background, $foreground) {
|
147
|
+
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
|
95
148
|
}
|
96
149
|
|
97
|
-
// Request a
|
98
|
-
|
99
|
-
|
150
|
+
// Request a color level
|
151
|
+
// scss-docs-start color-level
|
152
|
+
@function color-level($color: $primary, $level: 0) {
|
100
153
|
$color-base: if($level > 0, $black, $white);
|
101
154
|
$level: abs($level);
|
102
155
|
|
103
156
|
@return mix($color-base, $color, $level * $theme-color-interval);
|
104
157
|
}
|
158
|
+
// scss-docs-end color-level
|
159
|
+
|
160
|
+
@function tint-color($color, $level) {
|
161
|
+
@return mix(white, $color, $level * $theme-color-interval);
|
162
|
+
}
|
163
|
+
|
164
|
+
@function shade-color($color, $level) {
|
165
|
+
@return mix(black, $color, $level * $theme-color-interval);
|
166
|
+
}
|
105
167
|
|
106
168
|
// Return valid calc
|
107
169
|
@function add($value1, $value2, $return-calc: true) {
|
@@ -1,46 +1,3 @@
|
|
1
|
-
// Container widths
|
2
|
-
//
|
3
|
-
// Set the container width, and override it for fixed navbars in media queries.
|
4
|
-
|
5
|
-
@if $enable-grid-classes {
|
6
|
-
// Single container class with breakpoint max-widths
|
7
|
-
.container,
|
8
|
-
// 100% wide container at all breakpoints
|
9
|
-
.container-fluid {
|
10
|
-
@include make-container();
|
11
|
-
}
|
12
|
-
|
13
|
-
// Responsive containers that are 100% wide until a breakpoint
|
14
|
-
@each $breakpoint, $container-max-width in $container-max-widths {
|
15
|
-
.container-#{$breakpoint} {
|
16
|
-
@extend .container-fluid;
|
17
|
-
}
|
18
|
-
|
19
|
-
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
20
|
-
%responsive-container-#{$breakpoint} {
|
21
|
-
max-width: $container-max-width;
|
22
|
-
}
|
23
|
-
|
24
|
-
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
25
|
-
$extend-breakpoint: true;
|
26
|
-
|
27
|
-
@each $name, $width in $grid-breakpoints {
|
28
|
-
@if ($extend-breakpoint) {
|
29
|
-
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
30
|
-
@extend %responsive-container-#{$breakpoint};
|
31
|
-
}
|
32
|
-
|
33
|
-
// Once the current breakpoint is reached, stop extending
|
34
|
-
@if ($breakpoint == $name) {
|
35
|
-
$extend-breakpoint: false;
|
36
|
-
}
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
|
-
|
44
1
|
// Row
|
45
2
|
//
|
46
3
|
// Rows contain your columns.
|
@@ -48,22 +5,14 @@
|
|
48
5
|
@if $enable-grid-classes {
|
49
6
|
.row {
|
50
7
|
@include make-row();
|
51
|
-
}
|
52
8
|
|
53
|
-
|
54
|
-
|
55
|
-
.no-gutters {
|
56
|
-
margin-right: 0;
|
57
|
-
margin-left: 0;
|
58
|
-
|
59
|
-
> .col,
|
60
|
-
> [class*="col-"] {
|
61
|
-
padding-right: 0;
|
62
|
-
padding-left: 0;
|
9
|
+
> * {
|
10
|
+
@include make-col-ready();
|
63
11
|
}
|
64
12
|
}
|
65
13
|
}
|
66
14
|
|
15
|
+
|
67
16
|
// Columns
|
68
17
|
//
|
69
18
|
// Common styles for small and large grid columns
|
@@ -24,7 +24,8 @@
|
|
24
24
|
text-align: inherit; // For `<button>`s (anchors inherit)
|
25
25
|
|
26
26
|
// Hover state
|
27
|
-
|
27
|
+
&:hover,
|
28
|
+
&:focus {
|
28
29
|
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
29
30
|
color: $list-group-action-hover-color;
|
30
31
|
text-decoration: none;
|
@@ -144,11 +145,13 @@
|
|
144
145
|
}
|
145
146
|
|
146
147
|
|
147
|
-
//
|
148
|
+
// scss-docs-start list-group-modifiers
|
149
|
+
// List group contextual variants
|
148
150
|
//
|
149
151
|
// Add modifier classes to change text and background color on individual items.
|
150
152
|
// Organizationally, this must come after the `:hover` states.
|
151
153
|
|
152
154
|
@each $color, $value in $theme-colors {
|
153
|
-
@include list-group-item-variant($color,
|
155
|
+
@include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
|
154
156
|
}
|
157
|
+
// scss-docs-end list-group-modifiers
|
@@ -8,19 +8,16 @@
|
|
8
8
|
// Deprecate
|
9
9
|
@import "mixins/deprecate";
|
10
10
|
|
11
|
-
//
|
11
|
+
// Helpers
|
12
12
|
@import "mixins/breakpoints";
|
13
|
-
@import "mixins/hover";
|
14
13
|
@import "mixins/image";
|
15
|
-
@import "mixins/badge";
|
16
14
|
@import "mixins/resize";
|
17
15
|
@import "mixins/screen-reader";
|
18
|
-
@import "mixins/size";
|
19
16
|
@import "mixins/reset-text";
|
20
|
-
@import "mixins/text-emphasis";
|
21
|
-
@import "mixins/text-hide";
|
22
17
|
@import "mixins/text-truncate";
|
23
|
-
|
18
|
+
|
19
|
+
// Utilities
|
20
|
+
@import "mixins/utilities";
|
24
21
|
|
25
22
|
// Components
|
26
23
|
@import "mixins/alert";
|
@@ -29,12 +26,10 @@
|
|
29
26
|
@import "mixins/pagination";
|
30
27
|
@import "mixins/lists";
|
31
28
|
@import "mixins/list-group";
|
32
|
-
@import "mixins/nav-divider";
|
33
29
|
@import "mixins/forms";
|
34
|
-
@import "mixins/table-
|
30
|
+
@import "mixins/table-variants";
|
35
31
|
|
36
32
|
// Skins
|
37
|
-
@import "mixins/background-variant";
|
38
33
|
@import "mixins/border-radius";
|
39
34
|
@import "mixins/box-shadow";
|
40
35
|
@import "mixins/gradients";
|
@@ -42,6 +37,5 @@
|
|
42
37
|
|
43
38
|
// Layout
|
44
39
|
@import "mixins/clearfix";
|
45
|
-
@import "mixins/
|
40
|
+
@import "mixins/container";
|
46
41
|
@import "mixins/grid";
|
47
|
-
@import "mixins/float";
|
@@ -56,19 +56,12 @@
|
|
56
56
|
}
|
57
57
|
|
58
58
|
.modal-dialog-scrollable {
|
59
|
-
display: flex; // IE10/11
|
60
59
|
max-height: subtract(100%, $modal-dialog-margin * 2);
|
61
60
|
|
62
61
|
.modal-content {
|
63
|
-
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
|
64
62
|
overflow: hidden;
|
65
63
|
}
|
66
64
|
|
67
|
-
.modal-header,
|
68
|
-
.modal-footer {
|
69
|
-
flex-shrink: 0;
|
70
|
-
}
|
71
|
-
|
72
65
|
.modal-body {
|
73
66
|
overflow-y: auto;
|
74
67
|
}
|
@@ -78,29 +71,6 @@
|
|
78
71
|
display: flex;
|
79
72
|
align-items: center;
|
80
73
|
min-height: subtract(100%, $modal-dialog-margin * 2);
|
81
|
-
|
82
|
-
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
|
83
|
-
&::before {
|
84
|
-
display: block; // IE10
|
85
|
-
height: subtract(100vh, $modal-dialog-margin * 2);
|
86
|
-
height: min-content; // Reset height to 0 except on IE
|
87
|
-
content: "";
|
88
|
-
}
|
89
|
-
|
90
|
-
// Ensure `.modal-body` shows scrollbar (IE10/11)
|
91
|
-
&.modal-dialog-scrollable {
|
92
|
-
flex-direction: column;
|
93
|
-
justify-content: center;
|
94
|
-
height: 100%;
|
95
|
-
|
96
|
-
.modal-content {
|
97
|
-
max-height: none;
|
98
|
-
}
|
99
|
-
|
100
|
-
&::before {
|
101
|
-
content: none;
|
102
|
-
}
|
103
|
-
}
|
104
74
|
}
|
105
75
|
|
106
76
|
// Actual modal
|
@@ -140,6 +110,7 @@
|
|
140
110
|
// Top section of the modal w/ title and dismiss
|
141
111
|
.modal-header {
|
142
112
|
display: flex;
|
113
|
+
flex-shrink: 0;
|
143
114
|
align-items: flex-start; // so the close btn always stays on the upper right corner
|
144
115
|
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
145
116
|
padding: $modal-header-padding;
|
@@ -173,6 +144,7 @@
|
|
173
144
|
.modal-footer {
|
174
145
|
display: flex;
|
175
146
|
flex-wrap: wrap;
|
147
|
+
flex-shrink: 0;
|
176
148
|
align-items: center; // vertically center
|
177
149
|
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
178
150
|
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
@@ -206,19 +178,10 @@
|
|
206
178
|
|
207
179
|
.modal-dialog-scrollable {
|
208
180
|
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
209
|
-
|
210
|
-
.modal-content {
|
211
|
-
max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
212
|
-
}
|
213
181
|
}
|
214
182
|
|
215
183
|
.modal-dialog-centered {
|
216
184
|
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
217
|
-
|
218
|
-
&::before {
|
219
|
-
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
220
|
-
height: min-content;
|
221
|
-
}
|
222
185
|
}
|
223
186
|
|
224
187
|
.modal-content {
|
@@ -238,3 +201,35 @@
|
|
238
201
|
@include media-breakpoint-up(xl) {
|
239
202
|
.modal-xl { max-width: $modal-xl; }
|
240
203
|
}
|
204
|
+
|
205
|
+
@each $breakpoint in map-keys($grid-breakpoints) {
|
206
|
+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
207
|
+
$postfix: if($infix != "", $infix + "-down", "");
|
208
|
+
|
209
|
+
@include media-breakpoint-down($breakpoint) {
|
210
|
+
.modal-fullscreen#{$postfix} {
|
211
|
+
width: 100vw;
|
212
|
+
max-width: none;
|
213
|
+
height: 100%;
|
214
|
+
margin: 0;
|
215
|
+
|
216
|
+
.modal-content {
|
217
|
+
height: 100%;
|
218
|
+
border: 0;
|
219
|
+
@include border-radius(0);
|
220
|
+
}
|
221
|
+
|
222
|
+
.modal-header {
|
223
|
+
@include border-radius(0);
|
224
|
+
}
|
225
|
+
|
226
|
+
.modal-body {
|
227
|
+
overflow-y: auto;
|
228
|
+
}
|
229
|
+
|
230
|
+
.modal-footer {
|
231
|
+
@include border-radius(0);
|
232
|
+
}
|
233
|
+
}
|
234
|
+
}
|
235
|
+
}
|
@@ -15,9 +15,11 @@
|
|
15
15
|
display: block;
|
16
16
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
17
17
|
text-decoration: if($link-decoration == none, null, none);
|
18
|
+
@include transition($nav-link-transition);
|
18
19
|
|
19
|
-
|
20
|
-
|
20
|
+
&:hover,
|
21
|
+
&:focus {
|
22
|
+
text-decoration: if($link-hover-decoration == underline, none, null);
|
21
23
|
}
|
22
24
|
|
23
25
|
// Disabled state lightens text
|
@@ -35,15 +37,13 @@
|
|
35
37
|
.nav-tabs {
|
36
38
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
37
39
|
|
38
|
-
.nav-item {
|
39
|
-
margin-bottom: -$nav-tabs-border-width;
|
40
|
-
}
|
41
|
-
|
42
40
|
.nav-link {
|
41
|
+
margin-bottom: -$nav-tabs-border-width;
|
43
42
|
border: $nav-tabs-border-width solid transparent;
|
44
43
|
@include border-top-radius($nav-tabs-border-radius);
|
45
44
|
|
46
|
-
|
45
|
+
&:hover,
|
46
|
+
&:focus {
|
47
47
|
border-color: $nav-tabs-link-hover-border-color;
|
48
48
|
}
|
49
49
|
|
@@ -82,7 +82,7 @@
|
|
82
82
|
.nav-link.active,
|
83
83
|
.show > .nav-link {
|
84
84
|
color: $nav-pills-link-active-color;
|
85
|
-
|
85
|
+
@include gradient-bg($nav-pills-link-active-bg);
|
86
86
|
}
|
87
87
|
}
|
88
88
|
|
@@ -4,7 +4,6 @@
|
|
4
4
|
// Navbar brand
|
5
5
|
// Navbar nav
|
6
6
|
// Navbar text
|
7
|
-
// Navbar divider
|
8
7
|
// Responsive navbar
|
9
8
|
// Navbar position
|
10
9
|
// Navbar themes
|
@@ -21,19 +20,24 @@
|
|
21
20
|
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
22
21
|
align-items: center;
|
23
22
|
justify-content: space-between; // space out brand from logo
|
24
|
-
padding: $navbar-padding-y
|
23
|
+
padding-top: $navbar-padding-y;
|
24
|
+
padding-right: $navbar-padding-x; // default: null
|
25
|
+
padding-bottom: $navbar-padding-y;
|
26
|
+
padding-left: $navbar-padding-x; // default: null
|
27
|
+
@include gradient-bg();
|
25
28
|
|
26
29
|
// Because flex properties aren't inherited, we need to redeclare these first
|
27
30
|
// few properties so that content nested within behave properly.
|
31
|
+
// The `flex-wrap` property is inherited to simplify the expanded navbars
|
28
32
|
%container-flex-properties {
|
29
33
|
display: flex;
|
30
|
-
flex-wrap:
|
34
|
+
flex-wrap: inherit;
|
31
35
|
align-items: center;
|
32
36
|
justify-content: space-between;
|
33
37
|
}
|
34
38
|
|
35
|
-
.container,
|
36
|
-
.container-fluid {
|
39
|
+
> .container,
|
40
|
+
> .container-fluid {
|
37
41
|
@extend %container-flex-properties;
|
38
42
|
}
|
39
43
|
|
@@ -50,16 +54,16 @@
|
|
50
54
|
// Used for brand, project, or site names.
|
51
55
|
|
52
56
|
.navbar-brand {
|
53
|
-
display: inline-block;
|
54
57
|
padding-top: $navbar-brand-padding-y;
|
55
58
|
padding-bottom: $navbar-brand-padding-y;
|
56
|
-
margin-right: $navbar-
|
59
|
+
margin-right: $navbar-brand-margin-right;
|
57
60
|
@include font-size($navbar-brand-font-size);
|
58
|
-
|
61
|
+
text-decoration: if($link-decoration == none, null, none);
|
59
62
|
white-space: nowrap;
|
60
63
|
|
61
|
-
|
62
|
-
|
64
|
+
&:hover,
|
65
|
+
&:focus {
|
66
|
+
text-decoration: if($link-hover-decoration == underline, none, null);
|
63
67
|
}
|
64
68
|
}
|
65
69
|
|
@@ -82,7 +86,6 @@
|
|
82
86
|
|
83
87
|
.dropdown-menu {
|
84
88
|
position: static;
|
85
|
-
float: none;
|
86
89
|
}
|
87
90
|
}
|
88
91
|
|
@@ -92,7 +95,6 @@
|
|
92
95
|
//
|
93
96
|
|
94
97
|
.navbar-text {
|
95
|
-
display: inline-block;
|
96
98
|
padding-top: $nav-link-padding-y;
|
97
99
|
padding-bottom: $nav-link-padding-y;
|
98
100
|
}
|
@@ -107,11 +109,10 @@
|
|
107
109
|
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
|
108
110
|
// on the `.navbar` parent.
|
109
111
|
.navbar-collapse {
|
110
|
-
flex-basis: 100%;
|
111
|
-
flex-grow: 1;
|
112
112
|
// For always expanded or extra full navbars, ensure content aligns itself
|
113
113
|
// properly vertically. Can be easily overridden with flex utilities.
|
114
114
|
align-items: center;
|
115
|
+
width: 100%;
|
115
116
|
}
|
116
117
|
|
117
118
|
// Button for toggling the navbar when in its collapsed state
|
@@ -122,10 +123,17 @@
|
|
122
123
|
background-color: transparent; // remove default button style
|
123
124
|
border: $border-width solid transparent; // remove default button style
|
124
125
|
@include border-radius($navbar-toggler-border-radius);
|
126
|
+
@include transition($navbar-toggler-transition);
|
125
127
|
|
126
|
-
|
128
|
+
&:hover {
|
127
129
|
text-decoration: none;
|
128
130
|
}
|
131
|
+
|
132
|
+
&:focus {
|
133
|
+
text-decoration: none;
|
134
|
+
outline: 0;
|
135
|
+
box-shadow: 0 0 0 $navbar-toggler-focus-width;
|
136
|
+
}
|
129
137
|
}
|
130
138
|
|
131
139
|
// Keep as a separate element so folks can easily override it with another icon
|
@@ -135,9 +143,9 @@
|
|
135
143
|
width: 1.5em;
|
136
144
|
height: 1.5em;
|
137
145
|
vertical-align: middle;
|
138
|
-
|
139
|
-
background:
|
140
|
-
background-size: 100
|
146
|
+
background-repeat: no-repeat;
|
147
|
+
background-position: center;
|
148
|
+
background-size: 100%;
|
141
149
|
}
|
142
150
|
|
143
151
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
@@ -148,26 +156,8 @@
|
|
148
156
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
149
157
|
|
150
158
|
&#{$infix} {
|
151
|
-
@include media-breakpoint-down($breakpoint) {
|
152
|
-
%container-navbar-expand-#{$breakpoint} {
|
153
|
-
padding-right: 0;
|
154
|
-
padding-left: 0;
|
155
|
-
}
|
156
|
-
|
157
|
-
> .container,
|
158
|
-
> .container-fluid {
|
159
|
-
@extend %container-navbar-expand-#{$breakpoint};
|
160
|
-
}
|
161
|
-
|
162
|
-
@each $size, $container-max-width in $container-max-widths {
|
163
|
-
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
164
|
-
@extend %container-navbar-expand-#{$breakpoint};
|
165
|
-
}
|
166
|
-
}
|
167
|
-
}
|
168
|
-
|
169
159
|
@include media-breakpoint-up($next) {
|
170
|
-
flex-
|
160
|
+
flex-wrap: nowrap;
|
171
161
|
justify-content: flex-start;
|
172
162
|
|
173
163
|
.navbar-nav {
|
@@ -183,27 +173,8 @@
|
|
183
173
|
}
|
184
174
|
}
|
185
175
|
|
186
|
-
// For nesting containers, have to redeclare for alignment purposes
|
187
|
-
%container-nesting-#{$breakpoint} {
|
188
|
-
flex-wrap: nowrap;
|
189
|
-
}
|
190
|
-
|
191
|
-
> .container,
|
192
|
-
> .container-fluid {
|
193
|
-
@extend %container-nesting-#{$breakpoint};
|
194
|
-
}
|
195
|
-
|
196
|
-
@each $size, $container-max-width in $container-max-widths {
|
197
|
-
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
198
|
-
@extend %container-nesting-#{$breakpoint};
|
199
|
-
}
|
200
|
-
}
|
201
|
-
|
202
176
|
.navbar-collapse {
|
203
177
|
display: flex !important; // stylelint-disable-line declaration-no-important
|
204
|
-
|
205
|
-
// Changes flex-bases to auto because of an IE10 bug
|
206
|
-
flex-basis: auto;
|
207
178
|
}
|
208
179
|
|
209
180
|
.navbar-toggler {
|
@@ -224,7 +195,8 @@
|
|
224
195
|
.navbar-brand {
|
225
196
|
color: $navbar-light-brand-color;
|
226
197
|
|
227
|
-
|
198
|
+
&:hover,
|
199
|
+
&:focus {
|
228
200
|
color: $navbar-light-brand-hover-color;
|
229
201
|
}
|
230
202
|
}
|
@@ -233,7 +205,8 @@
|
|
233
205
|
.nav-link {
|
234
206
|
color: $navbar-light-color;
|
235
207
|
|
236
|
-
|
208
|
+
&:hover,
|
209
|
+
&:focus {
|
237
210
|
color: $navbar-light-hover-color;
|
238
211
|
}
|
239
212
|
|
@@ -243,8 +216,6 @@
|
|
243
216
|
}
|
244
217
|
|
245
218
|
.show > .nav-link,
|
246
|
-
.active > .nav-link,
|
247
|
-
.nav-link.show,
|
248
219
|
.nav-link.active {
|
249
220
|
color: $navbar-light-active-color;
|
250
221
|
}
|
@@ -261,12 +232,11 @@
|
|
261
232
|
|
262
233
|
.navbar-text {
|
263
234
|
color: $navbar-light-color;
|
264
|
-
a {
|
265
|
-
color: $navbar-light-active-color;
|
266
235
|
|
267
|
-
|
268
|
-
|
269
|
-
|
236
|
+
a,
|
237
|
+
a:hover,
|
238
|
+
a:focus {
|
239
|
+
color: $navbar-light-active-color;
|
270
240
|
}
|
271
241
|
}
|
272
242
|
}
|
@@ -276,7 +246,8 @@
|
|
276
246
|
.navbar-brand {
|
277
247
|
color: $navbar-dark-brand-color;
|
278
248
|
|
279
|
-
|
249
|
+
&:hover,
|
250
|
+
&:focus {
|
280
251
|
color: $navbar-dark-brand-hover-color;
|
281
252
|
}
|
282
253
|
}
|
@@ -285,7 +256,8 @@
|
|
285
256
|
.nav-link {
|
286
257
|
color: $navbar-dark-color;
|
287
258
|
|
288
|
-
|
259
|
+
&:hover,
|
260
|
+
&:focus {
|
289
261
|
color: $navbar-dark-hover-color;
|
290
262
|
}
|
291
263
|
|
@@ -295,8 +267,6 @@
|
|
295
267
|
}
|
296
268
|
|
297
269
|
.show > .nav-link,
|
298
|
-
.active > .nav-link,
|
299
|
-
.nav-link.show,
|
300
270
|
.nav-link.active {
|
301
271
|
color: $navbar-dark-active-color;
|
302
272
|
}
|
@@ -313,12 +283,10 @@
|
|
313
283
|
|
314
284
|
.navbar-text {
|
315
285
|
color: $navbar-dark-color;
|
316
|
-
a
|
286
|
+
a,
|
287
|
+
a:hover,
|
288
|
+
a:focus {
|
317
289
|
color: $navbar-dark-active-color;
|
318
|
-
|
319
|
-
@include hover-focus() {
|
320
|
-
color: $navbar-dark-active-color;
|
321
|
-
}
|
322
290
|
}
|
323
291
|
}
|
324
292
|
}
|