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

109 lines
2.1 KiB
SCSS
Raw Normal View History

@mixin reset-button {
border: 0;
padding: 0;
margin: 0;
background: none transparent;
box-shadow: none;
&:focus {
box-shadow: inset 0 0 1px 1px currentColor;
outline: none;
}
}
.wc-block-components-quantity-selector {
border-radius: $universal-border-radius;
// needed so that buttons fill the container.
box-sizing: content-box;
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
margin: 0 0 0.25em 0;
position: relative;
width: 107px;
&::after {
border-radius: $universal-border-radius;
Update the border colors in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/11474) * Change border color to Gutenberg 100 for Cart and Checkout blocks * Change form input color to Gutenberg 900 for Cart and Checkout blocks * Fix additional border colors of Checkout block * Update borders and form field colors in Cart Block * Change border color to $universal-border-light * Change border color for cart line items to $universal-border-light * Change form input fields border color to $universal-border-dark - Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white. * Fix colors of text area border and form steps * Change form input fields border color to $universal-border-dark - Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white. * Fix form steps * Update universal dark border rgba value - Update universal dark border rgba value from rgba(0, 0, 0, 0.882) to rgba(17, 17, 17, .80) to keep it consistent with universal-border colors * Update $universal-border-light color * Update the opacity of the borders * Update the border color to rgba (17, 17, 17, 0.12) * Roll back $universal-border-light value to the original value: 0.115 * Remove Opacity and pass it as argument in with-translucent-border - We have with-translucent-border option that accepts border and opacity for pseudo elements. * Remove additional spaces * Replace with-translucent-border with normal border - Since we're are not mixing the opacity to the border color so we don't need to use mixin with-translucent-border. * Fix applied css and add low contrast Color usage details - Fix minor CSS as per the standards. - Add comments for universal border colors that they're low contrast colors and should be used for decorative elements only * Fix border gap and double border for multiple shipping packages * Fix payment method borders and Cart line items borders - Change border bottom to border-top for cart line items. - Fix payment method radio control borders. * Fix local pickup border - Local pickup was using with-translucent-borders so it has some opacity, changed it to border-bottom. * Add border-bottom to cart items * Remove additional border from Cart items * Fix radio and checkbox borders as per the design * Fix shipping method borders and background color as per the design. * Force align left on the description for the local pickup options. * Update border color in quantity selector component * Fix Shipping options radio selection alignment - Add left padding to wc-block-components-shipping-rates-control__package element. * Update colors and variables * Change checkbox and radio button colors - Change checkbox and radio button colors from rgba(25, 23, 17, 0.3) to rgba(25, 23, 17, 0.48). * Remove bottom property from express payment style
2023-12-07 17:37:48 +00:00
border: 1px solid $universal-border-light;
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
@include font-size(regular);
appearance: textfield;
background: transparent;
border: 0;
box-shadow: none;
color: currentColor;
flex: 1 1 auto;
font-weight: 600;
line-height: 1;
margin: 0;
min-width: 40px;
order: 2;
padding: 0.4em 0;
text-align: center;
vertical-align: middle;
&:focus {
box-shadow: inset 0 0 1px 1px currentColor;
outline: none;
}
&:disabled {
opacity: 0.6;
}
}
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);
color: currentColor;
cursor: pointer;
font-style: normal;
font-weight: normal;
min-width: 30px;
opacity: 0.6;
text-align: center;
text-decoration: none;
&:hover,
&:focus {
opacity: 1;
}
&:disabled {
box-shadow: none;
cursor: default;
opacity: 0.6;
}
}
> .wc-block-components-quantity-selector__button--minus {
border-radius: $universal-border-radius 0 0 $universal-border-radius;
order: 1;
}
> .wc-block-components-quantity-selector__button--plus {
border-radius: 0 $universal-border-radius $universal-border-radius 0;
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;
}
}
}