Skip to content

Commit 2069509

Browse files
mrholekmrholek
committed
refactor(MultiSelect): improve styles
1 parent f14b3bc commit 2069509

File tree

3 files changed

+76
-104
lines changed

3 files changed

+76
-104
lines changed

‎scss/_variables-dark.scss

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -212,29 +212,4 @@ $button-outline-ghost-variants-dark: (
212212
"warning": btn-outline-color-map($warning-dark),
213213
"info": btn-outline-color-map($info-dark)
214214
) !default;
215-
216-
//
217-
// Multi Select
218-
//
219-
220-
$form-multi-select-tag-delete-color-dark: $body-tertiary-color-dark !default;
221-
$form-multi-select-tag-delete-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-color-dark}'><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;
222-
$form-multi-select-tag-delete-hover-color-dark: $body-color-dark !default;
223-
$form-multi-select-tag-delete-hover-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-hover-color-dark}'><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;
224-
$form-multi-select-tag-delete-focus-color-dark: $body-color-dark !default;
225-
$form-multi-select-tag-delete-focus-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-focus-color-dark}'><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;
226-
227-
$form-multi-select-cleaner-color-dark: $body-tertiary-color-dark !default;
228-
$form-multi-select-cleaner-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-color-dark}'><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;
229-
$form-multi-select-cleaner-hover-color-dark: $body-color-dark !default;
230-
$form-multi-select-cleaner-hover-bg-dark: 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-dark}'><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;
231-
$form-multi-select-cleaner-focus-color-dark: $body-color-dark !default;
232-
$form-multi-select-cleaner-focus-bg-dark: 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-dark}'><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;
233-
234-
$form-multi-select-indicator-color-dark: $body-tertiary-color-dark !default;
235-
$form-multi-select-indicator-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-color-dark}'><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;
236-
$form-multi-select-indicator-hover-color-dark: $body-color-dark !default;
237-
$form-multi-select-indicator-hover-bg-dark: 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-dark}'><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;
238-
$form-multi-select-indicator-focus-color-dark: $body-color-dark !default;
239-
$form-multi-select-indicator-focus-bg-dark: 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-dark}'><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;
240215
// scss-docs-end sass-dark-mode-vars

‎scss/_variables.scss

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1192,6 +1192,9 @@ $form-multi-select-focus-bg: $input-focus-bg !default;
11921192
$form-multi-select-focus-border-color: $input-focus-border-color !default;
11931193
$form-multi-select-focus-box-shadow: $input-btn-focus-box-shadow !default;
11941194

1195+
$form-multi-select-invalid-border-color: var(--#{$prefix}form-invalid-border-color) !default;
1196+
$form-multi-select-valid-border-color: var(--#{$prefix}form-valid-border-color) !default;
1197+
11951198
$form-multi-select-placeholder-color: var(--#{$prefix}secondary-color) !default;
11961199

11971200
$form-multi-select-selection-padding-y: $input-padding-y !default;
@@ -1209,39 +1212,30 @@ $form-multi-select-tag-border-radius-lg: .375rem !default;
12091212
$form-multi-select-tag-padding-y: .0625rem !default;
12101213
$form-multi-select-tag-padding-x: .5rem !default;
12111214

1212-
$form-multi-select-tag-delete-width: .75rem !default;
1213-
$form-multi-select-tag-delete-height: .75rem !default;
1214-
$form-multi-select-tag-delete-color: $body-secondary-color !default;
1215-
$form-multi-select-tag-delete-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-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;
1216-
$form-multi-select-tag-delete-hover-color: $body-color !default;
1217-
$form-multi-select-tag-delete-hover-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-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;
1218-
$form-multi-select-tag-delete-focus-color: $body-color !default;
1219-
$form-multi-select-tag-delete-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-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;
1220-
$form-multi-select-tag-delete-bg-size: .5rem !default;
1215+
$form-multi-select-tag-delete-width: .75rem !default;
1216+
$form-multi-select-tag-delete-height: .75rem !default;
1217+
$form-multi-select-tag-delete-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><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;
1218+
$form-multi-select-tag-delete-icon-color: var(--#{$prefix}secondary-color) !default;
1219+
$form-multi-select-tag-delete-icon-hover-color: var(--#{$prefix}body-color) !default;
1220+
$form-multi-select-tag-delete-icon-size: .5rem !default;
12211221

12221222
$form-multi-select-cleaner-width: 1.5rem !default;
12231223
$form-multi-select-cleaner-height: 1.5rem !default;
12241224
$form-multi-select-cleaner-padding-x: 0 !default;
12251225
$form-multi-select-cleaner-padding-y: 0 !default;
1226-
$form-multi-select-cleaner-color: $body-secondary-color !default;
1227-
$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;
1228-
$form-multi-select-cleaner-hover-color: $body-color !default;
1229-
$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;
1230-
$form-multi-select-cleaner-focus-color: $body-color !default;
1231-
$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;
1232-
$form-multi-select-cleaner-bg-size: .625rem !default;
1233-
1234-
$form-multi-select-indicator-width: 1.5rem !default;
1235-
$form-multi-select-indicator-height: 1.5rem !default;
1236-
$form-multi-select-indicator-padding-x: 0 !default;
1237-
$form-multi-select-indicator-padding-y: 0 !default;
1238-
$form-multi-select-indicator-color: $body-secondary-color !default;
1239-
$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;
1240-
$form-multi-select-indicator-hover-color: $body-color !default;
1241-
$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;
1242-
$form-multi-select-indicator-focus-color: $body-color !default;
1243-
$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;
1244-
$form-multi-select-indicator-bg-size: .75rem !default;
1226+
$form-multi-select-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><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;
1227+
$form-multi-select-cleaner-icon-color: var(--#{$prefix}tertiary-color) !default;
1228+
$form-multi-select-cleaner-icon-hover-color: var(--#{$prefix}body-color) !default;
1229+
$form-multi-select-cleaner-icon-size: .625rem !default;
1230+
1231+
$form-multi-select-indicator-width: 1.5rem !default;
1232+
$form-multi-select-indicator-height: 1.5rem !default;
1233+
$form-multi-select-indicator-padding-x: 0 !default;
1234+
$form-multi-select-indicator-padding-y: 0 !default;
1235+
$form-multi-select-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><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;
1236+
$form-multi-select-indicator-icon-color: var(--#{$prefix}tertiary-color) !default;
1237+
$form-multi-select-indicator-icon-hover-color: var(--#{$prefix}body-color) !default;
1238+
$form-multi-select-indicator-icon-size: .75rem !default;
12451239

12461240
$form-multi-select-dropdown-min-width: 100% !default;
12471241
$form-multi-select-dropdown-bg: var(--#{$prefix}body-bg) !default;

0 commit comments

Comments
 (0)