woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss

237 lines
4.6 KiB
SCSS
Raw Normal View History

.wp-block-woocommerce-checkout .with-scroll-to-top__scroll-point {
top: -96px;
}
.wc-block-checkout__add-note,
.wc-block-checkout__keep-updated {
margin-top: $gap;
}
.wc-block-checkout__shipping-option {
.wc-block-components-shipping-rates-control__package:not(:first-of-type) {
margin-top: $gap-larger;
}
}
.wc-block-checkout__sidebar {
.wc-block-components-product-name {
color: inherit;
padding-right: $gap-small;
flex-grow: 1;
// Required by IE11.
flex-basis: 0;
}
}
Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607) * Register Atomic Blocks and save some block content * renderInnerBlocks utility * Frontend Rendering * Clean up atomic block classnames * Move shared styles * Create a hoc for attribute mapping * Rename some unpluralised class names * Remove prefixes from atomic component class names * Updated styles * Update styles from master * Revert product list styles * 2020 fixes * Separate renderFrontend from renderInnerBlocks * Lazy loading of components * Tweak loading classes * FIx all products loading state * Revert lazy implementation - creates too many unneccessary files due to webpack config * Cleanup * Remove wcBlocksBuildUrl * Move call to register_atomic_blocks * Remove duplicate key * reuse render frontend * Corectly handle frontend attribute mapping to keep editor working * Style updates * Update side effects * Remove width style from rating to fix alignment * Move ssr grid styles to main stylesheet * Put back prefixed classnames * 2020 styling fixes * Create frontend files instead of doing it all in block map * Update assets/js/atomic/utils/get-block-map.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update assets/js/atomic/utils/render-parent-block.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Fix last child alignment regardless of block type * More specificity fixes * 2020 button alignment * static fix to prevent offsets * fix placeholder image in firefox * Issues reported in feedback Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 12:18:16 +00:00
.wc-block-components-express-checkout-continue-rule {
display: flex;
align-items: center;
text-align: center;
padding: 0 $gap-larger;
margin: $gap-large 0;
&::before {
margin-right: 10px;
}
&::after {
margin-left: 10px;
}
&::before,
&::after {
content: " ";
flex: 1;
border-bottom: 1px solid $core-grey-light-600;
}
}
.wc-block-checkout__actions {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 $gap-large*2;
padding: 0 0 0 $gap-larger;
.wc-block-components-checkout-place-order-button {
width: 50%;
padding: 1em;
height: auto;
margin-left: auto;
.wc-block-components-button__text {
line-height: 24px;
> svg {
fill: $white;
vertical-align: top;
}
}
}
}
// Loading placeholder state.
.wc-block-checkout--is-loading {
Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607) * Register Atomic Blocks and save some block content * renderInnerBlocks utility * Frontend Rendering * Clean up atomic block classnames * Move shared styles * Create a hoc for attribute mapping * Rename some unpluralised class names * Remove prefixes from atomic component class names * Updated styles * Update styles from master * Revert product list styles * 2020 fixes * Separate renderFrontend from renderInnerBlocks * Lazy loading of components * Tweak loading classes * FIx all products loading state * Revert lazy implementation - creates too many unneccessary files due to webpack config * Cleanup * Remove wcBlocksBuildUrl * Move call to register_atomic_blocks * Remove duplicate key * reuse render frontend * Corectly handle frontend attribute mapping to keep editor working * Style updates * Update side effects * Remove width style from rating to fix alignment * Move ssr grid styles to main stylesheet * Put back prefixed classnames * 2020 styling fixes * Create frontend files instead of doing it all in block map * Update assets/js/atomic/utils/get-block-map.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update assets/js/atomic/utils/render-parent-block.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Fix last child alignment regardless of block type * More specificity fixes * 2020 button alignment * static fix to prevent offsets * fix placeholder image in firefox * Issues reported in feedback Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 12:18:16 +00:00
.wc-block-components-express-checkout,
.wc-block-checkout__actions button {
@include placeholder();
@include force-content();
}
Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607) * Register Atomic Blocks and save some block content * renderInnerBlocks utility * Frontend Rendering * Clean up atomic block classnames * Move shared styles * Create a hoc for attribute mapping * Rename some unpluralised class names * Remove prefixes from atomic component class names * Updated styles * Update styles from master * Revert product list styles * 2020 fixes * Separate renderFrontend from renderInnerBlocks * Lazy loading of components * Tweak loading classes * FIx all products loading state * Revert lazy implementation - creates too many unneccessary files due to webpack config * Cleanup * Remove wcBlocksBuildUrl * Move call to register_atomic_blocks * Remove duplicate key * reuse render frontend * Corectly handle frontend attribute mapping to keep editor working * Style updates * Update side effects * Remove width style from rating to fix alignment * Move ssr grid styles to main stylesheet * Put back prefixed classnames * 2020 styling fixes * Create frontend files instead of doing it all in block map * Update assets/js/atomic/utils/get-block-map.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update assets/js/atomic/utils/render-parent-block.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Fix last child alignment regardless of block type * More specificity fixes * 2020 button alignment * static fix to prevent offsets * fix placeholder image in firefox * Issues reported in feedback Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 12:18:16 +00:00
.wc-block-components-express-checkout {
min-height: 150px;
}
Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607) * Register Atomic Blocks and save some block content * renderInnerBlocks utility * Frontend Rendering * Clean up atomic block classnames * Move shared styles * Create a hoc for attribute mapping * Rename some unpluralised class names * Remove prefixes from atomic component class names * Updated styles * Update styles from master * Revert product list styles * 2020 fixes * Separate renderFrontend from renderInnerBlocks * Lazy loading of components * Tweak loading classes * FIx all products loading state * Revert lazy implementation - creates too many unneccessary files due to webpack config * Cleanup * Remove wcBlocksBuildUrl * Move call to register_atomic_blocks * Remove duplicate key * reuse render frontend * Corectly handle frontend attribute mapping to keep editor working * Style updates * Update side effects * Remove width style from rating to fix alignment * Move ssr grid styles to main stylesheet * Put back prefixed classnames * 2020 styling fixes * Create frontend files instead of doing it all in block map * Update assets/js/atomic/utils/get-block-map.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Update assets/js/atomic/utils/render-parent-block.js Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Fix last child alignment regardless of block type * More specificity fixes * 2020 button alignment * static fix to prevent offsets * fix placeholder image in firefox * Issues reported in feedback Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 12:18:16 +00:00
.wc-block-components-express-checkout-continue-rule span {
@include placeholder();
@include force-content();
width: 150px;
}
.wc-block-components-checkout-form {
.wc-block-components-checkout-step__title {
@include placeholder();
@include force-content();
display: block;
width: 10em;
&::before {
@include placeholder();
@include force-content();
border-radius: 50%;
display: block;
height: 100%;
width: 1.5em;
}
}
.wc-block-components-checkout-step__container::after {
@include placeholder();
}
.wc-block-components-checkout-step__content > span {
@include placeholder();
@include force-content();
display: block;
min-height: 100px;
}
.wc-block-components-checkout-step::before,
.wc-block-components-checkout-step::after {
@include placeholder();
}
}
.wc-block-checkout__sidebar .components-card {
@include placeholder();
@include force-content();
min-height: 460px;
}
}
.wc-block-components-sidebar-layout.wc-block-checkout--skeleton {
display: none;
}
.is-loading + .wc-block-components-sidebar-layout.wc-block-checkout--skeleton {
display: flex;
}
.wc-block-checkout-empty,
.wc-block-checkout-error {
padding: $gap-largest;
text-align: center;
width: 100%;
.wc-block-checkout-empty__image,
.wc-block-checkout-error__image {
max-width: 150px;
margin: 0 auto 1em;
display: block;
color: inherit;
}
.wc-block-checkout-empty__title,
.wc-block-checkout-error__title {
display: block;
margin: 0;
font-weight: bold;
}
.wc-block-checkout-empty__description,
.wc-block-checkout-error__description {
display: block;
margin: 0.25em 0 1em 0;
}
}
.is-mobile {
.wc-block-checkout__actions {
.wc-block-components-checkout-return-to-cart-button {
display: none;
}
.wc-block-components-checkout-place-order-button {
width: 100%;
}
}
}
.is-mobile,
.is-small,
.is-medium {
.wc-block-checkout__main {
order: 1;
}
.wc-block-checkout__sidebar {
margin-bottom: $gap-largest;
order: 0;
}
}
.is-small,
.is-medium,
.is-large {
.wc-block-checkout__billing-fields,
.wc-block-checkout__shipping-fields {
.wc-block-components-address-form {
margin-left: #{-$gap-small / 2};
margin-right: #{-$gap-small / 2};
&::after {
content: "";
clear: both;
display: block;
}
.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-select {
float: left;
margin-left: #{$gap-small / 2};
margin-right: #{$gap-small / 2};
position: relative;
width: calc(50% - #{$gap-small});
Add validation context provider and implement validation for shipping country and coupons. (https://github.com/woocommerce/woocommerce-blocks/pull/1972) * add errormessage handling to countryinput (along with storybook) * add types for react * Add validation context and implement * implement validation context for country field validation * tweak ValidationInputError so that it can receive property name for getting error from * improve storybook webpack config to pull from tsconfig.json * update storybook story to cover changes with context * Wrap Checkout Provider with Validation Context Provider * add screen-reader-text style to storybook * add styles for input error validation to text input * improve styling for ValidationInputError component * add validation error handling to TotalsCouponCode component And story * make sure errors are cleared on successful receive/remove item * dispatch loading cancellation on catching errors This is needed because loading would be cancelled before the error is thrown so any error handling after the thrown error will not be able to rely on loading. * implement validation setting for coupon errors * add error color to labels on inputs too * fix borders back and force border color * remove extra structure and improve validation error with alignment for coupon code * add aria-describedby for text inputs * add back in validation context provider to fix rebase issue * rework validation so it works for both checkout and cart * Some styling tweaks * more style fixes * remove unnecessary method * make sure new function is included in context defaults * package.lock update? seems harmless so rolling with it.
2020-03-17 11:45:33 +00:00
.wc-block-components-select {
Add validation context provider and implement validation for shipping country and coupons. (https://github.com/woocommerce/woocommerce-blocks/pull/1972) * add errormessage handling to countryinput (along with storybook) * add types for react * Add validation context and implement * implement validation context for country field validation * tweak ValidationInputError so that it can receive property name for getting error from * improve storybook webpack config to pull from tsconfig.json * update storybook story to cover changes with context * Wrap Checkout Provider with Validation Context Provider * add screen-reader-text style to storybook * add styles for input error validation to text input * improve styling for ValidationInputError component * add validation error handling to TotalsCouponCode component And story * make sure errors are cleared on successful receive/remove item * dispatch loading cancellation on catching errors This is needed because loading would be cancelled before the error is thrown so any error handling after the thrown error will not be able to rely on loading. * implement validation setting for coupon errors * add error color to labels on inputs too * fix borders back and force border color * remove extra structure and improve validation error with alignment for coupon code * add aria-describedby for text inputs * add back in validation context provider to fix rebase issue * rework validation so it works for both checkout and cart * Some styling tweaks * more style fixes * remove unnecessary method * make sure new function is included in context defaults * package.lock update? seems harmless so rolling with it.
2020-03-17 11:45:33 +00:00
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
.wc-block-components-address-form__company,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2 {
width: calc(100% - #{$gap-small});
}
.wc-block-components-checkbox {
clear: both;
}
}
}
}
.is-large {
.wc-block-checkout__actions {
padding-right: 36px;
}
.wc-block-checkout__shipping-option {
.wc-block-components-radio-control__input {
margin-left: -8px;
}
}
}