refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_expander.scss

@@ -1,25 +1,11 @@
-.expander {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.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;
+  $action-color: #477DCA !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;
@@ -28,25 +14,32 @@
   width: 60%;
 
   .expander-trigger {
-    @include user-select(none);
     border-bottom: 1px solid $light-gray;
+    color: $action-color;
     cursor: pointer;
     display: block;
     font-size: $expander-toggle-size;
     margin-bottom: $expander-toggle-size;
     padding-bottom: $expander-toggle-size / 4;
+    text-decoration: none;
+    user-select: none;
 
-    &:before {
-      font-size: $expander-arrow-width;
+    &::before {
       content: "\25BC";
+      font-size: $expander-arrow-width;
       margin-right: 0.5em;
     }
   }
 
+  .expander-content p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
+
   .expander-hidden {
-    &:before {
-      font-size: $expander-arrow-width;
+    &::before {
       content: "\25BA";
+      font-size: $expander-arrow-width;
     }
   }
 

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

@@ -1,5 +1,4 @@
 .fade-in-element {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-background-color: white !default;
@@ -7,25 +6,22 @@
   $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;
+  border-radius: $base-border-radius;
   box-shadow: 0 2px 2px transparentize(black, 0.8);
+  line-height: $base-line-height;
   margin-bottom: 4em;
   padding: $base-spacing;
   text-align: center;
   width: 100%;
 
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+  }
 }
 
 .js-fade-element-hide {
@@ -33,6 +29,6 @@
 }
 
 .js-fade-element-show {
-  @include transition (all 0.4s ease-in-out);
   opacity: 1;
+  transition: all 0.4s ease-in-out;
 }

data/source/stylesheets/refills/_flashes.scss

@@ -1,40 +1,28 @@
 $base-spacing: 1.5em !default;
-$alert-color: #fff6bf !default;
-$error-color: #fbe3e4 !default;
-$notice-color: #e5edf8 !default;
-$success-color: #e6efc2 !default;
+$flashes: (
+  "alert": #fff6bf,
+  "error": #fbe3e4,
+  "notice": #e5edf8,
+  "success": #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;
+@each $flash-type, $color in $flashes {
+  .flash-#{$flash-type} {
+    background-color: $color;
+    color: shade($color, 60%);
+    display: block;
+    margin-bottom: $base-spacing / 2;
+    padding: $base-spacing / 2;
+    text-align: center;
 
-  a {
-    color: darken($color, 70%);
+    a {
+      color: shade($color, 70%);
+      text-decoration: underline;
 
-    &:focus,
-    &:hover {
-      color: darken($color, 90%);
+      &:focus,
+      &:hover {
+        color: shade($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

@@ -1,54 +1,48 @@
 .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, 
+  $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;
+  @include clearfix;
+  align-items: stretch;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
 
   .flex-box {
-    @include transition (all 0.2s ease-in-out);
-    @include flex(2 2 15em);
-    @include align-self(stretch);
+    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;
+    flex: 2 2 15em;
     margin: $flex-box-gutter;
     padding: 2em 2em 3em 2em;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
 
     @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);
@@ -59,15 +53,13 @@
     img {
       display: block;
       height: 3em;
-      margin-bottom: 2em;
-      margin: auto;
+      margin: 0 auto 1em;
       opacity: 0.4;
     }
 
     .flex-title {
       color: $flex-box-color;
       font-size: 1.2em;
-      font-weight: 800;
       margin-bottom: 0.5em;
     }
 
@@ -79,6 +71,6 @@
   }
 
   .flex-box-big {
-    @include flex(1 1 40em);
+    flex: 1 1 40em;
   }
 }

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

@@ -11,12 +11,12 @@
 //  height: 100%;
 // }
 
-// .wrapper-for-content-outside-of-footer:after {
+// .wrapper-for-content-outside-of-footer::after {
 //   content: "";
 //   display: block;
 // }
 
-// .footer-2, .wrapper-for-content-outside-of-footer:after {
+// .footer-2, .wrapper-for-content-outside-of-footer::after {
 //   height: 17em;
 
 //   @include media($large-screen) {
@@ -25,40 +25,23 @@
 // }
 
 .footer-2 {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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%);
+  $action-color: #477DCA !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
+  $footer-background: desaturate(darken($action-color, 20%), 30%);
   $footer-color: white;
   $footer-link-color: transparentize($footer-color, 0.6);
   $footer-disclaimer-color: transparentize($footer-color, 0.6);
 
   background: $footer-background;
+  display: inline-block;
   padding: $base-spacing;
   width: 100%;
-  display: inline-block;
 
   .footer-logo {
-    margin-right: 1em;
     margin-bottom: 1em;
+    margin-right: 1em;
 
     @include media($large-screen) {
       float: left;
@@ -68,21 +51,23 @@
 
   .footer-logo img {
     height: 1.6em;
-  } 
+  }
 
   ul {
-    margin-bottom: 1em;
-    
+    line-height: 1.5em;
+    margin: 0 0 1em 0;
+    padding: 0;
+
     @include media($large-screen) {
       float: left;
       line-height: 1.8em;
-      margin-left: 1em;
       margin-bottom: 0;
+      margin-left: 1em;
     }
   }
 
   ul li {
-    font-weight: 800;
+    list-style: none;
     padding-right: 1em;
 
     @include media($large-screen) {
@@ -93,6 +78,7 @@
 
   ul li a {
     color: $footer-link-color;
+    text-decoration: none;
 
     &:focus,
     &:hover {
@@ -107,11 +93,10 @@
 
     li {
       font-size: 0.8em;
-      font-weight: 400;
     }
 
     ul.footer-social {
-      margin-top: 1em;
+      margin: 1em 0 0 0;
 
       @include media($large-screen) {
         float: right;
@@ -119,9 +104,10 @@
       }
 
       li {
-        font-size: 1em;
         float: left;
+        font-size: 1em;
         line-height: 0;
+        margin: 0;
         padding-right: 0.7em;
 
         &:last-child {

data/source/stylesheets/refills/_footer.scss

@@ -1,25 +1,9 @@
 .footer {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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%);
+  $action-color: #477DCA !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
+  $footer-background: desaturate(darken($action-color, 20%), 30%);
   $footer-color: white;
   $footer-link-color: transparentize($footer-color, 0.6);
   $footer-disclaimer-color: transparentize($footer-color, 0.6);
@@ -35,37 +19,31 @@
     img {
       height: 3em;
     }
-  } 
+  }
 
   .footer-links {
-    @include clearfix;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     margin-bottom: $base-spacing;
-
-    @include media($medium-screen) {
-      @include shift(3);
-    }
   }
 
   ul {
+    flex-basis: 13em;
+    flex-shrink: 0;
     margin-bottom: $base-spacing * 2;
-
-    @include media($medium-screen) {
-      @include span-columns(3);
-      @include omega(3n);
-      @include clearfix;
-    }
+    padding: 0;
   }
 
   li {
+    line-height: 1.5em;
+    list-style: none;
     text-align: center;
-
-    @include media($medium-screen) {
-      text-align: left;
-    }
   }
 
   li a {
     color: $footer-link-color;
+    text-decoration: none;
 
     &:focus,
     &:hover {
@@ -76,9 +54,8 @@
   li h3 {
     color: $footer-color;
     font-size: 1em;
-    font-weight: 800;
     margin-bottom: 0.4em;
-  }  
+  }
 
   hr {
     border: 1px solid transparentize($footer-disclaimer-color, 0.3);