refills 0.0.2 → 0.1.0

data/source/stylesheets/refills/_animate.scss

@@ -0,0 +1,78 @@
+$base-accent-color: #477dca !default;
+
+.animated {
+  @include animation-duration(1s);
+  @include animation-fill-mode(both);
+
+  &.infinite {
+    @include animation-iteration-count(infinite);
+  }
+
+  &.alternate {
+    @include animation-direction(alternate);
+  }
+
+  &.iteration {
+    @include animation-iteration-count(2);
+  }
+}
+
+// Tweak the keyframes below. Or swap them with another animation pattern at 
+// https://github.com/daneden/animate.css/tree/master/source
+
+@-webkit-keyframes zoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+          animation-name: zoomOut;
+}
+
+/////////////////////////////////////////////////////////////
+
+.animate-target {
+  @include size(6em);
+  -webkit-transform-style: preserve-3d;
+  border-radius: 50%;
+  border: 22px solid #e2e2e3;
+  margin: 0 auto 3em;
+  text-align: center;
+}
+
+button {
+  @include button(flat, $base-accent-color);
+  display: block;
+  margin: auto;
+  outline: none;
+  padding: 0.8em 1em;
+  text-align: center;
+}

data/source/stylesheets/refills/_badges.scss

@@ -1,44 +1,37 @@
-.badges {
-  $badge-background: $medium-gray;
-  $badge-dark-color: $dark-gray;
-  $badge-error-color: $error-color;
-  $badge-notice-color: $notice-color;
-  $badge-success-color: $success-color;
-  $badge-font-color: #fff;
-  $badge-font-size: $base-font-size * .75;
+$badge-font-size: 0.75em !default;
+$medium-gray: #999 !default;
+$alert-color: #fff6bf !default;
+$error-color: #fbe3e4 !default;
+$notice-color: #e5edf8 !default;
+$success-color: #e6efc2 !default;
 
-  display: block;
-  margin-bottom: $base-line-height;
-
-  .badge {
-    @include inline-block;
-    background: $badge-background;
-    border-radius: 2em;
-    color: $badge-font-color;
-    font-size: $badge-font-size;
-    font-weight: 600;
-    line-height: 1;
-    padding: .25em 1em;
-    text-align: center;
+@mixin badge($color: $medium-gray) {
+  background-color: $color;
+  border-radius: $badge-font-size * 5;
+  color: darken($color, 60%);
+  display: inline-block;
+  font-size: $badge-font-size;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.4em 1.2em;
+}
 
-    &.dark {
-      background: $badge-dark-color;
-    }
+.badge {
+  @include badge;
+}
 
-    &.error {
-      background: $badge-error-color;
-      color: darken($badge-error-color, 60);
-    }
+.badge-alert {
+  @include badge($alert-color);
+}
 
-    &.notice {
-      background: $badge-notice-color;
-      color: darken($badge-error-color, 60);
-    }
+.badge-error {
+  @include badge($error-color);
+}
 
-    &.success {
-      background: $badge-success-color;
-      color: darken($badge-success-color, 60);
-    }
-  }
+.badge-notice {
+  @include badge($notice-color);
 }
 
+.badge-success {
+  @include badge($success-color);
+}

data/source/stylesheets/refills/_breadcrumbs.scss

@@ -1,60 +1,71 @@
-.breadcrumb { 
+.breadcrumb {   
+  ///////////////////////////////////////////////////////////////////////////////////
+  $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;
+  $medium-gray: #999 !default;
+  $light-gray: #DDD !default;
+  $medium-screen: em(640) !default;
+  //////////////////////////////////////////////////////////////////////////////////
+
   $breadcrumb-border-color: $base-border-color;
   $breadcrumb-border: 1px solid $breadcrumb-border-color;
-  $breadcrumb-height: $base-line-height * 1.5;
+  $breadcrumb-height: $base-spacing * 1.5;
   $breadcrumb-arrow-color: $breadcrumb-border-color;
-  $breadcrumb-background: $base-body-color;
+  $breadcrumb-background: $base-background-color;
   $breadcrumb-inactive-hover-color: $breadcrumb-background;
   $breadcrumb-color: $medium-gray;
   $breadcrumb-color-hover: $base-accent-color;
   $breadcrumb-color-active: $breadcrumb-color;
 
-  @include inline-block;
+  display: inline-block;
+  margin-bottom: $base-spacing;
   text-align: left;
-  margin-bottom: $base-line-height;
 
   a {
-    @include inline-block;
     background-color: $breadcrumb-background;
+    border-left: 0;
     border: $breadcrumb-border;
     color: $breadcrumb-color;
+    display: inline-block;
+    font-size: 0.8em;
     line-height: $breadcrumb-height;
+    margin-bottom: 2px;
     margin-right: -5px;
-    font-size: .8em;
-    padding: 0 $breadcrumb-height/4 0 $breadcrumb-height/2;
+    padding: 0 ($breadcrumb-height / 4) 0 ($breadcrumb-height / 2);
     position: relative;
     text-decoration: none;
-    margin-bottom: 2px;
 
     &:first-child {
-      padding-left: $breadcrumb-height/2;
-      border-top-left-radius: $base-border-radius;
       border-bottom-left-radius: $base-border-radius;
+      border-left: $breadcrumb-border;
+      border-top-left-radius: $base-border-radius;
+      padding-left: $breadcrumb-height / 2;
     }
 
     &:last-child {
       background-color: $breadcrumb-background;
-      color: $breadcrumb-color-active;
       border-bottom-right-radius: $base-border-radius;
       border-top-right-radius: $base-border-radius;
-      padding-right: $breadcrumb-height/2;
+      color: $breadcrumb-color-active;
+      padding-right: $breadcrumb-height / 2;
     }
 
+    &:focus,
     &:hover {
-      color: $breadcrumb-color-hover;
       background-color: $breadcrumb-inactive-hover-color;
-    }
-
-    &:hover:after {
-      border-left-color: $breadcrumb-inactive-hover-color;;
+      color: $breadcrumb-color-hover;
     }
 
     &:after,
     &:before {
       @include position(absolute, 0px auto 0px 100%);
-      border-bottom: $breadcrumb-height/2 solid transparent;
-      border-left: $breadcrumb-height/4 solid transparent;
-      border-top: $breadcrumb-height/2 solid transparent;
+      border-bottom: $breadcrumb-height / 2 solid transparent;
+      border-left: $breadcrumb-height / 4 solid transparent;
+      border-top: $breadcrumb-height / 2 solid transparent;
       content: '';
       display: block;
       margin: auto;
@@ -77,7 +88,7 @@
 
     @include media($medium-screen) {
       font-size: 1em;
-      padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
+      padding: 0 ($breadcrumb-height / 2) 0 ($breadcrumb-height / 1.5);
     }
   }
 }

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

@@ -1,57 +1,96 @@
-.button-group {
-  $button-group-background: $base-body-color;
-  $button-group-color: lighten($base-font-color, 30);
-  $button-group-border-highlight: lighten($button-group-background, 15);
-  $button-group-active: $base-accent-color;
-
-  button {
-    @include button(simple, $button-group-background);
-    font-weight: 400;
-    color: $button-group-color;
-    font-size: $base-font-size;
-    outline: none;
-    width: 100%;
-    display: block;
-    border-top-width: 0;
-
-    &.active {
-      @include button(simple, $button-group-active);
-      font-weight: 400;
-      font-size: $base-font-size;
-    }
+.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;
+  $dark-gray: #333 !default;
+  $large-screen: em(860) !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-color-checked: white;
+  $button-group-border-checked: darken($button-group-background-checked, 15%);
+
+  input {
+    display: none;
+  }
 
-    &:first-child {
-      @include border-bottom-radius(0);
-      border-top-width: 1px;
+  label {
+    margin-bottom: 0;
+
+    @include media($large-screen) {
+      float: left;
     }
 
-    &:not(:first-child):not(:last-child) {
+    .button-group-item {
+      background: $button-group-background;
+      border-left: $button-group-border;
       border-radius: 0;
-    }
+      border-right: $button-group-border;
+      color: $button-group-color;
+      cursor: pointer;
+      display: inline-block;
+      font-size: $base-font-size;
+      font-weight: normal;
+      line-height: 1;
+      padding: 0.75em 1em;
+      width: 100%;
 
-    &:last-child {
-      @include border-top-radius(0);
+      @include media($large-screen) {
+        border-bottom: $button-group-border;
+        border-left: 0;
+        border-right: $button-group-inner-border;
+        border-top: $button-group-border;
+        width: auto;
+      }
+
+      &:focus,
+      &:hover {
+        background-color: darken($button-group-background, 3%);
+      }
     }
 
-    @include media($medium-screen) {
-      width: auto;
-      float: left;
-      border-top-width: 1px;
+    &:first-child .button-group-item {
+      border-top-left-radius: $base-border-radius;
+      border-top-right-radius: $base-border-radius;
+      border-top: $button-group-border;
 
-      &:first-child {
+      @include media($large-screen) {
+        border-bottom-left-radius: $base-border-radius;
+        border-left: $button-group-border;
+        border-top-left-radius: $base-border-radius;
         border-top-right-radius: 0;
-        border-bottom-left-radius: 3px;
       }
+    }
 
-      &:not(:first-child):not(:last-child) {
-        border-left: 1px solid $button-group-border-highlight;
-        border-radius: 0;
-      }
+    &:last-child .button-group-item {
+      border-bottom-left-radius: $base-border-radius;
+      border-bottom-right-radius: $base-border-radius;
+      border-bottom: $button-group-border;
 
-      &:last-child {
-        border-left: 1px solid $button-group-border-highlight;
+      @include media($large-screen) {
         border-bottom-left-radius: 0;
+        border-bottom-right-radius: $base-border-radius;
+        border-right: $button-group-border;
+        border-top-right-radius: $base-border-radius;
       }
     }
+
+    input:checked + .button-group-item {
+      background: $button-group-background-checked;
+      border: 1px solid $button-group-border-checked;
+      box-shadow: inset 0 1px 2px darken($button-group-background-checked, 10%);
+      color: $button-group-color-checked;
+    }
   }
 }

data/source/stylesheets/refills/_cards.scss

@@ -1,66 +1,52 @@
 .cards {
-  @include clearfix;
+  @include display(flex);
+  @include flex-wrap(wrap);
+  @include 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;
+  $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-background: lighten($card-border-color, 10%);
   $card-header-background: $card-background;
-  $card-hover-background: lighten($card-background, 5);
+  $card-hover-background: lighten($card-background, 5%);
   $card-image-background: #DBD199;
-  $card-image-hover-background: lighten($card-image-background, 5);
-  $card-stats-color: lighten($base-accent-color, 10);
+  $card-image-hover-background: lighten($card-image-background, 5%);
+  $card-margin: 1em;
 
+  @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;
-  margin-bottom: $base-line-height;
+  box-shadow: 0 2px 4px darken($base-background-color, 10%);
   cursor: pointer;
-  box-shadow: 0 2px 4px darken($base-body-color, 10);
+  margin: 0 $card-margin $base-spacing $card-margin;
+  position: relative;
   position: relative;
-
-  @include media($large-screen) {
-    @include span-columns(4);  
-    @include omega(3n);
-  }
 
   .card-image {
     overflow: hidden;
     max-height: 150px;
 
     img {
-      width: 100%;
       @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;
-    }
-  }
-
-  .ribbon-wrapper {
-    $ribbon-size: 85px;
-    $ribbon-background: $base-accent-color;
-    @include size($ribbon-size);
-    overflow: hidden;
-    position: absolute;
-    top: -1px;
-    right: -1px;
-
-    .ribbon {
-      font-size: .8em;
-      font-weight: 800;
-      text-align: center;
-      @include transform(rotate(45deg));
-      position: relative;
-      padding: 2px 7px;
-      left: -5px;
-      top: 15px;
-      width: 120px;
-      background-color: $ribbon-background;
-      color: white;
-      box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+      width: 100%;
     }
   }
 
@@ -70,46 +56,21 @@
     border-bottom: $card-border;
     border-radius: $base-border-radius $base-border-radius 0 0;
     font-weight: bold;
-    padding: $base-line-height/3 $gutter/2;
+    line-height: 1.5em;
+    padding: ($base-spacing / 3) ($base-spacing / 2);
   }
 
   .card-copy {
-    padding: $base-line-height/2 $gutter/2;
-    font-size: .9em;
+    font-size: 0.9em;
     line-height: 1.5em;
-  }
-
-  .card-stats {
-    padding: $base-line-height/2 $gutter/2;
-    overflow: auto;
-
-    ul li {
-      display: inline;
-      color: $card-stats-color;
-      font-weight: 800;
-      font-size: 1.2em;
-      float: left;
-      border-right: 1px solid transparentize($base-font-color, .8);
-      line-height: 1.1em;
-      padding: 0 .7em 0 .7em;
+    padding: ($base-spacing / 2) ($base-spacing / 2);
 
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        border-right: 0;
-      }
-
-      span {
-        color: $base-font-color;
-        font-size: .7em;
-        display: block;
-        font-weight: normal;
-      }
+    p {
+      margin: 0 0 ($base-spacing / 2);
     }
   }
-
+  
+  &:focus,
   &:hover {
     background-color: $card-hover-background;