bootstrap-scss 5.1.3 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -155
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1641
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -72
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -151
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
@@ -1,72 +1,71 @@
1
- // Select
2
- //
3
- // Replaces the browser default select with a custom one, mostly pulled from
4
- // https://primer.github.io/.
5
-
6
- .form-select {
7
- display: block;
8
- width: 100%;
9
- padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
- // stylelint-disable-next-line property-no-vendor-prefix
11
- -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
12
- font-family: $form-select-font-family;
13
- @include font-size($form-select-font-size);
14
- font-weight: $form-select-font-weight;
15
- line-height: $form-select-line-height;
16
- color: $form-select-color;
17
- background-color: $form-select-bg;
18
- background-image: escape-svg($form-select-indicator);
19
- background-repeat: no-repeat;
20
- background-position: $form-select-bg-position;
21
- background-size: $form-select-bg-size;
22
- border: $form-select-border-width solid $form-select-border-color;
23
- @include border-radius($form-select-border-radius, 0);
24
- @include box-shadow($form-select-box-shadow);
25
- @include transition($form-select-transition);
26
- appearance: none;
27
-
28
- &:focus {
29
- border-color: $form-select-focus-border-color;
30
- outline: 0;
31
- @if $enable-shadows {
32
- @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
33
- } @else {
34
- // Avoid using mixin so we can pass custom focus shadow properly
35
- box-shadow: $form-select-focus-box-shadow;
36
- }
37
- }
38
-
39
- &[multiple],
40
- &[size]:not([size="1"]) {
41
- padding-right: $form-select-padding-x;
42
- background-image: none;
43
- }
44
-
45
- &:disabled {
46
- color: $form-select-disabled-color;
47
- background-color: $form-select-disabled-bg;
48
- border-color: $form-select-disabled-border-color;
49
- }
50
-
51
- // Remove outline from select box in FF
52
- &:-moz-focusring {
53
- color: transparent;
54
- text-shadow: 0 0 0 $form-select-color;
55
- }
56
- }
57
-
58
- .form-select-sm {
59
- padding-top: $form-select-padding-y-sm;
60
- padding-bottom: $form-select-padding-y-sm;
61
- padding-left: $form-select-padding-x-sm;
62
- @include font-size($form-select-font-size-sm);
63
- @include border-radius($form-select-border-radius-sm);
64
- }
65
-
66
- .form-select-lg {
67
- padding-top: $form-select-padding-y-lg;
68
- padding-bottom: $form-select-padding-y-lg;
69
- padding-left: $form-select-padding-x-lg;
70
- @include font-size($form-select-font-size-lg);
71
- @include border-radius($form-select-border-radius-lg);
72
- }
1
+ // Select
2
+ //
3
+ // Replaces the browser default select with a custom one, mostly pulled from
4
+ // https://primer.github.io/.
5
+
6
+ .form-select {
7
+ display: block;
8
+ width: 100%;
9
+ padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
+ -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
11
+ font-family: $form-select-font-family;
12
+ @include font-size($form-select-font-size);
13
+ font-weight: $form-select-font-weight;
14
+ line-height: $form-select-line-height;
15
+ color: $form-select-color;
16
+ background-color: $form-select-bg;
17
+ background-image: escape-svg($form-select-indicator);
18
+ background-repeat: no-repeat;
19
+ background-position: $form-select-bg-position;
20
+ background-size: $form-select-bg-size;
21
+ border: $form-select-border-width solid $form-select-border-color;
22
+ @include border-radius($form-select-border-radius, 0);
23
+ @include box-shadow($form-select-box-shadow);
24
+ @include transition($form-select-transition);
25
+ appearance: none;
26
+
27
+ &:focus {
28
+ border-color: $form-select-focus-border-color;
29
+ outline: 0;
30
+ @if $enable-shadows {
31
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
32
+ } @else {
33
+ // Avoid using mixin so we can pass custom focus shadow properly
34
+ box-shadow: $form-select-focus-box-shadow;
35
+ }
36
+ }
37
+
38
+ &[multiple],
39
+ &[size]:not([size="1"]) {
40
+ padding-right: $form-select-padding-x;
41
+ background-image: none;
42
+ }
43
+
44
+ &:disabled {
45
+ color: $form-select-disabled-color;
46
+ background-color: $form-select-disabled-bg;
47
+ border-color: $form-select-disabled-border-color;
48
+ }
49
+
50
+ // Remove outline from select box in FF
51
+ &:-moz-focusring {
52
+ color: transparent;
53
+ text-shadow: 0 0 0 $form-select-color;
54
+ }
55
+ }
56
+
57
+ .form-select-sm {
58
+ padding-top: $form-select-padding-y-sm;
59
+ padding-bottom: $form-select-padding-y-sm;
60
+ padding-left: $form-select-padding-x-sm;
61
+ @include font-size($form-select-font-size-sm);
62
+ @include border-radius($form-select-border-radius-sm);
63
+ }
64
+
65
+ .form-select-lg {
66
+ padding-top: $form-select-padding-y-lg;
67
+ padding-bottom: $form-select-padding-y-lg;
68
+ padding-left: $form-select-padding-x-lg;
69
+ @include font-size($form-select-font-size-lg);
70
+ @include border-radius($form-select-border-radius-lg);
71
+ }
@@ -1,11 +1,11 @@
1
- //
2
- // Form text
3
- //
4
-
5
- .form-text {
6
- margin-top: $form-text-margin-top;
7
- @include font-size($form-text-font-size);
8
- font-style: $form-text-font-style;
9
- font-weight: $form-text-font-weight;
10
- color: $form-text-color;
11
- }
1
+ //
2
+ // Form text
3
+ //
4
+
5
+ .form-text {
6
+ margin-top: $form-text-margin-top;
7
+ @include font-size($form-text-font-size);
8
+ font-style: $form-text-font-style;
9
+ font-weight: $form-text-font-weight;
10
+ color: $form-text-color;
11
+ }
@@ -1,121 +1,129 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .input-group {
6
- position: relative;
7
- display: flex;
8
- flex-wrap: wrap; // For form validation feedback
9
- align-items: stretch;
10
- width: 100%;
11
-
12
- > .form-control,
13
- > .form-select {
14
- position: relative; // For focus state's z-index
15
- flex: 1 1 auto;
16
- width: 1%;
17
- min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
18
- }
19
-
20
- // Bring the "active" form control to the top of surrounding elements
21
- > .form-control:focus,
22
- > .form-select:focus {
23
- z-index: 3;
24
- }
25
-
26
- // Ensure buttons are always above inputs for more visually pleasing borders.
27
- // This isn't needed for `.input-group-text` since it shares the same border-color
28
- // as our inputs.
29
- .btn {
30
- position: relative;
31
- z-index: 2;
32
-
33
- &:focus {
34
- z-index: 3;
35
- }
36
- }
37
- }
38
-
39
-
40
- // Textual addons
41
- //
42
- // Serves as a catch-all element for any text or radio/checkbox input you wish
43
- // to prepend or append to an input.
44
-
45
- .input-group-text {
46
- display: flex;
47
- align-items: center;
48
- padding: $input-group-addon-padding-y $input-group-addon-padding-x;
49
- @include font-size($input-font-size); // Match inputs
50
- font-weight: $input-group-addon-font-weight;
51
- line-height: $input-line-height;
52
- color: $input-group-addon-color;
53
- text-align: center;
54
- white-space: nowrap;
55
- background-color: $input-group-addon-bg;
56
- border: $input-border-width solid $input-group-addon-border-color;
57
- @include border-radius($input-border-radius);
58
- }
59
-
60
-
61
- // Sizing
62
- //
63
- // Remix the default form control sizing classes into new ones for easier
64
- // manipulation.
65
-
66
- .input-group-lg > .form-control,
67
- .input-group-lg > .form-select,
68
- .input-group-lg > .input-group-text,
69
- .input-group-lg > .btn {
70
- padding: $input-padding-y-lg $input-padding-x-lg;
71
- @include font-size($input-font-size-lg);
72
- @include border-radius($input-border-radius-lg);
73
- }
74
-
75
- .input-group-sm > .form-control,
76
- .input-group-sm > .form-select,
77
- .input-group-sm > .input-group-text,
78
- .input-group-sm > .btn {
79
- padding: $input-padding-y-sm $input-padding-x-sm;
80
- @include font-size($input-font-size-sm);
81
- @include border-radius($input-border-radius-sm);
82
- }
83
-
84
- .input-group-lg > .form-select,
85
- .input-group-sm > .form-select {
86
- padding-right: $form-select-padding-x + $form-select-indicator-padding;
87
- }
88
-
89
-
90
- // Rounded corners
91
- //
92
- // These rulesets must come after the sizing ones to properly override sm and lg
93
- // border-radius values when extending. They're more specific than we'd like
94
- // with the `.input-group >` part, but without it, we cannot override the sizing.
95
-
96
- // stylelint-disable-next-line no-duplicate-selectors
97
- .input-group {
98
- &:not(.has-validation) {
99
- > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
100
- > .dropdown-toggle:nth-last-child(n + 3) {
101
- @include border-end-radius(0);
102
- }
103
- }
104
-
105
- &.has-validation {
106
- > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
107
- > .dropdown-toggle:nth-last-child(n + 4) {
108
- @include border-end-radius(0);
109
- }
110
- }
111
-
112
- $validation-messages: "";
113
- @each $state in map-keys($form-validation-states) {
114
- $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
115
- }
116
-
117
- > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
118
- margin-left: -$input-border-width;
119
- @include border-start-radius(0);
120
- }
121
- }
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .input-group {
6
+ position: relative;
7
+ display: flex;
8
+ flex-wrap: wrap; // For form validation feedback
9
+ align-items: stretch;
10
+ width: 100%;
11
+
12
+ > .form-control,
13
+ > .form-select,
14
+ > .form-floating {
15
+ position: relative; // For focus state's z-index
16
+ flex: 1 1 auto;
17
+ width: 1%;
18
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19
+ }
20
+
21
+ // Bring the "active" form control to the top of surrounding elements
22
+ > .form-control:focus,
23
+ > .form-select:focus,
24
+ > .form-floating:focus-within {
25
+ z-index: 3;
26
+ }
27
+
28
+ // Ensure buttons are always above inputs for more visually pleasing borders.
29
+ // This isn't needed for `.input-group-text` since it shares the same border-color
30
+ // as our inputs.
31
+ .btn {
32
+ position: relative;
33
+ z-index: 2;
34
+
35
+ &:focus {
36
+ z-index: 3;
37
+ }
38
+ }
39
+ }
40
+
41
+
42
+ // Textual addons
43
+ //
44
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
45
+ // to prepend or append to an input.
46
+
47
+ .input-group-text {
48
+ display: flex;
49
+ align-items: center;
50
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
51
+ @include font-size($input-font-size); // Match inputs
52
+ font-weight: $input-group-addon-font-weight;
53
+ line-height: $input-line-height;
54
+ color: $input-group-addon-color;
55
+ text-align: center;
56
+ white-space: nowrap;
57
+ background-color: $input-group-addon-bg;
58
+ border: $input-border-width solid $input-group-addon-border-color;
59
+ @include border-radius($input-border-radius);
60
+ }
61
+
62
+
63
+ // Sizing
64
+ //
65
+ // Remix the default form control sizing classes into new ones for easier
66
+ // manipulation.
67
+
68
+ .input-group-lg > .form-control,
69
+ .input-group-lg > .form-select,
70
+ .input-group-lg > .input-group-text,
71
+ .input-group-lg > .btn {
72
+ padding: $input-padding-y-lg $input-padding-x-lg;
73
+ @include font-size($input-font-size-lg);
74
+ @include border-radius($input-border-radius-lg);
75
+ }
76
+
77
+ .input-group-sm > .form-control,
78
+ .input-group-sm > .form-select,
79
+ .input-group-sm > .input-group-text,
80
+ .input-group-sm > .btn {
81
+ padding: $input-padding-y-sm $input-padding-x-sm;
82
+ @include font-size($input-font-size-sm);
83
+ @include border-radius($input-border-radius-sm);
84
+ }
85
+
86
+ .input-group-lg > .form-select,
87
+ .input-group-sm > .form-select {
88
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
89
+ }
90
+
91
+
92
+ // Rounded corners
93
+ //
94
+ // These rulesets must come after the sizing ones to properly override sm and lg
95
+ // border-radius values when extending. They're more specific than we'd like
96
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
97
+
98
+ // stylelint-disable-next-line no-duplicate-selectors
99
+ .input-group {
100
+ &:not(.has-validation) {
101
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
102
+ > .dropdown-toggle:nth-last-child(n + 3),
103
+ > .form-floating:not(:last-child) > .form-control,
104
+ > .form-floating:not(:last-child) > .form-select {
105
+ @include border-end-radius(0);
106
+ }
107
+ }
108
+
109
+ &.has-validation {
110
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
111
+ > .dropdown-toggle:nth-last-child(n + 4),
112
+ > .form-floating:nth-last-child(n + 3) > .form-control,
113
+ > .form-floating:nth-last-child(n + 3) > .form-select {
114
+ @include border-end-radius(0);
115
+ }
116
+ }
117
+
118
+ $validation-messages: "";
119
+ @each $state in map-keys($form-validation-states) {
120
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
121
+ }
122
+
123
+ > :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages},
124
+ > .form-floating:not(:first-child) > .form-control,
125
+ > .form-floating:not(:first-child) > .form-select {
126
+ margin-left: -$input-border-width;
127
+ @include border-start-radius(0);
128
+ }
129
+ }
@@ -1,36 +1,36 @@
1
- //
2
- // Labels
3
- //
4
-
5
- .form-label {
6
- margin-bottom: $form-label-margin-bottom;
7
- @include font-size($form-label-font-size);
8
- font-style: $form-label-font-style;
9
- font-weight: $form-label-font-weight;
10
- color: $form-label-color;
11
- }
12
-
13
- // For use with horizontal and inline forms, when you need the label (or legend)
14
- // text to align with the form controls.
15
- .col-form-label {
16
- padding-top: add($input-padding-y, $input-border-width);
17
- padding-bottom: add($input-padding-y, $input-border-width);
18
- margin-bottom: 0; // Override the `<legend>` default
19
- @include font-size(inherit); // Override the `<legend>` default
20
- font-style: $form-label-font-style;
21
- font-weight: $form-label-font-weight;
22
- line-height: $input-line-height;
23
- color: $form-label-color;
24
- }
25
-
26
- .col-form-label-lg {
27
- padding-top: add($input-padding-y-lg, $input-border-width);
28
- padding-bottom: add($input-padding-y-lg, $input-border-width);
29
- @include font-size($input-font-size-lg);
30
- }
31
-
32
- .col-form-label-sm {
33
- padding-top: add($input-padding-y-sm, $input-border-width);
34
- padding-bottom: add($input-padding-y-sm, $input-border-width);
35
- @include font-size($input-font-size-sm);
36
- }
1
+ //
2
+ // Labels
3
+ //
4
+
5
+ .form-label {
6
+ margin-bottom: $form-label-margin-bottom;
7
+ @include font-size($form-label-font-size);
8
+ font-style: $form-label-font-style;
9
+ font-weight: $form-label-font-weight;
10
+ color: $form-label-color;
11
+ }
12
+
13
+ // For use with horizontal and inline forms, when you need the label (or legend)
14
+ // text to align with the form controls.
15
+ .col-form-label {
16
+ padding-top: add($input-padding-y, $input-border-width);
17
+ padding-bottom: add($input-padding-y, $input-border-width);
18
+ margin-bottom: 0; // Override the `<legend>` default
19
+ @include font-size(inherit); // Override the `<legend>` default
20
+ font-style: $form-label-font-style;
21
+ font-weight: $form-label-font-weight;
22
+ line-height: $input-line-height;
23
+ color: $form-label-color;
24
+ }
25
+
26
+ .col-form-label-lg {
27
+ padding-top: add($input-padding-y-lg, $input-border-width);
28
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
29
+ @include font-size($input-font-size-lg);
30
+ }
31
+
32
+ .col-form-label-sm {
33
+ padding-top: add($input-padding-y-sm, $input-border-width);
34
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
35
+ @include font-size($input-font-size-sm);
36
+ }
@@ -1,12 +1,12 @@
1
- // Form validation
2
- //
3
- // Provide feedback to users when form field values are valid or invalid. Works
4
- // primarily for client-side validation via scoped `:invalid` and `:valid`
5
- // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6
- // server-side validation.
7
-
8
- // scss-docs-start form-validation-states-loop
9
- @each $state, $data in $form-validation-states {
10
- @include form-validation-state($state, $data...);
11
- }
12
- // scss-docs-end form-validation-states-loop
1
+ // Form validation
2
+ //
3
+ // Provide feedback to users when form field values are valid or invalid. Works
4
+ // primarily for client-side validation via scoped `:invalid` and `:valid`
5
+ // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6
+ // server-side validation.
7
+
8
+ // scss-docs-start form-validation-states-loop
9
+ @each $state, $data in $form-validation-states {
10
+ @include form-validation-state($state, $data...);
11
+ }
12
+ // scss-docs-end form-validation-states-loop
@@ -1,3 +1,3 @@
1
- .clearfix {
2
- @include clearfix();
3
- }
1
+ .clearfix {
2
+ @include clearfix();
3
+ }
@@ -0,0 +1,10 @@
1
+ // stylelint-disable function-name-case
2
+
3
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
4
+ @each $color, $value in $theme-colors {
5
+ $color-rgb: to-rgb($value);
6
+ .text-bg-#{$color} {
7
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
8
+ background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
9
+ }
10
+ }
@@ -1,12 +1,12 @@
1
- @each $color, $value in $theme-colors {
2
- .link-#{$color} {
3
- color: $value;
4
-
5
- @if $link-shade-percentage != 0 {
6
- &:hover,
7
- &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
9
- }
10
- }
11
- }
12
- }
1
+ @each $color, $value in $theme-colors {
2
+ .link-#{$color} {
3
+ color: $value !important; // stylelint-disable-line declaration-no-important
4
+
5
+ @if $link-shade-percentage != 0 {
6
+ &:hover,
7
+ &:focus {
8
+ color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
9
+ }
10
+ }
11
+ }
12
+ }
@@ -1,30 +1,36 @@
1
- // Shorthand
2
-
3
- .fixed-top {
4
- position: fixed;
5
- top: 0;
6
- right: 0;
7
- left: 0;
8
- z-index: $zindex-fixed;
9
- }
10
-
11
- .fixed-bottom {
12
- position: fixed;
13
- right: 0;
14
- bottom: 0;
15
- left: 0;
16
- z-index: $zindex-fixed;
17
- }
18
-
19
- // Responsive sticky top
20
- @each $breakpoint in map-keys($grid-breakpoints) {
21
- @include media-breakpoint-up($breakpoint) {
22
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23
-
24
- .sticky#{$infix}-top {
25
- position: sticky;
26
- top: 0;
27
- z-index: $zindex-sticky;
28
- }
29
- }
30
- }
1
+ // Shorthand
2
+
3
+ .fixed-top {
4
+ position: fixed;
5
+ top: 0;
6
+ right: 0;
7
+ left: 0;
8
+ z-index: $zindex-fixed;
9
+ }
10
+
11
+ .fixed-bottom {
12
+ position: fixed;
13
+ right: 0;
14
+ bottom: 0;
15
+ left: 0;
16
+ z-index: $zindex-fixed;
17
+ }
18
+
19
+ // Responsive sticky top and bottom
20
+ @each $breakpoint in map-keys($grid-breakpoints) {
21
+ @include media-breakpoint-up($breakpoint) {
22
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23
+
24
+ .sticky#{$infix}-top {
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: $zindex-sticky;
28
+ }
29
+
30
+ .sticky#{$infix}-bottom {
31
+ position: sticky;
32
+ bottom: 0;
33
+ z-index: $zindex-sticky;
34
+ }
35
+ }
36
+ }