woocommerce/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss

77 lines
1.4 KiB
SCSS
Raw Normal View History

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
.wc-block-order-confirmation-totals {
margin-top: $gap-large;
margin-bottom: $gap-large * 2;
border: 0 !important; // We want styles to appear on table, not on block.
table {
width: 100%;
border: 1px solid $universal-border-light;
border-spacing: 0;
border-radius: $universal-border-radius;
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
th,
td {
border-top: 1px solid $universal-border-light;
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
border-right-width: 0;
border-left-width: 0;
padding: $gap;
margin: 0;
text-align: left;
font-weight: inherit;
border-radius: 0;
}
thead th {
border-top: 0;
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
}
thead,
tfoot th {
font-weight: bold;
}
tfoot tr:last-child {
td,
th {
border-bottom-width: 0;
}
}
.wc-block-order-confirmation-totals__total,
.wc-block-order-confirmation-totals__note {
font-variant-numeric: tabular-nums;
text-align: right;
}
.wc-item-meta {
list-style-type: none;
padding: 0;
margin: 0.5em 0 0;
font-size: 0.75em;
li > * {
display: inline-block;
margin: 0;
}
}
}
table[style*="border-width"],
table[style*="border-color"] {
> *,
tr,
th,
td {
border-style: inherit;
border-width: inherit;
border-color: inherit;
border-right-width: 0;
border-left-width: 0;
border-top-width: 0;
}
}
.bundled_table_item {
td {
padding-top: 0;
}
td.wc-block-order-confirmation-totals__product {
padding-left: $gap-largest;
}
}
}