vuestic-ui/dist/esm-node/VaTabs.css

Vue 3 UI Framework

:root,
:host {
  --va-tabs-display: flex;
  --va-tabs-align-items-horizontal: center;
  --va-tabs-align-items-vertical: stretch;
  /* Container */
  --va-tabs-container-height: 2rem;
  --va-tabs-container-margin: 0 3px;
  /* Slider */
  --va-tabs-slider-width: 0.125rem;
  --va-tabs-slider-height: 0.125rem;
  --va-tabs-slider-transition: transform ease 0.3s;
  /* Slider Wrapper */
  --va-tabs-slider-wrapper-bottom: 0;
  --va-tabs-slider-wrapper-margin: 0;
  --va-tabs-slider-wrapper-z-index: 4000;
  --va-tabs-slider-wrapper-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.va-tabs {
  display: var(--va-tabs-display);
  align-items: var(--va-tabs-align-items-horizontal);
  flex-direction: column;
  position: relative;
  font-family: var(--va-font-family);
}
.va-tabs__wrapper {
  overflow: hidden;
  contain: content;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.va-tabs .va-tabs__pagination {
  flex: 0 0 auto;
}
.va-tabs .va-tabs__container {
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  height: var(--va-tabs-container-height);
  margin: var(--va-tabs-container-margin);
  white-space: nowrap;
  position: relative;
}
.va-tabs .va-tabs__container .va-tabs__tabs {
  height: 100%;
}
.va-tabs .va-tabs__container .va-tabs__tabs-items {
  display: flex;
}
.va-tabs .va-tabs__container--right {
  justify-content: flex-end;
}
.va-tabs .va-tabs__container--grow .va-tabs__tabs {
  display: flex;
  min-width: 100%;
}
.va-tabs .va-tabs__container--grow .va-tabs__tabs-items {
  width: 100%;
}
.va-tabs .va-tabs__container--grow .va-tab {
  flex: 1 0 auto;
  max-width: none;
}
.va-tabs .va-tabs__container--center {
  justify-content: center;
}
.va-tabs .va-tabs__container--disabled {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.va-tabs--vertical {
  align-items: var(--va-tabs-align-items-vertical);
  flex-direction: row;
}
.va-tabs--vertical .va-tabs__wrapper {
  flex: 0 0 auto;
  width: unset;
}
.va-tabs--vertical .va-tabs__container {
  height: auto;
}
.va-tabs--vertical .va-tabs__container .va-tabs__tabs-items {
  flex-direction: column;
}
.va-tabs--vertical .va-tabs__container .va-tabs__tabs {
  position: relative;
}
.va-tabs--vertical .va-tab {
  display: flex;
}
.va-tabs--vertical .va-tab__content {
  flex: 0 0 auto;
}
.va-tabs--vertical .va-tabs__content {
  flex: 1 0 auto;
}
.va-tabs .va-tabs__slider-wrapper {
  bottom: var(--va-tabs-slider-wrapper-bottom);
  margin: var(--va-tabs-slider-wrapper-margin);
  position: absolute;
  z-index: var(--va-tabs-slider-wrapper-z-index);
}
.va-tabs .va-tabs__slider-wrapper .va-tabs__slider {
  width: var(--va-tabs-slider-width);
  height: var(--va-tabs-slider-height);
}
.va-tabs .va-button:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
  outline-offset: -2px;
}