refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_textures.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,11 +89,15 @@
   "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;
   }
 }
 
@@ -106,16 +110,16 @@
   width: 100%;
 
   .texture-normal {
-    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
-    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 1); 
+    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
+    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 1);
     float: left;
     height: 5em;
     width: 50%;
   }
 
   .texture-inverted {
-    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
-    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 0); 
+    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal
+    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 0);
     float: left;
     height: 5em;
     width: 50%;

data/source/stylesheets/refills/_tooltip.scss

@@ -1,18 +1,9 @@
-.tooltip-item {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.tooltip-item {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-    margin: 0;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $tooltip-background: white;
   $tooltip-color: $base-font-color;
   $tooltip-max-width: 16em;
@@ -22,8 +13,8 @@
   $tooltip-arrow-distance-from-box: -1.3em;
 
   background: $tooltip-background;
-  border-radius: $base-border-radius;
   border: 1px solid $base-border-color;
+  border-radius: $base-border-radius;
   display: inline-block;
   padding: 0.5em 1em;
   position: relative;
@@ -37,7 +28,6 @@
 
   .tooltip {
     @include position(absolute, null 0 $tooltip-distance-from-item 0);
-    @include transition (all 0.2s ease-in-out);
     background-color: $tooltip-background;
     background: #fff;
     border-radius: $base-border-radius;
@@ -50,19 +40,22 @@
     opacity: 0;
     padding: 1em;
     text-align: center;
+    transition: all 0.2s ease-in-out;
     visibility: hidden;
     z-index: 10;
 
     p {
-      margin-bottom: 0;
+      color: $base-font-color;
+      line-height: $base-line-height;
+      margin: 0;
     }
 
-    &:after {
-      @include position(absolute, null 0 null 0);
+    &::after {
+      @include position(absolute, null 0);
       border: $tooltip-arrow-width solid transparent;
       bottom: $tooltip-arrow-distance-from-box;
       color: $tooltip-background;
-      content: '▼';
+      content: "▼";
       font-size: 1.4em;
       margin-left: -$tooltip-arrow-width;
       text-align: center;

data/source/stylesheets/refills/_type-system-geometric.scss

@@ -1,24 +1,28 @@
 article.type-system-geometric {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
+  $sans-serif: 'Questrial', sans-serif;
+  $serif: 'Sanchez', serif;
+
+  @include clearfix;
+  font-family: $sans-serif;
+  text-align: left;
+
   h1, h2, h3, p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,16 +32,9 @@ article.type-system-geometric {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $sans-serif: 'Questrial', sans-serif;
-  $serif: 'Sanchez', serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 1px solid;
@@ -126,7 +123,7 @@ article.type-system-geometric {
       top: -1px;
     }
   }
-  
+
   hr {
     width: 3em;
   }

data/source/stylesheets/refills/_type-system-rounded.scss

@@ -1,24 +1,31 @@
 article.type-system-rounded {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
+  $light-gray: #ddd !default;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
-  h1, h2, h3, p {
+  $sans-serif: "Nunito", sans-serif;
+  $sans-serif-2: "Varela Round", sans-serif;
+
+  @include clearfix;
+  font-family: $sans-serif;
+  text-align: left;
+
+  h1,
+  h2,
+  h3,
+  p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,16 +35,9 @@ article.type-system-rounded {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $sans-serif: 'Nunito', sans-serif;
-  $sans-serif-2: 'Varela Round', sans-serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 1px solid;
@@ -130,7 +130,7 @@ article.type-system-rounded {
       top: -1px;
     }
   }
-  
+
   hr {
     width: 3em;
   }

data/source/stylesheets/refills/_type-system-sans.scss

@@ -1,24 +1,31 @@
 article.type-system-sans {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
+  $light-gray: #ddd !default;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
-  h1, h2, h3, p {
+  $sans-serif: "PT Sans", sans-serif;
+  $sans-serif-2: "Titillium Web", sans-serif;
+
+  @include clearfix;
+  font-family: $sans-serif;
+  text-align: left;
+
+  h1,
+  h2,
+  h3,
+  p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,16 +35,9 @@ article.type-system-sans {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $sans-serif: 'PT Sans', sans-serif;
-  $sans-serif-2: 'Titillium Web', sans-serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 1px solid;
@@ -76,9 +76,9 @@ article.type-system-sans {
   }
 
   code {
-    background: #F7F7F7;
+    background: #f7f7f7;
     border-radius: $base-border-radius * 1.5;
-    border: 1px solid #E0E0E0;
+    border: 1px solid #e0e0e0;
     font-family: monaco;
     font-size: 0.65em;
     font-style: normal;
@@ -87,12 +87,12 @@ article.type-system-sans {
   }
 
   h3 {
-   font-family: $sans-serif-2;
-   font-size: 1em;
-   font-weight: 700;
-   line-height: 1.4em;
-   margin-bottom: 0.5em; 
-   text-transform: uppercase;
+    font-family: $sans-serif-2;
+    font-size: 1em;
+    font-weight: 700;
+    line-height: 1.4em;
+    margin-bottom: 0.5em;
+    text-transform: uppercase;
   }
 
   p.date {

data/source/stylesheets/refills/_type-system-serif.scss

@@ -1,24 +1,29 @@
 article.type-system-serif {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
+  $serif: 'Lusitana', serif;
+  $serif-2: 'Merriweather', serif;
+  $sans-serif: 'Merriweather Sans', sans-serif;
+
+  @include clearfix;
+  font-family: $serif-2;
+  text-align: left;
+
   h1, h2, h3, p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,17 +33,9 @@ article.type-system-serif {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $serif: 'Lusitana', serif;
-  $serif-2: 'Merriweather', serif;
-  $sans-serif: 'Merriweather Sans', sans-serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 1px solid;
@@ -92,11 +89,11 @@ article.type-system-serif {
     font-size: 1.4em;
     font-weight: 400;
     line-height: 1.3em;
-    margin-bottom: .4em;
+    margin-bottom: 0.4em;
   }
 
   p.date {
-    color: transparentize($base-font-color, .6);
+    color: transparentize($base-font-color, 0.6);
     font-family: $serif-2;
     font-size: 0.9em;
     font-style: italic;
@@ -133,7 +130,7 @@ article.type-system-serif {
       top: -1px;
     }
   }
-  
+
   hr {
     width: 3em;
   }

data/source/stylesheets/refills/_type-system-slab.scss

@@ -1,24 +1,28 @@
 article.type-system-slab {
-  ///////////////////////////////////////////////////////////////////////////////////
   $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;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
+  $sans-serif: 'Open Sans', sans-serif;
+  $serif: 'Roboto Slab', serif;
+
+  @include clearfix;
+  font-family: $serif;
+  text-align: left;
+
   h1, h2, h3, p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,16 +32,9 @@ article.type-system-slab {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $sans-serif: 'Open Sans', sans-serif;
-  $serif: 'Roboto Slab', serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 1px solid;
@@ -89,7 +86,7 @@ article.type-system-slab {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4em;
-   margin-bottom: 0.5em; 
+   margin-bottom: 0.5em;
    text-transform: uppercase;
   }