201 lines
5.0 KiB
SCSS
201 lines
5.0 KiB
SCSS
//@use '../variables' as *;
|
|
//@use 'typography' as *;
|
|
//@use 'element-variant' as *;
|
|
//
|
|
////noinspection ALL
|
|
//@mixin input(
|
|
// $namespace,
|
|
// $flexWrapper: true,
|
|
// $placeholderSelector: '__control::placeholder',
|
|
// $withValidationIcons: true,
|
|
// $clearAppearance: true,
|
|
// $focusedSelector: '&:focus-within, &.is-filled'
|
|
//) {
|
|
// $self: &;
|
|
//
|
|
// position: relative;
|
|
// width: var(--#{$namespace}-width, 100%);
|
|
// text-align: left;
|
|
//
|
|
// &__label {
|
|
// @include txt-s-m(#{$namespace}-label);
|
|
//
|
|
// display: block;
|
|
// background: var(--#{$namespace}-label-background);
|
|
// color: var(--#{$namespace}-label-color);
|
|
// margin: var(--#{$namespace}-label-margin, 0 0 8px);
|
|
// transition: 0.2s ease-out;
|
|
// transition-property: opacity, color;
|
|
// }
|
|
//
|
|
// &__wrapper {
|
|
// @if $flexWrapper {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// width: var(--#{$namespace}-control-width, 100%);
|
|
// height: var(--#{$namespace}-control-height, 40px);
|
|
// }
|
|
//
|
|
// position: relative;
|
|
// background: var(--#{$namespace}-background);
|
|
// border-radius: var(--#{$namespace}-border-radius, 16px);
|
|
// border: var(--#{$namespace}-border, 1px solid var(--#{$namespace}-border-color));
|
|
// padding: var(--#{$namespace}-wrapper-padding, 0 15px 0 19px);
|
|
// color: var(--#{$namespace}-color);
|
|
// transition: 0.2s ease-out;
|
|
// transition-property: border-color, border-radius, background-color, color;
|
|
//
|
|
// > *:not(:first-child) {
|
|
// margin-left: var(--#{$namespace}-icons-gap, 8px);
|
|
// }
|
|
// }
|
|
//
|
|
// &__control {
|
|
// @if $flexWrapper {
|
|
// flex: 1;
|
|
// height: 100%;
|
|
// }
|
|
//
|
|
// @include txt-i-m(#{$namespace}-control);
|
|
//
|
|
// width: 100%;
|
|
// color: var(--#{$namespace}-control-color);
|
|
// border: none;
|
|
// background: transparent;
|
|
// padding: var(--#{$namespace}-control-padding, 9px 0);
|
|
// caret-color: var(--#{$namespace}-caret-color);
|
|
//
|
|
// @if $clearAppearance {
|
|
// appearance: none;
|
|
// }
|
|
//
|
|
// &:focus {
|
|
// outline: none;
|
|
// }
|
|
// }
|
|
//
|
|
// &#{$placeholderSelector} {
|
|
// @include txt-i-m(#{$namespace}-placeholder);
|
|
//
|
|
// color: var(--#{$namespace}-placeholder-color, var(--#{$namespace}-control-color));
|
|
// }
|
|
//
|
|
// &__loader {
|
|
// --spinner-color: var(--#{$namespace}-color);
|
|
// }
|
|
//
|
|
// @if $withValidationIcons {
|
|
// &__valid-icon,
|
|
// &__invalid-icon {
|
|
// pointer-events: none;
|
|
// }
|
|
// }
|
|
//
|
|
// &__bottom {
|
|
// display: flex;
|
|
// justify-content: flex-end;
|
|
// margin: var(--#{$namespace}-bottom-margin, 8px 0 0);
|
|
// }
|
|
//
|
|
// &__validation-message {
|
|
// //color: var(--#{$namespace}-validation-message-color, $clr-red-500);
|
|
// flex: 1;
|
|
// }
|
|
//
|
|
// &__extra {
|
|
// margin-left: 8px;
|
|
// }
|
|
//
|
|
// &.is-loading {
|
|
// #{$self}__wrapper,
|
|
// #{$self}__control {
|
|
// cursor: wait;
|
|
// }
|
|
// }
|
|
//
|
|
// &.is-filled {
|
|
// --#{$namespace}-label-color: var(--#{$namespace}-filled-label-color);
|
|
// }
|
|
//
|
|
// &.is-invalid {
|
|
// --#{$namespace}-border-color: var(--#{$namespace}-invalid-border-color);
|
|
// }
|
|
//
|
|
// &:focus-within:not(.is-readonly):not(.is-disabled):not(.is-loading) {
|
|
// --#{$namespace}-border-color: var(--#{$namespace}-focus-border-color);
|
|
// --#{$namespace}-label-color: var(--#{$namespace}-focus-label-color);
|
|
// }
|
|
//
|
|
// &.is-disabled {
|
|
// opacity: var(--#{$namespace}--disabled-opacity, 0.56);
|
|
//
|
|
// #{$self}__wrapper,
|
|
// #{$self}__label,
|
|
// #{$self}__control {
|
|
// cursor: not-allowed;
|
|
// }
|
|
// }
|
|
//
|
|
// &.is-readonly {
|
|
// #{$self}__wrapper,
|
|
// #{$self}__control {
|
|
// cursor: default;
|
|
// }
|
|
// }
|
|
//
|
|
// @content;
|
|
//
|
|
// &--secondary,
|
|
// &--tertiary {
|
|
//
|
|
// #{$self}__label {
|
|
// opacity: 0;
|
|
// position: absolute;
|
|
// z-index: 1;
|
|
// }
|
|
//
|
|
// #{$focusedSelector} {
|
|
// #{$self}__label {
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
//
|
|
// #{$self}__wrapper:hover:not(.is-readonly):not(.is-disabled):not(.is-loading) {
|
|
// --#{$namespace}-border-color: var(--#{$namespace}-hover-border-color);
|
|
// }
|
|
// }
|
|
//
|
|
// &--tertiary {
|
|
// --#{$namespace}-wrapper-padding: 0 15px;
|
|
// --#{$namespace}-control-height: 48px;
|
|
//
|
|
// #{$focusedSelector} {
|
|
// --#{$namespace}-control-padding: 19px 0 7px;
|
|
// }
|
|
//
|
|
// #{$self}__label {
|
|
// left: 16px;
|
|
// top: 8px;
|
|
// }
|
|
// }
|
|
//
|
|
// &--large {
|
|
// --#{$namespace}-control-height: 48px;
|
|
// --#{$namespace}-control-padding: 13px 0;
|
|
// }
|
|
//
|
|
// @include element-variant($namespace, '', (
|
|
// 'background': ($clr-white-100, $clr-black-300),
|
|
// 'border-color': ($clr-white-700, $clr-black-200),
|
|
// 'label-color': ($clr-black-150, $clr-black-100),
|
|
// 'color': ($clr-black-500, $clr-white-100),
|
|
// 'placeholder-color': ($clr-black-100, $clr-black-150),
|
|
// 'hover-border-color': ($clr-purple-500, $clr-purple-400),
|
|
// 'focus-border-color': ($clr-purple-500, $clr-purple-400),
|
|
// 'focus-label-color': ($clr-black-150, $clr-black-100),
|
|
// 'filled-label-color': ($clr-black-150, $clr-black-100),
|
|
// 'invalid-border-color': $clr-red-500,
|
|
// 'caret-color': $clr-purple-500,
|
|
// ));
|
|
//}
|