storybookdesignpack/css/src/components/horizontalNav.css

React components library project for censa Design System

.HorizontalNav {
  display: flex;
}

.HorizontalNav-menu {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: var(--spacing-3);
  padding-right: var(--spacing-l);
  padding-left: var(--spacing-l);
  border-radius: var(--spacing-2);
  margin: 0 var(--spacing-xs);
}

.HorizontalNav-menu--disabled {
  pointer-events: none;
}

.HorizontalNav-menu--disabled:focus-visible,
.HorizontalNav-menu--disabled:focus {
  outline: none;
}

.HorizontalNav-menu--default:focus-visible,
.HorizontalNav-menu--default:focus {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.HorizontalNav-menu--default:hover {
  background-color: var(--secondary);
}

.HorizontalNav-menu--default:active {
  background-color: var(--secondary-dark);
}

.HorizontalNav-menu--active {
  background-color: var(--primary-lightest);
}

.HorizontalNav-menu--active:focus-visible,
.HorizontalNav-menu--active:focus {
  background-color: var(--primary-lightest);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  outline: none;
}

.HorizontalNav-menu--active:hover {
  background-color: var(--primary-lighter);
}

.HorizontalNav-menu--active:active {
  background-color: var(--primary-lighter);
  color: var(--primary-darker);
}

.HorizontalNav-menu--active:active .HorizontalNav-menuText {
  color: var(--primary-darker);
}

.HorizontalNav-menuText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.HorizontalNav-menu--active,
.HorizontalNav-animate {
  transition-delay: var(--duration--fast-02);
}

.HorizontalNav-animate {
  transition: var(--duration--fast-02) var(--standard-productive-curve);
}

.HorizontalNav-pills {
  margin-right: var(--spacing-m);
}

.HorizontalNav-pills--disabled {
  opacity: 0.6;
}