@conduction/components/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

:root {
  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
  --conduction-secondary-top-nav-background-color: #ffffff;
  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);

  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
  --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);

  /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
  --conduction-secondary-top-nav-current-background-color: #ffffff;
  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;

  --conduction-secondary-top-nav-hover-color: #4376fc;
  --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
}

.secondary:hover {
  cursor: pointer;
}

.ul {
  margin: unset;
  display: flex;
  padding-inline-start: unset;
  align-items: center;
}

.li {
  list-style-type: none;
  display: block;
  padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
  padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
  padding-block-start: var(--conduction-secondary-top-nav-item-padding);
  padding-block-end: var(--conduction-secondary-top-nav-item-padding);
}

.li:hover {
  background-color: var(--conduction-secondary-top-nav-hover-background-color);
}

.current {
  background-color: var(--conduction-secondary-top-nav-current-background-color);
  box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
}

.currentLink {
  color: var(--conduction-primary-top-nav-current-color) !important;
}

.secondary {
  font-weight: var(--conduction-secondary-top-nav-font-weight);
  width: fit-content;
  font-size: var(--conduction-secondary-top-nav-font-size);
  background-color: var(--conduction-secondary-top-nav-background-color);
}

.secondary .li:hover .link {
  color: var(--conduction-secondary-top-nav-hover-color);
  display: block;
}
.secondary .link {
  color: var(--conduction-secondary-top-nav-color);
  display: block;
}

.label {
  overflow: hidden;
  max-width: 37ch;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label > :not(:last-child) {
  margin-inline-end: var(--conduction-secondary-top-nav-item-icon-margin);
}

.link > * {
  margin-inline-end: 8px;
}