woocommerce/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss

15 lines
486 B
SCSS
Raw Normal View History

@import "node_modules/@wordpress/base-styles/variables";
Feature Branch: Blockified Order Confirmation (https://github.com/woocommerce/woocommerce-blocks/pull/10056) * Main block types for confirmation * Initial blocks * Styling and placeholders * Make blocks experimental * Update summary icon * Add name/description for status block and missing text descriptions in the block. Closes woocommerce/woocommerce-blocks#10057 * Order confirmation: Convert Order Details Templates to Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10095) * Move code from templates into the details block * Details -> Totals * Downloads block * Sample content for downloads block * Add block icon * Add conversion template (https://github.com/woocommerce/woocommerce-blocks/pull/10077) * Update inner block name * Add default title constant * Revert "Add default title constant" This reverts commit 1dd3bbfecc1be83c367b1ab064f5032ea58cb678. * Add global styles for order confirmation status block (https://github.com/woocommerce/woocommerce-blocks/pull/10164) * Implement style controls * Prevent link color spilling over onto wrapper * Add styles and remove class names * Remove __experimentalWritingMode * Add global styles for order confirmation summary block (https://github.com/woocommerce/woocommerce-blocks/pull/10179) * Styles for summary * Remove __experimentalWritingMode * Add table styles for order details (https://github.com/woocommerce/woocommerce-blocks/pull/10185) * Add table styles for order details * __experimentalFontWeight * Add link styles * Handle preview link styles * Unauthenticated views for Order Confirmation template (https://github.com/woocommerce/woocommerce-blocks/pull/10414) * Different views by permission * check user id matches when logged out * Add order confirmation wrapper block (https://github.com/woocommerce/woocommerce-blocks/pull/10286) * Add a heading wrapper block * Register the BillingWrapper Block server side * Fix exception 'render_content' error * Add the Billing Wrapper Block to the template * Fix wrong block name error * Fix php error * Conditionally render Billing Address within the Wrapper * Fix parent rendering * Clean up code (remove billing address from the template) * Update titles, descriptions, and icons of the billing Block and inner block * Fix broken block by removing the "parent" keyword * Use a user-friendly title and description for the Billing Wrapper * Update Billing Wrapper Block's title case Co-authored-by: Mike Jolley <mike.jolley@me.com> * Fix PHP failing unit test --------- Co-authored-by: Mike Jolley <mike.jolley@me.com> * Remove "thanks" for authenticated page * Introduce shipping wrapper based on billing wrapper Closes woocommerce/woocommerce-blocks#10053 * Order confirmation block: Verify email address for guest customers (https://github.com/woocommerce/woocommerce-blocks/pull/10567) * Add verify step for guest orders * Render content to pass through block content * Revert package changes * Customer orders cannot use email to verify * Add style controls for order shipping and billing address blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10633) * Order confirmation block styling (https://github.com/woocommerce/woocommerce-blocks/pull/10780) * Add missing heading to order details * Summary block spacing * Update css variables * table styles * Inherit border styles for cells * Alignment and address styles * Add downloads wrapper * Style controls * Fix typo * Update Download Wrapper's Icon * Fix TS error * Disable Download Block's server side rendering in the editor This fixes the loading after each style change from the style controls * Clean up Downloads render functions * Fix client side Downloads Block's table border * Download + Total wrappers and tables styling * small screen * Remove server side render for previews --------- Co-authored-by: Saad Tarhi <saad.trh@gmail.com> * Shorten template description * Update test address data * Avoid leaking order key in permission form * Remove todo * Make email form required. * Remove edit page link * Remove empty columns from address wrapper * Remove IIFE * typo * Update description to mention billing * Adjust link scss * Fix wrapper markup and spacing controls * Add link preview in editor * Add initial E2E setup for the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10840) * Fix WC_DateTime check * Move form outside of block markup * Add additional information block (https://github.com/woocommerce/woocommerce-blocks/pull/10842) * Add block which contains hooks * Use skeleton for placeholder instead of illustration * Remove duplicate methods * Remove duplicate align tag * Update meta styles * Tests for order confirmation conditional blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10972) * Add tests for conditional blocks * Move setup into test * Add E2E to the the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10863) * Add editor util functions * Update editor template E2E test * Add the "exact" property for consistency * Skip test Can't get the element in the page. More investigation needed! Skipping for now. * Fix "transformIntoBlocks" logic * Add tests for logged in user * Fix "beforeAll" config * Confirm downloads section is visible when logged in * Create "verifyOrderConfirmationDetails" util function * Add logged in test case * Add Guest user test case * Fix editor e2e testing * Apply a proper teardown * Fix failing tests after logout * Ensure we are logged in before visiting the editor * Ensure to have shipping selected * Wait for changes to be saved on the editor * Ensure shipping options is selected * Remove comment * Ensure we are logged in before going to the admin page * Mark the Order Confirmation as a side effect test * OrderConfirmation blocks are not experimental * resolve merge conflict * Revert package lock changes * Fix enqueue_assets * Fix CSS 404s * Make template tests more robust * Fix page URL for default confirmation page * Try afterEach to log back in * Skip guest/logout use cases Login out causes other tests to fail. We will implement these case when the multiple sign in roles are introduced in the codebase. * Remove tests requiring login out & add comments * Remove unused util functions * Hide confirmation blocks from post editor --------- Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2023-09-20 12:56:00 +00:00
// grid-unit from base-styles is 8px.
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
$gap-huge: 7 * $grid-unit; // 56px
Feature Branch: Blockified Order Confirmation (https://github.com/woocommerce/woocommerce-blocks/pull/10056) * Main block types for confirmation * Initial blocks * Styling and placeholders * Make blocks experimental * Update summary icon * Add name/description for status block and missing text descriptions in the block. Closes woocommerce/woocommerce-blocks#10057 * Order confirmation: Convert Order Details Templates to Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10095) * Move code from templates into the details block * Details -> Totals * Downloads block * Sample content for downloads block * Add block icon * Add conversion template (https://github.com/woocommerce/woocommerce-blocks/pull/10077) * Update inner block name * Add default title constant * Revert "Add default title constant" This reverts commit 1dd3bbfecc1be83c367b1ab064f5032ea58cb678. * Add global styles for order confirmation status block (https://github.com/woocommerce/woocommerce-blocks/pull/10164) * Implement style controls * Prevent link color spilling over onto wrapper * Add styles and remove class names * Remove __experimentalWritingMode * Add global styles for order confirmation summary block (https://github.com/woocommerce/woocommerce-blocks/pull/10179) * Styles for summary * Remove __experimentalWritingMode * Add table styles for order details (https://github.com/woocommerce/woocommerce-blocks/pull/10185) * Add table styles for order details * __experimentalFontWeight * Add link styles * Handle preview link styles * Unauthenticated views for Order Confirmation template (https://github.com/woocommerce/woocommerce-blocks/pull/10414) * Different views by permission * check user id matches when logged out * Add order confirmation wrapper block (https://github.com/woocommerce/woocommerce-blocks/pull/10286) * Add a heading wrapper block * Register the BillingWrapper Block server side * Fix exception 'render_content' error * Add the Billing Wrapper Block to the template * Fix wrong block name error * Fix php error * Conditionally render Billing Address within the Wrapper * Fix parent rendering * Clean up code (remove billing address from the template) * Update titles, descriptions, and icons of the billing Block and inner block * Fix broken block by removing the "parent" keyword * Use a user-friendly title and description for the Billing Wrapper * Update Billing Wrapper Block's title case Co-authored-by: Mike Jolley <mike.jolley@me.com> * Fix PHP failing unit test --------- Co-authored-by: Mike Jolley <mike.jolley@me.com> * Remove "thanks" for authenticated page * Introduce shipping wrapper based on billing wrapper Closes woocommerce/woocommerce-blocks#10053 * Order confirmation block: Verify email address for guest customers (https://github.com/woocommerce/woocommerce-blocks/pull/10567) * Add verify step for guest orders * Render content to pass through block content * Revert package changes * Customer orders cannot use email to verify * Add style controls for order shipping and billing address blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10633) * Order confirmation block styling (https://github.com/woocommerce/woocommerce-blocks/pull/10780) * Add missing heading to order details * Summary block spacing * Update css variables * table styles * Inherit border styles for cells * Alignment and address styles * Add downloads wrapper * Style controls * Fix typo * Update Download Wrapper's Icon * Fix TS error * Disable Download Block's server side rendering in the editor This fixes the loading after each style change from the style controls * Clean up Downloads render functions * Fix client side Downloads Block's table border * Download + Total wrappers and tables styling * small screen * Remove server side render for previews --------- Co-authored-by: Saad Tarhi <saad.trh@gmail.com> * Shorten template description * Update test address data * Avoid leaking order key in permission form * Remove todo * Make email form required. * Remove edit page link * Remove empty columns from address wrapper * Remove IIFE * typo * Update description to mention billing * Adjust link scss * Fix wrapper markup and spacing controls * Add link preview in editor * Add initial E2E setup for the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10840) * Fix WC_DateTime check * Move form outside of block markup * Add additional information block (https://github.com/woocommerce/woocommerce-blocks/pull/10842) * Add block which contains hooks * Use skeleton for placeholder instead of illustration * Remove duplicate methods * Remove duplicate align tag * Update meta styles * Tests for order confirmation conditional blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10972) * Add tests for conditional blocks * Move setup into test * Add E2E to the the Order Confirmation Block (https://github.com/woocommerce/woocommerce-blocks/pull/10863) * Add editor util functions * Update editor template E2E test * Add the "exact" property for consistency * Skip test Can't get the element in the page. More investigation needed! Skipping for now. * Fix "transformIntoBlocks" logic * Add tests for logged in user * Fix "beforeAll" config * Confirm downloads section is visible when logged in * Create "verifyOrderConfirmationDetails" util function * Add logged in test case * Add Guest user test case * Fix editor e2e testing * Apply a proper teardown * Fix failing tests after logout * Ensure we are logged in before visiting the editor * Ensure to have shipping selected * Wait for changes to be saved on the editor * Ensure shipping options is selected * Remove comment * Ensure we are logged in before going to the admin page * Mark the Order Confirmation as a side effect test * OrderConfirmation blocks are not experimental * resolve merge conflict * Revert package lock changes * Fix enqueue_assets * Fix CSS 404s * Make template tests more robust * Fix page URL for default confirmation page * Try afterEach to log back in * Skip guest/logout use cases Login out causes other tests to fail. We will implement these case when the multiple sign in roles are introduced in the codebase. * Remove tests requiring login out & add comments * Remove unused util functions * Hide confirmation blocks from post editor --------- Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2023-09-20 12:56:00 +00:00
$gap-largest: 6 * $grid-unit; // 48px
$gap-larger: 4.5 * $grid-unit; // 36px
$gap-large: 3 * $grid-unit; // 24px
$gap: 2 * $grid-unit; // 16px
$gap-small: 1.5 * $grid-unit; // 12px
$gap-smaller: 1 * $grid-unit; // 8px
$gap-smallest: 0.5 * $grid-unit; // 4px
// Standard border radius for forms.
$universal-border-radius: 4px;