refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_side-image.scss

@@ -1,18 +1,9 @@
-.side-image {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.side-image {
   $base-line-height: 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;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $side-image-background-top: #B5EBEB;
   $side-image-background-bottom: #5DAC5D;
   $side-image-content-background: #F9F9F9;
@@ -25,7 +16,9 @@
   }
 
   .images-wrapper {
-    @include background(url('https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'), linear-gradient($side-image-background-top, $side-image-background-bottom), no-repeat $side-image-background-top scroll);
+    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"),
+                linear-gradient($side-image-background-top, $side-image-background-bottom),
+                no-repeat $side-image-background-top scroll;
     background-color: $side-image-background-top;
     background-size: cover;
     border-bottom: $side-image-border;
@@ -59,21 +52,16 @@
       color: white;
       display: inline-block;
       font-size: 0.75em;
-      font-weight: 800;
       margin-bottom: 1.3em;
       padding: 3px 8px;
       text-transform: uppercase;
     }
 
     p {
-      color: gray;
+      color: $base-font-color;
+      line-height: $base-line-height;
       margin-bottom: 3em;
     }
-
-    button {
-      @include button(flat, $base-accent-color);
-      padding: 0.7em 1em;
-    }
   }
 
   @include reset-display();

data/source/stylesheets/refills/_sliding-panel.scss

@@ -0,0 +1,79 @@
+.sliding-panel-content {
+  $action-color: #477DCA !default;
+  $dark-gray: #333 !default;
+  $sliding-panel-border-color: $dark-gray;
+  $sliding-panel-background: lighten($sliding-panel-border-color, 5%);
+  $sliding-panel-color: #fff;
+  $sliding-panel-border: 1px solid $sliding-panel-border-color;
+  $sliding-panel-background-hover: $action-color;
+  $sliding-panel-color-hover: #fff;
+  $sliding-panel-background-focus: lighten($sliding-panel-background, 5%);
+
+  @include position(fixed, 0 auto 0 0);
+  @include size(220px, 100%);
+  background: $sliding-panel-background;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  transform: translateX(-220px);
+  transition: all 0.25s linear;
+  z-index: 999999;
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  li a {
+    border-bottom: $sliding-panel-border;
+    color: $sliding-panel-color;
+    display: block;
+    font-weight: bold;
+    padding: 1em;
+    text-decoration: none;
+
+    &:focus {
+      background-color: $sliding-panel-background-focus;
+    }
+
+    &:hover {
+      background-color: $sliding-panel-background-hover;
+      color: $sliding-panel-color-hover;
+    }
+  }
+
+  &.is-visible {
+    transform: translateX(0);
+  }
+}
+
+.sliding-panel-fade-screen {
+  @include position(fixed, 0);
+  background: black;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  visibility: hidden;
+  z-index: 999998;
+
+  &.is-visible {
+    opacity: 0.4;
+    visibility: visible;
+  }
+}
+
+.sliding-panel-button {
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  padding: 10px 16px;
+  position: relative;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+// Based on code by Diego Eis

data/source/stylesheets/refills/_stats.scss

@@ -2,8 +2,8 @@
   $base-spacing: 1.5em !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  $base-accent-color: #477dca !default;
-  $stats-color: lighten($base-accent-color, 10%);
+  $action-color: #477dca !default;
+  $stats-color: lighten($action-color, 10%);
 
   padding: $base-spacing / 2;
 
@@ -17,7 +17,6 @@
     display: inline;
     float: left;
     font-size: 1.2em;
-    font-weight: 800;
     line-height: 1.1em;
     padding: 0 0.7em;
 

data/source/stylesheets/refills/_switch.scss

@@ -1,9 +1,6 @@
-.label-switch {  
-  ///////////////////////////////////////////////////////////////////////////////////
-  $base-accent-color: #477DCA !default;
+.label-switch {
+  $action-color: #477DCA !default;
   $base-background-color: white !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
   $switch-width: 52px;
   $switch-padding: 2px;
   $switch-height: 32px;
@@ -26,51 +23,51 @@
     display: none;
 
     + .checkbox {
-      @include transition(all 0.3s ease);
       background: $switch-border-background;
+      border: 0;
       border-radius: $switch-radius;
-      border: none;
       cursor: pointer;
       height: $switch-height;
       margin: 0;
       padding: 0;
       position: relative;
+      transition: all 0.3s ease;
       width: $switch-width;
       z-index: 0;
 
-      &:before {
+      &::before {
         @include position(absolute, 2px 0 0 2px);
-        @include transform(scale(1));
-        @include transition(all 0.3s ease);
         background: $switch-background;
         border-radius: $switch-radius;
         content: "";
         height: $knob-radius;
+        transform: scale(1);
+        transition: all 0.3s ease;
         width: $switch-width - ($switch-padding * 2);
         z-index: 1;
       }
 
-      &:after {
+      &::after {
         @include position(absolute, 2px 0 0 2px);
-        @include transition(all 0.3s ease);
         @include size($knob-size);
         background: $switch-background;
         border-radius: $knob-radius;
         box-shadow: $switch-shadow;
         content: "";
+        transition: all 0.3s ease;
         z-index: 2;
       }
     }
 
     &:checked {
       + .checkbox {
-        background: $base-accent-color;
+        background: $action-color;
 
-        &:before {
-          @include transform(scale(0));
+        &::before {
+          transform: scale(0);
         }
 
-        &:after {
+        &::after {
           left: $switch-width - $knob-width - ($switch-padding);
         }
       }

data/source/stylesheets/refills/_tables-minimal.scss

@@ -1,29 +1,15 @@
 .table-minimal {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
+  $action-color: #477DCA !default;
   $dark-gray: #333 !default;
   $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
-  $large-screen: em(860) !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  width: 100%;
-
-  th {
-    text-align: left;
-  }
-
-  td {
-    line-height: $base-line-height;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $table-border-color: $base-border-color;
   $table-border: 1px solid $table-border-color;
   $table-background: $base-background-color;
@@ -31,10 +17,11 @@
   $table-hover-background: darken($table-background, 2);
   $table-stripe-background: darken($table-background, 4);
   $table-stripe-background-hover: darken($table-stripe-background, 5);
-  $table-padding: .75em 1em;
+  $table-padding: 0.75em 1em;
 
   border-collapse: separate;
   border-spacing: 0;
+  width: 100%;
 
   tbody {
     tr:hover > td, tr:hover > th {
@@ -48,8 +35,9 @@
   thead {
     th {
       background-color: $table-header-background;
-      border-bottom: 0px;
+      border-bottom: 0;
       padding: $table-padding;
+      text-align: left;
     }
   }
 
@@ -57,19 +45,19 @@
     background-color: $table-background;
 
     td {
-      border-bottom: 0px;
+      border-bottom: 0;
       border-top: 1px solid $table-border-color;
+      line-height: $base-line-height;
       padding: $table-padding;
 
       button {
-        @include button(flat, $base-accent-color);
         display: inline-block;
-        font-size: .7em;
+        font-size: 0.7em;
         line-height: $base-line-height;
-        margin-bottom: .3em;
+        margin-bottom: 0.3em;
         margin-right: 0.5em;
         outline: none;
-        padding: .3em 1em;
+        padding: 0.3em 1em;
         width: 100%;
 
         @include media($medium-screen) {

data/source/stylesheets/refills/_tables.scss

@@ -1,24 +1,14 @@
 .tables {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
   $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
-  $large-screen: em(860) !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  width: 100%;
-
-  th {
-    text-align: left;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $table-border-color: $base-border-color;
   $table-border: 1px solid $table-border-color;
   $table-background: lighten($table-border-color, 12%);
@@ -28,11 +18,12 @@
   $table-stripe-background-hover: darken($table-stripe-background, 5%);
   $table-padding: 0.75em 1em;
 
+  border: $table-border;
   border-collapse: separate;
-  border-left: 0px;
+  border-left: 0;
   border-radius: $base-border-radius;
   border-spacing: 0;
-  border: $table-border;
+  width: 100%;
 
   tbody {
     background-color: $table-background;
@@ -71,12 +62,13 @@
   thead {
     th {
       background-color: $table-header-background;
-      border-bottom: 0px;
+      border-bottom: 0;
       border-left: 1px solid $table-border-color;
       padding: $table-padding;
+      text-align: left;
 
       &:first-child {
-        border-left: none;
+        border-left: 0;
       }
     }
   }
@@ -85,17 +77,16 @@
     background-color: $table-background;
 
     td {
-      border-bottom: 0px;
+      border-bottom: 0;
       border-left: 1px solid $table-border-color;
       border-top: 1px solid $table-border-color;
       padding: $table-padding;
 
       &:first-child {
-        border-left: none;
+        border-left: 0;
       }
 
       button {
-        @include button(flat, $base-accent-color);
         display: inline-block;
         font-size: 0.7em;
         line-height: $base-line-height;

data/source/stylesheets/refills/_texture-legend.scss

@@ -1,4 +1,4 @@
-@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $texture-number, $inverted) { $texture-list: 
+@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $texture-number, $inverted) { $texture-list:
   "paper.png"             // Fabric and paper
   "rice_paper.png"
   "noise_lines.png"
@@ -44,7 +44,7 @@
   "pinstripe.png"
   "line_horizontal1.png"
   "line_horizontal2.png"
-  "linen.png" 
+  "linen.png"
   "vintage_speckles.png"   // Patina and irregular
   "subtle_grunge.png"
   "old_wall.png"
@@ -58,7 +58,7 @@
   "subtle_surface.png"
   "dust.png"
   "light_alu.png"
-  "corrugation.png" 
+  "corrugation.png"
   "kindajean.png"           // Diagonal
   "line_diagonal1.png"
   "line_diagonal2.png"
@@ -89,18 +89,22 @@
   "noisy_grid_simple.png";
 
   @if ($inverted == 1) {
-    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"),
+                linear-gradient($gradient-angle, $bg-color-1, $bg-color-2),
+                center no-repeat $bg-color-1 scroll;
   }
 
   @else {
-    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"),
+                linear-gradient($gradient-angle, $bg-color-1, $bg-color-2),
+                center no-repeat $bg-color-1 scroll;
   }
 }
 
 .texture-examples {
   @include clearfix;
-  border-radius: 6px;
   border: 1px solid silver;
+  border-radius: 6px;
   margin-bottom: 3em;
   padding: 1em;
 
@@ -118,7 +122,7 @@
 
   h4 {
     color: gray;
-    font-size: .8em;
+    font-size: 0.8em;
     font-weight: 200;
     line-height: 2.2em;
     margin: 0;
@@ -130,7 +134,7 @@
     clear: both;
     display: block;
     padding-top: 2em;
-    text-align: center;    
+    text-align: center;
   }
 
   a {
@@ -177,17 +181,17 @@
     $texture-legend-top-background: lighten(#ddf0ef, 1%);
     $texture-legend-bottom-background: darken(#ddf0ef, 10%);
     float: left;
-    margin-bottom: 1em;
     margin: 0 0.95% 1em 0.95%;
+    margin-bottom: 1em;
     width: 14.7%;
 
     .example-normal {
-      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 0); 
-      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 0);
+      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
     }
     .example-inverted {
-      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 1); 
-      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 1);
+      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
     }
   }
 }