jekyll-theme-pirati 2.0.0 → 3.0.0

data/_sass/components/top-bar.scss

@@ -1,236 +1,236 @@
-.c-search {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px $medium-gray solid;
-}
-
-  .c-search__input {
-    border: 0;
-    margin: 0;
-    box-shadow: none;
-
-    &:focus {
-      border: 0;
-      box-shadow: none;
-    }
-  }
-
-  .c-search__confirm {
-    padding: 0em 1em;
-    font-size: 1.1rem;
-  }
-
-.c-responsive-menu-toggle {
-  display: inline-block;
-  font-size: 1.15rem;
-  border: 1px solid $medium-gray;
-  transition: border .2s;
-}
-  .c-responsive-menu-toogle__button {
-    display: flex;
-    align-items: center;
-    padding: 0.7rem 1.25rem;
-  }
-
-  .c-responsive-menu-toggle__caption {
-    margin-right: .25rem;
-    text-transform: uppercase;
-  }
-
-.c-responsive-menu {
-  display: block;
-  padding: .5rem 0;
-
-  @include breakpoint(medium down) {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    background: $light-gray;
-
-    width: calc(100% + 2.5rem);
-    margin-left: -1.25rem;
-    margin-right: -1.25rem;
-  }
-
-  @include breakpoint(small down) {
-    width: calc(100% + 1.25rem);
-    margin-left: -0.625rem;
-    margin-right: -0.625rem;
-  }
-}
-
-  .c-responsive-menu__items {
-    list-style-type: none;
-    margin: 0;
-  }
-
-  .c-responsive-menu__item {
-    display: inline-block;
-
-    @include breakpoint(medium down) {
-      display: block;
-    }
-  }
-
-  .c-responsive-menu__item a {
-    display: block;
-    position: relative;
-    color: map-get($foundation-palette, dark);
-    text-transform: uppercase;
-    font-size: 1.15rem;
-    transition: color 0.2s;
-    padding: 0.7rem 1.25rem;
-
-    @include breakpoint(medium down) {
-      padding: 1rem 1.8rem;
-    }
-  }
-
-  // Highlight active item in the menu.
-  .c-responsive-menu__item--active a,
-  .c-responsive-menu__item a:hover, {
-    color: map-get($foundation-palette, warning);
-  }
-
-  // On mobile view, display a divider between items.
-  .c-responsive-menu__item:not(:first-child) a {
-    @include breakpoint(medium down) {
-      &:before {
-        content: '';
-        box-sizing: border-box;
-        width: calc(100% - 3.6rem);
-        height: 1px;
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        left: 1.8rem;
-        transform: none;
-        background: #d3d3d3;
-      }
-    }
-  }
-
-  // On desktop view, display 'underline' block under the menu link.
-  .c-responsive-menu__item a {
-    @include breakpoint(large) {
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 1rem;
-        right: 1rem;
-        height: 4px;
-        background: transparent;
-        transition: background 0.2s;
-      }
-    }
-  }
-
-  // Highlights underline block when item is active.
-  .c-responsive-menu__item a:hover:after,
-  .c-responsive-menu__item--active a:after {
-    background: map-get($foundation-palette, warning);
-  }
-
-  // Display '/' divider between menu items on desktop view.
-  .c-responsive-menu__item + .c-responsive-menu__item a {
-    @include breakpoint(large) {
-      &:before {
-        content: '/';
-        width: 12px;
-        display: inline-block;
-        position: absolute;
-        top: 0.25rem;
-        left: 0;
-        transform: translateX(-50%);
-        font-size: 1.7rem;
-        color: $medium-gray;
-        border: 0px solid transparent;
-        margin-top: 0;
-      }
-    }
-  }
-
-.c-top-bar {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  @include breakpoint(large) {
-    padding: .5rem;
-  }
-
-  @include breakpoint(medium down) {
-    padding: 1.5rem 1rem;
-  }
-}
-
-  // Brand goes first.
-  .c-top-bar__brand {
-    order: 1;
-    width: 130px; // a little bit bigger on large screens
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    margin-right: 1.5rem;
-
-    @include breakpoint(medium down) {
-      width: 115px;
-    }
-
-    @include breakpoint(small down) {
-      display: none;
-    }
-  }
-
-  // Responsive menu is second.
-  .c-top-bar .c-responsive-menu {
-    order: 2;
-  }
-
-  // Search is last.
-  .c-top-bar__search {
-    order: 3;
-
-    @include breakpoint(large) {
-      flex: 1; // search spreads to available space
-      max-width: 200px; // ... but max 200px
-      margin-left: auto;
-    }
-
-    @include breakpoint(medium down) {
-      flex: 1;
-      margin-right: 1.5rem;
-    }
-
-    .c-search {
-      @include breakpoint(large) {
-        margin: 1rem 0;
-      }
-
-      // On large screen, search confirm is at the very right of the container.
-      // @see: order: 3.
-      .c-search__confirm {
-        @include breakpoint(large) {
-          padding-right: 0;
-        }
-      }
-    }
-  }
-
-  .c-top-bar .c-responsive-menu-toggle {
-    order: 4;
-  }
-
-  // Divides top bar from the rest of the page.
-  .c-top-bar__divider {
-    display: block;
-    height: 5px;
-    margin-top: -3px;
-    background: $light-gray;
-    position: relative;
-    z-index: 9;
-  }
-
+.c-search {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px $medium-gray solid;
+}
+
+  .c-search__input {
+    border: 0;
+    margin: 0;
+    box-shadow: none;
+
+    &:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .c-search__confirm {
+    padding: 0em 1em;
+    font-size: 1.1rem;
+  }
+
+.c-responsive-menu-toggle {
+  display: inline-block;
+  font-size: 1.15rem;
+  border: 1px solid $medium-gray;
+  transition: border .2s;
+}
+  .c-responsive-menu-toogle__button {
+    display: flex;
+    align-items: center;
+    padding: 0.7rem 1.25rem;
+  }
+
+  .c-responsive-menu-toggle__caption {
+    margin-right: .25rem;
+    text-transform: uppercase;
+  }
+
+.c-responsive-menu {
+  display: block;
+  padding: .5rem 0;
+
+  @include breakpoint(medium down) {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background: $light-gray;
+
+    width: calc(100% + 2.5rem);
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+  }
+
+  @include breakpoint(small down) {
+    width: calc(100% + 1.25rem);
+    margin-left: -0.625rem;
+    margin-right: -0.625rem;
+  }
+}
+
+  .c-responsive-menu__items {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  .c-responsive-menu__item {
+    display: inline-block;
+
+    @include breakpoint(medium down) {
+      display: block;
+    }
+  }
+
+  .c-responsive-menu__item a {
+    display: block;
+    position: relative;
+    color: map-get($foundation-palette, dark);
+    text-transform: uppercase;
+    font-size: 1.15rem;
+    transition: color 0.2s;
+    padding: 0.7rem 1.25rem;
+
+    @include breakpoint(medium down) {
+      padding: 1rem 1.8rem;
+    }
+  }
+
+  // Highlight active item in the menu.
+  .c-responsive-menu__item--active a,
+  .c-responsive-menu__item a:hover, {
+    color: $primary-color;
+  }
+
+  // On mobile view, display a divider between items.
+  .c-responsive-menu__item:not(:first-child) a {
+    @include breakpoint(medium down) {
+      &:before {
+        content: '';
+        box-sizing: border-box;
+        width: calc(100% - 3.6rem);
+        height: 1px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 1.8rem;
+        transform: none;
+        background: #d3d3d3;
+      }
+    }
+  }
+
+  // On desktop view, display 'underline' block under the menu link.
+  .c-responsive-menu__item a {
+    @include breakpoint(large) {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 1rem;
+        right: 1rem;
+        height: 4px;
+        background: transparent;
+        transition: background 0.2s;
+      }
+    }
+  }
+
+  // Highlights underline block when item is active.
+  .c-responsive-menu__item a:hover:after,
+  .c-responsive-menu__item--active a:after {
+    background: $primary-color;
+  }
+
+  // Display '/' divider between menu items on desktop view.
+  .c-responsive-menu__item + .c-responsive-menu__item a {
+    @include breakpoint(large) {
+      &:before {
+        content: '/';
+        width: 12px;
+        display: inline-block;
+        position: absolute;
+        top: 0.25rem;
+        left: 0;
+        transform: translateX(-50%);
+        font-size: 1.7rem;
+        color: $medium-gray;
+        border: 0px solid transparent;
+        margin-top: 0;
+      }
+    }
+  }
+
+.c-top-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  @include breakpoint(large) {
+    padding: .5rem;
+  }
+
+  @include breakpoint(medium down) {
+    padding: 1.5rem 1rem;
+  }
+}
+
+  // Brand goes first.
+  .c-top-bar__brand {
+    order: 1;
+    width: 130px; // a little bit bigger on large screens
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    margin-right: 1.5rem;
+
+    @include breakpoint(medium down) {
+      width: 115px;
+    }
+
+    @include breakpoint(small down) {
+      display: none;
+    }
+  }
+
+  // Responsive menu is second.
+  .c-top-bar .c-responsive-menu {
+    order: 2;
+  }
+
+  // Search is last.
+  .c-top-bar__search {
+    order: 3;
+
+    @include breakpoint(large) {
+      flex: 1; // search spreads to available space
+      max-width: 200px; // ... but max 200px
+      margin-left: auto;
+    }
+
+    @include breakpoint(medium down) {
+      flex: 1;
+      margin-right: 1.5rem;
+    }
+
+    .c-search {
+      @include breakpoint(large) {
+        margin: 1rem 0;
+      }
+
+      // On large screen, search confirm is at the very right of the container.
+      // @see: order: 3.
+      .c-search__confirm {
+        @include breakpoint(large) {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  .c-top-bar .c-responsive-menu-toggle {
+    order: 4;
+  }
+
+  // Divides top bar from the rest of the page.
+  .c-top-bar__divider {
+    display: block;
+    height: 5px;
+    margin-top: -3px;
+    background: $primary-color;
+    position: relative;
+    z-index: 9;
+  }
+