From 47c3b83f9b2b53bbac6de120cda078556129462b Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Tue, 30 Nov 2021 15:19:13 +0100 Subject: [PATCH] feat #113 (quantity selector): move icons from svg sprite to css variables --- scss/_variables.scss | 17 +++++- scss/forms/_quantity-selector.scss | 4 ++ .../docs/5.1/forms/quantity-selector.md | 56 ++++++++----------- site/content/docs/5.1/forms/validation.md | 31 ++++------ .../docs/5.1/assets/img/boosted-sprite.svg | 6 -- 5 files changed, 54 insertions(+), 60 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index e255ac7673..20ae741e7d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -360,13 +360,18 @@ $success-icon: url("data:image/svg+xml,") !default; $warning-icon: url("data:image/svg+xml,") !default; $danger-icon: url("data:image/svg+xml,") !default; +$add-icon: url("data:image/svg+xml,") !default; +$remove-icon: url("data:image/svg+xml,") !default; + //// SVG used several times $svg-as-custom-props: ( "chevron": $chevron-icon, "close": $cross-icon-stroke, "check": $check-icon, "success": $success-icon, - "error": $danger-icon + "error": $danger-icon, + "add": $add-icon, + "remove": $remove-icon ) !default; //// Filters // see https://codepen.io/sosuke/pen/Pjoqqp @@ -1842,4 +1847,14 @@ $step-link-marker-lg: counter($stepped-process-counter) ".\A0" !default; $step-item-arrow-width: 1rem !default; $step-item-arrow-shape: polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"} !default; // Used in clip-path // scss-docs-end stepped-process + +//// Quantity selector +// scss-docs-start quantity-selector +$quantity-selector-icon-add: var(--#{$boosted-variable-prefix}add-icon) !default; +$quantity-selector-icon-remove: var(--#{$boosted-variable-prefix}remove-icon) !default; +$quantity-selector-icon-width: .875rem !default; +$quantity-selector-icon-remove-height: .125rem !default; +$quantity-selector-icon-add-height: .875rem !default; + +// scss-docs-end back-to-top // End mod diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss index fd16d8102b..87c8620438 100644 --- a/scss/forms/_quantity-selector.scss +++ b/scss/forms/_quantity-selector.scss @@ -41,13 +41,17 @@ } button { + border: $border-width solid $gray-500; &:first-of-type { + @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after"); order: -1; border-right: none; } &:last-of-type { + @include button-icon($quantity-selector-icon-add, $size: $quantity-selector-icon-width $quantity-selector-icon-add-height, $pseudo: "after"); border-left: none; } } + } diff --git a/site/content/docs/5.1/forms/quantity-selector.md b/site/content/docs/5.1/forms/quantity-selector.md index 41cfe6737c..41d5792064 100644 --- a/site/content/docs/5.1/forms/quantity-selector.md +++ b/site/content/docs/5.1/forms/quantity-selector.md @@ -17,41 +17,29 @@ Value will vary between the values define in the `min` and `max` attributes (neg The custom `data-bs-round` attribute will help you to define the number of digits to appear after the decimal point. {{< example >}}
- -
- - - -
+ +
+ + + +
- -
- - - -
+ +
+ + + +
{{< /example >}} \ No newline at end of file diff --git a/site/content/docs/5.1/forms/validation.md b/site/content/docs/5.1/forms/validation.md index ac8b345cac..24cbceeb75 100644 --- a/site/content/docs/5.1/forms/validation.md +++ b/site/content/docs/5.1/forms/validation.md @@ -284,25 +284,18 @@ Validation styles are available for the following form controls and components:
-
- -
- - - -
Please enter a valid number
-
+
+ +
+ + + +
diff --git a/site/static/docs/5.1/assets/img/boosted-sprite.svg b/site/static/docs/5.1/assets/img/boosted-sprite.svg index e3488fe1f1..691ca60162 100644 --- a/site/static/docs/5.1/assets/img/boosted-sprite.svg +++ b/site/static/docs/5.1/assets/img/boosted-sprite.svg @@ -35,10 +35,4 @@ - - - - - -