refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_button-group.scss

@@ -1,23 +1,19 @@
-.button-group {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.button-group {
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $base-spacing: 1.5em !default;
   $base-font-size: 1em !default;
   $base-background-color: white !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;
-  //////////////////////////////////////////////////////////////////////////////////
-
   $button-group-background: $base-background-color;
   $button-group-color: lighten($base-font-color, 30%);
   $button-group-border: 1px solid silver;
   $button-group-inner-border: 1px solid lighten(silver, 18%);
-  $button-group-background-checked: $base-accent-color;
+  $button-group-background-checked: $action-color;
   $button-group-color-checked: white;
   $button-group-border-checked: darken($button-group-background-checked, 15%);
 
@@ -61,8 +57,7 @@
     }
 
     &:first-child .button-group-item {
-      border-top-left-radius: $base-border-radius;
-      border-top-right-radius: $base-border-radius;
+      @include border-top-radius($base-border-radius);
       border-top: $button-group-border;
 
       @include media($large-screen) {
@@ -74,8 +69,7 @@
     }
 
     &:last-child .button-group-item {
-      border-bottom-left-radius: $base-border-radius;
-      border-bottom-right-radius: $base-border-radius;
+      @include border-bottom-radius($base-border-radius);
       border-bottom: $button-group-border;
 
       @include media($large-screen) {

data/source/stylesheets/refills/_cards.scss

@@ -1,63 +1,58 @@
 .cards {
-  @include display(flex);
-  @include flex-wrap(wrap);
-  @include justify-content(space-between);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .card {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-background-color: white !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;
   $base-font-color: $dark-gray !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
   $card-border-color: $base-border-color;
   $card-border: 1px solid $card-border-color;
   $card-background: lighten($card-border-color, 10%);
   $card-header-background: $card-background;
-  $card-hover-background: lighten($card-background, 5%);
-  $card-image-background: #DBD199;
-  $card-image-hover-background: lighten($card-image-background, 5%);
   $card-margin: 1em;
+  $card-image-hover-opacity: 0.7;
+  $card-image-hover-color: #F8F2B4;
 
-  @include flex-basis(15em);
-  @include flex-grow(1);
-  @include transition (all 0.2s ease-in-out);
   background-color: $card-background;
-  border-radius: $base-border-radius;
   border: $card-border;
+  border-radius: $base-border-radius;
   box-shadow: 0 2px 4px darken($base-background-color, 10%);
   cursor: pointer;
+  flex-basis: 15em;
+  flex-grow: 1;
   margin: 0 $card-margin $base-spacing $card-margin;
   position: relative;
-  position: relative;
+  transition: all 0.2s ease-in-out;
 
   .card-image {
-    overflow: hidden;
+    background-color: $card-image-hover-color;
+    height: 150px;
     max-height: 150px;
+    overflow: hidden;
 
     img {
-      @include transition (all 0.2s ease-in-out);
-      background: $card-image-background;
-      border-top-left-radius: $base-border-radius;
-      border-top-right-radius: $base-border-radius;
+      @include border-top-radius($base-border-radius);
+      opacity: 1;
+      transition: all 0.2s ease-in-out;
       width: 100%;
     }
   }
 
   .card-header {
-    @include transition (all 0.2s ease-in-out);
     background-color: $card-header-background;
     border-bottom: $card-border;
     border-radius: $base-border-radius $base-border-radius 0 0;
     font-weight: bold;
     line-height: 1.5em;
     padding: ($base-spacing / 3) ($base-spacing / 2);
+    transition: all 0.2s ease-in-out;
   }
 
   .card-copy {
@@ -69,17 +64,13 @@
       margin: 0 0 ($base-spacing / 2);
     }
   }
-  
+
   &:focus,
   &:hover {
-    background-color: $card-hover-background;
-    
-    .card-image img {
-      background: $card-image-hover-background;
-    }
-  
-    .card-header {
-      background-color: $card-hover-background;
+    cursor: pointer;
+
+    img {
+      opacity: $card-image-hover-opacity;
     }
   }
 

data/source/stylesheets/refills/_centered-navigation.scss

@@ -1,11 +1,8 @@
 .centered-navigation {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-radius: 3px !default;
   $dark-gray: #333 !default;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
   $centered-navigation-padding: 1em;
   $centered-navigation-logo-height: 2em;
   $centered-navigation-background: #E7F1EC;
@@ -34,8 +31,8 @@
 
     img {
       max-height: $centered-navigation-height;
-      opacity: .6;
-      padding: .8em 0;
+      opacity: 0.6;
+      padding: 0.8em 0;
     }
 
     @include media($horizontal-bar-mode) {
@@ -47,7 +44,6 @@
     color: $centered-navigation-color;
     display: block;
     float: right;
-    font-weight: 700;
     line-height: $centered-navigation-height;
     margin: 0;
     padding-right: $centered-navigation-submenu-padding;
@@ -74,12 +70,12 @@
   }
 
   ul.centered-navigation-menu {
-    -webkit-transform-style: preserve-3d; // stop webkit flicker
     clear: both;
     display: none;
     margin: 0 auto;
     overflow: visible;
     padding: 0;
+    -webkit-transform-style: preserve-3d; // stop webkit flicker
     width: 100%;
     z-index: 99999;
 
@@ -138,7 +134,7 @@
     display: none;
     line-height: 0;
 
-    @include media($large-screen) {
+    @include media($horizontal-bar-mode) {
       display: inline;
     }
   }
@@ -170,7 +166,7 @@
       padding-right: 0.6em;
     }
 
-    > a:after {
+    > a::after {
       @include position(absolute, auto -0.4em auto auto);
       color: $centered-navigation-color;
       content: "\25BE";
@@ -193,7 +189,7 @@
         margin-right: $centered-navigation-submenu-padding;
       }
 
-      &:after {
+      &::after {
         content: "›";
         font-size: 1.2em;
         position: absolute;
@@ -222,13 +218,20 @@
       top: 1.5em;
     }
 
-    .submenu {
+    .submenu.fly-out-right {
       @include media($horizontal-bar-mode) {
         left: $centered-navigation-submenu-width - 0.2em;
         top: 0;
       }
     }
 
+    .submenu.fly-out-left {
+      @include media($horizontal-bar-mode) {
+        left: -$centered-navigation-submenu-width + 0.2em;
+        top: 0;
+      }
+    }
+
     li {
       display: block;
       padding-right: 0;
@@ -244,7 +247,7 @@
         &:last-child > a {
           border-bottom-left-radius: $base-border-radius;
           border-bottom-right-radius: $base-border-radius;
-          padding-bottom: .7em;
+          padding-bottom: 0.7em;
         }
       }
 

data/source/stylesheets/refills/_comment.scss

@@ -1,17 +1,14 @@
 .comment {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-radius: 3px !default;
   $base-spacing: 1.5em !default;
-  $base-accent-color: #477DCA !default;
+  $action-color: #477DCA !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
   $comment-gutter: 1.4em;
   $comment-image-padding: 0.7em;
   $comment-image-width: 4em;
   $comment-color: $base-font-color;
-  $comment-background: lighten($base-accent-color, 15%);
+  $comment-background: lighten($action-color, 15%);
   $comment-detail-color: transparentize($comment-color, 0.5);
   $comment-image-vert-alignment: top;
 
@@ -41,8 +38,8 @@
     }
 
     .comment-reverse-order & {
-      padding-right: 0;
       padding-left: 10px;
+      padding-right: 0;
     }
   }
 

data/source/stylesheets/refills/_device.scss

@@ -1,19 +1,7 @@
 .device-background {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-radius: 3px !default;
-  $base-accent-color: #477DCA !default;
-  $large-screen: em(860) !default;
-
-  p {
-    line-height: 1.5em;
-  }
-
-  h4 {
-    font-size: 1.5em;
-    margin: 0;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $action-color: #477DCA !default;
+  $large-screen: 53.75em !default;
   $device-padding-vertical: 5em;
   $device-padding-horizontal: 0.4em;
   $device-screen-width: 14em;
@@ -21,20 +9,21 @@
   $device-background: darken(gray, 40%);
   $device-backside-background: darken($device-background, 10%);
   $device-text-color: white;
-  $device-background-top: #162C4C; 
+  $device-background-top: #162C4C;
   $device-background-bottom: #0A120D;
   $gradient-angle: 10deg;
-  $device-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';
-  $device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg';
+  $device-image: "https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png";
+  $device-screen-image: "https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg";
 
-  @include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll);
+  background: url($device-image),
+              linear-gradient($gradient-angle, $device-background-bottom, $device-background-top),
+              no-repeat $device-background-top scroll;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 20em;
   width: 100%;
 
   .device-text {
-    color: $device-text-color;
     padding: 2em;
 
     @include media($large-screen) {
@@ -45,18 +34,17 @@
 
     h4 {
       border-bottom: 1px solid transparentize($device-text-color, 0.7);
-      margin-bottom: 0.5em;
+      color: $device-text-color;
+      font-size: 1.5em;
+      margin: 0 0 0.5em 0;
       padding-bottom: 0.5em;
     }
 
     p {
+      color: $device-text-color;
+      line-height: 1.5em;
       margin-bottom: 1.5em;
     }
-
-    button {
-      @include button(flat, $base-accent-color);
-      padding: 0.7em 1em;
-    }
   }
 
   .device {
@@ -64,32 +52,33 @@
     position: relative;
 
     @include media($large-screen) {
-      @include transform(
-        perspective(800px) 
-        translateX(0px) 
-        translateY(-100px) 
-        translateZ(50px) 
-        rotateX(0deg) 
-        rotateY(-20deg) 
-        rotateZ(-0deg));
       background: $device-background;
       border-radius: 2em;
-      box-shadow: 
-        1px 0px lighten($device-backside-background, 20%), 
-        4px 0px lighten($device-backside-background, 2%),
-        7px 0px $device-backside-background,
-        10px 0px $device-backside-background,
-        13px 0px $device-backside-background;
+      box-shadow:
+        1px 0 lighten($device-backside-background, 20%),
+        4px 0 lighten($device-backside-background, 2%),
+        7px 0 $device-backside-background,
+        10px 0 $device-backside-background,
+        13px 0 $device-backside-background;
       display: block;
       float: right;
       margin-bottom: -12em;
       margin-right: 5em;
       padding: $device-padding-vertical 0;
+      transform:
+        perspective(800px)
+        translateX(0)
+        translateY(-100px)
+        translateZ(50px)
+        rotateX(0)
+        rotateY(-20deg)
+        rotateZ(0)
+      ;
       width: $device-screen-width + (2 * $device-padding-horizontal);
       z-index: 99999;
 
       .screen {
-        @include size($device-screen-width $device-screen-height);
+        @include size($device-screen-width, $device-screen-height);
         background-image: url($device-screen-image);
         background-size: cover;
         border-radius: 0.2em;

data/source/stylesheets/refills/_dropdown.scss

@@ -1,25 +1,11 @@
 .dropdown {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $base-background-color: white !default;
   $dark-gray: #333 !default;
-  $large-screen: em(860) !default;
+  $large-screen: 53.75em !default;
   $base-font-color: $dark-gray !default;
-  
-  line-height: $base-line-height;
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $dropdown-color: $base-font-color;
   $dropdown-description-color: lighten($dropdown-color, 40%);
   $dropdown-border: 1px solid silver;
@@ -31,6 +17,8 @@
   $dropdown-distance-from-menu: 50px;
   $dropdown-arrow-top-distance: 0;
 
+  line-height: $base-line-height;
+
   .dropdown-container {
     display: inline-block;
     position: relative;
@@ -39,8 +27,8 @@
 
   .dropdown-description {
     background: $dropdown-background;
-    border-bottom-left-radius: $base-border-radius;
     border-bottom: $dropdown-border;
+    border-bottom-left-radius: $base-border-radius;
     border-left: $dropdown-border;
     border-top-left-radius: $base-border-radius;
     border-top: $dropdown-border;
@@ -58,15 +46,14 @@
 
   .dropdown-button {
     background: $dropdown-background;
+    border-bottom: $dropdown-border;
     border-bottom-right-radius: $base-border-radius;
-    border-top-right-radius: $base-border-radius;
-    border-top: $dropdown-border;
     border-right: $dropdown-border;
-    border-bottom: $dropdown-border;
+    border-top: $dropdown-border;
+    border-top-right-radius: $base-border-radius;
     cursor: pointer;
     float: right;
     font-size: 0.7em;
-    font-weight: 800;
     line-height: $dropdown-height;
     margin: 0;
     padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2);
@@ -82,7 +69,7 @@
     background-color: $dropdown-background-hover;
   }
 
-  .dropdown-button:after {
+  .dropdown-button::after {
     color: $base-font-color;
     content: "\25BE";
     display: block;
@@ -92,22 +79,24 @@
   }
 
   .dropdown-menu {
-    @include transition (all 0.2s ease-in-out);
     background: $dropdown-background;
-    border-radius: $base-border-radius;
     border: $dropdown-border;
+    border-radius: $base-border-radius;
     box-shadow: 0 2px 2px transparentize(black, 0.8);
     color: $dropdown-color;
     cursor: pointer;
     display: none;
-    overflow: show;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
     position: absolute;
     right: 0;
     top: $dropdown-distance-from-menu;
+    transition: all 0.2s ease-in-out;
     width: 228px;
     z-index: 99999;
 
-    &:before {
+    &::before {
       @include position(absolute, 0 1em 0 0);
       color: $dropdown-background;
       content: "\25b2";
@@ -120,7 +109,8 @@
 
   .dropdown-menu li {
     border-bottom: $dropdown-inner-border;
-    color: $dropdown-color; 
+    color: $dropdown-color;
+    list-style: none;
     padding: $dropdown-padding / 2;
   }
 
@@ -134,7 +124,7 @@
   }
 
   .dropdown-menu li:last-child {
-    border: none;
+    border: 0;
     border-bottom-left-radius: $base-border-radius;
     border-bottom-right-radius: $base-border-radius;
   }