feat #113 (quantity selector): change small version general design af…

…ter design review
Orange-OpenSource · Dec 15, 2021 · c25858d · c25858d
1 parent 3eca277
commit c25858d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1850,10 +1850,16 @@ $step-item-arrow-shape:  polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 10
 
 //// 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;
+// Icons
+$quantity-selector-icon-add:              var(--#{$boosted-variable-prefix}add-icon) !default;
+$quantity-selector-icon-remove:           var(--#{$boosted-variable-prefix}remove-icon) !default;
+// Variables for large version
+$quantity-selector-icon-width:            .875rem !default;
+$quantity-selector-icon-remove-height:    .125rem !default;
+$quantity-selector-icon-add-height:       .875rem !default;
+// Variables for small version
+$quantity-selector-icon-sm-width:         .625rem !default;
+$quantity-selector-icon-sm-remove-height: .125rem !default;
+$quantity-selector-icon-sm-add-height:    .625rem !default;
 // scss-docs-end quantity-selector
 // End mod
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
@@ -16,7 +16,7 @@
       padding: 0;
       font-size: $font-size-sm;
       text-align: center;
-      transition: none;
+      transition: none; /* stylelint-disable-line property-disallowed-list */
       appearance: textfield;
 
       &:not(:focus) {
@@ -48,11 +48,22 @@
       @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after");
       order: -1;
       border-right: none;
+
+      &.btn-sm { /* stylelint-disable-line selector-no-qualifying-type */
+        @include button-icon($quantity-selector-icon-remove, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-remove-height, $pseudo: "after");
+      }
+
     }
     &: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;
+
+      &.btn-sm { /* stylelint-disable-line selector-no-qualifying-type */
+        @include button-icon($quantity-selector-icon-add, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-add-height, $pseudo: "after");
+      }
+
     }
+
   }
 
 }