85 lines
2.4 KiB
Sass
85 lines
2.4 KiB
Sass
@use 'sass:selector'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
/* region BLOCK */
|
|
.v-text-field
|
|
input
|
|
color: inherit
|
|
flex: $text-field-input-flex
|
|
transition: $text-field-input-transition
|
|
min-width: 0
|
|
|
|
&:focus,
|
|
&:active
|
|
outline: none
|
|
|
|
// Remove Firefox red outline
|
|
&:invalid
|
|
box-shadow: none
|
|
|
|
.v-field
|
|
cursor: text
|
|
|
|
&:not(.v-field--reverse)
|
|
.v-field__input
|
|
@at-root #{selector.append('.v-text-field--prefixed', &)}
|
|
--v-field-padding-start: #{$text-field-input-padding-start}
|
|
|
|
@at-root #{selector.append('.v-text-field--suffixed', &)}
|
|
--v-field-padding-end: #{$text-field-input-padding-end}
|
|
|
|
&.v-field--reverse
|
|
.v-field__input
|
|
@at-root #{selector.append('.v-text-field--prefixed', &)}
|
|
--v-field-padding-end: #{$text-field-input-padding-start}
|
|
|
|
@at-root #{selector.append('.v-text-field--suffixed', &)}
|
|
--v-field-padding-start: #{$text-field-input-padding-end}
|
|
|
|
&:not(.v-field--no-label, .v-field--active)
|
|
input::placeholder
|
|
opacity: 0
|
|
|
|
.v-field--single-line
|
|
input
|
|
transition: none
|
|
|
|
/* endregion */
|
|
/* region ELEMENTS */
|
|
.v-text-field
|
|
&__prefix,
|
|
&__suffix
|
|
align-items: center
|
|
color: $text-field-affix-color
|
|
cursor: default
|
|
display: flex
|
|
opacity: 0
|
|
transition: inherit
|
|
white-space: nowrap
|
|
min-height: $field-input-min-height
|
|
padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0))
|
|
padding-bottom: var(--v-field-padding-bottom, 6px)
|
|
|
|
.v-field--active &
|
|
opacity: 1
|
|
|
|
.v-field--disabled &
|
|
color: $text-field-disabled-affix-color
|
|
|
|
&__prefix
|
|
@at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
|
|
padding-inline-start: var(--v-field-padding-start)
|
|
@at-root #{selector.nest('.v-field.v-field--reverse', &)}
|
|
padding-inline-end: var(--v-field-padding-end)
|
|
|
|
&__suffix
|
|
@at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
|
|
padding-inline-end: var(--v-field-padding-end)
|
|
@at-root #{selector.nest('.v-field.v-field--reverse', &)}
|
|
padding-inline-start: var(--v-field-padding-start)
|
|
|
|
/* endregion */
|