administrate-bootstrap-theme 1.0.4 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -0
  3. data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2514 -2980
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +15 -9
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -21
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +46 -26
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +406 -284
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -7
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +5 -10
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +14 -4
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
  59. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
  60. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
  61. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
  62. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
  63. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
  64. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
  65. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +15 -14
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
  67. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
  68. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
  69. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
  70. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
  71. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +6 -2
  72. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
  73. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
  74. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
  75. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
  76. data/lib/administrate-bootstrap-theme/version.rb +3 -2
  77. data/package.json +2 -2
  78. metadata +24 -3
@@ -1,16 +1,13 @@
1
- /*!
2
- * Bootstrap Grid v5.1.0 (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";
@@ -1,15 +1,10 @@
1
- /*!
2
- * Bootstrap Reboot v5.1.0 (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";
11
- // Prevent the usage of custom properties since we don't add them to `:root` in reboot
12
- $font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
13
- $font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
6
+ @import "variables-dark";
7
+ @import "maps";
14
8
  @import "mixins";
9
+ @import "root";
15
10
  @import "reboot";
@@ -1,16 +1,17 @@
1
- /*!
2
- * Bootstrap Utilities v5.1.0 (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.0 (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;
@@ -60,6 +60,7 @@
60
60
  padding-bottom: $form-select-padding-y-sm;
61
61
  padding-left: $form-select-padding-x-sm;
62
62
  @include font-size($form-select-font-size-sm);
63
+ @include border-radius($form-select-border-radius-sm);
63
64
  }
64
65
 
65
66
  .form-select-lg {
@@ -67,4 +68,13 @@
67
68
  padding-bottom: $form-select-padding-y-lg;
68
69
  padding-left: $form-select-padding-x-lg;
69
70
  @include font-size($form-select-font-size-lg);
71
+ @include border-radius($form-select-border-radius-lg);
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
+ }
70
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
+ }