refills 0.0.2 → 0.1.0

data/source/stylesheets/refills/_maps.scss

@@ -0,0 +1,24 @@
+#map_canvas {
+  height: 400px;
+  width: 100%;
+}
+
+#map_canvas img { 
+  max-width: none; // to prevent UI control bug
+}
+
+#map_canvas .content {
+  padding: 0 0.5em 1em 0.5em;
+}
+
+#map_canvas .firstHeading {
+  font-size: 1em;
+  line-height: 1em;
+  font-weight: bold;
+  margin: 0;
+}
+
+#map_canvas #bodyContent p {
+  font-size: 1em;
+  margin: 0;
+}

data/source/stylesheets/refills/_modal.scss

@@ -1,9 +1,33 @@
 .modal {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $base-font-size: 1em !default;
+  $base-line-height: 1.5em !default;
+  $base-accent-color: #477DCA !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $medium-screen: em(640) !default;
+  $large-screen: em(860) !default;
+  $base-font-color: $dark-gray !default;
+
+  h1 {
+    margin: 0;
+  }
+
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
   $modal-padding: 3em;
-  $modal-background: $base-body-color;
+  $modal-background: $base-background-color;
   $modal-close-color: $light-gray;
   $modal-image-height: 135px;
   $modal-image-width: $modal-image-height;
+  $modal-trigger-image-width: 300px;
 
   label {
     cursor: pointer;
@@ -11,35 +35,34 @@
   }
 
   label img {
-    $img-width: 300px;
-    border-radius: $img-width/2;
+    border-radius: $modal-trigger-image-width / 2;
     display: block;
-    max-width: $img-width;
+    max-width: $modal-trigger-image-width;
   }
 
-  input[type="checkbox"] {
+  .modal-state {
     display: none;
   }
 
-  .btn {
-    @include button(simple, $base-body-color);
-    font-size: $base-font-size;
-    margin-bottom: $base-line-height;
-  }
-
-  .modal-open {
-    overflow: hidden;
+  .modal-trigger {
+    @include button(flat, $base-accent-color);
+    padding: 0.8em 1em;
   }
 
   .modal-window { // overlay
-    @include transition(opacity .25s ease);
+    @include transition(opacity 0.25s ease);
     @include position(fixed, 0px 0px 0px 0px);
-    background: rgba(0,0,0, .85);
+    background: rgba(0,0,0, 0.85);
     opacity: 0;
+    padding-top: 0.6em;
     text-align: left;
     visibility: hidden;
     z-index: 99999999999;
 
+    @include media($large-screen) {
+      padding-top: 10em;
+    }
+
     .modal-bg {
       @include position(absolute, 0px 0px 0px 0px);
       cursor: pointer;
@@ -47,16 +70,16 @@
   }
 
   .modal-close {
-    @include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
+    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
     @include size(1.5em);
-    cursor: pointer;
     background: $modal-background;
+    cursor: pointer;
 
     &:after,
     &:before {
       @include position(absolute, 3px 3px 0 50%);
       @include transform(rotate(45deg));
-      @include size(.15em 1.5em);
+      @include size(0.15em 1.5em);
       background: $modal-close-color;
       content: '';
       display: block;
@@ -65,7 +88,7 @@
 
     &:hover:after,
     &:hover:before {
-      background: darken($modal-close-color, 10);
+      background: darken($modal-close-color, 10%);
     }
 
     &:before {
@@ -74,61 +97,50 @@
   }
 
   .modal-inner {
-    @include transition(opacity .25s ease);
-    border-radius: $base-border-radius;
+    @include transition(opacity 0.25s ease);
     background: $modal-background;
+    border-radius: $base-border-radius;
+    margin-top: 0;
     margin: auto;
     max-height: 95%;
-    position: relative;
     overflow: auto;
+    padding: $modal-padding / 2;
+    position: relative;
     width: 95%;
-    padding: $modal-padding /2;
-    margin-top: .6em;
 
     @include media($medium-screen) {
+      max-height: 70%;
       padding: $modal-padding;
       width: 60%;
-      max-height: 60%;
-      margin-top: 10em;
     }
 
     @include media($large-screen) {
       width: 50%;
-      margin-top: 10em;
     }
 
     h1 {
       color: $base-font-color;
-      margin-bottom: .6em;
+      margin-bottom: 0.6em;
       text-align: left;
       text-transform: capitalize;
     }
 
-    p {
-      font-size: $base-font-size;
-      max-width: 100% !important;
-      padding: 0;
-      text-align: left;
-
-      &.intro {
-        color: $blue;
-        line-height: 1.6em;
-      }
+    .modal-intro {
+      font-weight: 800;
+    }
 
-      &.body { 
-        color: $base-font-color;
-        line-height: 1.45em;
+    .modal-content {
+      color: $base-font-color;
 
-        @include media($medium-screen) {
-          @include columns(2 8em);
-        }
+      @include media($medium-screen) {
+        @include columns(2 8em);
       }
     }
 
     a.cta {
       color: white;
       display: inline-block;
-      margin-right: .5em;
+      margin-right: 0.5em;
       margin-top: 1em;
 
       &:last-child {
@@ -143,8 +155,16 @@
   }
 
   .modal-state:checked + .modal-window .modal-inner {
-    top: 0;
+    top: 0.5em;
   }
 }
 
+.modal-open {
+  overflow: hidden;
+}
+
+.modal-closed {
+  overflow: auto;
+}
+
 // Based on code by Kasper Mikiewicz

data/source/stylesheets/refills/_navigation.scss

@@ -1,50 +1,62 @@
 header.navigation {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-accent-color: #477DCA !default;
+  $dark-gray: #333 !default;
+  $large-screen: em(860) !default;
+  
+  a {
+    text-decoration: none;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
   $navigation-padding: 1em;
   $navigation-background: $dark-gray;
   $navigation-color: transparentize(white, 0.3);
   $navigation-color-hover: white;
   $navigation-height: 60px;
   $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-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;
+  $navigation-submenu-width: 12em;
   $horizontal-bar-mode: $large-screen;
 
   background-color: $navigation-background;
   border-bottom: 1px solid darken($navigation-background, 10);
-  font-family: $sans-serif;
-  height: $navigation-height;
+  min-height: $navigation-height;
   width: 100%;
   z-index: 999;
 
-  .menu-wrapper {
-    @include outer-container;
+  .navigation-wrapper {
     @include clearfix;
+    @include outer-container;
     position: relative;
     z-index: 9999;
   }
 
   .logo {
-    float: left;    
+    float: left;
     max-height: $navigation-height;
     padding-left: $navigation-padding;
     padding-right: 2em;
 
     img {
       max-height: $navigation-height;
-      padding: .8em 0;
+      padding: 0.8em 0;
     }
   }
 
+  // Mobile view
+
   .navigation-menu-button {
     color: $navigation-color;
-    cursor: pointer;
     display: block;
     float: right;
-    font-family: $sans-serif;
     font-weight: 700;
     line-height: $navigation-height;
     margin: 0;
@@ -55,22 +67,27 @@ header.navigation {
       display: none;
     }
 
+    &:focus,
     &:hover {
       color: $navigation-color-hover;
     }
   }
 
-  .nav {
-    z-index: 9999999;
+  // Nav menu
+
+  nav {
     float: none;
+    min-height: $navigation-height;
+    z-index: 9999999;
+
     @include media ($horizontal-bar-mode) {
       float: left;
     }
   }
 
-  ul#navigation-menu {    
-    clear: both;
+  ul.navigation-menu {
     -webkit-transform-style: preserve-3d; // stop webkit flicker
+    clear: both;
     display: none;
     margin: 0 auto;
     overflow: visible;
@@ -78,6 +95,10 @@ header.navigation {
     width: 100%;
     z-index: 9999;
 
+    &.show {
+      display: block;
+    }
+
     @include media ($horizontal-bar-mode) {
       display: inline;
       margin: 0;
@@ -85,12 +106,14 @@ header.navigation {
     }
   }
 
-  ul li {
+  // The nav items
+
+  ul li.nav-link {
     background: $navigation-background;
     display: block;
     line-height: $navigation-height;
     overflow: hidden;
-    padding-right: .8em;
+    padding-right: 0.8em;
     text-align: right;
     width: 100%;
     z-index: 9999;
@@ -99,15 +122,20 @@ header.navigation {
       background: transparent;
       display: inline;
       line-height: $navigation-height;
-      padding-right: 2em;
       text-decoration: none;
       width: auto;
     }
 
     a {
-      font-weight: 400;
       color: $navigation-color;
+      display: inline-block;
+      font-weight: 400;
+
+      @include media ($horizontal-bar-mode) {
+        padding-right: 1em;
+      }
 
+      &:focus,
       &:hover {
         color: $navigation-color-hover;
       }
@@ -115,34 +143,88 @@ header.navigation {
   }
 
   .active-nav-item a {
-    padding-bottom: 3px;
     border-bottom: 1px solid $navigation-active-link-color;
+    padding-bottom: 3px;
+  }
+
+  // Sub menus
+
+  li.more.nav-link {
+    padding-right: 0;
+
+    @include media($large-screen) {
+      padding-right: $navigation-submenu-padding;
+    }
+
+    > ul > li:first-child a  {
+      padding-top: 1em;
+    }
+
+    a {
+      margin-right: $navigation-submenu-padding;
+    }
+
+    > a {
+      padding-right: 0.6em;
+    }
+
+    > a:after {
+      @include position(absolute, auto -0.4em auto auto);
+      content: '\25BE';
+      color: $navigation-color;
+    }
   }
 
   li.more {
+    overflow: visible;
     padding-right: 0;
 
-    &:hover .submenu {
+    a {
+      padding-right: 0.8em;
+    }
+
+    > a {
+      padding-right: 1.6em;
+      position: relative;
+
+      @include media($large-screen) {
+        margin-right: $navigation-submenu-padding;
+      }
+
+      &:after {
+        content: '›';
+        font-size: 1.2em;
+        position: absolute;
+        right: $navigation-submenu-padding / 2;
+      }
+    }
+
+    &:focus > .submenu,
+    &:hover > .submenu {
       display: block;
     }
 
     @include media($horizontal-bar-mode) {
+      padding-right: 0.8em;
       position: relative;
-      padding-right: .8em;
     }
   }
 
-  li.more a {
-    padding-right: .8em;
-  }
-
-  .submenu {
+  ul.submenu {
     display: none;
+    padding-left: 0;
 
     @include media($horizontal-bar-mode) {
-      position: absolute;
-      top: 1em;
       left: -$navigation-submenu-padding;
+      position: absolute;
+      top: 1.5em;
+    }
+
+    .submenu {
+      @include media($horizontal-bar-mode) {
+        left: $navigation-submenu-width - 0.2em;
+        top: 0;
+      }
     }
 
     li {
@@ -150,105 +232,116 @@ header.navigation {
       padding-right: 0;
 
       @include media($horizontal-bar-mode) {
-        line-height: $navigation-height /1.3;
+        line-height: $navigation-height / 1.3;
 
-        &:first-child a {
-          padding-top: 1em;
+        &:first-child > a {
+          border-top-left-radius: $base-border-radius;
+          border-top-right-radius: $base-border-radius;
         }
-        &:last-child a {
+
+        &:last-child > a {
           border-bottom-left-radius: $base-border-radius;
           border-bottom-right-radius: $base-border-radius;
-          padding-bottom: .7em;
+          padding-bottom: 0.7em;
         }
       }
 
       a {
+        background-color: darken($navigation-background, 3%);
+        display: inline-block;
         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;
+          text-align: left;
+          width: $navigation-submenu-width;
         }
       }
     }
   }
 
+  // Elements on the far right
+
   .navigation-tools {
-    @include clearfix;
+    background: #505050;
+    clear: both;
     display: block;
+    height: $navigation-height;
+    padding-left: $navigation-padding / 2;
     padding-right: $navigation-padding;
-    padding-left: $navigation-padding;
-    clear: both;
-    background: #505050;
 
     @include media($large-screen) {
       background: transparent;
-      float: right;
       clear: none;
+      float: right;
     }
   }
 
-  a.sign-up {
-    margin-top: 13px;
-    float: right;
-    @include transition (all 0.2s ease-in-out);
+  .sign-up {
+    @include button(flat, $base-accent-color);
     display: inline;
-    background: $navigation-nav-button-background;
-    border-radius: $base-border-radius; 
-    color: white;
-    font-size: .8em;  
-    font-weight: 800;
-    padding: .4em 1em;
+    float: right;
+    font-size: 0.8em;
+    margin-top: 1em;
+    padding: 0.75em 1em;
     text-transform: uppercase;
-
-    &:hover {
-      background: lighten($navigation-nav-button-background, 10);
-    }
   }
 
+  // Search bar
+
   .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);
+    $search-bar-background: lighten($search-bar-border-color, 10%);
 
-    padding: 13px 5px; 
     float: left;
-    .search-and-submit {
+    padding: 0.85em 0.6em 0.7em 0.6em;
+    width: 60%;
+
+    form {
       position: relative;
 
       input[type=search] {
+        @include box-sizing(border-box);
         background: $navigation-search-background;
+        border-radius: $base-border-radius * 2;
         border: $navigation-search-border;
-        padding: .6em .8em;
-        font-size: .9em;
-        font-style: italic;
         color: $navigation-color;
-        border-radius: $base-border-radius * 2;
+        font-size: 0.9em;
+        font-style: italic;
         margin: 0;
+        padding: 0.5em 0.8em;
+        width: 100%;
+
+        @include media($large-screen) {
+          width: 100%;
+        }
       }
 
       button[type=submit] {
-        @include button(simple, lighten($navigation-search-background, 10));
-        @include position(absolute, 0.3em 0.3em 0.3em 0);
+        @include button(flat, $navigation-search-background);
+        bottom: 0.3em;
+        left: auto;
         outline: none;
-        padding: 5px 15px;
+        padding: 0 9px;
+        position: absolute;
+        right: 0.3em;
+        top: 0.3em;
 
         img {
           height: 12px;
-          opacity: .7;
+          opacity: 0.7;
+          padding: 1px;
         }
       }
     }
 
     @include media($horizontal-bar-mode) {
-      width: 16em;
-      position: relative; 
       display: inline-block;
+      position: relative;
+      width: 16em;
 
       input {
         @include box-sizing(border-box);