refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_pagination.scss

@@ -1,28 +1,11 @@
-.pagination {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.pagination {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !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;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  a {
-    text-decoration: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $pagination-border-color: $base-border-color;
   $pagination-border: 1px solid $pagination-border-color;
   $pagination-background: lighten($pagination-border-color, 10);
@@ -33,15 +16,18 @@
 
   ul {
     display: inline;
+    margin: 0;
+    padding: 0;
     text-align: center;
 
     li {
       display: inline;
+      list-style: none;
     }
 
     ul li {
       display: none;
-      
+
       &:nth-child(1),
       &:nth-child(2),
       &:nth-child(3) {
@@ -54,18 +40,19 @@
     }
 
     li a {
-      @include transition (all 0.2s ease-in-out);
       background: $pagination-background;
       border-radius: $base-border-radius;
       border: $pagination-border;
       color: $pagination-color;
       outline: none;
       padding: ($base-spacing / 4) ($gutter / 2);
+      text-decoration: none;
+      transition: all 0.2s ease-in-out;
 
       &:hover,
       &:focus {
         background: $pagination-hover-background;
-        color: $base-link-color;
+        color: $action-color;
       }
 
       &:active {

data/source/stylesheets/refills/_progress-bar-indication.scss

@@ -1,19 +1,12 @@
-.progress-bar-indication {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.progress-bar-indication {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-background-color: white !default;
   $base-line-height: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-
-  p {
-    line-height: $base-line-height;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $action-color: #477DCA !default;
   $progress-border-color: $base-border-color;
   $progress-border: 1px solid $progress-border-color;
-  $progress-meter-border-color: $base-accent-color;
+  $progress-meter-border-color: $action-color;
   $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
   $progress-meter-color: $progress-meter-border-color;
   $progress-background: darken($base-background-color, 5);
@@ -28,24 +21,24 @@
   width: 100%;
 
   > span.meter {
-    @include box-sizing(border-box);
     background-color: $progress-meter-color;
     background-repeat: repeat-x;
     background-size: 40px 40px;
+    border: $progress-meter-border;
     border-bottom-right-radius: 0;
     border-radius: $base-border-radius /1.5;
     border-top-right-radius: 0;
-    border: $progress-meter-border;
+    box-sizing: border-box;
     display: block;
     height: 100%;
     width: 60%;
   }
 
   p {
-    color: $progress-color;    
-    font-weight: 800;
+    color: $progress-color;
+    line-height: $base-line-height;
     margin: 0;
-    padding: .1em .5em;
+    padding: 0.1em 0.5em;
     text-shadow: 0 0 1px black;
   }
 }

data/source/stylesheets/refills/_progress-bar.scss

@@ -1,15 +1,11 @@
 .progress-bar {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-background-color: white !default;
   $base-border-radius: 3px !default;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $action-color: #477DCA !default;
   $progress-border-color: $base-border-color;
   $progress-border: 1px solid $progress-border-color;
-  $progress-meter-border-color: $base-accent-color;
+  $progress-meter-border-color: $action-color;
   $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
   $progress-meter-color: $progress-meter-border-color;
   $progress-background: darken($base-background-color, 5);
@@ -18,27 +14,29 @@
 
   background-color: $progress-background;
   border: $progress-border;
-  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
   border-radius: $base-border-radius;
+  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
   height: $progress-height;
   margin: 0 auto;
   padding: 2px;
   width: 100%;
 
   > span.meter {
-    @include animation(progress $progress-animation-duration linear infinite);
-    @include box-sizing(border-box);
+    animation: progress $progress-animation-duration linear infinite;
     background-color: $progress-meter-color;
-    @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
-                                                      transparent 25%,
-                                                      transparent 50%,
-                                                      rgba(255,255,255, 0.15) 50%,
-                                                      rgba(255,255,255, 0.15) 75%,
-                                                      transparent 75%));
-    background-size: 40px 40px;
+    background-image: linear-gradient(
+                        -45deg, rgba(#fff, 0.15) 25%,
+                        transparent 25%,
+                        transparent 50%,
+                        rgba(#fff, 0.15) 50%,
+                        rgba(#fff, 0.15) 75%,
+                        transparent 75%
+                      );
     background-repeat: repeat-x;
+    background-size: 40px 40px;
     border: $progress-meter-border;
     border-radius: $base-border-radius / 1.5;
+    box-sizing: border-box;
     display: block;
     height: 100%;
     width: 60%;
@@ -47,45 +45,45 @@
 
 @-webkit-keyframes progress {
   0% {
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
   100% {
-    background-position: 40px 0px;
+    background-position: 40px 0;
   }
 }
 
 @-moz-keyframes progress {
   0% {
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
   100% {
-    background-position: 40px 0px;
+    background-position: 40px 0;
   }
 }
 
 @-ms-keyframes progress {
   0% {
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
   100% {
-    background-position: 40px 0px;
+    background-position: 40px 0;
   }
 }
 
 @-o-keyframes progress {
   0% {
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
   100% {
-    background-position: 40px 0px;
+    background-position: 40px 0;
   }
 }
 
 @keyframes progress {
   0% {
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
   100% {
-    background-position: 40px 0px;
+    background-position: 40px 0;
   }
 }

data/source/stylesheets/refills/_ribbon.scss

@@ -5,8 +5,8 @@
 }
 
 .ribbon-wrapper {
-  $base-accent-color: #477dca !default;
-  $ribbon-background: $base-accent-color;
+  $action-color: #477dca !default;
+  $ribbon-background: $action-color;
   $ribbon-size: 85px;
 
   @include size($ribbon-size);
@@ -16,18 +16,17 @@
   top: -1px;
 
   .ribbon {
-    @include transform(rotate(45deg));
     background-color: $ribbon-background;
-    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 3px rgba(#000, 0.3);
     color: #fff;
     font-size: 0.8em;
-    font-weight: 800;
     left: -5px;
     line-height: 1.5em;
     padding: 2px 7px;
     position: relative;
     text-align: center;
     top: 15px;
+    transform: rotate(45deg);
     width: 120px;
   }
 }

data/source/stylesheets/refills/_scroll-on-page.scss

@@ -1,25 +1,17 @@
 .scroll-on-page {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-  }
+
+  display: inline-block;
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  display: inline-block;
 
   aside {
     @include media($large-screen) {
@@ -28,7 +20,7 @@
   }
 
   .scroll-on-page-link {
-    border-bottom: 1px solid transparentize($base-link-color, 0.8);
+    border-bottom: 1px solid transparentize($action-color, 0.8);
     display: block;
     margin-right: $base-spacing;
     outline: none;
@@ -44,8 +36,13 @@
       margin: 0 0 0.5em 0;
     }
 
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
     section p:last-of-type {
-      margin-bottom: 2em; 
+      margin-bottom: 2em;
     }
 
     @include media($large-screen) {

data/source/stylesheets/refills/_search-bar.scss

@@ -1,10 +1,8 @@
-form.search-bar {  
+form.search-bar {
   ///////////////////////////////////////////////////////////////////////////////////
+  $base-spacing: 1.5em !default;
   $base-border-color: gainsboro !default;
-  $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-  $dark-gray: #333 !default;
   //////////////////////////////////////////////////////////////////////////////////
 
   $search-bar-border-color: $base-border-color;
@@ -14,27 +12,22 @@ form.search-bar {
   position: relative;
 
   input[type=search] {
-    @include appearance(none);
-    @include box-sizing(border-box);
-    @include transition(border-color);
+    appearance: none;
     background-color: white;
-    border-radius: $base-border-radius;
-    border-radius: $base-border-radius;
     border: 1px solid $base-border-color;
+    box-sizing: border-box;
     display: block;
     font-size: 1em;
     font-style: italic;
     margin: 0;
     padding: ($base-spacing / 3) ($base-spacing / 3);
     position: relative;
+    transition: border-color;
     width: 100%;
   }
 
   button[type=submit] {
-    @include button(flat, $base-accent-color);
-    @include position(absolute, 0em 0em 0em null);
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    @include position(absolute, 0 0 0 null);
     outline: none;
     padding: 5px 10px;
 

data/source/stylesheets/refills/_search-tools.scss

@@ -1,19 +1,25 @@
-.search-tools {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.search-tools {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !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;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  ol {
-    margin: 0;
-    padding: 0;
-  }
+  $clear-button-width: 4em;
+  $search-tools-border-color: $base-border-color;
+  $search-tools-background: lighten($search-tools-border-color, 10%);
+
+  @include clearfix;
+  background: $search-tools-background;
+  border: 1px solid $search-tools-border-color;
+  border-radius: $base-border-radius;
+  display: flex;
+  justify-content: space-between;
+  padding: $gutter ($gutter / 2);
+  width: 100%;
 
   li {
     font-size: 0.8em;
@@ -26,35 +32,37 @@
     font-weight: bold;
     margin-bottom: $base-spacing / 4;
   }
-  //////////////////////////////////////////////////////////////////////////////////
 
-  $search-tools-border-color: $base-border-color;
-  $search-tools-background: lighten($search-tools-border-color, 10%);
+  .filters {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
 
-  @include clearfix;
-  background: $search-tools-background;
-  border-radius: $base-border-radius;
-  border: 1px solid $search-tools-border-color;
-  padding: $gutter / 2;
+    @include media($large-screen) {
+      flex-direction: row;
+    }
+  }
 
   .filter {
-    margin-bottom: 1em;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 0 0.2em 1em 0.2em;
 
     @include media($large-screen) {
-      @include span-columns(3.5);
       margin-bottom: 0;
     }
 
     > div {
-      @include box-sizing(border-box);
-      @include transition(border-color);
       background-color: white;
-      border-radius: $base-border-radius;
       border: 1px solid $base-border-color;
+      border-radius: $base-border-radius;
+      box-sizing: border-box;
       font-size: 1em;
       margin-bottom: $base-spacing / 2;
-      padding: ($base-spacing / 3) ($base-spacing / 3);
+      padding: ($base-spacing / 3) $clear-button-width ($base-spacing / 3) ($base-spacing / 3);
       position: relative;
+      transition: border-color;
       width: 100%;
 
       &:focus,
@@ -64,23 +72,23 @@
 
       label {
         cursor: pointer;
-        font-weight: 400;
         margin-bottom: 0;
       }
     }
 
-    ol {
-      margin-top: 1em;
+    .filter-list {
+      margin: 1em 0 0;
+      padding: 0;
 
       label {
         display: inline;
       }
     }
 
-    button {
-      @include button(simple, lighten($search-tools-background, 10%));
+    button.clear {
       @include position(absolute, 5px 5px auto auto);
       font-size: 0.7em;
+      max-width: $clear-button-width;
     }
 
     .hide-options {
@@ -93,22 +101,13 @@
   }
 
   .trigger {
-    width: 100%;
-
-    @include media($large-screen) {
-      @include span-columns(1.5);
-    }
+    margin-top: 1.5em;
 
     button {
-      @include button(flat, $base-accent-color);
-      margin-top: 1em;
-      padding-bottom: 0.5em;
-      padding-top: 0.5em;
+      display: block;
+      padding: 0.5em 1em;
+      text-align: center;
       width: 100%;
-
-      @include media($large-screen) {
-        margin-top: 1.55em;
-      }
     }
   }
 }