refills 0.0.1 → 0.0.2

data/source/stylesheets/refills/_modal.scss

@@ -1,71 +1,100 @@
-$modal-padding: 3em;
-$modal-close-color: $light-gray;
-$modal-image-height: 135px;
-$modal-image-width: $modal-image-height;
-
-.modal-open {
-  overflow: hidden;
-}
-
 .modal {
+  $modal-padding: 3em;
+  $modal-background: $base-body-color;
+  $modal-close-color: $light-gray;
+  $modal-image-height: 135px;
+  $modal-image-width: $modal-image-height;
+
   label {
     cursor: pointer;
+    margin-bottom: 0;
+  }
 
-    img {
-      $img-width: 300px;
-      border-radius: $img-width/2;
-      display: block;
-      margin-bottom: 2em;
-      max-width: $img-width;
-    }
+  label img {
+    $img-width: 300px;
+    border-radius: $img-width/2;
+    display: block;
+    max-width: $img-width;
   }
 
   input[type="checkbox"] {
     display: none;
   }
-}
 
-.modal-window {
-  @include transition(opacity .25s ease);
-  @include position(fixed, 0px 0px 0px 0px);
-  background: rgba(0,0,0, .85);
-  opacity: 0;
-  text-align: left;
-  visibility: hidden;
-  z-index: 999;
-
-  .modal-bg {
-    @include position(absolute, 0px 0px 0px 0px);
+  .btn {
+    @include button(simple, $base-body-color);
+    font-size: $base-font-size;
+    margin-bottom: $base-line-height;
+  }
+
+  .modal-open {
+    overflow: hidden;
+  }
+
+  .modal-window { // overlay
+    @include transition(opacity .25s ease);
+    @include position(fixed, 0px 0px 0px 0px);
+    background: rgba(0,0,0, .85);
+    opacity: 0;
+    text-align: left;
+    visibility: hidden;
+    z-index: 99999999999;
+
+    .modal-bg {
+      @include position(absolute, 0px 0px 0px 0px);
+      cursor: pointer;
+    }
+  }
+
+  .modal-close {
+    @include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
+    @include size(1.5em);
     cursor: pointer;
+    background: $modal-background;
+
+    &:after,
+    &:before {
+      @include position(absolute, 3px 3px 0 50%);
+      @include transform(rotate(45deg));
+      @include size(.15em 1.5em);
+      background: $modal-close-color;
+      content: '';
+      display: block;
+      margin: -3px 0 0 -1px;
+    }
+
+    &:hover:after,
+    &:hover:before {
+      background: darken($modal-close-color, 10);
+    }
+
+    &:before {
+      @include transform(rotate(-45deg));
+    }
   }
 
   .modal-inner {
     @include transition(opacity .25s ease);
-    @include position(absolute, -20% 0px 0px 0px);
-    border-radius: 3px;
-    background: white;
+    border-radius: $base-border-radius;
+    background: $modal-background;
     margin: auto;
-    max-height: 70%;
+    max-height: 95%;
+    position: relative;
     overflow: auto;
-    padding: $modal-padding;
     width: 95%;
+    padding: $modal-padding /2;
+    margin-top: .6em;
 
     @include media($medium-screen) {
-      width: 50%;
+      padding: $modal-padding;
+      width: 60%;
+      max-height: 60%;
+      margin-top: 10em;
     }
 
-    .img-wrapper-modal {
-      @include size($modal-image-width $modal-image-height);
-      background-color: $light-gray;
-      border-radius: 190px;
-      display: block;
-
-      img {
-        @include size($modal-image-width $modal-image-height);
-        content: '';
-        display: block;
-        padding: 30px;
-      }
+    @include media($large-screen) {
+      width: 50%;
+      margin-top: 10em;
     }
 
     h1 {
@@ -108,53 +137,14 @@ $modal-image-width: $modal-image-height;
     }
   }
 
-  .modal-close {
-    @include position(fixed, ($modal-padding /2) ($modal-padding /2) 0 0);
-    @include size(0.5em);
-    cursor: pointer;
-
-    &:after,
-    &:before {
-      @include position(absolute, 0px 0 0 -50%);
-      @include transform(rotate(45deg));
-      @include size(.15em 1.5em);
-      background: $modal-close-color;
-      content: '';
-      display: block;
-      margin: -3px 0 0 -1px;
-    }
-
-    &:hover:after,
-    &:hover:before {
-      background: darken($modal-close-color, 10);
-    }
-
-    &:before {
-      @include transform(rotate(-45deg));
-    }
+  .modal-state:checked + .modal-window {
+    opacity: 1;
+    visibility: visible;
   }
-}
 
-.modal-state:checked + .modal-window {
-  opacity: 1;
-  visibility: visible;
-}
-
-.modal-state:checked + .modal-window .modal-inner {
-  top: 0;
-}
-
-
-.btn {
-  @include button(simple, $base-accent-color);
-  font-size: $base-font-size;
-}
-
-p img {
-  float: left;
-  height: auto;
-  margin: 0 1em 1em 0;
-  max-width: 200px;
+  .modal-state:checked + .modal-window .modal-inner {
+    top: 0;
+  }
 }
 
 // Based on code by Kasper Mikiewicz

data/source/stylesheets/refills/_navigation.scss

@@ -1,167 +1,258 @@
 header.navigation {
+  $navigation-padding: 1em;
   $navigation-background: $dark-gray;
-  $navigation-color: white;
+  $navigation-color: transparentize(white, 0.3);
+  $navigation-color-hover: white;
   $navigation-height: 60px;
-  $navigation-nav-button-background: $navigation-background;
+  $navigation-nav-button-background: $base-accent-color;
   $navigation-nav-button-background-hover: lighten($navigation-background, 10);
   $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
+  $navigation-search-background: lighten($navigation-background, 5);
+  $navigation-search-border: 1px solid darken($navigation-background, 5);
+  $navigation-active-link-color: transparentize(white, 0.5);
+  $navigation-submenu-padding: 1em;
+  $horizontal-bar-mode: $large-screen;
 
-  width: 100%;
-  margin: 0;
-  height: $navigation-height;
   background-color: $navigation-background;
+  border-bottom: 1px solid darken($navigation-background, 10);
   font-family: $sans-serif;
-  border-bottom: 1px solid $dark-gray;
+  height: $navigation-height;
+  width: 100%;
   z-index: 999;
 
   .menu-wrapper {
     @include outer-container;
-    padding-left: 1em;
-    padding-right: 1em;
+    @include clearfix;
+    position: relative;
+    z-index: 9999;
   }
 
   .logo {
-    line-height: $navigation-height;
-    padding-right: 1.35em;
-    padding-left: 1em;
-    font-weight: bold;
     float: left;    
-    color: white;
-    @include media($medium-screen) {
-      padding-left: 0;
+    max-height: $navigation-height;
+    padding-left: $navigation-padding;
+    padding-right: 2em;
+
+    img {
+      max-height: $navigation-height;
+      padding: .8em 0;
     }
   }
 
-  p {
-    font-family: $sans-serif;
-    font-weight: 700;
-    text-transform: uppercase;
+  .navigation-menu-button {
+    color: $navigation-color;
     cursor: pointer;
-    padding-right: 1em;
     display: block;
     float: right;
-    margin: 0;
+    font-family: $sans-serif;
+    font-weight: 700;
     line-height: $navigation-height;
-    color: $navigation-color;
+    margin: 0;
+    padding-right: 1em;
+    text-transform: uppercase;
+
+    @include media ($horizontal-bar-mode) {
+      display: none;
+    }
+
+    &:hover {
+      color: $navigation-color-hover;
+    }
   }
 
   .nav {
-    ul {
-      display: none;
-      -webkit-transform-style: preserve-3d; // stop webkit flicker
-      overflow: hidden;
-      margin: 0 auto;
+    z-index: 9999999;
+    float: none;
+    @include media ($horizontal-bar-mode) {
+      float: left;
+    }
+  }
+
+  ul#navigation-menu {    
+    clear: both;
+    -webkit-transform-style: preserve-3d; // stop webkit flicker
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+    z-index: 9999;
+
+    @include media ($horizontal-bar-mode) {
+      display: inline;
+      margin: 0;
       padding: 0;
-      width: 100%;
+    }
+  }
 
-      li {
-        position: relative;
-        overflow: hidden;
-        display: block;
-        width: 100%;
-        text-align: right;
-        padding-right: 1em;
-        line-height: $navigation-height;
-        width: 100%;
-        position: relative;
-        display: block;
-        z-index: 99999999;
-        overflow: hidden;
-        background-color: $navigation-background;
-
-        a {
-          text-transform: uppercase;
-          font-weight: bold;
-          color: white;
-        }
+  ul li {
+    background: $navigation-background;
+    display: block;
+    line-height: $navigation-height;
+    overflow: hidden;
+    padding-right: .8em;
+    text-align: right;
+    width: 100%;
+    z-index: 9999;
+
+    @include media ($horizontal-bar-mode) {
+      background: transparent;
+      display: inline;
+      line-height: $navigation-height;
+      padding-right: 2em;
+      text-decoration: none;
+      width: auto;
+    }
+
+    a {
+      font-weight: 400;
+      color: $navigation-color;
+
+      &:hover {
+        color: $navigation-color-hover;
       }
     }
   }
 
-  ul.nav-button {
+  .active-nav-item a {
+    padding-bottom: 3px;
+    border-bottom: 1px solid $navigation-active-link-color;
+  }
+
+  li.more {
+    padding-right: 0;
+
+    &:hover .submenu {
+      display: block;
+    }
+
+    @include media($horizontal-bar-mode) {
+      position: relative;
+      padding-right: .8em;
+    }
+  }
+
+  li.more a {
+    padding-right: .8em;
+  }
+
+  .submenu {
     display: none;
-    float: right;
-    background-color: $navigation-background;
-    padding: 0 1em 0 1em;
-    width: 100%;
-    list-style: none;
+
+    @include media($horizontal-bar-mode) {
+      position: absolute;
+      top: 1em;
+      left: -$navigation-submenu-padding;
+    }
 
     li {
-      float: right;
+      display: block;
+      padding-right: 0;
+
+      @include media($horizontal-bar-mode) {
+        line-height: $navigation-height /1.3;
+
+        &:first-child a {
+          padding-top: 1em;
+        }
+        &:last-child a {
+          border-bottom-left-radius: $base-border-radius;
+          border-bottom-right-radius: $base-border-radius;
+          padding-bottom: .7em;
+        }
+      }
+
       a {
-        display: inline;
-        line-height: $navigation-height;
-        font-family: $sans-serif;
-        font-weight: 700;
-        text-transform: uppercase;
-        color: white;
-        padding: 1em 1.5em;
-        background-color: $navigation-nav-button-background;
-        border: $navigation-nav-button-border;
-        border-radius: $base-border-radius;
-        font-size: $base-font-size *.8;
-
-        @include transition(ease-in-out, .2s);
-
-        &:hover {
-          background-color: $navigation-nav-button-background-hover;
+        text-align: right;
+        background-color: darken($navigation-background, 3);
+        width: 100%;
+        display: inline-block;
+
+        @include media($horizontal-bar-mode) {
+          width: 12em;
+          background-color: $navigation-background;
+          text-align: left;
+          padding-left: $navigation-submenu-padding;
         }
       }
     }
-    
-    li:first-child:before {
-      content: '';
+  }
+
+  .navigation-tools {
+    @include clearfix;
+    display: block;
+    padding-right: $navigation-padding;
+    padding-left: $navigation-padding;
+    clear: both;
+    background: #505050;
+
+    @include media($large-screen) {
+      background: transparent;
+      float: right;
+      clear: none;
     }
   }
 
-  @include media ($medium-screen) {
-    p {
-      display: none;
+  a.sign-up {
+    margin-top: 13px;
+    float: right;
+    @include transition (all 0.2s ease-in-out);
+    display: inline;
+    background: $navigation-nav-button-background;
+    border-radius: $base-border-radius; 
+    color: white;
+    font-size: .8em;  
+    font-weight: 800;
+    padding: .4em 1em;
+    text-transform: uppercase;
+
+    &:hover {
+      background: lighten($navigation-nav-button-background, 10);
     }
-    .nav {
-      float: left;
+  }
+
+  .search-bar {
+    $search-bar-border-color: $base-border-color;
+    $search-bar-border: 1px solid $search-bar-border-color;
+    $search-bar-background: lighten($search-bar-border-color, 10);
+
+    padding: 13px 5px; 
+    float: left;
+    .search-and-submit {
+      position: relative;
 
-      ul {
-        float: left;
-        display: inline;
+      input[type=search] {
+        background: $navigation-search-background;
+        border: $navigation-search-border;
+        padding: .6em .8em;
+        font-size: .9em;
+        font-style: italic;
+        color: $navigation-color;
+        border-radius: $base-border-radius * 2;
         margin: 0;
-        padding: 0;
-
-        li {
-          display: inline;
-          text-decoration: none;
-          line-height: $navigation-height;
-          padding-right: 2em;
-
-          a {
-            color: $navigation-color;
-            letter-spacing: 1px;
-            &:hover {
-              color: lighten($navigation-color, 15);
-            }
-          }
-        }
       }
-    }
 
-    ul.nav-button {
-      float: right;
-      display: inline;
-      width: auto;
-      background-color: transparent;
-      
-      li {
-        display: inline;
-
-        &:before {
-          content: "•";
-          color: $navigation-color;
-          margin-right: .3em;
+      button[type=submit] {
+        @include button(simple, lighten($navigation-search-background, 10));
+        @include position(absolute, 0.3em 0.3em 0.3em 0);
+        outline: none;
+        padding: 5px 15px;
+
+        img {
+          height: 12px;
+          opacity: .7;
         }
       }
+    }
+
+    @include media($horizontal-bar-mode) {
+      width: 16em;
+      position: relative; 
+      display: inline-block;
 
-      li:first-child:before {
-        content: '';
+      input {
+        @include box-sizing(border-box);
+        display: block;
       }
     }
   }