65 lines
1.6 KiB
Sass
65 lines
1.6 KiB
Sass
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-date-picker-controls
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
font-size: .875rem
|
|
height: $date-picker-controls-height
|
|
padding: $date-picker-controls-padding
|
|
|
|
.v-btn
|
|
text-transform: none
|
|
font-weight: 400
|
|
line-height: initial
|
|
letter-spacing: initial
|
|
|
|
> .v-btn__append > .v-icon
|
|
// matching VBtn for icon rotation
|
|
transition-property: transform
|
|
transition-duration: 0.28s
|
|
transition-timing-function: settings.$standard-easing
|
|
|
|
.v-date-picker--months &
|
|
.v-date-picker-controls__only-month-btn
|
|
> .v-btn__append > .v-icon
|
|
transform: rotate(180deg)
|
|
|
|
.v-date-picker--year &
|
|
.v-date-picker-controls__mode-btn
|
|
transform: rotate(180deg)
|
|
.v-date-picker-controls__year-btn,
|
|
.v-date-picker-controls__only-year-btn
|
|
> .v-btn__append > .v-icon
|
|
transform: rotate(180deg)
|
|
|
|
&__date
|
|
margin-inline-end: 4px
|
|
|
|
&__month,
|
|
&__year
|
|
display: flex
|
|
|
|
@include tools.rtl()
|
|
flex-direction: row-reverse
|
|
|
|
& &__month-btn,
|
|
& &__year-btn
|
|
padding: 0 12px
|
|
|
|
& &__only-month-btn,
|
|
& &__only-year-btn
|
|
padding-inline: $date-picker-controls-docked-toggle-btn-padding
|
|
|
|
// just lower than default
|
|
min-width: 40px
|
|
|
|
> .v-btn__append
|
|
margin-inline: $date-picker-controls-docked-toggle-append-margin-inline
|
|
|
|
.v-date-picker__title
|
|
display: inline-block
|