2020-01-15 11:32:54 +00:00
|
|
|
@mixin reset-button {
|
|
|
|
border: 0;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
background: none transparent;
|
2020-05-14 09:07:21 +00:00
|
|
|
box-shadow: none;
|
2020-01-15 11:32:54 +00:00
|
|
|
|
|
|
|
&:focus {
|
2022-04-08 08:49:27 +00:00
|
|
|
box-shadow: inset 0 0 1px 1px currentColor;
|
|
|
|
outline: none;
|
2020-01-15 11:32:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-17 09:53:42 +00:00
|
|
|
.wc-block-components-quantity-selector {
|
2023-10-11 16:04:45 +00:00
|
|
|
border-radius: $universal-border-radius;
|
2020-08-14 11:08:16 +00:00
|
|
|
// needed so that buttons fill the container.
|
|
|
|
box-sizing: content-box;
|
2022-04-08 08:49:27 +00:00
|
|
|
display: flex;
|
2021-01-27 11:34:59 +00:00
|
|
|
margin: 0 0 0.25em 0;
|
2022-04-08 08:49:27 +00:00
|
|
|
position: relative;
|
|
|
|
width: 107px;
|
2020-08-14 11:08:16 +00:00
|
|
|
|
2022-04-08 08:49:27 +00:00
|
|
|
&::after {
|
2023-10-11 16:04:45 +00:00
|
|
|
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;
|
2022-04-08 08:49:27 +00:00
|
|
|
bottom: 0;
|
|
|
|
content: "";
|
|
|
|
left: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
2020-08-14 11:08:16 +00:00
|
|
|
}
|
2020-01-15 11:32:54 +00:00
|
|
|
|
2020-05-12 13:56:09 +00:00
|
|
|
// Extra label for specificity needed in the editor.
|
2020-06-17 09:53:42 +00:00
|
|
|
input.wc-block-components-quantity-selector__input {
|
2020-05-29 10:16:33 +00:00
|
|
|
@include font-size(regular);
|
2022-04-08 08:49:27 +00:00
|
|
|
appearance: textfield;
|
2020-01-15 11:32:54 +00:00
|
|
|
background: transparent;
|
2022-04-08 08:49:27 +00:00
|
|
|
border: 0;
|
2020-04-24 12:23:25 +00:00
|
|
|
box-shadow: none;
|
2022-04-08 08:49:27 +00:00
|
|
|
color: currentColor;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
font-weight: 600;
|
2020-04-24 12:23:25 +00:00
|
|
|
line-height: 1;
|
2022-04-08 08:49:27 +00:00
|
|
|
margin: 0;
|
|
|
|
min-width: 40px;
|
|
|
|
order: 2;
|
|
|
|
padding: 0.4em 0;
|
|
|
|
text-align: center;
|
2020-01-15 11:32:54 +00:00
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
&:focus {
|
2022-04-08 08:49:27 +00:00
|
|
|
box-shadow: inset 0 0 1px 1px currentColor;
|
|
|
|
outline: none;
|
2020-01-15 11:32:54 +00:00
|
|
|
}
|
2020-02-27 20:52:18 +00:00
|
|
|
&:disabled {
|
2022-04-08 08:49:27 +00:00
|
|
|
opacity: 0.6;
|
2020-08-14 11:08:16 +00:00
|
|
|
}
|
2020-01-15 11:32:54 +00:00
|
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
|
|
input::-webkit-inner-spin-button {
|
|
|
|
-webkit-appearance: none;
|
|
|
|
margin: 0;
|
|
|
|
}
|
2021-04-12 10:03:36 +00:00
|
|
|
|
2020-06-17 09:53:42 +00:00
|
|
|
.wc-block-components-quantity-selector__button {
|
2020-01-15 11:32:54 +00:00
|
|
|
@include reset-button;
|
2022-01-11 11:09:59 +00:00
|
|
|
@include font-size(regular, 0.9em);
|
2022-04-08 08:49:27 +00:00
|
|
|
color: currentColor;
|
2020-01-15 11:32:54 +00:00
|
|
|
cursor: pointer;
|
|
|
|
font-style: normal;
|
2022-01-11 11:09:59 +00:00
|
|
|
font-weight: normal;
|
2022-04-08 08:49:27 +00:00
|
|
|
min-width: 30px;
|
|
|
|
opacity: 0.6;
|
2020-01-15 11:32:54 +00:00
|
|
|
text-align: center;
|
2021-04-12 10:03:36 +00:00
|
|
|
text-decoration: none;
|
2020-01-15 11:32:54 +00:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2022-04-08 08:49:27 +00:00
|
|
|
opacity: 1;
|
2020-01-15 11:32:54 +00:00
|
|
|
}
|
|
|
|
&:disabled {
|
2022-04-08 08:49:27 +00:00
|
|
|
box-shadow: none;
|
2020-01-15 11:32:54 +00:00
|
|
|
cursor: default;
|
2022-04-08 08:49:27 +00:00
|
|
|
opacity: 0.6;
|
2020-08-14 11:08:16 +00:00
|
|
|
}
|
2020-01-15 11:32:54 +00:00
|
|
|
}
|
2021-04-12 10:03:36 +00:00
|
|
|
|
|
|
|
> .wc-block-components-quantity-selector__button--minus {
|
2023-10-11 16:04:45 +00:00
|
|
|
border-radius: $universal-border-radius 0 0 $universal-border-radius;
|
2020-01-15 11:32:54 +00:00
|
|
|
order: 1;
|
|
|
|
}
|
2021-04-12 10:03:36 +00:00
|
|
|
|
|
|
|
> .wc-block-components-quantity-selector__button--plus {
|
2023-10-11 16:04:45 +00:00
|
|
|
border-radius: 0 $universal-border-radius $universal-border-radius 0;
|
2020-01-15 11:32:54 +00:00
|
|
|
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
|
|
|
}
|
2021-04-12 10:03:36 +00:00
|
|
|
|
|
|
|
.theme-twentyseventeen {
|
|
|
|
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
background: none transparent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|