woocommerce/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss

124 lines
2.2 KiB
SCSS
Raw Normal View History

@mixin reset-button {
border: 0;
padding: 0;
margin: 0;
background: none transparent;
box-shadow: none;
&:focus {
outline: 2px solid $gray-300;
}
}
.wc-block-components-quantity-selector {
display: flex;
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
width: 107px;
border: 1px solid $gray-300;
background: #fff;
border-radius: 4px;
// needed so that buttons fill the container.
box-sizing: content-box;
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
margin: 0 0 0.25em 0;
.has-dark-controls & {
background-color: transparent;
border-color: $input-border-dark;
}
// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
@include font-size(regular);
order: 2;
min-width: 40px;
flex: 1 1 auto;
border: 0;
padding: 0.4em 0;
margin: 0;
text-align: center;
background: transparent;
box-shadow: none;
color: #000;
line-height: 1;
vertical-align: middle;
-moz-appearance: textfield;
font-weight: 600;
&:focus {
background: $gray-100;
outline: 1px solid $gray-300;
}
&:disabled {
color: $gray-600;
}
.has-dark-controls & {
color: $input-text-dark;
background: transparent;
&:focus {
background: transparent;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.wc-block-components-quantity-selector__button {
@include reset-button;
@include font-size(regular, 0.9em);
min-width: 30px;
cursor: pointer;
color: $gray-600;
font-style: normal;
font-weight: normal;
text-align: center;
text-decoration: none;
&:hover,
&:focus {
@include reset-button;
color: $gray-900;
}
&:disabled {
color: $gray-600;
cursor: default;
@include reset-button;
}
.has-dark-controls & {
color: $input-text-dark;
&:hover,
&:focus {
color: $input-text-dark;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
> .wc-block-components-quantity-selector__button--minus {
order: 1;
}
> .wc-block-components-quantity-selector__button--plus {
order: 3;
}
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
}
.theme-twentyseventeen {
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
&:hover,
&:focus {
background: none transparent;
}
}
}