94 lines
2.3 KiB
Sass
94 lines
2.3 KiB
Sass
@use 'sass:selector'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-number-input
|
|
input[type="number"]
|
|
-moz-appearance: textfield
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
|
|
.v-field
|
|
&:has(.v-field__prepend-inner > .v-number-input__control:first-child)
|
|
padding-inline-start: 0
|
|
|
|
&:has(.v-field__append-inner > .v-number-input__control:last-child)
|
|
padding-inline-end: 0
|
|
|
|
.v-field__prepend-inner:has(.v-number-input__control)
|
|
overflow: hidden
|
|
border-start-start-radius: inherit
|
|
border-end-start-radius: inherit
|
|
|
|
> .v-icon
|
|
margin-inline-end: 4px
|
|
|
|
> hr + .v-icon,
|
|
> .v-number-input__control + .v-icon
|
|
margin-inline: 8px 0
|
|
|
|
.v-divider--vertical
|
|
margin-inline: -1px 0
|
|
|
|
.v-field__append-inner:has(.v-number-input__control)
|
|
overflow: hidden
|
|
border-start-end-radius: inherit
|
|
border-end-end-radius: inherit
|
|
|
|
> .v-icon
|
|
margin-inline-start: 4px
|
|
|
|
> .v-icon:has(+ hr),
|
|
> .v-icon:has(+ .v-number-input__control)
|
|
margin-inline: 0 8px
|
|
|
|
.v-divider--vertical
|
|
margin-inline: 0 -1px
|
|
|
|
.v-field__clearable:has(+ .v-field__append-inner > hr:first-child)
|
|
margin-inline-end: 8px
|
|
|
|
&--inset
|
|
.v-divider
|
|
height: $number-input-inset-divider-size
|
|
width: $number-input-inset-divider-size
|
|
align-self: center
|
|
|
|
&--split
|
|
.v-field__input
|
|
text-align: center
|
|
|
|
&--stacked
|
|
.v-number-input__control
|
|
flex-direction: column-reverse
|
|
.v-btn
|
|
flex: 1
|
|
|
|
.v-field--variant-underlined
|
|
> .v-field__prepend-inner:has(.v-number-input__control),
|
|
> .v-field__append-inner:has(.v-number-input__control)
|
|
// drop input padding
|
|
padding-top: var(--v-field-padding-top)
|
|
// and pass it down
|
|
> *:not(.v-number-input__control, .v-divider--vertical)
|
|
margin-top: var(--v-input-padding-top, 0)
|
|
|
|
&--hide-input
|
|
.v-field
|
|
flex: none
|
|
gap: 0
|
|
&__input
|
|
width: 0
|
|
padding-inline: 0
|
|
|
|
&__control
|
|
display: flex
|
|
height: 100%
|
|
|
|
.v-btn
|
|
background-color: transparent
|
|
border-radius: 0
|