Skip to content

Commit 6dcfb38

Browse files
mrholekmrholek
committed
refactor(MultiSelect): update CSS variables
1 parent 4e5e5bd commit 6dcfb38

File tree

2 files changed

+20
-9
lines changed

2 files changed

+20
-9
lines changed

‎scss/_variables.scss

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1218,27 +1218,32 @@ $form-multi-select-tag-border-radius-lg: .375rem !default;
12181218
$form-multi-select-tag-padding-y: .0625rem !default;
12191219
$form-multi-select-tag-padding-x: .5rem !default;
12201220

1221-
$form-multi-select-cleaner-width: .75rem !default;
1222-
$form-multi-select-cleaner-height: .75rem !default;
1221+
$form-multi-select-buttons-padding-y: .375rem !default;
1222+
$form-multi-select-buttons-padding-x: .375rem !default;
1223+
1224+
$form-multi-select-cleaner-width: 1.5rem !default;
1225+
$form-multi-select-cleaner-height: 1.5rem !default;
12231226
$form-multi-select-cleaner-padding-x: 0 !default;
1224-
$form-multi-select-cleaner-padding-y: .5rem !default;
1227+
$form-multi-select-cleaner-padding-y: 0 !default;
12251228
$form-multi-select-cleaner-color: $medium-emphasis !default;
12261229
$form-multi-select-cleaner-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
12271230
$form-multi-select-cleaner-hover-color: $high-emphasis !default;
12281231
$form-multi-select-cleaner-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-hover-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
12291232
$form-multi-select-cleaner-focus-color: $high-emphasis !default;
12301233
$form-multi-select-cleaner-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-focus-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
1234+
$form-multi-select-cleaner-bg-size: .625rem !default;
12311235

1232-
$form-multi-select-indicator-width: .75rem !default;
1233-
$form-multi-select-indicator-height: .75rem !default;
1234-
$form-multi-select-indicator-padding-x: .75rem !default;
1235-
$form-multi-select-indicator-padding-y: .5rem !default;
1236+
$form-multi-select-indicator-width: 1.5rem !default;
1237+
$form-multi-select-indicator-height: 1.5rem !default;
1238+
$form-multi-select-indicator-padding-x: 0 !default;
1239+
$form-multi-select-indicator-padding-y: 0 !default;
12361240
$form-multi-select-indicator-color: $medium-emphasis !default;
12371241
$form-multi-select-indicator-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-color}'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
12381242
$form-multi-select-indicator-hover-color: $high-emphasis !default;
12391243
$form-multi-select-indicator-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-hover-color}'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
12401244
$form-multi-select-indicator-focus-color: $high-emphasis !default;
12411245
$form-multi-select-indicator-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-focus-color}'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
1246+
$form-multi-select-indicator-bg-size: .75rem !default;
12421247

12431248
$form-multi-select-dropdown-min-width: 100% !default;
12441249
$form-multi-select-dropdown-bg: $white !default;

‎scss/forms/_form-multi-select.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,15 @@
2323
--#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};
2424
--#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};
2525

26+
--#{$prefix}form-multi-select-buttons-padding-y: #{$form-multi-select-buttons-padding-y};
27+
--#{$prefix}form-multi-select-buttons-padding-x: #{$form-multi-select-buttons-padding-x};
28+
2629
--#{$prefix}form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
2730
--#{$prefix}form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
2831
--#{$prefix}form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
2932
--#{$prefix}form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
3033
--#{$prefix}form-multi-select-cleaner-bg: #{escape-svg($form-multi-select-cleaner-bg)};
34+
--#{$prefix}form-multi-select-cleaner-bg-size: #{$form-multi-select-cleaner-bg-size};
3135
--#{$prefix}form-multi-select-cleaner-hover-bg: #{escape-svg($form-multi-select-cleaner-hover-bg)};
3236
--#{$prefix}form-multi-select-cleaner-focus-bg: #{escape-svg($form-multi-select-cleaner-focus-bg)};
3337

@@ -36,6 +40,7 @@
3640
--#{$prefix}form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};
3741
--#{$prefix}form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};
3842
--#{$prefix}form-multi-select-indicator-bg: #{escape-svg($form-multi-select-indicator-bg)};
43+
--#{$prefix}form-multi-select-indicator-bg-size: #{$form-multi-select-indicator-bg-size};
3944
--#{$prefix}form-multi-select-indicator-hover-bg: #{escape-svg($form-multi-select-indicator-hover-bg)};
4045
--#{$prefix}form-multi-select-indicator-focus-bg: #{escape-svg($form-multi-select-indicator-focus-bg)};
4146

@@ -207,6 +212,7 @@ select.form-multi-select {
207212
display: flex;
208213
align-items: center;
209214
min-height: calc(2 * var(--#{$prefix}form-multi-select-selection-padding-y) + calc(var(--#{$prefix}form-multi-select-font-size) * var(--#{$prefix}form-multi-select-line-height))); // stylelint-disable-line function-disallowed-list
215+
padding: var(--#{$prefix}form-multi-select-buttons-padding-y) var(--#{$prefix}form-multi-select-buttons-padding-x);
210216
}
211217

212218
.form-multi-select-cleaner,
@@ -229,7 +235,7 @@ select.form-multi-select {
229235
height: var(--#{$prefix}form-multi-select-cleaner-height);
230236
padding: var(--#{$prefix}form-multi-select-cleaner-padding-y) var(--#{$prefix}form-multi-select-cleaner-padding-x);
231237
background-image: var(--#{$prefix}form-multi-select-cleaner-bg);
232-
background-size: var(--#{$prefix}form-multi-select-cleaner-width) auto;
238+
background-size: var(--#{$prefix}form-multi-select-cleaner-bg-size);
233239

234240
&:hover {
235241
background-image: var(--#{$prefix}form-multi-select-cleaner-hover-bg);
@@ -245,7 +251,7 @@ select.form-multi-select {
245251
height: var(--#{$prefix}form-multi-select-indicator-height);
246252
padding: var(--#{$prefix}form-multi-select-indicator-padding-y) var(--#{$prefix}form-multi-select-indicator-padding-x);
247253
background-image: var(--#{$prefix}form-multi-select-indicator-bg);
248-
background-size: var(--#{$prefix}form-multi-select-indicator-width) auto;
254+
background-size: var(--#{$prefix}form-multi-select-indicator-bg-size);
249255
@include transition(transform .15s ease-in-out);
250256

251257
&:hover {

0 commit comments

Comments
 (0)