@govbr-ds/core/dist/components/menu/menu.css

Padrão Digital de Governo

.br-menu {
  --menu-zindex: var(--z-index-layer-3);
  --menu-background-submenu: var(--gray-2);
  --menu-logo: 40px;
  --menu-item-ng: var(--menu-item-medium);
  --menu-item-padding: var(--menu-item-medium);
  --menu-item-small: var(--spacing-scale-base);
  --menu-item-medium: var(--spacing-scale-2x);
  --menu-item-large: var(--spacing-scale-3x);
}
.br-menu .menu-container {
  display: none;
}
.br-menu .menu-scrim {
  background: var(--surface-overlay-scrim);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.br-menu .menu-panel {
  --focus-offset: calc(var(--spacing-scale-half) * -1);
  background: var(--background);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.br-menu.active .menu-container {
  bottom: 0;
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--menu-zindex);
}
.br-menu.active .menu-panel {
  flex: 1;
  overflow: auto;
  position: relative;
  z-index: calc(var(--menu-zindex) + 1);
}
.br-menu.active .menu-scrim {
  position: absolute;
}
.br-menu .menu-header {
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  padding: var(--spacing-scale-base) var(--spacing-scale-base);
}
.br-menu .menu-header .menu-title {
  align-items: center;
  display: flex;
  flex: 1;
  margin-left: var(--spacing-scale-base);
}
.br-menu .menu-header .menu-title img {
  max-height: var(--menu-logo);
}
.br-menu .menu-header .menu-title img + * {
  margin-left: var(--spacing-scale-base);
}
.br-menu .menu-body ul,
.br-menu .menu-body li {
  margin: 0;
  padding: 0;
}
.br-menu .menu-body ul {
  list-style: none;
}
.br-menu .menu-body > .divider {
  border-bottom: 1px solid var(--border-color);
}
.br-menu .menu-body .menu-folder > ul > li:last-child > .menu-item {
  border-bottom: 1px solid var(--border-color);
}
.br-menu .menu-body .menu-folder > .menu-item + ul {
  background: var(--menu-background-submenu);
}
.br-menu .menu-body .menu-folder > .menu-item + ul .menu-item {
  padding-left: var(--spacing-scale-5x);
}
.br-menu .menu-body .drop-menu > .menu-item {
  border-bottom: 1px solid var(--border-color);
}
.br-menu .menu-body .drop-menu.active > .menu-item {
  border-bottom: 0;
}
.br-menu .menu-body .drop-menu > ul {
  background: var(--menu-background-submenu);
  display: none;
}
.br-menu .menu-body .drop-menu.active > .menu-item:not(:hover) {
  background-color: var(--background);
}
.br-menu .menu-body .drop-menu.active > .menu-item .support .svg-inline--fa,
.br-menu .menu-body .drop-menu.active > .menu-item .support .fa,
.br-menu .menu-body .drop-menu.active > .menu-item .support .fab,
.br-menu .menu-body .drop-menu.active > .menu-item .support .fad,
.br-menu .menu-body .drop-menu.active > .menu-item .support .fal,
.br-menu .menu-body .drop-menu.active > .menu-item .support .far,
.br-menu .menu-body .drop-menu.active > .menu-item .support .fas {
  transform: rotate(180deg);
}
.br-menu .menu-body .drop-menu.active > ul {
  display: block;
}
.br-menu .menu-footer > *:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.br-menu .menu-footer .menu-logos {
  column-gap: var(--spacing-scale-2x);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: var(--spacing-scale-base) var(--spacing-scale-5x);
  row-gap: var(--spacing-scale-2x);
}
.br-menu .menu-footer .menu-links {
  --focus-offset: var(--spacing-scale-half);
  padding: var(--spacing-scale-2x) var(--spacing-scale-5x);
}
.br-menu .menu-footer .menu-links a {
  display: block;
}
.br-menu .menu-footer .menu-links a:not(:last-child) {
  margin-bottom: var(--spacing-scale-2x);
}
.br-menu .menu-footer .menu-links a:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-menu .menu-footer .social-network,
.br-menu .menu-footer .menu-social {
  padding: var(--spacing-scale-base) var(--spacing-scale-5x);
}
.br-menu .menu-footer .social-network .social-network-title,
.br-menu .menu-footer .menu-social .social-network-title {
  font-weight: var(--font-weight-semi-bold);
  margin-bottom: var(--spacing-scale-half);
}
.br-menu .menu-footer .social-network .sharegroup,
.br-menu .menu-footer .menu-social .sharegroup {
  display: flex;
}
.br-menu .menu-footer .menu-info {
  padding: var(--spacing-scale-2x);
}
.br-menu .menu-item {
  --focus-offset: calc(var(--spacing-scale-half) * -1);
  background: transparent;
  display: flex;
  padding: var(--menu-item-padding) var(--spacing-scale-2x);
}
.br-menu .menu-item .icon {
  margin-right: var(--spacing-scale-2x);
}
.br-menu .menu-item .content {
  flex: 1;
}
.br-menu a.menu-item {
  color: var(--interactive);
}
.br-menu .side-menu > ul {
  background: var(--menu-background-submenu);
  display: none;
}
.br-menu .side-menu.active > .menu-item {
  --interactive: var(--active);
  --interactive-rgb: var(--active-rgb);
  background-color: var(--background);
  flex-direction: row-reverse;
  font-weight: var(--font-weight-semi-bold);
}
.br-menu .side-menu.active > .menu-item .icon {
  margin-right: 0;
}
.br-menu .side-menu.active > .menu-item .support {
  margin-right: var(--spacing-scale-2x);
}
.br-menu .side-menu.active > .menu-item .support .svg-inline--fa,
.br-menu .side-menu.active > .menu-item .support .fa,
.br-menu .side-menu.active > .menu-item .support .fab,
.br-menu .side-menu.active > .menu-item .support .fad,
.br-menu .side-menu.active > .menu-item .support .fal,
.br-menu .side-menu.active > .menu-item .support .far,
.br-menu .side-menu.active > .menu-item .support .fas {
  transform: rotate(180deg);
}
.br-menu .side-menu.active > ul {
  display: block;
}
.br-menu .side-menu.active .menu-item {
  padding-left: var(--spacing-scale-2x) !important;
}
.br-menu.small .menu-item {
  --menu-item-padding: var(--menu-item-small);
}
.br-menu.medium .menu-item {
  --menu-item-padding: var(--menu-item-medium);
}
.br-menu.large .menu-item {
  --menu-item-padding: var(--menu-item-large);
}
.br-menu.push .menu-trigger,
.br-menu.push .menu-scrim {
  display: none;
}
@media (min-width: 576px) {
  .br-menu.push {
    --menu-zindex: var(--z-index-layer-0);
  }
}
@media (min-width: 576px) {
  .br-menu.push .menu-header,
  .br-menu.push .menu-footer {
    display: none;
  }
  .br-menu.push .menu-header[data-visible=true] {
    display: flex;
  }
  .br-menu.push .menu-footer[data-visible=true] {
    display: block;
  }
  .br-menu.push .menu-panel {
    height: auto;
  }
  .br-menu.push .menu-scrim {
    display: none;
  }
  .br-menu.push.active .menu-container {
    position: static;
  }
}
.br-menu.contextual {
  --menu-zindex: calc(var(--z-index-layer-3) - 10);
  overflow: auto;
}
.br-menu.contextual .menu-body .menu-folder > .menu-item + ul .menu-item {
  padding-left: var(--spacing-scale-2x);
}
.br-menu.contextual .menu-body .menu-folder > ul > li:last-child > .menu-item {
  border-bottom: 0;
}
.br-menu.contextual .menu-trigger {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  z-index: calc(var(--menu-zindex) - 1);
}
.br-menu.contextual .menu-trigger .br-button {
  --button-radius: 0;
}
.br-menu.contextual .menu-container {
  display: none;
  flex-direction: column-reverse;
  position: static;
}
.br-menu.contextual .menu-panel {
  height: auto;
}
.br-menu.contextual.active {
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-end;
  left: 0;
  position: fixed;
  right: 0;
  z-index: var(--menu-zindex);
}
.br-menu.contextual.active .menu-trigger {
  position: relative;
  z-index: calc(var(--menu-zindex) + 1);
}
.br-menu.contextual.active .menu-trigger .svg-inline--fa,
.br-menu.contextual.active .menu-trigger .fa,
.br-menu.contextual.active .menu-trigger .fab,
.br-menu.contextual.active .menu-trigger .fad,
.br-menu.contextual.active .menu-trigger .fal,
.br-menu.contextual.active .menu-trigger .far,
.br-menu.contextual.active .menu-trigger .fas {
  transform: rotate(180deg);
}
.br-menu.contextual.active .menu-container {
  display: flex;
  overflow: auto;
}
@media (min-width: 992px) {
  .br-menu.contextual .menu-trigger {
    display: none;
    position: absolute;
  }
  .br-menu.contextual .menu-container {
    display: block;
  }
  .br-menu.contextual.active {
    height: 100%;
    position: absolute;
  }
}
.br-menu .menu-item[hidden] {
  display: none;
}
.br-menu .menu-item:disabled {
  cursor: not-allowed;
  opacity: var(--disabled);
}
.br-menu .menu-item:disabled * {
  pointer-events: none;
}
.br-menu a.menu-item:not(:disabled).active {
  --interactive: var(--color-dark);
  --interactive-rgb: var(--color-dark-rgb);
  background-color: var(--active);
}
.br-menu a.menu-item:not(:disabled).active:focus {
  outline-color: var(--focus-color-dark);
}
.br-menu a.menu-item:not(:disabled):not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}

/*# sourceMappingURL=menu.css.map*/