demo_foundation_settings.scss

demo_foundation_settings.scss

/// SNIPPETS FROM SETTINGS THAT AFFECT THE TOPBAR

// 7. Accordion
// ------------

$accordion-background: $white;
$accordion-plusminus: true;
$accordion-item-color: foreground($accordion-background, $primary-color);
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid transparent;
$accordion-content-color: foreground($accordion-background, $primary-color);
$accordion-content-padding: 1rem;

// 16. Dropdown
// ------------

$dropdown-padding: 1rem;
$dropdown-border: 1px solid transparent;
$dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
  tiny: 100px,
  small: 200px,
  large: 400px,
);

// 17. Dropdown Menu
// -----------------

$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $white;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $teal;
$dropdownmenu-border: 1px solid transparent;

// 36. Top Bar
// -----------

$topbar-padding: 0;
$topbar-background: transparent;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 1rem;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: large;

/// CUSTOM PARTIAL WITH TOPBAR SETTINGS. 
/// _top-bar-custom.scss

// STANDARD NAV

.top-bar{
  // PLACEHOLDER
  // border: 1px solid red;
}

.top-bar-title{
  // PLACEHOLDER
  // border: 1px solid green;
  
  float: none;
  margin-right: 0;

  @include breakpoint(large){
    float: left;
  }
}

.mobile-menu-button{
  // PLACEHOLDER
  // border: 1px solid orange;

  height: 30px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;

  // SETTING - POSITION OF MENU ICON
  padding-top: 0.5rem;
  padding-bottom: 2.2rem;
  padding-right: 1rem;
  padding-left: 1rem;

  .menu-icon:hover{
    &:after{
      // SETTING - COLOR OF ICON ACTIVE/HOVER STATE
      background: lighten($teal, 30%);
      box-shadow: 0 7px 0 lighten($teal, 30%), 0 14px 0 lighten($teal, 30%);
    }
  }
}

#desktop-menu{
}

#responsive-menu{
}

.top-bar-right{
}

.top-bar-right > .menu{
  @include breakpoint(large){
    // SETTING - MENU DISTANCE FROM TOP
    margin-top: 1rem;
  }
}

.top-bar-right > .menu > li{
  display: block;

  + li{
    // SETTING - COLOR OF MOBILE MENU DIVIDERS
    border-top: 1px solid darken($teal, 10%);
    
    @include breakpoint(large){
      border-top: 0;
    }
  }

  @include breakpoint(large){
    display: table-cell;
  }

  a{
    color: white;

    @include breakpoint(large){
      &:hover{
        // SETTING - COLOR OF LINK HOVERS
        color: lighten($teal, 30%);
      }
    }
  }

  &.is-dropdown-submenu-parent > a{
    @include breakpoint(large){
      padding-right: 2rem;
    }
  }

  &.is-dropdown-submenu-parent > a::after{
    @include breakpoint(large){
      margin-top: -1px;
      right: 1rem;
    }
  }

  // LARGE DROPDOWN MENU
  ul.menu{
    @include breakpoint(large){
      // SETTING - COLOR OF DROPDOWN MENU BACKGROUND
      background-color: $teal;
    }

    li a{

      @include breakpoint(large){
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
    }
  }
}