VTabs.sass 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. @use 'sass:math'
  2. @use 'sass:map'
  3. @use '../../styles/settings'
  4. @use '../../styles/tools'
  5. @use './variables' as *
  6. @include tools.layer('components')
  7. .v-tabs
  8. display: flex
  9. height: var(--v-tabs-height)
  10. @at-root
  11. @include tools.density('v-tabs', $tabs-density) using ($modifier)
  12. --v-tabs-height: #{$tabs-height + $modifier}
  13. &.v-tabs--stacked
  14. --v-tabs-height: #{$tabs-stacked-height + $modifier}
  15. &.v-slide-group--vertical
  16. height: auto
  17. flex: none
  18. --v-tabs-height: #{$tabs-height}
  19. .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
  20. .v-tab:first-child
  21. margin-inline-start: $tab-align-tabs-title-margin
  22. .v-tabs--fixed-tabs,
  23. .v-tabs--align-tabs-center
  24. .v-slide-group__content > *:last-child
  25. margin-inline-end: auto
  26. .v-slide-group__content > *:first-child
  27. margin-inline-start: auto
  28. .v-tabs--grow
  29. flex-grow: 1
  30. .v-tab
  31. flex: 1 0 auto
  32. max-width: none
  33. .v-tabs--align-tabs-end
  34. .v-tab:first-child
  35. margin-inline-start: auto
  36. .v-tab:last-child
  37. margin-inline-end: 0
  38. @media #{map.get(settings.$display-breakpoints, 'md-and-down')}
  39. .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
  40. .v-tab:first-child
  41. margin-inline-start: 52px
  42. .v-tab:last-child
  43. margin-inline-end: 52px