mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-06 22:36:07 +00:00
Prevent line breaks within plus/minus buttons
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user