Skip to content
Snippets Groups Projects
Select Git revision
  • 2c9948e2d7ba66fba45f150ecace84eab696feed
  • master default protected
  • feat/new-image-formats
  • clickable-select-chevron
  • 2.20.0
  • 2.19.0
  • 2.18.0
  • 2.17.0
  • 2.16.1
  • 2.16.0
  • 2.15.0
  • 2.14.0
  • 2.13.0
  • 2.12.1
  • 2.11.0
  • 2.10.0
  • 2.9.1
  • 2.9.0
  • 2.8.0
  • 2.7.1
  • 2.7.0
  • 2.6.0
  • 2.5.2
  • 2.5.1
24 results

navbar.pcss

Blame
  • navbar.pcss 1.83 KiB
    .navbar {
      /* overflow-hidden compensates .navbar__section--expandable */
      @apply bg-grey-700 text-white overflow-hidden;
    }
    
    .navbar__content {
      @apply grid items-center;
    
      grid-template-areas: "brand menutoggle"
                           "main main"
                           "external external"
                           "actions actions";
      grid-template-columns: 2rem 1fr;
    }
    
    .navbar__brand {
      grid-area: brand;
    }
    
    .navbar__external {
      grid-area: external;
    }
    
    .navbar__main {
      grid-area: main;
    }
    
    .navbar__actions {
      grid-area: actions;
    }
    
    .navbar__menutoggle {
      grid-area: menutoggle;
    }
    
    .navbar__section--expandable {
      @apply bg-black px-4 py-2;
    
      margin: 0 -2rem;
    }
    
    .navbar-menu__item {
      @apply block;
    }
    
    .navbar-menu__link {
      @apply text-xl font-condensed uppercase leading-loose;
    
      @screen lg {
        @apply text-lg;
      }
    
      @screen xl {
        @apply text-xl;
      }
    }
    
    .navbar-menu__submenu .navbar-menu__link {
      @apply text-lg text-grey-200 font-condensed normal-case leading-normal pl-2;
    }
    
    .navbar-menu__link,
    .navbar-menu__link:hover {
      @apply no-underline;
    }
    
    .navbar-menu__submenu-toggle {
      @apply flex items-center;
    
      &:after {
        /* Compensate for font specifics, align to center. */
        margin-bottom: -0.125rem;
        @apply ml-auto font-light text-sm;
        content: "\f078";
        font-family: "Font Awesome 5 Pro";
      }
    }
    
    
    @screen lg {
      .navbar {
        @apply py-4;
      }
    
      .navbar__content {
        grid-template-areas: "brand external actions"
                           "brand main actions";
                           grid-template-columns: 8rem 1fr auto;
      }
    
      .navbar__section--expandable {
        @apply bg-transparent px-0 py-0 m-0;
      }
    
      .navbar-menu__item {
        @apply inline-block;
    
        &:not(:first-child) {
          @apply ml-3;
        }
      }
    
      .navbar-menu__link {
        @apply leading-normal
      }
    
      .navbar-menu__submenu-toggle:after {
        @apply ml-1;
      }
    }