vuetify/lib/components/VTabs/VTabs.css

Vue Material Component Framework

.v-tabs {
  display: flex;
  height: var(--v-tabs-height);
}
.v-tabs--density-default {
  --v-tabs-height: 48px;
}
.v-tabs--density-default.v-tabs--stacked {
  --v-tabs-height: 72px;
}

.v-tabs--density-comfortable {
  --v-tabs-height: 44px;
}
.v-tabs--density-comfortable.v-tabs--stacked {
  --v-tabs-height: 68px;
}

.v-tabs--density-compact {
  --v-tabs-height: 36px;
}
.v-tabs--density-compact.v-tabs--stacked {
  --v-tabs-height: 60px;
}

.v-tabs.v-slide-group--vertical {
  height: auto;
  flex: none;
  --v-tabs-height: 48px;
}

.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
  margin-inline-start: 42px;
}

.v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
.v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
  margin-inline-end: auto;
}
.v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
.v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
  margin-inline-start: auto;
}

.v-tabs--grow {
  flex-grow: 1;
}
.v-tabs--grow .v-tab {
  flex: 1 0 auto;
  max-width: none;
}

.v-tabs--align-tabs-end .v-tab:first-child {
  margin-inline-start: auto;
}
.v-tabs--align-tabs-end .v-tab:last-child {
  margin-inline-end: 0;
}

.v-tabs--inset {
  --v-tabs-inset-radius: 4px;
  --v-tabs-inset-padding: 4px;
  background: rgba(var(--v-theme-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-tabs--inset .v-tab {
  margin: var(--v-tabs-inset-padding);
  transition-property: box-shadow, transform, opacity, background, color;
}
.v-tabs--inset .v-tab.v-tab.v-btn {
  border-radius: var(--v-tabs-inset-radius);
}
.v-tabs--inset .v-tab:focus-visible {
  outline: 2px solid rgb(var(--v-border-color));
  outline-offset: 2px;
}
.v-tabs--inset .v-tab:focus-visible:after {
  opacity: 0;
}
.v-tabs--inset:not(.v-tabs--fixed-tabs, .v-tabs--grow) {
  max-width: max-content;
}
.v-tabs--inset.v-tabs--fixed-tabs .v-slide-group__content {
  padding-inline: var(--v-tabs-inset-padding);
}
.v-tabs--inset .v-tab__slider {
  inset: 0;
  border-radius: var(--v-tabs-inset-radius);
  z-index: -1;
  width: auto;
}
.v-tabs--inset.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--inset.v-tabs--horizontal .v-tab__slider {
  height: auto;
}
.v-tabs--inset .v-btn__overlay {
  display: none;
}
.v-tabs--inset.v-tabs--vertical .v-tab {
  grid-template-columns: max-content 1fr max-content;
}
.v-tabs--inset.v-tabs--vertical .v-tab > .v-btn__content {
  justify-content: start;
}

@media (max-width: 1279.98px) {
  .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-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
    margin-inline-end: 52px;
  }
}