woocommerce/plugins/woocommerce-blocks/packages/checkout/panel/style.scss

78 lines
1.6 KiB
SCSS
Raw Normal View History

.wc-block-components-panel.has-border {
@include with-translucent-border( 1px 0 );
+ .wc-block-components-panel.has-border::after {
border-top-width: 0;
}
}
.wc-block-components-panel.has-border.no-top-border {
@include with-translucent-border( 1px 0 );
&::after {
border-top-width: 0;
}
}
.wc-block-components-panel__button {
@include reset-box();
height: auto;
line-height: 1;
margin-top: em(6px);
padding-right: #{24px + $gap-smaller};
padding-top: em($gap-small - 6px);
position: relative;
text-align: left;
width: 100%;
Add Slot/Fill to discounts area in cart sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/4248) * Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput * Add DiscountsMetaSlot * Add ExperimentalDiscountsMeta.Slot to Cart sidebar * Add extra styles for Button and Panel components * Export ExperimentalDiscountsMeta from checkout package * Add updateCartFromApi util to @woocommerce/blocks-checkout * Add comment to updateCartFromApi * Change updateCartFromApi to TypeScript * Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (https://github.com/woocommerce/woocommerce-blocks/pull/4238)" This reverts commit ee9b2d20e0b4a19a458314a0e69cf845b331ccc0. * Stop passing contexts through the discounts slot fill * Allow ValidatedTextInput to be used for type=number * Remove contexts from Discounts slot fill * Update snapshots * Stop `errorMessage` being spread onto input fields in checkout * Add paths to tsconfig * Remove contexts from Discounts slot * Accept step min and max on ValidatedTextInput * Remove "no-margin" option on buttons * Remove spinners from input type number * Remove `no-top-border` style from panel * Prevent text in buttons from breaking in the middle of words * Add checkout package to tsconfig file list * Stop passing components through DiscountsMetaSlot
2021-06-04 08:44:26 +00:00
word-break: break-word;
&[aria-expanded="true"] {
padding-bottom: em($gap-small - 6px);
margin-bottom: em(6px);
}
&,
&:hover,
&:focus,
&:active {
@include reset-typography();
background: transparent;
box-shadow: none;
}
> .wc-block-components-panel__button-icon {
fill: currentColor;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: auto;
}
}
.wc-block-components-panel__content {
padding-bottom: em($gap);
// Ensures the panel contents are not visible for any theme that tweaked the
// `display` property of div elements.
&[hidden] {
display: none;
}
}
// Extra classes for specificity.
.theme-twentytwentyone.theme-twentytwentyone.theme-twentytwentyone .wc-block-components-panel__button {
background-color: inherit;
color: inherit;
}
.theme-twentytwenty .wc-block-components-panel__button,
.theme-twentyseventeen .wc-block-components-panel__button {
background: none transparent;
color: inherit;
&.wc-block-components-panel__button:hover,
&.wc-block-components-panel__button:focus {
background: none transparent;
}
}