83 lines
1.8 KiB
Sass
83 lines
1.8 KiB
Sass
@use 'sass:math'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-otp-input
|
|
align-items: center
|
|
display: flex
|
|
justify-content: center
|
|
padding: $otp-input-padding
|
|
position: relative
|
|
@include tools.rounded(4px)
|
|
|
|
.v-field
|
|
height: 100%
|
|
|
|
.v-field__outline
|
|
&__start,
|
|
&__end
|
|
flex: 1
|
|
|
|
input::placeholder
|
|
color: currentColor
|
|
opacity: var(--v-disabled-opacity)
|
|
|
|
&.v-field--focused
|
|
input::placeholder
|
|
opacity: 0
|
|
|
|
.v-otp-input__divider
|
|
margin: $otp-input-divider-margin
|
|
|
|
.v-otp-input__content
|
|
align-items: center
|
|
display: flex
|
|
gap: $otp-input-content-gap
|
|
padding: $otp-input-content-padding
|
|
justify-content: center
|
|
max-width: $otp-input-content-max-width
|
|
position: relative
|
|
border-radius: inherit
|
|
|
|
.v-otp-input--divided &
|
|
max-width: $otp-input-divided-content-max-width
|
|
|
|
@at-root
|
|
@include tools.density('v-otp-input', $input-density) using ($modifier)
|
|
.v-otp-input__content
|
|
height: #{$otp-input-content-height + math.div($modifier, 2)}
|
|
|
|
.v-otp-input__field
|
|
padding: 0
|
|
margin: 0
|
|
border-radius: 0
|
|
font: inherit
|
|
border-style: none
|
|
color: inherit
|
|
background-color: transparent
|
|
font-size: $otp-input-field-font-size
|
|
height: 100%
|
|
outline: none
|
|
text-align: center
|
|
width: 100%
|
|
|
|
&[type=number]::-webkit-outer-spin-button,
|
|
&[type=number]::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
margin: 0
|
|
|
|
&[type=number]
|
|
-moz-appearance: textfield
|
|
|
|
.v-otp-input__loader
|
|
align-items: center
|
|
display: flex
|
|
height: 100%
|
|
justify-content: center
|
|
width: 100%
|
|
|
|
.v-progress-linear
|
|
position: absolute
|