woocommerce/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss

163 lines
3.4 KiB
SCSS
Raw Normal View History

.wc-block-components-form .wc-block-components-select,
.wc-block-components-select {
height: 3em;
position: relative;
label.components-custom-select-control__label {
@include reset-typography();
@include font-size(regular);
line-height: 1.375; // =22px when font-size is 16px.
position: absolute;
transform: translateY(0.75em);
transform-origin: top left;
transition: all 200ms ease;
color: $gray-700;
z-index: 1;
margin: 0 0 0 #{$gap + 1px};
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - #{2 * $gap});
white-space: nowrap;
.has-dark-controls & {
color: $input-placeholder-dark;
}
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}
&.is-active label {
transform: translateY(#{$gap-smallest}) scale(0.75);
}
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
&.has-error {
.components-custom-select-control__button {
&,
&:hover,
&:focus,
&:active {
border-color: $alert-red;
}
&:focus {
outline: 1px dotted $alert-red;
outline-offset: 2px;
}
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
}
}
&.has-error label {
color: $alert-red;
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
}
.components-custom-select-control__button {
&,
&:hover,
&:focus,
&:active {
@include font-size(regular);
background: #fff;
box-shadow: none;
color: $input-text-active;
font-family: inherit;
font-weight: normal;
height: 3em;
letter-spacing: inherit;
line-height: 1;
overflow: hidden;
padding: em($gap-large) $gap em($gap-smallest);
text-align: left;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
width: 100%;
opacity: initial;
border-radius: 4px;
.has-dark-controls & {
background: $input-background-dark;
border-color: $input-border-dark;
color: $input-text-dark;
}
}
}
.components-custom-select-control__button-icon {
right: #{$gap - 4px};
.has-dark-controls & {
fill: $input-text-dark;
}
}
.components-custom-select-control__menu {
background-color: $select-dropdown-light;
margin: 0;
max-height: 300px;
overflow: auto;
color: $input-text-active;
// Required by IE11.
&:empty {
display: none;
}
.has-dark-controls & {
background-color: $select-dropdown-dark;
color: $input-text-dark;
}
}
.components-custom-select-control__item {
@include font-size(regular);
margin-left: 0;
padding-left: $gap;
&:hover,
&:focus,
&.is-highlighted {
.has-dark-controls & {
background-color: $select-item-dark;
}
}
}
.components-custom-select-control__item-icon {
display: none;
}
}
.theme-twentytwentyone {
// Extra classes for specificity.
&.theme-twentytwentyone.theme-twentytwentyone .components-custom-select-control__button {
background-color: #fff;
color: $input-text-active;
}
&.is-dark-theme {
// If the theme is in dark mode, as well as the block, then this selector will match.
.has-dark-controls {
.components-custom-select-control__item {
color: $input-text-dark;
}
}
// If the theme is in dark mode, but the block isn't, then this selector will match.
.components-custom-select-control__item {
color: $input-text-active;
}
}
}
.theme-twentyseventeen {
// Extra classes for specificity.
&.theme-twentyseventeen.theme-twentyseventeen {
.components-custom-select-control__button {
background-color: $select-dropdown-light;
color: $input-text-active;
}
.has-dark-controls {
.components-custom-select-control__button {
background-color: $select-dropdown-dark;
color: $input-text-dark;
}
}
}
}