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

133 lines
2.7 KiB
SCSS
Raw Normal View History

.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-text-input {
position: relative;
margin-top: em($gap-large);
white-space: nowrap;
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
label {
@include reset-typography();
@include font-size(regular);
position: absolute;
transform: translateY(0.75em);
left: 0;
top: 0;
transform-origin: top left;
line-height: 1.375; // =22px when font-size is 16px.
color: $gray-700;
transition: transform 200ms ease;
margin: 0 0 0 #{$gap + 1px};
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - #{2 * $gap});
cursor: text;
.has-dark-controls & {
color: $input-placeholder-dark;
}
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
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
}
}
input:-webkit-autofill + 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
}
&.is-active label {
transform: translateY(#{$gap-smallest}) scale(0.75);
}
input[type="tel"],
input[type="url"],
input[type="text"],
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
input[type="number"],
input[type="email"] {
@include font-size(regular);
background-color: #fff;
padding: em($gap-small) 0;
text-indent: $gap;
border-radius: 4px;
border: 1px solid $input-border-gray;
width: 100%;
line-height: 1.375; // =22px when font-size is 16px.
font-family: inherit;
margin: 0;
box-sizing: border-box;
height: 3em;
min-height: 0;
color: $input-text-active;
&:focus {
background-color: #fff;
color: $input-text-active;
outline: 0;
box-shadow: 0 0 0 1px $input-border-gray;
}
.has-dark-controls & {
background-color: $input-background-dark;
border-color: $input-border-dark;
color: $input-text-dark;
&:focus {
background-color: $input-background-dark;
color: $input-text-dark;
box-shadow: 0 0 0 1px $input-border-dark;
}
}
}
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
input[type="number"] {
-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}
&.is-active input[type="tel"],
&.is-active input[type="url"],
&.is-active input[type="text"],
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
&.is-active input[type="number"],
&.is-active input[type="email"] {
padding: em($gap-large) 0 em($gap-smallest);
}
&.has-error input {
&,
&:hover,
&:focus,
&:active {
border-color: $alert-red;
}
&:focus {
box-shadow: 0 0 0 1px $alert-red;
}
.has-dark-controls &,
.has-dark-controls &:hover,
.has-dark-controls &:focus,
.has-dark-controls &:active {
border-color: color.adjust($alert-red, $lightness: 30%);
}
.has-dark-controls &:focus {
box-shadow: 0 0 0 1px color.adjust($alert-red, $lightness: 30%);
}
}
&.has-error label {
color: $alert-red;
.has-dark-controls & {
color: color.adjust($alert-red, $lightness: 30%);
}
}
&:only-child {
margin-top: 1.5em;
}
}