Prevent line breaks within plus/minus buttons

This commit is contained in:
Maikel Linke
2020-12-18 16:02:02 +11:00
parent 688be46b10
commit cf2a105b2a
2 changed files with 18 additions and 10 deletions

View File

@@ -1,15 +1,17 @@
.small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::!variant.product.group_buy"}
%button.add-variant{type: "button", ng: {if: "!variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
{{ "js.shopfront.variant.add_to_cart" | t }}
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(-1)"}}>
-# U+FF0D Fullwidth Hyphen-Minus
%input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity", if: "variant.line_item.quantity"}}>
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
-# U+FF0B Fullwidth Plus Sign
%br
.variant-quantity-inputs{ng: {if: "!variant.line_item.quantity"}}
%button.add-variant{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
{{ "js.shopfront.variant.add_to_cart" | t }}
.variant-quantity-inputs{ng: {if: "variant.line_item.quantity"}}
%button.variant-quantity{type: "button", ng: {click: "add(-1)"}}>
-# U+FF0D Fullwidth Hyphen-Minus
%input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity"}}>
%button.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
-# U+FF0B Fullwidth Plus Sign
.variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
{{ "js.shopfront.variant.quantity_in_cart" | t:{quantity: variant.line_item.quantity || 0} }}
%input{type: :hidden,

View File

@@ -19,6 +19,12 @@
// Components to add variants to cart and change quantities
//
// They are not nested so that they can be used in modals.
.variant-quantity-inputs {
height: 2.5rem;
white-space: nowrap;
}
button.add-variant, button.variant-quantity {
height: 2.5rem;
border-radius: 0;