censademopackage/css/src/components/verticalNav.css

React components library project for Innovaccer Design System

.VerticalNav {
  display: inline-flex;
  flex-direction: column;
}

.VerticalNav--expanded {
  width: 240px;
}

.VerticalNav-section {
  text-transform: uppercase;
  padding-left: var(--spacing-2);
  padding-top: var(--spacing-l);
  padding-bottom: 6px;
  margin-top: var(--spacing);
}

.VerticalNav-section--border {
  border-top: var(--spacing-xs) solid var(--secondary-light);
}

.MenuItem {
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: var(--duration--fast-01) var(--standard-productive-curve);
  width: 232px;
}

.MenuItem--horizontal {
  height: var(--spacing-3);
  padding-right: var(--spacing-l);
  padding-left: var(--spacing-l);
  border-radius: var(--spacing-2);
  margin: 0 var(--spacing-xs);
}

.MenuItem--vertical {
  margin-top: var(--spacing-m);
  margin-bottom: var(--spacing-m);
}

.MenuItem--collapsed {
  height: 28px;
  width: 28px;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.MenuItem--expanded {
  padding-left: var(--spacing-2);
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
  margin-right: var(--spacing);
  justify-content: space-between;
  border-radius: 0px var(--spacing-2) var(--spacing-2) 0px;
}

.MenuItem--disabled {
  pointer-events: none;
}

.MenuItem:hover {
  background: var(--secondary);
  text-decoration: none;
}

.MenuItem:active {
  background: var(--secondary-dark);
}

.MenuItem:focus {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.MenuItem--disabled:focus {
  box-shadow: none;
}

.MenuItem--active {
  background: var(--primary-lightest);
}

.MenuItem--active:hover {
  background: var(--primary-lighter);
}

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

.MenuItem--active:active .MenuItem-Text {
  color: var(--primary-darker);
}

.MenuItem--active:focus {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  outline: none;
}

.MenuItem--rounded {
  border-radius: var(--spacing-2);
}

.MenuItem--subMenu {
  padding-left: 40px;
}

.MenuItem .Text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.MenuItem-count {
  margin-right: var(--spacing-m);
}

.MenuItem-count--disabled {
  opacity: 0.6;
  color: var(--text);
}