@roadtrip/css/styles/components/_tab.css

CSS framework for Roadtrip Design System

/*
 * Tab
 *
 * Index
 * - Tab
 * - Tab item
 * - Tab link
 * - Tab icon
 * - Active state
 *
 */


.nav {
  display: flex;
  width: 100%;
  padding-left: 0;
  margin: 0;
  overflow-x: inherit;
  font-family: var(--road-font);
  line-height: 1.5;
  color: var(--road-on-surface-weak);
  list-style: none;
  background: var(--road-surface);
  fill: currentColor;
}

/* TAB
 -------------------- */

.nav-tabs {
  border-bottom: 1px solid var(--road-grey-70);
}

/* TAB ITEM
 -------------------- */

.nav-item {
  position: relative;
  box-sizing: border-box;
  min-height: 3.5rem;
}

.nav-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--road-input-outline);
  opacity: 1;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: none;
  transform-origin: center;
}

/**
 * Active state
 */

.nav-item.active::after {
  background: var(--road-primary);
  opacity: 1;
  transform: none;
}

/**
 * Active state secondary
 */

.secondary .nav-item.active::after {
  background: var(--road-secondary);
}

/* TAB LINK
 -------------------- */

.nav-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 1.125rem 1.5rem;
  font-size: var(--road-button-medium);
  font-weight: 700;
  color: var(--road-on-surface-weak);
  text-align: center;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--road-on-surface-weak);
  background: var(--road-surface-inverse);
}


.tab-layout-icon-top .nav-link{
  flex-direction: column;
}

/**
 * Focus state
 */

.nav-link.focus-visible {
  border: 1px solid var(--road-outline-variant);
}

/**
 * Disabled
 */

.tab-disabled .nav-link{
  color: var(--road-on-surface-disabled);
  cursor: not-allowed;
  background: var(--road-surface-disabled);
}



/**
 * Active state
 */

.active .nav-link {
  color: var(--road-on-surface);
}

/* TAB ICON
 -------------------- */

.nav-icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  fill: var(--road-on-surface-weak);
}

.tab-layout-icon-top .nav-icon {
  margin-right: 0;
}

/**
 * Active state
 */

.active .nav-icon {
  fill: var(--road-on-surface);
}