116 lines
2.7 KiB
Sass
116 lines
2.7 KiB
Sass
|
@use 'sass:math'
|
||
|
|
@use 'sass:selector'
|
||
|
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
.v-input
|
||
|
|
display: grid
|
||
|
|
flex: 1 1 auto
|
||
|
|
font-size: $input-font-size
|
||
|
|
font-weight: $input-font-weight
|
||
|
|
line-height: $input-line-height
|
||
|
|
|
||
|
|
&--disabled
|
||
|
|
pointer-events: none
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
--v-input-control-height: #{$input-control-height + $modifier}
|
||
|
|
--v-input-padding-top: #{16px + $modifier * .5}
|
||
|
|
|
||
|
|
.v-input--vertical
|
||
|
|
grid-template-areas: "append" "control" "prepend"
|
||
|
|
grid-template-rows: max-content auto max-content
|
||
|
|
grid-template-columns: min-content
|
||
|
|
|
||
|
|
.v-input__prepend
|
||
|
|
margin-block-start: $input-affix-margin-inside
|
||
|
|
|
||
|
|
.v-input__append
|
||
|
|
margin-block-end: $input-affix-margin-inside
|
||
|
|
|
||
|
|
.v-input--horizontal
|
||
|
|
grid-template-areas: "prepend control append" "a messages b"
|
||
|
|
grid-template-columns: max-content minmax(0, 1fr) max-content
|
||
|
|
grid-template-rows: auto auto
|
||
|
|
|
||
|
|
.v-input__prepend
|
||
|
|
margin-inline-end: $input-affix-margin-inside
|
||
|
|
|
||
|
|
.v-input__append
|
||
|
|
margin-inline-start: $input-affix-margin-inside
|
||
|
|
|
||
|
|
.v-input__details
|
||
|
|
align-items: flex-end
|
||
|
|
display: flex
|
||
|
|
font-size: $input-details-font-size
|
||
|
|
font-weight: $input-details-font-weight
|
||
|
|
grid-area: messages
|
||
|
|
letter-spacing: $input-details-letter-spacing
|
||
|
|
line-height: $input-details-line-height
|
||
|
|
min-height: $input-details-min-height
|
||
|
|
padding-top: $input-details-padding-above
|
||
|
|
overflow: hidden
|
||
|
|
justify-content: space-between
|
||
|
|
|
||
|
|
.v-input__details,
|
||
|
|
.v-input__prepend,
|
||
|
|
.v-input__append
|
||
|
|
> .v-icon
|
||
|
|
opacity: var(--v-medium-emphasis-opacity)
|
||
|
|
|
||
|
|
.v-input--disabled &,
|
||
|
|
.v-input--error &
|
||
|
|
> .v-icon,
|
||
|
|
.v-messages
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
.v-input--disabled &
|
||
|
|
opacity: var(--v-disabled-opacity)
|
||
|
|
|
||
|
|
.v-input--error:not(.v-input--disabled) &
|
||
|
|
> .v-icon,
|
||
|
|
.v-messages
|
||
|
|
color: rgb(var(--v-theme-error))
|
||
|
|
|
||
|
|
.v-input__prepend,
|
||
|
|
.v-input__append
|
||
|
|
display: flex
|
||
|
|
align-items: flex-start
|
||
|
|
padding-top: var(--v-input-padding-top)
|
||
|
|
|
||
|
|
.v-input--center-affix &
|
||
|
|
align-items: center
|
||
|
|
padding-top: 0
|
||
|
|
|
||
|
|
.v-input__prepend
|
||
|
|
grid-area: prepend
|
||
|
|
|
||
|
|
.v-input__append
|
||
|
|
grid-area: append
|
||
|
|
|
||
|
|
.v-input__control
|
||
|
|
display: flex
|
||
|
|
grid-area: control
|
||
|
|
|
||
|
|
.v-input
|
||
|
|
&--hide-spin-buttons
|
||
|
|
input::-webkit-outer-spin-button,
|
||
|
|
input::-webkit-inner-spin-button
|
||
|
|
-webkit-appearance: none
|
||
|
|
margin: 0
|
||
|
|
input[type=number]
|
||
|
|
-moz-appearance: textfield
|
||
|
|
|
||
|
|
&--plain-underlined
|
||
|
|
|
||
|
|
.v-input__prepend,
|
||
|
|
.v-input__append
|
||
|
|
$this: &
|
||
|
|
align-items: flex-start
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-input', $input-density) using ($modifier)
|
||
|
|
@at-root #{selector.append(&, $this)}
|
||
|
|
padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)})
|