refills 0.0.2 → 0.1.0

data/source/stylesheets/refills/_expander.scss

@@ -0,0 +1,56 @@
+.expander {  
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-font-size: 1em !default;
+  $base-line-height: 1.5em !default;
+  $base-spacing: 1.5em !default;
+  $base-accent-color: #477DCA !default;
+  $base-link-color: $base-accent-color !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $base-font-color: $dark-gray !default;
+  
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
+
+  a {
+    color: $base-link-color;
+    text-decoration: none;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $expander-arrow-width: 0.7em;
+  $expander-toggle-size: 1em;
+  $expander-toggle-arrow-size: $expander-toggle-size;
+  $expander-toggle-margin: 1em;
+
+  width: 60%;
+
+  .expander-trigger {
+    @include user-select(none);
+    border-bottom: 1px solid $light-gray;
+    cursor: pointer;
+    display: block;
+    font-size: $expander-toggle-size;
+    margin-bottom: $expander-toggle-size;
+    padding-bottom: $expander-toggle-size / 4;
+
+    &:before {
+      font-size: $expander-arrow-width;
+      content: "\25BC";
+      margin-right: 0.5em;
+    }
+  }
+
+  .expander-hidden {
+    &:before {
+      font-size: $expander-arrow-width;
+      content: "\25BA";
+    }
+  }
+
+  .expander-hidden + .expander-content {
+    display: none;
+  }
+}

data/source/stylesheets/refills/_fade-in.scss

@@ -0,0 +1,38 @@
+.fade-in-element {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $base-line-height: 1.5em !default;
+  $base-spacing: 1.5em !default;
+  $dark-gray: #333 !default;
+  $base-font-color: $dark-gray !default;
+  
+  line-height: $base-line-height;
+
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  @include clearfix;
+  background: $base-background-color;
+  border-radius: $base-border-radius;
+  border: 1px solid silver;
+  box-shadow: 0 2px 2px transparentize(black, 0.8);
+  margin-bottom: 4em;
+  padding: $base-spacing;
+  text-align: center;
+  width: 100%;
+
+}
+
+.js-fade-element-hide {
+  opacity: 0;
+}
+
+.js-fade-element-show {
+  @include transition (all 0.4s ease-in-out);
+  opacity: 1;
+}

data/source/stylesheets/refills/_flashes.scss

@@ -0,0 +1,40 @@
+$base-spacing: 1.5em !default;
+$alert-color: #fff6bf !default;
+$error-color: #fbe3e4 !default;
+$notice-color: #e5edf8 !default;
+$success-color: #e6efc2 !default;
+
+@mixin flash($color) {
+  background-color: $color;
+  color: darken($color, 60%);
+  display: block;
+  font-weight: 600;
+  margin-bottom: $base-spacing / 2;
+  padding: $base-spacing / 2;
+  text-align: center;
+
+  a {
+    color: darken($color, 70%);
+
+    &:focus,
+    &:hover {
+      color: darken($color, 90%);
+    }
+  }
+}
+
+.flash-alert {
+  @include flash($alert-color);
+}
+
+.flash-error {
+  @include flash($error-color);
+}
+
+.flash-notice {
+  @include flash($notice-color);
+}
+
+.flash-success {
+  @include flash($success-color);
+}

data/source/stylesheets/refills/_flex-boxes.scss

@@ -0,0 +1,84 @@
+.flex-boxes {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $base-font-color: $dark-gray !default;
+  
+  a {
+    text-decoration: none;
+  }  
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $flex-box-border-color: $light-gray;
+  $flex-box-border: 1px solid $flex-box-border-color;
+  $flex-box-background: lighten($light-gray, 10%);
+  $flex-box-gutter: 0.4em;
+  $flex-box-width: 18em;
+  $flex-box-color: transparentize($base-font-color, 0.3);
+  $flex-box-top-colors: 
+    tomato, 
+    #72BFBF, 
+    #92B1E3, 
+    #E3D743,
+    #CCC,
+    #F6C05C;
+
+    @include clearfix;
+    @include display(flex);
+    @include justify-content(center);
+    @include align-items(stretch);
+    @include flex-wrap(wrap);
+    clear: both;
+    text-align: center;
+
+  .flex-box {
+    @include transition (all 0.2s ease-in-out);
+    @include flex(2 2 15em);
+    @include align-self(stretch);
+    background: $flex-box-background;
+    border-radius: $base-border-radius;
+    box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%);
+    display: block;
+    margin: $flex-box-gutter;
+    padding: 2em 2em 3em 2em;
+
+    @for $i from 1 to 7 { // assign colors from $flex-box-top-colors list
+      &:nth-child(#{$i}) {
+        $color-from-list: nth($flex-box-top-colors, $i);
+        border-top: 6px solid $color-from-list;
+        
+        &:focus,
+        &:hover {
+          background-color: transparentize($color-from-list, 0.9);
+        }
+      }
+    }
+
+    img {
+      display: block;
+      height: 3em;
+      margin-bottom: 2em;
+      margin: auto;
+      opacity: 0.4;
+    }
+
+    .flex-title {
+      color: $flex-box-color;
+      font-size: 1.2em;
+      font-weight: 800;
+      margin-bottom: 0.5em;
+    }
+
+    p {
+      color: transparentize($flex-box-color, 0.1);
+      line-height: 1.5em;
+      margin: auto;
+    }
+  }
+
+  .flex-box-big {
+    @include flex(1 1 40em);
+  }
+}

data/source/stylesheets/refills/_footer-2.scss

@@ -1,12 +1,60 @@
+// Uncomment this for a sticky footer.
+//
+// .wrapper-for-content-outside-of-footer {
+//   min-height: 100%;
+//   height: auto !important;
+//   height: 100%;
+//   margin: 0 auto -4em;
+// }
+
+// html, body {
+//  height: 100%;
+// }
+
+// .wrapper-for-content-outside-of-footer:after {
+//   content: "";
+//   display: block;
+// }
+
+// .footer-2, .wrapper-for-content-outside-of-footer:after {
+//   height: 17em;
+
+//   @include media($large-screen) {
+//     height: 4em;
+//   }
+// }
+
 .footer-2 {
-  $footer-background: desaturate(darken($base-accent-color, 20), 30);
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-spacing: 1.5em !default;
+  $base-accent-color: #477DCA !default;
+  $medium-screen: em(640) !default;
+  $large-screen: em(860) !default;
+  
+  ul {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5em;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $footer-background: desaturate(darken($base-accent-color, 20%), 30%);
   $footer-color: white;
-  $footer-link-color: transparentize($footer-color, .6);
-  $footer-disclaimer-color: transparentize($footer-color, .6);
+  $footer-link-color: transparentize($footer-color, 0.6);
+  $footer-disclaimer-color: transparentize($footer-color, 0.6);
 
   background: $footer-background;
-  padding: $base-line-height;
+  padding: $base-spacing;
   width: 100%;
+  display: inline-block;
 
   .footer-logo {
     margin-right: 1em;
@@ -24,16 +72,18 @@
 
   ul {
     margin-bottom: 1em;
+    
     @include media($large-screen) {
       float: left;
+      line-height: 1.8em;
       margin-left: 1em;
       margin-bottom: 0;
     }
   }
 
   ul li {
-    padding-right: 1em;
     font-weight: 800;
+    padding-right: 1em;
 
     @include media($large-screen) {
       display: inline;
@@ -44,6 +94,7 @@
   ul li a {
     color: $footer-link-color;
 
+    &:focus,
     &:hover {
       color: transparentize($footer-color, 0);
     }
@@ -55,7 +106,7 @@
     }
 
     li {
-      font-size: .8em;
+      font-size: 0.8em;
       font-weight: 400;
     }
 
@@ -68,9 +119,10 @@
       }
 
       li {
-        float: left;
         font-size: 1em;
-        padding-right: .7em;
+        float: left;
+        line-height: 0;
+        padding-right: 0.7em;
 
         &:last-child {
           padding-right: 0;
@@ -78,10 +130,11 @@
       }
 
       img {
-        opacity: .7;
         height: 1.6em;
+        opacity: 0.7;
         padding: 1px;
 
+        &:focus,
         &:hover {
           opacity: 1;
         }

data/source/stylesheets/refills/_footer.scss

@@ -1,16 +1,36 @@
 .footer {
-  $footer-background: desaturate(darken($base-accent-color, 20), 30);
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-spacing: 1.5em !default;
+  $base-accent-color: #477DCA !default;
+  $medium-screen: em(640) !default;
+  $large-screen: em(860) !default;
+  
+  ul {
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+    line-height: 1.5em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $footer-background: desaturate(darken($base-accent-color, 20%), 30%);
   $footer-color: white;
-  $footer-link-color: transparentize($footer-color, .6);
-  $footer-disclaimer-color: transparentize($footer-color, .6);
+  $footer-link-color: transparentize($footer-color, 0.6);
+  $footer-disclaimer-color: transparentize($footer-color, 0.6);
 
   background: $footer-background;
-  padding: $base-line-height*2 $gutter;
+  padding: ($base-spacing * 2) $gutter;
   width: 100%;
 
   .footer-logo {
-    text-align: center;
     margin-bottom: 2em;
+    text-align: center;
 
     img {
       height: 3em;
@@ -19,7 +39,7 @@
 
   .footer-links {
     @include clearfix;
-    margin-bottom: $base-line-height;
+    margin-bottom: $base-spacing;
 
     @include media($medium-screen) {
       @include shift(3);
@@ -27,7 +47,7 @@
   }
 
   ul {
-    margin-bottom: $base-line-height*2;
+    margin-bottom: $base-spacing * 2;
 
     @include media($medium-screen) {
       @include span-columns(3);
@@ -47,6 +67,7 @@
   li a {
     color: $footer-link-color;
 
+    &:focus,
     &:hover {
       color: transparentize($footer-color, 0);
     }
@@ -56,18 +77,18 @@
     color: $footer-color;
     font-size: 1em;
     font-weight: 800;
-    margin-bottom: .4em;
+    margin-bottom: 0.4em;
   }  
 
   hr {
-    border: 1px solid transparentize($footer-disclaimer-color, .3);
-    margin: 0 auto $base-line-height;
+    border: 1px solid transparentize($footer-disclaimer-color, 0.3);
+    margin: 0 auto $base-spacing;
     width: 12em;
   }
 
   p {
     color: $footer-disclaimer-color;
-    font-size: .9em;
+    font-size: 0.9em;
     line-height: 1.5em;
     margin: auto;
     max-width: 35em;

data/source/stylesheets/refills/_grid-items-lines.scss

@@ -3,9 +3,26 @@
 }
 
 .grid-items-lines {
-  $grid-items-background: $base-body-color;
-  $grid-item-background: $base-body-color;
-  $grid-item-border: 1px solid transparentize($base-font-color, .8); 
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-background-color: white !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;
+
+  p {
+    line-height: 1.5em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $grid-items-background: $base-background-color;
+  $grid-item-background: $base-background-color;
+  $grid-item-border: 1px solid transparentize($base-font-color, 0.8); 
   $grid-item-columns: 4;
   $grid-item-big-columns: 8;
   $grid-item-color: $base-font-color;
@@ -16,22 +33,24 @@
     
   .grid-item {
     @include transition (all 0.2s ease-in-out);
-    height: $grid-item-height;
     background: $grid-item-background;
-    width: 100%;
-    overflow: hidden;
-    float: left;
-    padding: 2em;
-    border-right: $grid-item-border;
     border-bottom: $grid-item-border;
+    border-right: $grid-item-border;
     cursor: pointer;
+    float: left;
+    height: $grid-item-height;
+    overflow: hidden;
+    outline: none;
+    padding: 2em;
+    width: 100%;
 
     @include media($large-screen) {
       @include grid-item-columns($grid-item-columns);
     }
 
+    &:focus,
     &:hover {
-      background: transparentize($grid-item-color, .95);
+      background: transparentize($grid-item-color, 0.95);
     }
   }
 
@@ -39,17 +58,18 @@
       display: block;
       height: 2.5em;
       margin-bottom: 1.2em;
-      opacity: .2;
+      opacity: 0.2;
     }
 
   .grid-item h1 {
       color: $grid-item-color;
       font-size: 1.3em;
-      margin-bottom: .4em;
+      margin-bottom: 0.4em;
     }
 
   .grid-item p {
-      color: transparentize($grid-item-color, .4);
+      color: transparentize($grid-item-color, 0.4);
+      
       @include media($medium-screen) {
         max-width: 70%;
       }
@@ -68,19 +88,19 @@
 
   // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
   .bottom-cover {
-    position: absolute;
+    background: $grid-items-background;
     bottom: 0px;
-    width: 100%;
     height: 3px;
-    background: $grid-items-background;
+    position: absolute;
+    width: 100%;
   }
 
   .right-cover {
+    background: $grid-items-background;
+    height: 100%;
     position: absolute;
     right: 0px;
-    height: 100%;
     width: 4px;
-    background: $grid-items-background;
   }
 }