storybookdesignpack/css/src/components/verticalNav.css

React components library project for censa Design System

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

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

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

.VerticalNav-section--border {
  /* border-top: var(--spacing-xs) solid var(--secondary-light); */
  color:var(--placeholder);
  font-size: var(--font-size);
}

.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: 220px;
}

.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: 30px;
  width: 30px;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center;
  border-radius: 8px;
  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;
  border-radius: 8px;
  font-weight: 600;

}
.MenuItem:hover .Icon{
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20 !important;
}

.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);
  border-radius: 8px;
}

.MenuItem--active:hover {
  background: var(--primary-lighter);
  border-radius: 8px;
}

.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);
}
.censa-img {
  width: 76px;
}
.cursor-pointer{
  font-size: 25px !important;
  width:25px !important;
}
.Icon.mr-5{
  font-size: var(--font-size-I);
  font-variation-settings: normal !important;
}
.Collapsible-body{
  background-color: var(--white);
}
.Collapsible-footer{
   display: none;
}
.VerticalNav-section .Text--subtle{
  font-weight: 500;
}
 /* .MenuItem--expanded.color-inverse ~ .MenuItem--active {
background-color:var(--stone-lighter);
} */