woocommerce/plugins/woocommerce-blocks/packages/components/totals-wrapper/style.scss

43 lines
783 B
SCSS
Raw Normal View History

.wc-block-components-totals-wrapper {
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-top: 1px solid $universal-border-light;
padding: $gap 0;
&.has-bottom-border {
&::after {
border-bottom-width: 1px;
}
}
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
// TotalWrappers like Discount and Fee are sometimes empty
// this prevents displaying the empty areas in Order Summary
&:empty {
padding: 0;
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-width: 0;
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
&::after {
content: none;
}
}
&.slot-wrapper {
padding: 0;
> * > * {
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-bottom: 1px solid $universal-border-light;
padding: $gap 0;
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
// removes the border bottom for the last slot inserted
&:last-child::after {
border-bottom-width: 0;
}
}
}
}
.wc-block-components-discounts-meta {
.wc-block-components-totals-wrapper {
&:first-child {
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-top: 1px solid $universal-border-light;
}
}
}