@import '../_core-mixin'; @import '../icon/_icon-mixin'; @import '../info/_info-mixin'; /** * @stable [19.06.2020] */ @mixin rac-field ( $rac-field-custom: unset, /**/ $rac-field-align-items: unset, /* @stable [19.06.2020] */ $rac-field-attachment-display: unset, /* @stable [19.06.2020] */ $rac-field-attachment-margin: unset, /* @stable [19.06.2020] */ $rac-field-attachment-neighbor-child-margin: unset, /* @stable [19.06.2020] */ $rac-field-attachment-position: unset, /* @stable [19.06.2020] */ $rac-field-background: unset, /* @stable [19.06.2020] */ $rac-field-border-bottom: unset, /* @stable [18.12.2020] */ $rac-field-border-radius: unset, /* @stable [19.06.2020] */ $rac-field-display: unset, /* @stable [19.06.2020] */ $rac-field-error-message-color: unset, /* @stable [20.06.2020] */ $rac-field-flex-basis: unset, /* @stable [20.10.2020] */ $rac-field-flex-direction: unset, /* @stable [19.06.2020] */ $rac-field-flex-grow: unset, /* @stable [19.06.2020] */ $rac-field-height: unset, /* @stable [19.06.2020] */ $rac-field-justify-content: unset, /* @stable [19.06.2020] */ $rac-field-margin-top: unset, /* @stable [19.06.2020] */ $rac-field-margin: unset, /* @stable [19.06.2020] */ $rac-field-message-color: unset, /* @stable [20.06.2020] */ $rac-field-message-font-size: unset, /* @stable [19.06.2020] */ $rac-field-message-line-height: unset, /* @stable [19.06.2020] */ $rac-field-message-margin: unset, /* @stable [21.06.2020] */ $rac-field-message-opacity: unset, /* @stable [21.06.2020] */ $rac-field-overflow: unset, /* @stable [23.01.2020] */ $rac-field-padding: unset, /* @stable [18.06.2020] */ $rac-field-position: unset, /* @stable [15.02.2020] */ $rac-field-right: unset, /* @stable [15.02.2020] */ $rac-field-top: unset, /* @stable [15.02.2020] */ $rac-field-width: unset, /* @stable [18.06.2020] */ $rac-field-word-break: unset, /* @stable [23.09.2020] */ $rac-self-field-align-items: unset, /* @stable [24.10.2019] */ $rac-self-field-background: unset, /* @stable [21.10.2019] */ $rac-self-field-border-bottom: unset, /* @stable [18.06.2020] */ $rac-self-field-border-color: unset, /* @stable [21.10.2019] */ $rac-self-field-border-left: unset, /* @stable [18.06.2020] */ $rac-self-field-border-radius: unset, /* @stable [21.10.2019] */ $rac-self-field-border-right: unset, /* @stable [18.06.2020] */ $rac-self-field-border: unset, /* @stable [30.10.2019] */ $rac-self-field-box-sizing: unset, /* @stable [18.06.2020] */ $rac-self-field-display: unset, /* @stable [23.10.2019] */ $rac-self-field-flex-direction: unset, /* @stable [16.02.2020] */ $rac-self-field-height: unset, /* @stable [15.02.2020] */ $rac-self-field-icon-color: unset, /* @stable [28.10.2019] */ $rac-self-field-icon-height: unset, /* @stable [03.12.2019] */ $rac-self-field-icon-padding: unset, /* @stable [30.10.2019] */ $rac-self-field-icon-size: unset, /* @stable [28.10.2019] */ $rac-self-field-info-height: unset, /* @stable [19.05.2020] */ $rac-self-field-info-position: unset, /* @stable [19.05.2020] */ $rac-self-field-info-width: unset, /* @stable [19.05.2020] */ $rac-self-field-input-autofill-transition: unset, /* @stable [19.06.2020] */ $rac-self-field-input-background: unset, /* @stable [30.10.2019] */ $rac-self-field-input-border: unset, /* @stable [30.10.2019] */ $rac-self-field-input-caret-bottom: unset, /* @stable [09.11.2019] */ $rac-self-field-input-caret-color: unset, /* @stable [09.11.2019] */ $rac-self-field-input-caret-font-size: unset, /* @stable [09.11.2019] */ $rac-self-field-input-caret-position: unset, /* @stable [09.11.2019] */ $rac-self-field-input-color: unset, /* @stable [21.10.2019] */ $rac-self-field-input-cursor: unset, /* @stable [23.10.2019] */ $rac-self-field-input-flex-grow: unset, /* @stable [14.10.2020] */ $rac-self-field-input-font-size: unset, /* @stable [30.10.2019] */ $rac-self-field-input-font-weight: unset, /* @stable [30.10.2019] */ $rac-self-field-input-height: unset, /* @stable [09.11.2019] */ $rac-self-field-input-icon-color: unset, /* @stable [23.10.2019] */ $rac-self-field-input-icon-size: unset, /* @stable [23.10.2019] */ $rac-self-field-input-label-color: unset, /* @stable [19.06.2020] */ $rac-self-field-input-label-font-size: unset, /* @stable [19.06.2020] */ $rac-self-field-input-label-position: unset, /* @stable [19.06.2020] */ $rac-self-field-input-label-right: unset, /* @stable [19.06.2020] */ $rac-self-field-input-label-top: unset, /* @stable [19.06.2020] */ $rac-self-field-input-line-height: unset, /* @stable [30.10.2019] */ $rac-self-field-input-mirror-width: unset, /* @stable [09.11.2019] */ $rac-self-field-input-opacity: unset, /* @stable [19.06.2020] */ $rac-self-field-input-overflow: unset, /* @stable [19.10.2020] */ $rac-self-field-input-padding: unset, /* @stable [30.10.2019] */ $rac-self-field-input-placeholder-color: unset, /* @stable [30.10.2019] */ $rac-self-field-input-placeholder-font-size: unset, /* @stable [30.10.2019] */ $rac-self-field-input-placeholder-line-height: unset, /* @stable [12.11.2019] */ $rac-self-field-input-placeholder-padding: unset, /* @stable [30.10.2019] */ $rac-self-field-input-position: unset, /* @stable [23.10.2019] */ $rac-self-field-input-resize: unset, /* @stable [30.10.2019] */ $rac-self-field-input-size: unset, /* @stable [23.10.2019] */ $rac-self-field-input-text-align: unset, /* @stable [30.10.2019] */ $rac-self-field-input-width: unset, /* @stable [30.10.2019] */ $rac-self-field-input-wrapper-align-items: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-background: unset, /* @stable [09.11.2019] */ $rac-self-field-input-wrapper-border-radius: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-border: unset, /* @stable [24.10.2019] */ $rac-self-field-input-wrapper-box-shadow: unset, /* @stable [30.01.2020] */ $rac-self-field-input-wrapper-display: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-flex-direction: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-flex-grow: unset, /* @stable [18.06.2020] */ $rac-self-field-input-wrapper-flex-shrink: unset, /* @stable [09.04.2020] */ $rac-self-field-input-wrapper-justify-content: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-opacity: unset, /* @stable [15.02.2020] */ $rac-self-field-input-wrapper-position: unset, /* @stable [23.10.2019] */ $rac-self-field-input-wrapper-size: unset, /* @stable [23.10.2019] */ $rac-self-field-label-after-content: unset, /* @stable [28.10.2019] */ $rac-self-field-label-after-font-size: unset, /* @stable [28.10.2019] */ $rac-self-field-label-after-margin-left: unset, /* @stable [17.02.2020] */ $rac-self-field-label-after-position: unset, /* @stable [28.10.2019] */ $rac-self-field-label-after-right: unset, /* @stable [28.10.2019] */ $rac-self-field-label-color: unset, /* @stable [09.11.2019] */ $rac-self-field-label-font-size: unset, /* @stable [09.11.2019] */ $rac-self-field-label-font-weight: unset, /* @stable [09.11.2019] */ $rac-self-field-label-left: unset, /* @stable [09.11.2019] */ $rac-self-field-label-line-height: unset, /* @stable [09.11.2019] */ $rac-self-field-label-margin: unset, /* @stable [09.11.2019] */ $rac-self-field-label-opacity: unset, /* @stable [19.06.2020] */ $rac-self-field-label-overflow: unset, /* @stable [16.02.2020] */ $rac-self-field-label-position: unset, /* @stable [28.10.2019] */ $rac-self-field-label-text-overflow: unset, /* @stable [16.02.2020] */ $rac-self-field-label-top: unset, /* @stable [09.11.2019] */ $rac-self-field-label-white-space: unset, /* @stable [09.11.2019] */ $rac-self-field-label-width: unset, /* @stable [16.02.2020] */ $rac-self-field-margin-top: unset, /* @stable [28.10.2019] */ $rac-self-field-margin: unset, /* @stable [28.10.2019] */ $rac-self-field-overflow: unset, /* @stable [16.02.2020] */ $rac-self-field-padding-top: unset, /* @stable [16.02.2020] */ $rac-self-field-position: unset, /* @stable [30.10.2019] */ $rac-self-field-prefix-label-align-items: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-color: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-display: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-font-size: unset, /* @stable [30.11.2020] */ $rac-self-field-prefix-label-height: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-justify-content: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-opacity: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-position: unset, /* @stable [19.06.2020] */ $rac-self-field-prefix-label-width: unset /* @stable [19.06.2020] */ ) { #{rac-cls($rac-field-cls, $rac-field-custom)} { @include rac-styles ( $rac-styles-align-items: $rac-field-align-items, $rac-styles-background: $rac-field-background, $rac-styles-border-bottom: $rac-field-border-bottom, $rac-styles-border-radius: $rac-field-border-radius, $rac-styles-display: $rac-field-display, $rac-styles-flex-basis: $rac-field-flex-basis, $rac-styles-flex-direction: $rac-field-flex-direction, $rac-styles-flex-grow: $rac-field-flex-grow, $rac-styles-height: $rac-field-height, $rac-styles-justify-content: $rac-field-justify-content, $rac-styles-margin-top: $rac-field-margin-top, $rac-styles-margin: $rac-field-margin, $rac-styles-overflow: $rac-field-overflow, $rac-styles-padding: $rac-field-padding, $rac-styles-position: $rac-field-position, $rac-styles-right: $rac-field-right, $rac-styles-top: $rac-field-top, $rac-styles-width: $rac-field-width, $rac-styles-word-break: $rac-field-word-break ); > .rac-field__self { @include rac-styles ( $rac-styles-align-items: $rac-self-field-align-items, $rac-styles-background: $rac-self-field-background, $rac-styles-border-bottom: $rac-self-field-border-bottom, $rac-styles-border-color: $rac-self-field-border-color, $rac-styles-border-left: $rac-self-field-border-left, $rac-styles-border-radius: $rac-self-field-border-radius, $rac-styles-border-right: $rac-self-field-border-right, $rac-styles-border: $rac-self-field-border, $rac-styles-box-sizing: $rac-self-field-box-sizing, $rac-styles-display: $rac-self-field-display, $rac-styles-flex-direction: $rac-self-field-flex-direction, $rac-styles-height: $rac-self-field-height, $rac-styles-margin-top: $rac-self-field-margin-top, $rac-styles-margin: $rac-self-field-margin, $rac-styles-overflow: $rac-self-field-overflow, $rac-styles-padding-top: $rac-self-field-padding-top, $rac-styles-position: $rac-self-field-position ); > { @include rac-styles ( $rac-styles-custom: rac-field__prefix-label, $rac-styles-align-items: $rac-self-field-prefix-label-align-items, $rac-styles-color: $rac-self-field-prefix-label-color, $rac-styles-display: $rac-self-field-prefix-label-display, $rac-styles-font-size: $rac-self-field-prefix-label-font-size, $rac-styles-height: $rac-self-field-prefix-label-height, $rac-styles-justify-content: $rac-self-field-prefix-label-justify-content, $rac-styles-opacity: $rac-self-field-prefix-label-opacity, $rac-styles-position: $rac-self-field-prefix-label-position, $rac-styles-width: $rac-self-field-prefix-label-width ); .rac-field__label { @include rac-styles ( $rac-styles-color: $rac-self-field-label-color, $rac-styles-font-size: $rac-self-field-label-font-size, $rac-styles-font-weight: $rac-self-field-label-font-weight, $rac-styles-left: $rac-self-field-label-left, $rac-styles-line-height: $rac-self-field-label-line-height, $rac-styles-margin: $rac-self-field-label-margin, $rac-styles-opacity: $rac-self-field-label-opacity, $rac-styles-overflow: $rac-self-field-label-overflow, $rac-styles-position: $rac-self-field-label-position, $rac-styles-text-overflow: $rac-self-field-label-text-overflow, $rac-styles-top: $rac-self-field-label-top, $rac-styles-white-space: $rac-self-field-label-white-space, $rac-styles-width: $rac-self-field-label-width ); &::after { @include rac-styles ( $rac-styles-content: $rac-self-field-label-after-content, $rac-styles-font-size: $rac-self-field-label-after-font-size, $rac-styles-margin-left: $rac-self-field-label-after-margin-left, $rac-styles-position: $rac-self-field-label-after-position, $rac-styles-right: $rac-self-field-label-after-right ); } } @include rac-info ( $rac-info-height: $rac-self-field-info-height, $rac-info-position: $rac-self-field-info-position, $rac-info-width: $rac-self-field-info-width ); @include rac-icon ( $rac-icon-color: $rac-self-field-icon-color, $rac-icon-height: $rac-self-field-icon-height, $rac-icon-padding: $rac-self-field-icon-padding, $rac-icon-size: $rac-self-field-icon-size ); .rac-field__input-wrapper { @include rac-styles ( $rac-styles-align-items: $rac-self-field-input-wrapper-align-items, $rac-styles-background: $rac-self-field-input-wrapper-background, $rac-styles-border-radius: $rac-self-field-input-wrapper-border-radius, $rac-styles-border: $rac-self-field-input-wrapper-border, $rac-styles-box-shadow: $rac-self-field-input-wrapper-box-shadow, $rac-styles-display: $rac-self-field-input-wrapper-display, $rac-styles-flex-direction: $rac-self-field-input-wrapper-flex-direction, $rac-styles-flex-grow: $rac-self-field-input-wrapper-flex-grow, $rac-styles-flex-shrink: $rac-self-field-input-wrapper-flex-shrink, $rac-styles-justify-content: $rac-self-field-input-wrapper-justify-content, $rac-styles-opacity: $rac-self-field-input-wrapper-opacity, $rac-styles-position: $rac-self-field-input-wrapper-position, $rac-styles-size: $rac-self-field-input-wrapper-size ); > { @include rac-styles ( $rac-styles-custom: rac-field__input-caret, $rac-styles-bottom: $rac-self-field-input-caret-bottom, $rac-styles-color: $rac-self-field-input-caret-color, $rac-styles-font-size: $rac-self-field-input-caret-font-size, $rac-styles-position: $rac-self-field-input-caret-position ); @include rac-styles ( $rac-styles-custom: rac-field__input-label, $rac-styles-color: $rac-self-field-input-label-color, $rac-styles-font-size: $rac-self-field-input-label-font-size, $rac-styles-position: $rac-self-field-input-label-position, $rac-styles-right: $rac-self-field-input-label-right, $rac-styles-top: $rac-self-field-input-label-top ); @include rac-icon ( $rac-icon-color: $rac-self-field-input-icon-color, $rac-icon-size: $rac-self-field-input-icon-size ); .rac-field__input { @include rac-styles ( $rac-styles-background: $rac-self-field-input-background, $rac-styles-border: $rac-self-field-input-border, $rac-styles-color: $rac-self-field-input-color, $rac-styles-cursor: $rac-self-field-input-cursor, $rac-styles-flex-grow: $rac-self-field-input-flex-grow, $rac-styles-font-size: $rac-self-field-input-font-size, $rac-styles-font-weight: $rac-self-field-input-font-weight, $rac-styles-height: $rac-self-field-input-height, $rac-styles-line-height: $rac-self-field-input-line-height, $rac-styles-opacity: $rac-self-field-input-opacity, $rac-styles-overflow: $rac-self-field-input-overflow, $rac-styles-padding: $rac-self-field-input-padding, $rac-styles-position: $rac-self-field-input-position, $rac-styles-resize: $rac-self-field-input-resize, $rac-styles-size: $rac-self-field-input-size, $rac-styles-text-align: $rac-self-field-input-text-align, $rac-styles-width: $rac-self-field-input-width ); @include rac-placeholder ( $rac-placeholder-color: $rac-self-field-input-placeholder-color, $rac-placeholder-font-size: $rac-self-field-input-placeholder-font-size, $rac-placeholder-line-height: $rac-self-field-input-placeholder-line-height, $rac-placeholder-padding: $rac-self-field-input-placeholder-padding ); &.rac-field__input-mirror { @include rac-styles ( $rac-styles-width: $rac-self-field-input-mirror-width ); } &:-webkit-autofill { @include rac-styles ( $rac-styles-transition: $rac-self-field-input-autofill-transition ); } } } } } } > { .rac-field__message { @include rac-styles ( $rac-styles-color: $rac-field-message-color, $rac-styles-font-size: $rac-field-message-font-size, $rac-styles-line-height: $rac-field-message-line-height, $rac-styles-margin: $rac-field-message-margin, $rac-styles-opacity: $rac-field-message-opacity ); &.rac-field__error-message { @include rac-styles ( $rac-styles-color: $rac-field-error-message-color ); } } .rac-field__attachment { @include rac-styles ( $rac-styles-display: $rac-field-attachment-display, $rac-styles-margin: $rac-field-attachment-margin, $rac-styles-position: $rac-field-attachment-position ); @include rac-neighbor-child ( $rac-neighbor-child-margin: $rac-field-attachment-neighbor-child-margin ); } } } }