administrate-bootstrap-theme 1.0.6 → 1.1.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 (77) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2503 -3001
  3. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +10 -10
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -22
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +40 -24
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +404 -294
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -9
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +4 -7
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +12 -4
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
  59. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
  60. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
  61. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
  62. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
  63. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
  64. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +14 -14
  65. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
  67. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
  68. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
  69. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
  70. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +5 -1
  71. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
  72. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
  73. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
  74. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
  75. data/lib/administrate-bootstrap-theme/version.rb +2 -2
  76. data/package.json +2 -2
  77. metadata +24 -3
@@ -1,16 +1,13 @@
1
- /*!
2
- * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
3
- * Copyright 2011-2021 The Bootstrap Authors
4
- * Copyright 2011-2021 Twitter, Inc.
5
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
- */
1
+ @import "mixins/banner";
2
+ @include bsBanner(Grid);
7
3
 
8
4
  $include-column-box-sizing: true !default;
9
5
 
10
6
  @import "functions";
11
7
  @import "variables";
8
+ @import "variables-dark";
9
+ @import "maps";
12
10
 
13
- @import "mixins/lists";
14
11
  @import "mixins/breakpoints";
15
12
  @import "mixins/container";
16
13
  @import "mixins/grid";
@@ -18,8 +15,6 @@ $include-column-box-sizing: true !default;
18
15
 
19
16
  @import "vendor/rfs";
20
17
 
21
- @import "root";
22
-
23
18
  @import "containers";
24
19
  @import "grid";
25
20
 
@@ -1,13 +1,10 @@
1
- /*!
2
- * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
3
- * Copyright 2011-2021 The Bootstrap Authors
4
- * Copyright 2011-2021 Twitter, Inc.
5
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
7
- */
1
+ @import "mixins/banner";
2
+ @include bsBanner(Reboot);
8
3
 
9
4
  @import "functions";
10
5
  @import "variables";
6
+ @import "variables-dark";
7
+ @import "maps";
11
8
  @import "mixins";
12
9
  @import "root";
13
10
  @import "reboot";
@@ -1,16 +1,17 @@
1
- /*!
2
- * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
3
- * Copyright 2011-2021 The Bootstrap Authors
4
- * Copyright 2011-2021 Twitter, Inc.
5
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
- */
1
+ @import "mixins/banner";
2
+ @include bsBanner(Utilities);
7
3
 
8
4
  // Configuration
9
5
  @import "functions";
10
6
  @import "variables";
7
+ @import "variables-dark";
8
+ @import "maps";
11
9
  @import "mixins";
12
10
  @import "utilities";
13
11
 
12
+ // Layout & components
13
+ @import "root";
14
+
14
15
  // Helpers
15
16
  @import "helpers";
16
17
 
@@ -1,14 +1,13 @@
1
- /*!
2
- * Bootstrap v5.1.3 (https://getbootstrap.com/)
3
- * Copyright 2011-2021 The Bootstrap Authors
4
- * Copyright 2011-2021 Twitter, Inc.
5
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
- */
1
+ @import "mixins/banner";
2
+ @include bsBanner("");
3
+
7
4
 
8
5
  // scss-docs-start import-stack
9
6
  // Configuration
10
7
  @import "functions";
11
8
  @import "variables";
9
+ @import "variables-dark";
10
+ @import "maps";
12
11
  @import "mixins";
13
12
  @import "utilities";
14
13
 
@@ -2,8 +2,10 @@
2
2
  position: relative;
3
3
 
4
4
  > .form-control,
5
+ > .form-control-plaintext,
5
6
  > .form-select {
6
7
  height: $form-floating-height;
8
+ min-height: $form-floating-height;
7
9
  line-height: $form-floating-line-height;
8
10
  }
9
11
 
@@ -11,16 +13,21 @@
11
13
  position: absolute;
12
14
  top: 0;
13
15
  left: 0;
16
+ z-index: 2;
14
17
  height: 100%; // allow textareas
15
18
  padding: $form-floating-padding-y $form-floating-padding-x;
19
+ overflow: hidden;
20
+ text-align: start;
21
+ text-overflow: ellipsis;
22
+ white-space: nowrap;
16
23
  pointer-events: none;
17
24
  border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
18
25
  transform-origin: 0 0;
19
26
  @include transition($form-floating-transition);
20
27
  }
21
28
 
22
- // stylelint-disable no-duplicate-selectors
23
- > .form-control {
29
+ > .form-control,
30
+ > .form-control-plaintext {
24
31
  padding: $form-floating-padding-y $form-floating-padding-x;
25
32
 
26
33
  &::placeholder {
@@ -46,18 +53,43 @@
46
53
 
47
54
  > .form-control:focus,
48
55
  > .form-control:not(:placeholder-shown),
56
+ > .form-control-plaintext,
49
57
  > .form-select {
50
58
  ~ label {
51
- opacity: $form-floating-label-opacity;
59
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
52
60
  transform: $form-floating-label-transform;
61
+
62
+ &::after {
63
+ position: absolute;
64
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
65
+ z-index: -1;
66
+ height: $form-floating-label-height;
67
+ content: "";
68
+ background-color: $input-bg;
69
+ @include border-radius($input-border-radius);
70
+ }
53
71
  }
54
72
  }
55
73
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
56
74
  > .form-control:-webkit-autofill {
57
75
  ~ label {
58
- opacity: $form-floating-label-opacity;
76
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
59
77
  transform: $form-floating-label-transform;
60
78
  }
61
79
  }
62
- // stylelint-enable no-duplicate-selectors
80
+
81
+ > .form-control-plaintext {
82
+ ~ label {
83
+ border-width: $input-border-width 0; // Required to properly position label text - as explained above
84
+ }
85
+ }
86
+
87
+ > :disabled ~ label,
88
+ > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
89
+ color: $form-floating-label-disabled-color;
90
+
91
+ &::after {
92
+ background-color: $input-disabled-bg;
93
+ }
94
+ }
63
95
  }
@@ -14,18 +14,34 @@
14
14
  }
15
15
  }
16
16
 
17
+ .form-check-reverse {
18
+ padding-right: $form-check-padding-start;
19
+ padding-left: 0;
20
+ text-align: right;
21
+
22
+ .form-check-input {
23
+ float: right;
24
+ margin-right: $form-check-padding-start * -1;
25
+ margin-left: 0;
26
+ }
27
+ }
28
+
17
29
  .form-check-input {
30
+ --#{$prefix}form-check-bg: #{$form-check-input-bg};
31
+
32
+ flex-shrink: 0;
18
33
  width: $form-check-input-width;
19
34
  height: $form-check-input-width;
20
35
  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
21
36
  vertical-align: top;
22
- background-color: $form-check-input-bg;
37
+ appearance: none;
38
+ background-color: var(--#{$prefix}form-check-bg);
39
+ background-image: var(--#{$prefix}form-check-bg-image);
23
40
  background-repeat: no-repeat;
24
41
  background-position: center;
25
42
  background-size: contain;
26
43
  border: $form-check-input-border;
27
- appearance: none;
28
- color-adjust: exact; // Keep themed appearance for print
44
+ print-color-adjust: exact; // Keep themed appearance for print
29
45
  @include transition($form-check-transition);
30
46
 
31
47
  &[type="checkbox"] {
@@ -53,17 +69,17 @@
53
69
 
54
70
  &[type="checkbox"] {
55
71
  @if $enable-gradients {
56
- background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
72
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
57
73
  } @else {
58
- background-image: escape-svg($form-check-input-checked-bg-image);
74
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
59
75
  }
60
76
  }
61
77
 
62
78
  &[type="radio"] {
63
79
  @if $enable-gradients {
64
- background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
80
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
65
81
  } @else {
66
- background-image: escape-svg($form-check-radio-checked-bg-image);
82
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
67
83
  }
68
84
  }
69
85
  }
@@ -73,9 +89,9 @@
73
89
  border-color: $form-check-input-indeterminate-border-color;
74
90
 
75
91
  @if $enable-gradients {
76
- background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
92
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
77
93
  } @else {
78
- background-image: escape-svg($form-check-input-indeterminate-bg-image);
94
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
79
95
  }
80
96
  }
81
97
 
@@ -90,6 +106,7 @@
90
106
  &[disabled],
91
107
  &:disabled {
92
108
  ~ .form-check-label {
109
+ cursor: default;
93
110
  opacity: $form-check-label-disabled-opacity;
94
111
  }
95
112
  }
@@ -108,27 +125,39 @@
108
125
  padding-left: $form-switch-padding-start;
109
126
 
110
127
  .form-check-input {
128
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
129
+
111
130
  width: $form-switch-width;
112
131
  margin-left: $form-switch-padding-start * -1;
113
- background-image: escape-svg($form-switch-bg-image);
132
+ background-image: var(--#{$prefix}form-switch-bg);
114
133
  background-position: left center;
115
- @include border-radius($form-switch-border-radius);
134
+ @include border-radius($form-switch-border-radius, 0);
116
135
  @include transition($form-switch-transition);
117
136
 
118
137
  &:focus {
119
- background-image: escape-svg($form-switch-focus-bg-image);
138
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
120
139
  }
121
140
 
122
141
  &:checked {
123
142
  background-position: $form-switch-checked-bg-position;
124
143
 
125
144
  @if $enable-gradients {
126
- background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
145
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
127
146
  } @else {
128
- background-image: escape-svg($form-switch-checked-bg-image);
147
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
129
148
  }
130
149
  }
131
150
  }
151
+
152
+ &.form-check-reverse {
153
+ padding-right: $form-switch-padding-start;
154
+ padding-left: 0;
155
+
156
+ .form-check-input {
157
+ margin-right: $form-switch-padding-start * -1;
158
+ margin-left: 0;
159
+ }
160
+ }
132
161
  }
133
162
 
134
163
  .form-check-inline {
@@ -150,3 +179,11 @@
150
179
  }
151
180
  }
152
181
  }
182
+
183
+ @if $enable-dark-mode {
184
+ @include color-mode(dark) {
185
+ .form-switch .form-check-input:not(:checked):not(:focus) {
186
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
187
+ }
188
+ }
189
+ }
@@ -11,10 +11,10 @@
11
11
  font-weight: $input-font-weight;
12
12
  line-height: $input-line-height;
13
13
  color: $input-color;
14
+ appearance: none; // Fix appearance for date inputs in Safari
14
15
  background-color: $input-bg;
15
16
  background-clip: padding-box;
16
17
  border: $input-border-width solid $input-border-color;
17
- appearance: none; // Fix appearance for date inputs in Safari
18
18
 
19
19
  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
20
20
  @include border-radius($input-border-radius, 0);
@@ -44,12 +44,31 @@
44
44
  }
45
45
  }
46
46
 
47
- // Add some height to date inputs on iOS
48
- // https://github.com/twbs/bootstrap/issues/23307
49
- // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
50
47
  &::-webkit-date-and-time-value {
48
+ // On Android Chrome, form-control's "width: 100%" makes the input width too small
49
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
50
+ //
51
+ // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
52
+ // Tested under iOS 16.2 / Safari 16.2
53
+ min-width: 85px; // Seems to be a good minimum safe width
54
+
55
+ // Add some height to date inputs on iOS
56
+ // https://github.com/twbs/bootstrap/issues/23307
57
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
51
58
  // Multiply line-height by 1em if it has no unit
52
59
  height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
60
+
61
+ // Android Chrome type="date" is taller than the other inputs
62
+ // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
63
+ // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
64
+ margin: 0;
65
+ }
66
+
67
+ // Prevent excessive date input height in Webkit
68
+ // https://github.com/twbs/bootstrap/issues/34433
69
+ &::-webkit-datetime-edit {
70
+ display: block;
71
+ padding: 0;
53
72
  }
54
73
 
55
74
  // Placeholder
@@ -59,13 +78,13 @@
59
78
  opacity: 1;
60
79
  }
61
80
 
62
- // Disabled and read-only inputs
81
+ // Disabled inputs
63
82
  //
64
83
  // HTML5 says that controls under a fieldset > legend:first-child won't be
65
84
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
66
85
  // don't honor that edge case; we style them as disabled anyway.
67
- &:disabled,
68
- &[readonly] {
86
+ &:disabled {
87
+ color: $input-disabled-color;
69
88
  background-color: $input-disabled-bg;
70
89
  border-color: $input-disabled-border-color;
71
90
  // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
@@ -91,25 +110,6 @@
91
110
  &:hover:not(:disabled):not([readonly])::file-selector-button {
92
111
  background-color: $form-file-button-hover-bg;
93
112
  }
94
-
95
- &::-webkit-file-upload-button {
96
- padding: $input-padding-y $input-padding-x;
97
- margin: (-$input-padding-y) (-$input-padding-x);
98
- margin-inline-end: $input-padding-x;
99
- color: $form-file-button-color;
100
- @include gradient-bg($form-file-button-bg);
101
- pointer-events: none;
102
- border-color: inherit;
103
- border-style: solid;
104
- border-width: 0;
105
- border-inline-end-width: $input-border-width;
106
- border-radius: 0; // stylelint-disable-line property-disallowed-list
107
- @include transition($btn-transition);
108
- }
109
-
110
- &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
111
- background-color: $form-file-button-hover-bg;
112
- }
113
113
  }
114
114
 
115
115
  // Readonly controls as plain text
@@ -128,6 +128,10 @@
128
128
  border: solid transparent;
129
129
  border-width: $input-border-width 0;
130
130
 
131
+ &:focus {
132
+ outline: 0;
133
+ }
134
+
131
135
  &.form-control-sm,
132
136
  &.form-control-lg {
133
137
  padding-right: 0;
@@ -153,12 +157,6 @@
153
157
  margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
154
158
  margin-inline-end: $input-padding-x-sm;
155
159
  }
156
-
157
- &::-webkit-file-upload-button {
158
- padding: $input-padding-y-sm $input-padding-x-sm;
159
- margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
160
- margin-inline-end: $input-padding-x-sm;
161
- }
162
160
  }
163
161
 
164
162
  .form-control-lg {
@@ -172,12 +170,6 @@
172
170
  margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
173
171
  margin-inline-end: $input-padding-x-lg;
174
172
  }
175
-
176
- &::-webkit-file-upload-button {
177
- padding: $input-padding-y-lg $input-padding-x-lg;
178
- margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
179
- margin-inline-end: $input-padding-x-lg;
180
- }
181
173
  }
182
174
 
183
175
  // Make sure textareas don't shrink too much when resized
@@ -200,7 +192,7 @@ textarea {
200
192
 
201
193
  .form-control-color {
202
194
  width: $form-color-width;
203
- height: auto; // Override fixed browser height
195
+ height: $input-height;
204
196
  padding: $input-padding-y;
205
197
 
206
198
  &:not(:disabled):not([readonly]) {
@@ -208,12 +200,15 @@ textarea {
208
200
  }
209
201
 
210
202
  &::-moz-color-swatch {
211
- height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
203
+ border: 0 !important; // stylelint-disable-line declaration-no-important
212
204
  @include border-radius($input-border-radius);
213
205
  }
214
206
 
215
207
  &::-webkit-color-swatch {
216
- height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
208
+ border: 0 !important; // stylelint-disable-line declaration-no-important
217
209
  @include border-radius($input-border-radius);
218
210
  }
211
+
212
+ &.form-control-sm { height: $input-height-sm; }
213
+ &.form-control-lg { height: $input-height-lg; }
219
214
  }
@@ -8,8 +8,8 @@
8
8
  width: 100%;
9
9
  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
10
10
  padding: 0; // Need to reset padding
11
- background-color: transparent;
12
11
  appearance: none;
12
+ background-color: transparent;
13
13
 
14
14
  &:focus {
15
15
  outline: 0;
@@ -28,12 +28,12 @@
28
28
  width: $form-range-thumb-width;
29
29
  height: $form-range-thumb-height;
30
30
  margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
31
+ appearance: none;
31
32
  @include gradient-bg($form-range-thumb-bg);
32
33
  border: $form-range-thumb-border;
33
34
  @include border-radius($form-range-thumb-border-radius);
34
35
  @include box-shadow($form-range-thumb-box-shadow);
35
36
  @include transition($form-range-thumb-transition);
36
- appearance: none;
37
37
 
38
38
  &:active {
39
39
  @include gradient-bg($form-range-thumb-active-bg);
@@ -54,12 +54,12 @@
54
54
  &::-moz-range-thumb {
55
55
  width: $form-range-thumb-width;
56
56
  height: $form-range-thumb-height;
57
+ appearance: none;
57
58
  @include gradient-bg($form-range-thumb-bg);
58
59
  border: $form-range-thumb-border;
59
60
  @include border-radius($form-range-thumb-border-radius);
60
61
  @include box-shadow($form-range-thumb-box-shadow);
61
62
  @include transition($form-range-thumb-transition);
62
- appearance: none;
63
63
 
64
64
  &:active {
65
65
  @include gradient-bg($form-range-thumb-active-bg);
@@ -4,18 +4,19 @@
4
4
  // https://primer.github.io/.
5
5
 
6
6
  .form-select {
7
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
8
+
7
9
  display: block;
8
10
  width: 100%;
9
11
  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
12
  font-family: $form-select-font-family;
13
13
  @include font-size($form-select-font-size);
14
14
  font-weight: $form-select-font-weight;
15
15
  line-height: $form-select-line-height;
16
16
  color: $form-select-color;
17
+ appearance: none;
17
18
  background-color: $form-select-bg;
18
- background-image: escape-svg($form-select-indicator);
19
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
19
20
  background-repeat: no-repeat;
20
21
  background-position: $form-select-bg-position;
21
22
  background-size: $form-select-bg-size;
@@ -23,7 +24,6 @@
23
24
  @include border-radius($form-select-border-radius, 0);
24
25
  @include box-shadow($form-select-box-shadow);
25
26
  @include transition($form-select-transition);
26
- appearance: none;
27
27
 
28
28
  &:focus {
29
29
  border-color: $form-select-focus-border-color;
@@ -70,3 +70,11 @@
70
70
  @include font-size($form-select-font-size-lg);
71
71
  @include border-radius($form-select-border-radius-lg);
72
72
  }
73
+
74
+ @if $enable-dark-mode {
75
+ @include color-mode(dark) {
76
+ .form-select {
77
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
78
+ }
79
+ }
80
+ }
@@ -10,7 +10,8 @@
10
10
  width: 100%;
11
11
 
12
12
  > .form-control,
13
- > .form-select {
13
+ > .form-select,
14
+ > .form-floating {
14
15
  position: relative; // For focus state's z-index
15
16
  flex: 1 1 auto;
16
17
  width: 1%;
@@ -19,8 +20,9 @@
19
20
 
20
21
  // Bring the "active" form control to the top of surrounding elements
21
22
  > .form-control:focus,
22
- > .form-select:focus {
23
- z-index: 3;
23
+ > .form-select:focus,
24
+ > .form-floating:focus-within {
25
+ z-index: 5;
24
26
  }
25
27
 
26
28
  // Ensure buttons are always above inputs for more visually pleasing borders.
@@ -31,7 +33,7 @@
31
33
  z-index: 2;
32
34
 
33
35
  &:focus {
34
- z-index: 3;
36
+ z-index: 5;
35
37
  }
36
38
  }
37
39
  }
@@ -96,15 +98,19 @@
96
98
  // stylelint-disable-next-line no-duplicate-selectors
97
99
  .input-group {
98
100
  &:not(.has-validation) {
99
- > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
100
- > .dropdown-toggle:nth-last-child(n + 3) {
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 {
101
105
  @include border-end-radius(0);
102
106
  }
103
107
  }
104
108
 
105
109
  &.has-validation {
106
- > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
107
- > .dropdown-toggle:nth-last-child(n + 4) {
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 {
108
114
  @include border-end-radius(0);
109
115
  }
110
116
  }
@@ -115,7 +121,12 @@
115
121
  }
116
122
 
117
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
118
- margin-left: -$input-border-width;
124
+ margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
125
+ @include border-start-radius(0);
126
+ }
127
+
128
+ > .form-floating:not(:first-child) > .form-control,
129
+ > .form-floating:not(:first-child) > .form-select {
119
130
  @include border-start-radius(0);
120
131
  }
121
132
  }
@@ -0,0 +1,7 @@
1
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
2
+ @each $color, $value in $theme-colors {
3
+ .text-bg-#{$color} {
4
+ color: color-contrast($value) if($enable-important-utilities, !important, null);
5
+ background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
6
+ }
7
+ }
@@ -1,12 +1,30 @@
1
+ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
1
2
  @each $color, $value in $theme-colors {
2
3
  .link-#{$color} {
3
- color: $value;
4
+ color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
5
+ text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
4
6
 
5
7
  @if $link-shade-percentage != 0 {
6
8
  &:hover,
7
9
  &:focus {
8
- color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
10
+ $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
11
+ color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
12
+ text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
9
13
  }
10
14
  }
11
15
  }
12
16
  }
17
+
18
+ // One-off special link helper as a bridge until v6
19
+ .link-body-emphasis {
20
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
21
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
22
+
23
+ @if $link-shade-percentage != 0 {
24
+ &:hover,
25
+ &:focus {
26
+ color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
27
+ text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,5 @@
1
+ .focus-ring:focus {
2
+ outline: 0;
3
+ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
4
+ box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
5
+ }