514 lines
13 KiB
Sass
514 lines
13 KiB
Sass
|
@use 'sass:map'
|
||
|
|
@use 'sass:math'
|
||
|
|
@use 'sass:selector'
|
||
|
|
@use '../../styles/settings'
|
||
|
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
/* region INPUT */
|
||
|
|
.v-field
|
||
|
|
display: grid
|
||
|
|
grid-template-areas: "prepend-inner field clear append-inner"
|
||
|
|
grid-template-columns: min-content minmax(0, 1fr) min-content min-content
|
||
|
|
font-size: $field-font-size
|
||
|
|
letter-spacing: $field-letter-spacing
|
||
|
|
max-width: $field-max-width
|
||
|
|
border-radius: $field-border-radius
|
||
|
|
contain: layout
|
||
|
|
flex: 1 0
|
||
|
|
grid-area: control
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
&--disabled
|
||
|
|
opacity: var(--v-disabled-opacity)
|
||
|
|
pointer-events: none
|
||
|
|
|
||
|
|
--v-field-padding-start: #{$field-control-padding-start}
|
||
|
|
--v-field-padding-end: #{$field-control-padding-end}
|
||
|
|
--v-field-padding-top: #{$field-control-padding-top}
|
||
|
|
--v-field-padding-bottom: #{$field-control-padding-bottom}
|
||
|
|
--v-field-input-padding-top: #{$field-input-padding-top}
|
||
|
|
--v-field-input-padding-bottom: #{$field-input-padding-bottom}
|
||
|
|
|
||
|
|
.v-chip
|
||
|
|
--v-chip-height: #{$field-chip-height}
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region MODIFIERS */
|
||
|
|
.v-field
|
||
|
|
&--prepended
|
||
|
|
padding-inline-start: $field-control-affixed-padding
|
||
|
|
|
||
|
|
&--appended
|
||
|
|
padding-inline-end: $field-control-affixed-padding
|
||
|
|
|
||
|
|
&--variant-solo,
|
||
|
|
&--variant-solo-filled
|
||
|
|
background: $field-control-solo-background
|
||
|
|
border-color: transparent
|
||
|
|
color: $field-control-solo-color
|
||
|
|
|
||
|
|
@include tools.elevation($field-control-solo-elevation)
|
||
|
|
|
||
|
|
&--variant-solo-inverted
|
||
|
|
background: $field-control-solo-background
|
||
|
|
border-color: transparent
|
||
|
|
color: $field-control-solo-inverted-color
|
||
|
|
|
||
|
|
@include tools.elevation($field-control-solo-elevation)
|
||
|
|
|
||
|
|
&.v-field--focused
|
||
|
|
color: $field-control-solo-inverted-focused-color
|
||
|
|
|
||
|
|
&--variant-filled
|
||
|
|
border-bottom-left-radius: 0
|
||
|
|
border-bottom-right-radius: 0
|
||
|
|
|
||
|
|
&--variant-solo,
|
||
|
|
&--variant-solo-inverted,
|
||
|
|
&--variant-solo-filled,
|
||
|
|
&--variant-filled
|
||
|
|
$root: &
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.nest(&, $root)}
|
||
|
|
--v-input-control-height: #{$field-control-height + $modifier}
|
||
|
|
--v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
|
||
|
|
|
||
|
|
&--variant-outlined,
|
||
|
|
&--single-line,
|
||
|
|
&--no-label
|
||
|
|
--v-field-padding-top: 0px
|
||
|
|
$root: &
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.nest(&, $root)}
|
||
|
|
--v-field-padding-bottom: #{16px + $modifier * .5}
|
||
|
|
|
||
|
|
&--variant-plain,
|
||
|
|
&--variant-underlined
|
||
|
|
$root: &
|
||
|
|
border-radius: 0
|
||
|
|
padding: 0
|
||
|
|
|
||
|
|
&.v-field
|
||
|
|
--v-field-padding-start: 0px
|
||
|
|
--v-field-padding-end: 0px
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.nest(&, $root)}
|
||
|
|
--v-input-control-height: #{$field-control-underlined-height + $modifier}
|
||
|
|
--v-field-padding-top: #{math.max(0px, 4px + $modifier * .25)}
|
||
|
|
--v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
|
||
|
|
|
||
|
|
&--flat
|
||
|
|
box-shadow: none
|
||
|
|
|
||
|
|
&--rounded
|
||
|
|
@include tools.rounded($field-rounded-border-radius)
|
||
|
|
|
||
|
|
// These are separate so they can override the default variant styles
|
||
|
|
&.v-field
|
||
|
|
&--prepended
|
||
|
|
--v-field-padding-start: #{$field-control-affixed-inner-padding}
|
||
|
|
|
||
|
|
&--appended
|
||
|
|
--v-field-padding-end: #{$field-control-affixed-inner-padding}
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region ELEMENTS */
|
||
|
|
.v-field__input
|
||
|
|
align-items: center
|
||
|
|
color: inherit
|
||
|
|
column-gap: $field-input-column-gap
|
||
|
|
display: flex
|
||
|
|
flex-wrap: wrap
|
||
|
|
letter-spacing: $field-letter-spacing
|
||
|
|
opacity: $field-input-opacity
|
||
|
|
min-height: $field-input-min-height
|
||
|
|
min-width: 0
|
||
|
|
padding-inline: var(--v-field-padding-start) var(--v-field-padding-end)
|
||
|
|
padding-top: var(--v-field-input-padding-top)
|
||
|
|
padding-bottom: var(--v-field-input-padding-bottom)
|
||
|
|
position: relative
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
$root: &
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.nest(&, $root)}
|
||
|
|
row-gap: #{$field-input-row-gap + $modifier * .25}
|
||
|
|
|
||
|
|
input
|
||
|
|
letter-spacing: inherit
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
& input::placeholder,
|
||
|
|
input#{&}::placeholder,
|
||
|
|
textarea#{&}::placeholder
|
||
|
|
color: currentColor
|
||
|
|
opacity: var(--v-disabled-opacity)
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&:active
|
||
|
|
outline: none
|
||
|
|
|
||
|
|
// Remove Firefox red outline
|
||
|
|
&:invalid
|
||
|
|
box-shadow: none
|
||
|
|
|
||
|
|
.v-field__field
|
||
|
|
flex: 1 0
|
||
|
|
grid-area: field
|
||
|
|
position: relative
|
||
|
|
align-items: flex-start
|
||
|
|
display: flex
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region AFFIXES */
|
||
|
|
.v-field__prepend-inner
|
||
|
|
grid-area: prepend-inner
|
||
|
|
padding-inline-end: var(--v-field-padding-after)
|
||
|
|
|
||
|
|
.v-field__clearable
|
||
|
|
grid-area: clear
|
||
|
|
|
||
|
|
.v-field__append-inner
|
||
|
|
grid-area: append-inner
|
||
|
|
padding-inline-start: var(--v-field-padding-after)
|
||
|
|
|
||
|
|
.v-field__append-inner,
|
||
|
|
.v-field__clearable,
|
||
|
|
.v-field__prepend-inner
|
||
|
|
display: flex
|
||
|
|
align-items: flex-start
|
||
|
|
padding-top: var(--v-input-padding-top, $field-control-padding-top)
|
||
|
|
|
||
|
|
.v-field--center-affix &
|
||
|
|
align-items: center
|
||
|
|
padding-top: 0
|
||
|
|
|
||
|
|
.v-field.v-field--variant-underlined,
|
||
|
|
.v-field.v-field--variant-plain
|
||
|
|
.v-field__append-inner,
|
||
|
|
.v-field__clearable,
|
||
|
|
.v-field__prepend-inner
|
||
|
|
align-items: flex-start
|
||
|
|
padding-top: $field-input-padding-top
|
||
|
|
padding-bottom: $field-input-padding-bottom
|
||
|
|
|
||
|
|
.v-field__prepend-inner,
|
||
|
|
.v-field__append-inner
|
||
|
|
.v-field--focused &
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
.v-field__prepend-inner,
|
||
|
|
.v-field__append-inner,
|
||
|
|
.v-field__clearable
|
||
|
|
> .v-icon
|
||
|
|
opacity: var(--v-medium-emphasis-opacity)
|
||
|
|
|
||
|
|
.v-field--disabled &,
|
||
|
|
.v-field--error &
|
||
|
|
> .v-icon
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
.v-field--error:not(.v-field--disabled) &
|
||
|
|
> .v-icon
|
||
|
|
color: rgb(var(--v-theme-error))
|
||
|
|
|
||
|
|
.v-field__clearable
|
||
|
|
cursor: pointer
|
||
|
|
opacity: 0
|
||
|
|
overflow: hidden
|
||
|
|
margin-inline: $field-clearable-margin
|
||
|
|
transition: $field-transition-timing
|
||
|
|
transition-property: opacity, transform, width
|
||
|
|
|
||
|
|
.v-field--focused &,
|
||
|
|
.v-field--persistent-clear &
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
@media (hover: hover)
|
||
|
|
.v-field:hover &
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
@media (hover: none)
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region LABEL */
|
||
|
|
.v-label.v-field-label
|
||
|
|
contain: layout paint
|
||
|
|
display: block
|
||
|
|
margin-inline-start: var(--v-field-padding-start)
|
||
|
|
margin-inline-end: var(--v-field-padding-end)
|
||
|
|
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end))
|
||
|
|
pointer-events: none
|
||
|
|
position: absolute
|
||
|
|
top: var(--v-input-padding-top)
|
||
|
|
transform-origin: left center
|
||
|
|
transition: $field-transition-timing
|
||
|
|
transition-property: opacity, transform
|
||
|
|
z-index: 1
|
||
|
|
|
||
|
|
.v-field--variant-underlined &,
|
||
|
|
.v-field--variant-plain &
|
||
|
|
top: calc(var(--v-input-padding-top) + var(--v-field-padding-top))
|
||
|
|
|
||
|
|
.v-field--center-affix &
|
||
|
|
top: 50%
|
||
|
|
transform: translateY(-50%)
|
||
|
|
|
||
|
|
.v-field--active &
|
||
|
|
visibility: hidden
|
||
|
|
|
||
|
|
.v-field--focused &,
|
||
|
|
.v-field--error &
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
.v-field--error:not(.v-field--disabled) &
|
||
|
|
color: rgb(var(--v-theme-error))
|
||
|
|
|
||
|
|
&--floating
|
||
|
|
--v-field-label-scale: #{$field-label-floating-scale}em
|
||
|
|
font-size: var(--v-field-label-scale)
|
||
|
|
visibility: hidden
|
||
|
|
max-width: 100%
|
||
|
|
|
||
|
|
.v-field--center-affix &
|
||
|
|
transform: none
|
||
|
|
|
||
|
|
.v-field.v-field--active &
|
||
|
|
visibility: unset
|
||
|
|
|
||
|
|
.v-field--variant-solo &,
|
||
|
|
.v-field--variant-solo-inverted &,
|
||
|
|
.v-field--variant-filled &,
|
||
|
|
.v-field--variant-solo-filled &
|
||
|
|
$root: &
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.nest(&, $root)}
|
||
|
|
top: 7px + $modifier * .25
|
||
|
|
|
||
|
|
.v-field--variant-plain &,
|
||
|
|
.v-field--variant-underlined &
|
||
|
|
transform: translateY(-16px)
|
||
|
|
margin: 0
|
||
|
|
top: var(--v-input-padding-top)
|
||
|
|
|
||
|
|
.v-field--variant-outlined &
|
||
|
|
transform: translateY(-50%)
|
||
|
|
transform-origin: center
|
||
|
|
position: static
|
||
|
|
margin: 0 4px
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region OUTLINE */
|
||
|
|
.v-field__outline
|
||
|
|
--v-field-border-width: #{$field-border-width}
|
||
|
|
--v-field-border-opacity: #{$field-outline-opacity}
|
||
|
|
align-items: stretch
|
||
|
|
contain: layout
|
||
|
|
display: flex
|
||
|
|
height: 100%
|
||
|
|
left: 0
|
||
|
|
pointer-events: none
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
@media (hover: hover)
|
||
|
|
.v-field:hover &
|
||
|
|
--v-field-border-opacity: var(--v-high-emphasis-opacity)
|
||
|
|
|
||
|
|
.v-field--error:not(.v-field--disabled) &
|
||
|
|
color: rgb(var(--v-theme-error))
|
||
|
|
|
||
|
|
.v-field.v-field--focused &,
|
||
|
|
.v-input.v-input--error &
|
||
|
|
--v-field-border-opacity: 1
|
||
|
|
|
||
|
|
.v-field--variant-outlined.v-field--focused &
|
||
|
|
--v-field-border-width: #{$field-focused-border-width}
|
||
|
|
|
||
|
|
.v-field--variant-filled &,
|
||
|
|
.v-field--variant-underlined &
|
||
|
|
&::before
|
||
|
|
border-color: currentColor
|
||
|
|
border-style: solid
|
||
|
|
border-width: 0 0 var(--v-field-border-width)
|
||
|
|
opacity: var(--v-field-border-opacity)
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
@include tools.absolute(true)
|
||
|
|
|
||
|
|
.v-field--variant-filled &,
|
||
|
|
.v-field--variant-underlined &
|
||
|
|
&::after
|
||
|
|
border-color: currentColor
|
||
|
|
border-style: solid
|
||
|
|
border-width: 0 0 $field-focused-border-width
|
||
|
|
transform: scaleX(0)
|
||
|
|
transition: transform $field-transition-timing
|
||
|
|
@include tools.absolute(true)
|
||
|
|
|
||
|
|
@at-root #{selector.append('.v-field--focused', &)}
|
||
|
|
transform: scaleX(1)
|
||
|
|
|
||
|
|
.v-field--variant-outlined &
|
||
|
|
border-radius: inherit
|
||
|
|
|
||
|
|
&__start,
|
||
|
|
&__notch::before,
|
||
|
|
&__notch::after,
|
||
|
|
&__end
|
||
|
|
border: 0 solid currentColor
|
||
|
|
opacity: var(--v-field-border-opacity)
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
|
||
|
|
&__start
|
||
|
|
flex: 0 0 $field-control-affixed-padding
|
||
|
|
border-top-width: var(--v-field-border-width)
|
||
|
|
border-bottom-width: var(--v-field-border-width)
|
||
|
|
border-inline-start-width: var(--v-field-border-width)
|
||
|
|
border-start-start-radius: inherit
|
||
|
|
border-start-end-radius: 0
|
||
|
|
border-end-end-radius: 0
|
||
|
|
border-end-start-radius: inherit
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
#{selector.append('.v-field--rounded', &)},
|
||
|
|
#{selector.append('[class^="rounded-"]', &)},
|
||
|
|
#{selector.append('[class*=" rounded-"]', &)}
|
||
|
|
flex-basis: calc(var(--v-input-control-height) / 2 + 2px)
|
||
|
|
|
||
|
|
&__notch
|
||
|
|
flex: none
|
||
|
|
position: relative
|
||
|
|
max-width: calc(100% - $field-control-affixed-padding)
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&::after
|
||
|
|
opacity: var(--v-field-border-opacity)
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
|
||
|
|
@include tools.absolute(true)
|
||
|
|
|
||
|
|
&::before
|
||
|
|
border-width: var(--v-field-border-width) 0 0
|
||
|
|
|
||
|
|
&::after
|
||
|
|
bottom: 0
|
||
|
|
border-width: 0 0 var(--v-field-border-width)
|
||
|
|
|
||
|
|
@at-root #{selector.append('.v-field--active', &)}
|
||
|
|
&::before
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
&__end
|
||
|
|
flex: 1
|
||
|
|
border-top-width: var(--v-field-border-width)
|
||
|
|
border-bottom-width: var(--v-field-border-width)
|
||
|
|
border-inline-end-width: var(--v-field-border-width)
|
||
|
|
border-start-start-radius: 0
|
||
|
|
border-start-end-radius: inherit
|
||
|
|
border-end-end-radius: inherit
|
||
|
|
border-end-start-radius: 0
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region LOADER */
|
||
|
|
.v-field__loader
|
||
|
|
top: calc(100% - 2px)
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
width: 100%
|
||
|
|
border-top-left-radius: 0
|
||
|
|
border-top-right-radius: 0
|
||
|
|
border-bottom-left-radius: inherit
|
||
|
|
border-bottom-right-radius: inherit
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.v-field--variant-outlined &
|
||
|
|
top: calc(100% - 3px)
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region OVERLAY */
|
||
|
|
.v-field__overlay
|
||
|
|
border-radius: inherit
|
||
|
|
pointer-events: none
|
||
|
|
|
||
|
|
@include tools.absolute()
|
||
|
|
|
||
|
|
.v-field--variant-filled
|
||
|
|
.v-field__overlay
|
||
|
|
background-color: currentColor
|
||
|
|
opacity: $field-overlay-filled-opacity
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
|
||
|
|
&.v-field--has-background .v-field__overlay
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
@media (hover: hover)
|
||
|
|
&:hover .v-field__overlay
|
||
|
|
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
&.v-field--focused .v-field__overlay
|
||
|
|
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
.v-field--variant-solo-filled
|
||
|
|
.v-field__overlay
|
||
|
|
background-color: currentColor
|
||
|
|
opacity: $field-overlay-filled-opacity
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
|
||
|
|
@media (hover: hover)
|
||
|
|
&:hover .v-field__overlay
|
||
|
|
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
&.v-field--focused .v-field__overlay
|
||
|
|
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
.v-field--variant-solo-inverted
|
||
|
|
.v-field__overlay
|
||
|
|
transition: opacity $field-subtle-transition-timing
|
||
|
|
|
||
|
|
&.v-field--has-background .v-field__overlay
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
@media (hover: hover)
|
||
|
|
&:hover .v-field__overlay
|
||
|
|
opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
&.v-field--focused .v-field__overlay
|
||
|
|
background-color: $field-overlay-focused-background-color
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
/* endregion */
|
||
|
|
/* region MODIFIERS */
|
||
|
|
.v-field--reverse
|
||
|
|
.v-field__field, .v-field__input
|
||
|
|
flex-direction: row-reverse
|
||
|
|
|
||
|
|
.v-field__input, input
|
||
|
|
text-align: end
|
||
|
|
|
||
|
|
.v-field--variant-filled,
|
||
|
|
.v-field--variant-underlined
|
||
|
|
.v-input--disabled &
|
||
|
|
.v-field__outline::before
|
||
|
|
border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat
|
||
|
|
|
||
|
|
.v-field--loading
|
||
|
|
.v-field__outline::after,
|
||
|
|
.v-field__outline::before
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
/* endregion */
|