woocommerce/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss

74 lines
1.9 KiB
SCSS
Raw Normal View History

.wc-block-checkout__shipping-method-container {
2022-10-04 12:02:28 +00:00
width: 100%;
display: flex;
gap: $gap;
justify-content: space-between;
}
// This nested selector is solely for specificity to override a quite specific style set in the button component.
// We have avoided nesting all the styles in case specificity changes introduce regressions elsewhere.
.edit-post-visual-editor {
.wc-block-checkout__shipping-method-container {
.wc-block-components-button.wc-block-checkout__shipping-method-option {
min-height: 80px;
}
}
}
.edit-post-visual-editor
.wc-block-components-button.wc-block-checkout__shipping-method-option,
.wc-block-components-button.wc-block-checkout__shipping-method-option {
2022-10-04 12:02:28 +00:00
flex-grow: 1;
display: flex;
flex-direction: row;
2022-10-04 12:02:28 +00:00
justify-content: center;
align-items: center;
height: 100%;
min-height: 80px;
flex-basis: 0;
gap: 4px;
padding: 16px 12px;
color: inherit !important; // Overwriting Gutenberg styles
2022-10-04 12:02:28 +00:00
background-color: transparent;
border: none;
box-shadow: none !important;
outline: 1px solid $universal-border-light !important; // Overwriting Gutenberg styles
border-radius: $universal-border-radius;
cursor: pointer;
&.components-button:hover:not(:disabled),
&.components-button:focus:not(:disabled),
&:focus,
&:hover {
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
background-color: $universal-background;
border-color: #d5d5d5;
color: #333;
}
&.wc-block-checkout__shipping-method-option--selected {
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
outline: 1px solid $universal-border-strong;
background-color: $universal-background;
&:focus {
outline: 1px solid $universal-border-strong;
background-color: $universal-background;
}
2022-10-04 12:02:28 +00:00
}
}
.wc-block-checkout__shipping-method-option-icon {
2022-10-04 12:02:28 +00:00
fill: currentColor;
}
.wc-block-checkout__shipping-method-option-title {
2022-10-04 12:02:28 +00:00
@include font-size(regular, 1rem);
font-weight: bold;
}
.wc-block-checkout__shipping-method-option-price {
2022-10-04 12:02:28 +00:00
@include font-size(small, 1rem);
em {
text-transform: uppercase;
font-style: inherit;
}
2022-10-04 12:02:28 +00:00
}