110 lines
2.9 KiB
Sass
110 lines
2.9 KiB
Sass
@use 'sass:math'
|
|
@use 'sass:map'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-tabs
|
|
display: flex
|
|
height: var(--v-tabs-height)
|
|
|
|
@at-root
|
|
@include tools.density('v-tabs', $tabs-density) using ($modifier)
|
|
--v-tabs-height: #{$tabs-height + $modifier}
|
|
|
|
&.v-tabs--stacked
|
|
--v-tabs-height: #{$tabs-stacked-height + $modifier}
|
|
|
|
&.v-slide-group--vertical
|
|
height: auto
|
|
flex: none
|
|
--v-tabs-height: #{$tabs-height}
|
|
|
|
.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
|
|
.v-tab:first-child
|
|
margin-inline-start: $tab-align-tabs-title-margin
|
|
|
|
.v-tabs--fixed-tabs,
|
|
.v-tabs--align-tabs-center
|
|
.v-slide-group__content > *:last-child
|
|
margin-inline-end: auto
|
|
|
|
.v-slide-group__content > *:first-child
|
|
margin-inline-start: auto
|
|
|
|
.v-tabs--grow
|
|
flex-grow: 1
|
|
|
|
.v-tab
|
|
flex: 1 0 auto
|
|
max-width: none
|
|
|
|
.v-tabs--align-tabs-end
|
|
.v-tab:first-child
|
|
margin-inline-start: auto
|
|
|
|
.v-tab:last-child
|
|
margin-inline-end: 0
|
|
|
|
.v-tabs--inset
|
|
--v-tabs-inset-radius: #{$tab-inset-radius}
|
|
--v-tabs-inset-padding: #{$tab-inset-padding}
|
|
--v-tabs-slider-background: rgba(var(--v-theme-on-surface), .2)
|
|
|
|
background: tools.theme-color('on-surface', 0.06)
|
|
box-shadow: inset 0 0 0 2px rgba(var(--v-border-color), var(--v-border-opacity))
|
|
border-radius: calc(var(--v-tabs-inset-radius) + var(--v-tabs-inset-padding))
|
|
|
|
.v-tab
|
|
margin: var(--v-tabs-inset-padding)
|
|
transition-property: box-shadow, transform, opacity, background, color
|
|
|
|
&.v-tab.v-btn
|
|
border-radius: var(--v-tabs-inset-radius)
|
|
|
|
&:focus-visible
|
|
outline: 2px solid rgb(var(--v-border-color))
|
|
outline-offset: 2px
|
|
|
|
&:after
|
|
opacity: 0
|
|
|
|
&:not(.v-tabs--fixed-tabs, .v-tabs--grow)
|
|
max-width: max-content
|
|
|
|
&.v-tabs--fixed-tabs .v-slide-group__content
|
|
padding-inline: var(--v-tabs-inset-padding)
|
|
|
|
.v-tab__slider
|
|
background: var(--v-tabs-slider-background)
|
|
inset: 0
|
|
border-radius: var(--v-tabs-inset-radius)
|
|
z-index: -1
|
|
width: auto
|
|
|
|
&.v-tabs--horizontal
|
|
height: calc(var(--v-tabs-height) + var(--v-tabs-inset-padding) * 2)
|
|
--v-tabs-inset-tab-radius: calc(var(--v-tabs-outer-radius) - var(--v-tabs-inset-padding) + 4px)
|
|
|
|
&.v-tabs--horizontal .v-tab__slider
|
|
height: auto
|
|
|
|
.v-btn__overlay
|
|
display: none
|
|
|
|
&.v-tabs--vertical .v-tab
|
|
grid-template-columns: max-content 1fr max-content
|
|
> .v-btn__content
|
|
justify-content: start
|
|
|
|
.v-tab__slider
|
|
width: auto
|
|
|
|
@media #{map.get(settings.$display-breakpoints, 'md-and-down')}
|
|
.v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
|
|
.v-tab:first-child
|
|
margin-inline-start: 52px
|
|
.v-tab:last-child
|
|
margin-inline-end: 52px
|