@roadtrip/css/styles/components/_nav-bottom.css

CSS framework for Roadtrip Design System

/*
 * Navigation bottom
 *
 * Index
 * - Nav bottom
 * - Nav bottom item
 * - Nav bottom link
 * - Nav bottom icon
 *
 */

/* NAV BOTTOM
 -------------------- */

.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 5.125rem;
  padding-left: 0;
  margin: 0;
  background-color: var(--road-surface);
  border-top: 1px solid var(--road-outline-weak);
}

@media (max-width: 576px) {

  .nav-bottom {
    overflow-x: auto;
  }
}

@media (min-width: 1200px) {

  .nav-bottom {
    bottom: auto;
    flex-direction: column;
    width: 104px;
    height: 100%;
    border-top: 0;
    border-right: 1px solid var(--road-outline-weak);
  }
}

/* NAV BOTTOM ITEM
 -------------------- */

.nav-bottom-item {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1200px) {

  .nav-bottom-item {
    flex-grow: inherit;
    width: auto;
  }

}


/* NAV BOTTOM LINK
 -------------------- */

.nav-bottom-link {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: var(--road-label-small);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1200px) {

  .nav-bottom-link {
    display: block;
    padding: 0.5rem;
  }
}

/**
 * Active state
 */

.active .nav-bottom-link {
  color: var(--road-primary);
}

.nav-bottom-link.focus-visible,
.nav-bottom-link:hover {
  color: var(--road-on-button-tertiary);
}

.active .nav-bottom-link::after{
  position: absolute;
  bottom: -14px;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  color: var(--road-on-button-tertiary);
  content: "";
  background-color: var(--road-on-button-tertiary);
}

.nav-bottom-link.focus-visible::after,
.nav-bottom-link:hover::after {
  position: absolute;
  bottom: -12px;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  color: var(--road-on-button-tertiary);
  content: "";
  background-color: var(--road-on-button-tertiary);
}

@media (min-width: 1200px) {

  .active .nav-bottom-link::after,
  .nav-bottom-link.focus-visible::after,
  .nav-bottom-link:hover::after {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    width: 4px;
    height: 100%;
    content: "";
    background-color: var(--road-on-button-tertiary);
  }
}



/* NAV BOTTOM ICON
 -------------------- */

.nav-bottom-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-right: auto;
  margin-bottom: 0.25rem;
  margin-left: auto;
  fill: currentColor;
}

/**
 * Active state
 */

.active .nav-bottom-icon {
  fill: currentColor;
}


[tooltip]::after  {
  display: none;
}

@media (min-width: 1200px) {

  [tooltip]::after  {
    display: block;
  }
}