refills 0.0.2 → 0.1.0

data/source/stylesheets/refills/_pagination.scss

@@ -0,0 +1,76 @@
+.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;
+  $dark-gray: #333 !default;
+  $large-screen: em(860) !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);
+  $pagination-hover-background: lighten($pagination-background, 5);
+  $pagination-color: $base-font-color;
+
+  text-align: center;
+
+  ul {
+    display: inline;
+    text-align: center;
+
+    li {
+      display: inline;
+    }
+
+    ul li {
+      display: none;
+      
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3) {
+        display: inline;
+      }
+
+      @include media($large-screen) {
+        display: inline;
+      }
+    }
+
+    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);
+
+      &:hover,
+      &:focus {
+        background: $pagination-hover-background;
+        color: $base-link-color;
+      }
+
+      &:active {
+        background: $pagination-background;
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_parallax.scss

@@ -0,0 +1,31 @@
+$parallax-window-height: 30em;
+$parallax-background-height: $parallax-window-height * 2;
+
+.parallax-window {
+  max-height: $parallax-window-height;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.parallax-static-content {
+  color: #9A9A8A;
+  padding: 8em 0;
+  position: relative;
+  z-index: 9;
+}
+
+.parallax-background {
+  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png") repeat;
+  background-position: top;
+  background-size: cover;
+  background-color: beige;
+  height: $parallax-background-height;
+  left: 0;
+  position: absolute;
+  top: - $parallax-window-height / 3;
+  width: 100%;
+}
+
+// Based on http://codepen.io/skeurentjes/

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

@@ -1,39 +1,51 @@
-.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;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
   $progress-border-color: $base-border-color;
   $progress-border: 1px solid $progress-border-color;
   $progress-meter-border-color: $base-accent-color;
   $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
   $progress-meter-color: $progress-meter-border-color;
-  $progress-background: darken($base-body-color, 5);
+  $progress-background: darken($base-background-color, 5);
   $progress-animation-duration: 0.7s;
   $progress-color: white;
 
   background-color: $progress-background;
+  border-radius: $base-border-radius;
   border: $progress-border;
   box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
-  border-radius: $base-border-radius;
   margin: 0 auto;
-  width: 50%;
+  width: 100%;
 
   > span.meter {
     @include box-sizing(border-box);
     background-color: $progress-meter-color;
-    background-size: 40px 40px;
     background-repeat: repeat-x;
-    border: $progress-meter-border;
+    background-size: 40px 40px;
+    border-bottom-right-radius: 0;
     border-radius: $base-border-radius /1.5;
     border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border: $progress-meter-border;
     display: block;
     height: 100%;
     width: 60%;
   }
 
   p {
-    margin-bottom: 0;
-    padding: .1em .5em;
-    font-weight: 800;
     color: $progress-color;    
+    font-weight: 800;
+    margin: 0;
+    padding: .1em .5em;
     text-shadow: 0 0 1px black;
   }
 }

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

@@ -1,10 +1,18 @@
 .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;
+  //////////////////////////////////////////////////////////////////////////////////
+
   $progress-border-color: $base-border-color;
   $progress-border: 1px solid $progress-border-color;
   $progress-meter-border-color: $base-accent-color;
   $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
   $progress-meter-color: $progress-meter-border-color;
-  $progress-background: darken($base-body-color, 5);
+  $progress-background: darken($base-background-color, 5);
   $progress-animation-duration: 0.7s;
   $progress-height: 30px;
 
@@ -15,7 +23,7 @@
   height: $progress-height;
   margin: 0 auto;
   padding: 2px;
-  width: 50%;
+  width: 100%;
 
   > span.meter {
     @include animation(progress $progress-animation-duration linear infinite);
@@ -30,7 +38,7 @@
     background-size: 40px 40px;
     background-repeat: repeat-x;
     border: $progress-meter-border;
-    border-radius: $base-border-radius /1.5;
+    border-radius: $base-border-radius / 1.5;
     display: block;
     height: 100%;
     width: 60%;

data/source/stylesheets/refills/_ribbon.scss

@@ -0,0 +1,33 @@
+.ribbon-box {
+  @include size(100px);
+  border: 1px solid #bbb;
+  position: relative;
+}
+
+.ribbon-wrapper {
+  $base-accent-color: #477dca !default;
+  $ribbon-background: $base-accent-color;
+  $ribbon-size: 85px;
+
+  @include size($ribbon-size);
+  overflow: hidden;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+
+  .ribbon {
+    @include transform(rotate(45deg));
+    background-color: $ribbon-background;
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 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;
+    width: 120px;
+  }
+}

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

@@ -0,0 +1,57 @@
+.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;
+  $dark-gray: #333 !default;
+  $large-screen: em(860) !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;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  display: inline-block;
+
+  aside {
+    @include media($large-screen) {
+      @include span-columns(4);
+    }
+  }
+
+  .scroll-on-page-link {
+    border-bottom: 1px solid transparentize($base-link-color, 0.8);
+    display: block;
+    margin-right: $base-spacing;
+    outline: none;
+    padding: ($base-spacing / 2) 0;
+
+    &:last-child {
+      margin-bottom: $base-spacing;
+    }
+  }
+
+  article {
+    h4 {
+      margin: 0 0 0.5em 0;
+    }
+
+    section p:last-of-type {
+      margin-bottom: 2em; 
+    }
+
+    @include media($large-screen) {
+      @include span-columns(8);
+    }
+  }
+}
+
+// Based on code by http://codepen.io/xmark/

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

@@ -1,39 +1,46 @@
-.search-bar {
+form.search-bar {  
+  ///////////////////////////////////////////////////////////////////////////////////
+  $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;
   $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%);
 
-  position: relative; 
-  display: inline-block;
+  position: relative;
 
-  input {
+  input[type=search] {
+    @include appearance(none);
     @include box-sizing(border-box);
+    @include transition(border-color);
+    background-color: white;
+    border-radius: $base-border-radius;
+    border-radius: $base-border-radius;
+    border: 1px solid $base-border-color;
     display: block;
-  }
-
-  div.search-and-submit {
+    font-size: 1em;
+    font-style: italic;
+    margin: 0;
+    padding: ($base-spacing / 3) ($base-spacing / 3);
     position: relative;
+    width: 100%;
+  }
 
-    input[type=search] {
-      @include appearance(none);
-      width: 100%;
-      padding: .5em .8em;
-      font-size: .9em;
-      font-style: italic;
-      border-radius: $base-border-radius * 2;
-      margin: 0;
-    }
-
-    button[type=submit] {
-      @include button(simple, lighten($base-border-color, 10));
-      @include position(absolute, 0.3em 0.3em 0.3em 0);
-      outline: none;
-      padding: 5px 10px;
+  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;
+    outline: none;
+    padding: 5px 10px;
 
-      img {
-        height: 12px;
-        opacity: .7;
-      }
+    img {
+      height: 12px;
+      opacity: 0.7;
     }
   }
-}
+}

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

@@ -0,0 +1,114 @@
+.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;
+  $dark-gray: #333 !default;
+  $large-screen: em(860) !default;
+  $base-font-color: $dark-gray !default;
+  
+  ol {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    font-size: 0.8em;
+    line-height: 1.5em;
+    list-style: none;
+  }
+
+  label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: $base-spacing / 4;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $search-tools-border-color: $base-border-color;
+  $search-tools-background: lighten($search-tools-border-color, 10%);
+
+  @include clearfix;
+  background: $search-tools-background;
+  border-radius: $base-border-radius;
+  border: 1px solid $search-tools-border-color;
+  padding: $gutter / 2;
+
+  .filter {
+    margin-bottom: 1em;
+
+    @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;
+      font-size: 1em;
+      margin-bottom: $base-spacing / 2;
+      padding: ($base-spacing / 3) ($base-spacing / 3);
+      position: relative;
+      width: 100%;
+
+      &:focus,
+      &:hover {
+        border-color: darken($base-border-color, 10%);
+      }
+
+      label {
+        cursor: pointer;
+        font-weight: 400;
+        margin-bottom: 0;
+      }
+    }
+
+    ol {
+      margin-top: 1em;
+
+      label {
+        display: inline;
+      }
+    }
+
+    button {
+      @include button(simple, lighten($search-tools-background, 10%));
+      @include position(absolute, 5px 5px auto auto);
+      font-size: 0.7em;
+    }
+
+    .hide-options {
+      margin-bottom: 0;
+
+      ol, button {
+        display: none;
+      }
+    }
+  }
+
+  .trigger {
+    width: 100%;
+
+    @include media($large-screen) {
+      @include span-columns(1.5);
+    }
+
+    button {
+      @include button(flat, $base-accent-color);
+      margin-top: 1em;
+      padding-bottom: 0.5em;
+      padding-top: 0.5em;
+      width: 100%;
+
+      @include media($large-screen) {
+        margin-top: 1.55em;
+      }
+    }
+  }
+}