sdga-ui 1.0.11 → 1.0.12

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 (12) hide show
  1. package/css/dga-ui.css +334 -69
  2. package/css/dga-ui.css.map +1 -1
  3. package/package.json +1 -1
  4. package/theme/components/_forms-form-control.scss +14 -9
  5. package/theme/components/_forms-form-select.scss +48 -0
  6. package/theme/components/_forms.scss +1 -1
  7. package/theme/components/_tooltips.scss +6 -5
  8. package/theme/customizations/_forms-form-control.scss +214 -38
  9. package/theme/customizations/_forms-form-select.scss +143 -0
  10. package/theme/customizations/_forms.scss +1 -0
  11. package/theme/customizations/_global.scss +10 -0
  12. package/theme/components/_forms-select.scss +0 -47
package/theme/components/_forms-form-control.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  // Bootstrap 5.3 - Form Input Variables
2
2
 
3
- @use 'sass:color';
4
-
5
3
  // ============================================
6
4
  // FORM INPUTS
7
5
  // ============================================
@@ -10,7 +8,7 @@
10
8
  $input-padding-y: $input-btn-padding-y;
11
9
  $input-padding-x: $input-btn-padding-x;
12
10
  $input-font-family: $input-btn-font-family;
13
- $input-font-size: $input-btn-font-size;
11
+ $input-font-size: $font-size-sm;
14
12
  $input-font-weight: $font-weight-base;
15
13
  $input-line-height: $input-btn-line-height;
16
14
 
@@ -20,12 +18,12 @@ $input-font-size-sm: $input-btn-font-size-sm;
20
18
 
21
19
  $input-padding-y-lg: $input-btn-padding-y-lg;
22
20
  $input-padding-x-lg: $input-btn-padding-x-lg;
23
- $input-font-size-lg: $input-btn-font-size-lg;
21
+ $input-font-size-lg: $font-size-base;
24
22
 
25
23
  $input-bg: var(--#{$prefix}body-bg);
26
- $input-disabled-color: null;
24
+ $input-disabled-color: $neutral-400;
27
25
  $input-disabled-bg: var(--#{$prefix}secondary-bg);
28
- $input-disabled-border-color: null;
26
+ $input-disabled-border-color: $neutral-400;
29
27
 
30
28
  $input-color: $neutral-700;
31
29
  $input-border-color: $neutral-400;
@@ -51,9 +49,9 @@ $input-height-inner: add($input-line-height * 1em, $input-pad
51
49
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y);
52
50
  $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5);
53
51
 
54
- $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
55
- $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
56
- $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));
52
+ $input-height: 2rem;
53
+ $input-height-sm: 1.5rem;
54
+ $input-height-lg: 2.5rem;
57
55
 
58
56
  $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
59
57
 
@@ -78,3 +76,10 @@ $form-file-button-color: $input-color;
78
76
  $form-file-button-bg: var(--#{$prefix}tertiary-bg);
79
77
  $form-file-button-hover-bg: var(--#{$prefix}secondary-bg);
80
78
 
79
+ // Input Group Addons
80
+ $input-group-addon-padding-y: .125rem;
81
+ $input-group-addon-padding-x: 1rem;
82
+ $input-group-addon-font-weight: $input-font-weight;
83
+ $input-group-addon-color: $black;
84
+ $input-group-addon-bg: var(--#{$prefix}tertiary-bg);
85
+ $input-group-addon-border-color: $input-border-color;
package/theme/components/_forms-form-select.scss ADDED
@@ -0,0 +1,48 @@
1
+ // Bootstrap 5.3 - Form Input Variables
2
+
3
+ // ============================================
4
+ // FORM INPUTS
5
+ // ============================================
6
+
7
+ // Form Selects
8
+ $form-select-padding-y: $input-padding-y;
9
+ $form-select-padding-x: $input-padding-x;
10
+ $form-select-font-family: $input-font-family;
11
+ $form-select-font-size: $font-size-sm;
12
+ $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image
13
+ $form-select-font-weight: $font-weight-base;
14
+ $form-select-line-height: $input-btn-line-height;
15
+ $form-select-color: $black;
16
+ $form-select-bg: $input-bg;
17
+ $form-select-disabled-color: $neutral-400;
18
+ $form-select-disabled-bg: var(--#{$prefix}body-bg);
19
+ $form-select-disabled-border-color: $neutral-400;
20
+ $form-select-bg-position: right $form-select-padding-x center;
21
+ $form-select-bg-size: 16px 12px; // In pixels because image dimensions
22
+ $form-select-indicator-color: $black;
23
+ $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
24
+
25
+ $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;
26
+ $form-select-feedback-icon-position: center right $form-select-indicator-padding;
27
+ $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half;
28
+
29
+ $form-select-border-width: $input-border-width;
30
+ $form-select-border-color: $input-border-color;
31
+ $form-select-border-radius: $input-border-radius;
32
+ $form-select-box-shadow: null;
33
+
34
+ $form-select-focus-border-color: $input-focus-border-color;
35
+ $form-select-focus-width: $input-focus-width;
36
+ $form-select-focus-box-shadow: null;
37
+
38
+ $form-select-padding-y-sm: $input-padding-y-sm;
39
+ $form-select-padding-x-sm: $input-padding-x-sm;
40
+ $form-select-font-size-sm: $input-font-size-sm;
41
+ $form-select-border-radius-sm: $input-border-radius-sm;
42
+
43
+ $form-select-padding-y-lg: $input-padding-y-lg;
44
+ $form-select-padding-x-lg: $input-padding-x-lg;
45
+ $form-select-font-size-lg: $input-font-size-lg;
46
+ $form-select-border-radius-lg: $input-border-radius-lg;
47
+
48
+ $form-select-transition: $input-transition;
package/theme/components/_forms.scss CHANGED
@@ -33,7 +33,7 @@ $input-btn-border-width: 1px;
33
33
  // ============================================
34
34
 
35
35
  @import 'forms-form-control';
36
- @import 'forms-select';
36
+ @import 'forms-form-select';
37
37
  @import 'forms-check';
38
38
  @import 'forms-switch';
39
39
  @import 'forms-range';
package/theme/components/_tooltips.scss CHANGED
@@ -1,15 +1,16 @@
1
1
  // Bootstrap 5.3 - Tooltip Component Variables
2
2
 
3
3
  $tooltip-font-size: $font-size-sm;
4
- $tooltip-max-width: 200px;
5
- $tooltip-color: $white;
6
- $tooltip-bg: $black;
4
+ $tooltip-max-width: 240px;
5
+ $tooltip-color: $black;
6
+ $tooltip-bg: $white;
7
7
  $tooltip-border-radius: $radius-sm;
8
- $tooltip-opacity: 0.9;
8
+ $tooltip-opacity: 0.98;
9
9
  $tooltip-padding-y: 0.25rem;
10
10
  $tooltip-padding-x: 0.5rem;
11
11
  $tooltip-margin: null;
12
12
 
13
13
  $tooltip-arrow-width: 0.8rem;
14
14
  $tooltip-arrow-height: 0.4rem;
15
- $tooltip-arrow-color: null;
15
+ $tooltip-arrow-color: $tooltip-bg;
16
+ $tooltip-offset-y: 0.5rem;
package/theme/customizations/_forms-form-control.scss CHANGED
@@ -1,49 +1,65 @@
1
1
  .form-control {
2
2
  min-height: 2rem;
3
3
  position: relative;
4
- border-color: $neutral-400 !important;
4
+ border-color: $neutral-400;
5
+ margin-bottom: 0;
6
+
7
+ &.form-control-lg {
8
+ min-height: 2.5rem;
9
+ }
10
+
11
+ &.form-control-sm {
12
+ min-height: 1.5rem;
13
+ }
5
14
 
6
15
  // Create an animated underline effect starting from center
7
- background-image: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%) !important;
16
+ background-image: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
8
17
  background-size: 0% 2px;
9
18
  background-repeat: no-repeat;
10
19
  background-position: center bottom;
11
- transition: background-size 0.2s ease-in-out, border-color 0.2s ease-in-out;
20
+ transition: background-size 0.3s ease-in-out,
21
+ border-color 0.3s ease-in-out;
12
22
 
13
- &.filled {
14
- background-color: var(--#{$prefix}body-bg) !important;
23
+ &.filled {
24
+ background-color: var(--#{$prefix}body-bg);
15
25
  }
26
+
16
27
  &.filled-darker {
17
- border-color: transparent !important;
18
- background-color: $neutral-100 !important;
28
+ border-color: transparent;
29
+ background-color: $neutral-100;
19
30
  }
31
+
20
32
  &.filled-lighter {
21
- border-color: transparent !important;
22
- background-color: $neutral-25 !important;
33
+ border-color: transparent;
34
+ background-color: $neutral-25;
23
35
  }
24
36
 
25
37
  &:hover {
26
- border-color: $black !important;
27
- color: $black !important;
38
+ border-color: $black;
39
+ color: $black;
28
40
  }
29
41
 
30
42
  &:active {
31
- border-color: $neutral-400 !important;
32
- background-color: $neutral-100 !important;
33
- color: $black !important;
43
+ border-color: $neutral-400;
44
+ background-color: $neutral-100;
45
+ color: $black;
34
46
  background-size: 100% 2px;
35
47
  }
36
48
 
37
49
  &:read-only,
38
50
  &[readonly] {
39
- border-color: $neutral-300 !important;
40
- color: $black !important;
51
+ border-color: $neutral-300;
52
+ color: $black;
41
53
  pointer-events: none;
54
+
55
+ &::placeholder {
56
+ color: $neutral-500;
57
+ }
42
58
  }
43
59
 
44
60
  &:focus-visible,
45
61
  &:focus {
46
- border-color: $neutral-700 !important;
62
+ border-color: $neutral-700;
47
63
  outline: none !important;
48
64
  background-size: 100% 2px;
49
65
  box-shadow: $box-shadow;
@@ -51,57 +67,217 @@
51
67
 
52
68
  &:disabled,
53
69
  &[disabled] {
54
- border-color: $neutral-300 !important;
55
- background-color: var(--#{ $prefix}body-bg) !important;
56
- color: $neutral-400 !important;
70
+ border-color: $neutral-300;
71
+ background-color: var(--#{ $prefix}body-bg);
72
+ color: $neutral-400;
57
73
  pointer-events: none;
74
+
75
+ &::placeholder {
76
+ color: $neutral-400;
77
+ }
78
+
58
79
  }
59
80
 
60
81
  &:user-invalid {
61
- border-color: $error-700 !important;
62
- background-image: linear-gradient(to right, $error-700 0%, $error-700 100%) !important;
63
-
82
+ border-color: $error-700;
83
+ background-image: linear-gradient(to right, $error-700 0%, $error-700 100%);
84
+
64
85
  &:hover {
65
- border-color: $error-700 !important;
86
+ border-color: $error-700;
66
87
  }
67
88
 
68
89
  &:active {
69
- border-color: $neutral-400 !important;
90
+ border-color: $neutral-400;
70
91
  background-size: 100% 2px;
71
92
  }
72
93
 
73
94
  &:read-only,
74
95
  &[readonly] {
75
- border-color: $neutral-300 !important;
96
+ border-color: $neutral-300;
76
97
  }
77
98
 
78
99
  &:focus-visible,
79
100
  &:focus {
80
- border-color: $error-700 !important;
101
+ border-color: $error-700;
81
102
  }
82
103
 
83
104
  &:disabled,
84
105
  &[disabled] {
85
- border-color: $neutral-300 !important;
106
+ border-color: $neutral-300;
86
107
  }
87
108
  }
88
109
  }
89
110
 
90
- .form-control-lg {
91
- min-height: 2.5rem;
92
- }
93
-
94
111
  .form-label {
112
+ font-size: $font-size-sm;
113
+
114
+ &.required {
115
+ &::before {
116
+ content: "*";
117
+ color: $error-700;
118
+ margin-inline-end: 0.25rem;
119
+ }
120
+ }
121
+
95
122
  &.disabled {
96
- color: $neutral-400 !important;
123
+ color: $neutral-400;
97
124
  pointer-events: none;
98
- }
99
125
 
100
- &.required {
101
126
  &::before {
102
- content: "*";
103
- color: $error-700 !important;
104
- margin-inline-end: 0.25rem;
127
+ color: $neutral-400;
128
+ }
129
+ }
130
+ }
131
+
132
+ .form-label-lg {
133
+ font-size: $font-size-base;
134
+ }
135
+
136
+ .input-group {
137
+ border: $input-border-width solid $input-border-color;
138
+ border-radius: $radius-sm;
139
+ transition: background-size 0.3s ease-in-out, border-color 0.3s ease-in-out;
140
+
141
+ // Create an animated underline effect using pseudo-element
142
+ position: relative;
143
+
144
+ &::after {
145
+ content: '';
146
+ position: absolute;
147
+ bottom: 0;
148
+ left: 50%;
149
+ width: 100%;
150
+ height: 2px;
151
+ background: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
152
+ transform: translateX(-50%) scaleX(0);
153
+ transform-origin: center;
154
+ transition: transform 0.3s ease-in-out;
155
+ }
156
+
157
+
158
+ .input-group-text {
159
+ border: none;
160
+ background: $neutral-100;
161
+ color: $neutral-500;
162
+
163
+ &.subtle {
164
+ background-color: var(--#{ $prefix}body-bg);
165
+ }
166
+
167
+ }
168
+
169
+ .btn {
170
+ border: none;
171
+ box-shadow: none;
172
+ }
173
+
174
+
175
+ .form-control {
176
+ border: none;
177
+ box-shadow: none;
178
+ background-color: var(--#{$prefix}body-bg);
179
+ background-image: linear-gradient(to right, transparent 0%, transparent 100%);
180
+ }
181
+
182
+ &:hover {
183
+ border-color: $black;
184
+ color: $black;
185
+ }
186
+
187
+ &:active {
188
+ border-color: $neutral-400;
189
+ background-color: $neutral-100;
190
+ color: $black;
191
+
192
+ &::after {
193
+ transform: translateX(-50%) scaleX(1);
194
+ }
195
+ }
196
+
197
+ &:focus-within {
198
+ border-color: $neutral-700;
199
+ outline: none;
200
+
201
+ &::after {
202
+ z-index: 5;
203
+ transform: translateX(-50%) scaleX(1);
204
+ }
205
+
206
+ box-shadow: $box-shadow;
207
+ }
208
+
209
+ &:has(.form-control:read-only),
210
+ &:has(.form-control[readonly]) {
211
+ border-color: $neutral-300;
212
+ color: $black;
213
+ pointer-events: none;
214
+ }
215
+
216
+
217
+ &:has(.form-control:disabled),
218
+ &:has(.form-control[disabled]) {
219
+ border-color: $neutral-300;
220
+ background-color: var(--#{ $prefix}body-bg);
221
+ color: $neutral-400;
222
+ pointer-events: none;
223
+
224
+ &::after {
225
+ transform: translateX(-50%) scaleX(0);
226
+ }
227
+
228
+ .form-control {
229
+ border-color: $neutral-300;
230
+ background-color: var(--#{ $prefix}body-bg);
231
+ color: $neutral-400;
232
+ pointer-events: none;
233
+ }
234
+
235
+ .input-group-text {
236
+ background-color: $neutral-200;
237
+ color: $neutral-400;
238
+ pointer-events: none;
239
+
240
+ &.subtle {
241
+ background-color: var(--#{ $prefix}body-bg);
242
+ }
243
+ }
244
+ }
245
+
246
+ &:has(.form-control:user-invalid) {
247
+ border-color: $error-700;
248
+
249
+ &::after {
250
+ background: linear-gradient(to right, $error-700 0%, $error-700 100%);
251
+ }
252
+
253
+ &:hover {
254
+ border-color: $error-700;
255
+ }
256
+
257
+ &:active {
258
+ border-color: $neutral-400;
259
+
260
+ &::after {
261
+ transform: translateX(-50%) scaleX(1);
262
+ }
263
+ }
264
+
265
+ &:has(.form-control:read-only),
266
+ &:has(.form-control[readonly]) {
267
+ border-color: $neutral-300;
268
+ }
269
+
270
+ &:focus-within {
271
+ border-color: $error-700;
272
+
273
+ &::after {
274
+ transform: translateX(-50%) scaleX(1);
275
+ }
276
+ }
277
+
278
+ &:has(.form-control:disabled),
279
+ &:has(.form-control[disabled]) {
280
+ border-color: $neutral-300;
105
281
  }
106
282
  }
107
283
  }
package/theme/customizations/_forms-form-select.scss ADDED
@@ -0,0 +1,143 @@
1
+
2
+ // ============================================
3
+ // FORM SELECT STYLES
4
+ // ============================================
5
+
6
+ .form-select {
7
+ min-height: 2rem;
8
+ position: relative;
9
+ border-color: $neutral-400;
10
+ margin-bottom: 0;
11
+
12
+ // Style the dropdown options
13
+ option {
14
+ background-color: $white;
15
+ color: $black;
16
+ padding: .5rem;
17
+ position: relative;
18
+
19
+ &:checked {
20
+ background-color: $neutral-100 !important;
21
+ color: $black !important;
22
+ position: relative;
23
+ // Add a checkmark for selected option
24
+ &::after {
25
+ content: '✔' !important;
26
+ position: absolute !important;
27
+ right: 1rem !important;
28
+ color: $black !important;
29
+ }
30
+ }
31
+ }
32
+
33
+ &:has(option:disabled:checked) {
34
+ color: $neutral-500;
35
+ &:hover {
36
+ color: $neutral-500;
37
+ }
38
+ option:disabled:checked {
39
+ color: $neutral-500;
40
+ }
41
+ }
42
+
43
+ // Create an animated underline effect using pseudo-element
44
+ &::after {
45
+ content: '';
46
+ position: absolute;
47
+ bottom: 0;
48
+ left: 50%;
49
+ width: 100%;
50
+ height: 2px;
51
+ background: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
52
+ transform: translateX(-50%) scaleX(0);
53
+ transform-origin: center;
54
+ transition: transform 0.3s ease-in-out;
55
+ }
56
+
57
+ &.filled {
58
+ background-color: var(--#{$prefix}body-bg);
59
+ }
60
+
61
+ &.filled-darker {
62
+ border-color: transparent;
63
+ background-color: $neutral-100;
64
+ }
65
+
66
+ &.filled-lighter {
67
+ border-color: transparent;
68
+ background-color: $neutral-25;
69
+ }
70
+
71
+ &:hover {
72
+ border-color: $neutral-500;
73
+ color: $black;
74
+ }
75
+
76
+ &:active {
77
+ border-color: $neutral-950;
78
+ background-color: $neutral-100;
79
+ color: $black;
80
+ &::after {
81
+ transform: translateX(-50%) scaleX(1);
82
+ }
83
+ }
84
+
85
+ &[readonly] {
86
+ border-color: $neutral-300;
87
+ color: $black;
88
+ pointer-events: none;
89
+ }
90
+
91
+ &:focus-visible,
92
+ &:focus {
93
+ border-color: $neutral-700;
94
+ outline: none !important;
95
+ &::after {
96
+ transform: translateX(-50%) scaleX(1);
97
+ }
98
+ box-shadow: $box-shadow;
99
+ }
100
+
101
+ &:disabled,
102
+ &[disabled] {
103
+ border-color: $neutral-300;
104
+ background-color: var(--#{ $prefix}body-bg);
105
+ color: $neutral-400;
106
+ pointer-events: none;
107
+ }
108
+
109
+ &:user-invalid {
110
+ border-color: $error-700;
111
+ &::after {
112
+ background: linear-gradient(to right, $error-700 0%, $error-700 100%);
113
+ }
114
+
115
+ &:hover {
116
+ border-color: $error-700;
117
+ }
118
+
119
+ &:active {
120
+ border-color: $neutral-400;
121
+ &::after {
122
+ transform: translateX(-50%) scaleX(1);
123
+ }
124
+ }
125
+
126
+ &[readonly] {
127
+ border-color: $neutral-300;
128
+ }
129
+
130
+ &:focus-visible,
131
+ &:focus {
132
+ border-color: $error-700;
133
+ &::after {
134
+ transform: translateX(-50%) scaleX(1);
135
+ }
136
+ }
137
+
138
+ &:disabled,
139
+ &[disabled] {
140
+ border-color: $neutral-300;
141
+ }
142
+ }
143
+ }
package/theme/customizations/_forms.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // Form Customizations - SDJA Custom Enhancements
2
2
 
3
3
  @import 'forms-form-control';
4
+ @import 'forms-form-select';
4
5
  @import 'forms-check';
5
6
 
package/theme/customizations/_global.scss CHANGED
@@ -9,6 +9,11 @@
9
9
  outline: 2px solid $black !important;
10
10
  }
11
11
 
12
+ ::selection {
13
+ background: $primary;
14
+ color: $white;
15
+ }
16
+
12
17
  .on-primary {
13
18
  background-color: $primary-900;
14
19
  color: $white;
@@ -22,6 +27,11 @@
22
27
  *:focus {
23
28
  outline-color: $white !important;
24
29
  }
30
+
31
+ ::selection {
32
+ background: $primary;
33
+ color: $white;
34
+ }
25
35
  }
26
36
 
27
37
  .list-unstyled {
package/theme/components/_forms-select.scss DELETED
@@ -1,47 +0,0 @@
1
- // Bootstrap 5.3 - Form Select Variables
2
-
3
- // ============================================
4
- // FORM SELECT
5
- // ============================================
6
-
7
- $form-select-padding-y: $input-padding-y;
8
- $form-select-padding-x: $input-padding-x;
9
- $form-select-font-family: $input-font-family;
10
- $form-select-font-size: $input-font-size;
11
- $form-select-indicator-padding: 1rem;
12
- $form-select-font-weight: $input-font-weight;
13
- $form-select-line-height: $input-line-height;
14
- $form-select-color: $input-color;
15
- $form-select-bg: $input-bg;
16
- $form-select-disabled-color: null;
17
- $form-select-disabled-bg: $gray-200;
18
- $form-select-disabled-border-color: $input-disabled-border-color;
19
- $form-select-bg-position: right $form-select-padding-x center;
20
- $form-select-bg-size: 16px 12px;
21
- $form-select-indicator-color: $gray-800;
22
- $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
23
-
24
- $form-select-feedback-icon-padding-end: calc((1em + #{$form-select-padding-x * 2}) * 3 / 4 + #{$form-select-indicator-padding});
25
- $form-select-feedback-icon-position: center right $form-select-indicator-padding;
26
- $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half;
27
-
28
- $form-select-border-width: $input-border-width;
29
- $form-select-border-color: $input-border-color;
30
- $form-select-border-radius: $input-border-radius;
31
- $form-select-box-shadow: $input-box-shadow;
32
-
33
- $form-select-focus-border-color: $input-focus-border-color;
34
- $form-select-focus-width: $input-focus-width;
35
- $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width rgba($primary, 0.25);
36
-
37
- $form-select-padding-y-sm: $input-padding-y-sm;
38
- $form-select-padding-x-sm: $input-padding-x-sm;
39
- $form-select-font-size-sm: $input-font-size-sm;
40
- $form-select-border-radius-sm: $input-border-radius-sm;
41
-
42
- $form-select-padding-y-lg: $input-padding-y-lg;
43
- $form-select-padding-x-lg: $input-padding-x-lg;
44
- $form-select-font-size-lg: $input-font-size-lg;
45
- $form-select-border-radius-lg: $input-border-radius-lg;
46
-
47
- $form-select-transition: $input-transition;