refills 0.1.0 → 0.2.0

data/source/stylesheets/_refills-variables.scss

@@ -0,0 +1,20 @@
+$refills-serif: "Lusitana", $font-stack-georgia;
+$refills-narrow-sans: "Oswald", sans-serif;
+$refills-second-serif: $font-stack-georgia;
+
+$refills-nav-height: 60px;
+
+$refills-body-background-color: #fff;
+$refills-color: lighten(desaturate(teal, 60%), 40%);
+$refills-accent-color: #477dca;
+$refills-logo-color: #93e9be;
+$refills-anchor-color: #f55481;
+$refills-hero-background: #e7f1ec;
+$refills-secondary-anchor-color: darken($refills-hero-background, 35%);
+$refills-highlight-color: #bbb295;
+$refills-white-shadow: 0 1px 1px transparentize(#fff, 0.6);
+
+$refills-max-width: 68em;
+
+$refills-medium-screen: 40em;
+$refills-large-screen: 53.75em;

data/source/stylesheets/all.css.scss

@@ -0,0 +1,78 @@
+@import "vendor/normalize.css";
+@import "vendor/fixedsticky.css";
+@import "vendor/prism.css";
+
+@import "bourbon";
+@import "neat";
+
+@import "refills-variables";
+@import "refills-styles";
+@import "refills-header";
+@import "refills-menu";
+@import "refill";
+@import "refills-footer";
+@import "bourbon-nav";
+@import "refills-nav";
+
+.refills-patterns {
+  @import "refills/accordion-tabs";
+  @import "refills/accordion-tabs-minimal";
+  @import "refills/cards";
+  @import "refills/centered-navigation";
+  @import "refills/comment";
+  @import "refills/device";
+  @import "refills/flex-boxes";
+  @import "refills/footer";
+  @import "refills/footer-2";
+  @import "refills/grid-items";
+  @import "refills/grid-items-lines";
+  @import "refills/hero";
+  @import "refills/icon-bullet-points";
+  @import "refills/logo-section";
+  @import "refills/maps";
+  @import "refills/navigation";
+  @import "refills/scroll-on-page";
+  @import "refills/search-tools";
+  @import "refills/side-image";
+  @import "refills/tables";
+  @import "refills/tables-minimal";
+  @import "refills/vertical-tabs";
+}
+
+.refills-components {
+  @import "refills/accordion";
+  @import "refills/animate";
+  @import "refills/animate-info";
+  @import "refills/badges";
+  @import "refills/breadcrumbs";
+  @import "refills/button-group";
+  @import "refills/dropdown";
+  @import "refills/expander";
+  @import "refills/fade-in";
+  @import "refills/flashes";
+  @import "refills/hover-tile-animation";
+  @import "refills/image-gradient-dynamic";
+  @import "refills/modal";
+  @import "refills/pagination";
+  @import "refills/parallax";
+  @import "refills/progress-bar";
+  @import "refills/progress-bar-indication";
+  @import "refills/ribbon";
+  @import "refills/search-bar";
+  @import "refills/sliding-panel";
+  @import "refills/switch";
+  @import "refills/stats";
+  @import "refills/texture-legend";
+  @import "refills/textures";
+  @import "refills/tooltip";
+  @import "refills/video";
+}
+
+.type-systems {
+  @import "refills/type-system-geometric";
+  @import "refills/type-system-rounded";
+  @import "refills/type-system-sans";
+  @import "refills/type-system-serif";
+  @import "refills/type-system-slab";
+  @import "refills/type-system-traditional";
+}

data/source/stylesheets/refills/_accordion-tabs-minimal.scss

@@ -1,26 +1,22 @@
 .accordion-tabs-minimal {
-  ///////////////////////////////////////////////////////////////////////////////////
-  $base-border-color: gainsboro !default;
-  $base-background-color: white !default;
+  $base-border-color: #dcdcdc !default;
+  $base-background-color: #fff !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;
-  $medium-screen: em(640) !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $medium-screen: 40em !default;
   $tab-link-color: $dark-gray;
   $tab-border: 1px solid $base-border-color;
   $tab-active-background: $base-background-color;
   $tab-inactive-color: $base-background-color;
-  $tab-inactive-hover-color: silver;
+  $tab-inactive-hover-color: #c0c0c0;
   $tab-mode: $medium-screen;
 
   @include clearfix;
   line-height: 1.5;
   padding: 0;
 
-  li.tab-header-and-content {
+  .tab-header-and-content {
     list-style: none;
 
     @include media($tab-mode) {
@@ -28,22 +24,21 @@
     }
   }
 
-  a.tab-link {
+  .tab-link {
     background-color: $tab-inactive-color;
     border-top: $tab-border;
     color: $tab-link-color;
     display: block;
-    font-weight: 400;
     padding: ($base-spacing / 2) $gutter;
     text-decoration: none;
 
     @include media($tab-mode) {
-      @include inline-block;
       border-top: 0;
+      display: inline-block;
     }
 
     &:hover {
-      color: $base-link-color;
+      color: $action-color;
     }
 
     &:focus {

data/source/stylesheets/refills/_accordion-tabs.scss

@@ -1,16 +1,12 @@
 .accordion-tabs {
-  ///////////////////////////////////////////////////////////////////////////////////
-  $base-border-color: gainsboro !default;
+  $base-border-color: #dcdcdc !default;
   $base-border-radius: 3px !default;
-  $base-background-color: white !default;
+  $base-background-color: #fff !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;
   $tab-border: 1px solid $base-border-color;
   $tab-content-background: lighten($light-gray, 10);
   $tab-active-background: $tab-content-background;
@@ -24,8 +20,8 @@
   padding: 0;
 
   @include media(max-width $tab-mode) {
-    border-radius: $base-border-radius;
     border: $tab-border;
+    border-radius: $base-border-radius;
   }
 
   .tab-header-and-content {
@@ -58,18 +54,17 @@
     color: $dark-gray;
     display: block;
     font-weight: bold;
-    padding: $base-spacing/2 $gutter/2;
+    padding: ($base-spacing / 2) ($gutter / 2);
     text-decoration: none;
 
     @include media($tab-mode) {
-      @include inline-block;
-      border-top-left-radius: $base-border-radius;
-      border-top-right-radius: $base-border-radius;
+      @include border-top-radius($base-border-radius);
       border-top: 0;
+      display: inline-block;
     }
 
     &:hover {
-      color: $base-link-color;
+      color: $action-color;
     }
 
     &:focus {
@@ -95,10 +90,10 @@
     width: 100%;
 
     @include media($tab-mode) {
+      border: $tab-border;
       border-bottom-left-radius: $base-border-radius;
       border-bottom-right-radius: $base-border-radius;
       border-top-right-radius: $base-border-radius;
-      border: $tab-border;
       float: left;
     }
   }

data/source/stylesheets/refills/_accordion.scss

@@ -1,33 +1,9 @@
-.accordion {  
-  ///////////////////////////////////////////////////////////////////////////////////
+.accordion {
   $base-border-color: gainsboro !default;
   $base-line-height: 1.5em !default;
   $base-spacing: 1.5em !default;
   $dark-gray: #333 !default;
   $base-font-color: $dark-gray !default;
-  
-  margin: 0;
-  padding: 0;
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-  }
-
-  a {
-    text-decoration: none;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $accordion-menu-border-color: $base-border-color;
   $accordion-menu-color: $base-font-color;
   $accordion-menu-border: 1px solid $accordion-menu-border-color;
@@ -37,22 +13,30 @@
   $accordion-menu-sub-inset: darken($accordion-menu-sub-background, 6%);
   $accordion-menu-sub-hover: lighten($accordion-menu-sub-background, 2%);
   $accordion-menu-list-padding: ($base-spacing / 2) $gutter;
-  
+
   background-color: $accordion-menu-background;
   border: $accordion-menu-border;
-  margin-bottom: $base-spacing;
+  margin: 0 0 $base-spacing 0;
+  padding: 0;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
 
   li {
     border-bottom: $accordion-menu-border;
+    list-style: none;
 
     > a {
       color: $accordion-menu-color;
       display: block;
       padding: $accordion-menu-list-padding;
+      text-decoration: none;
     }
 
     &:last-child {
-      border: none;
+      border: 0;
     }
 
     &:focus,
@@ -71,7 +55,7 @@
         border-top: $accordion-menu-border;
         box-shadow: inset 0 1px 1px $accordion-menu-sub-inset;
       }
-      
+
       &:focus,
       &:hover {
         background-color: $accordion-menu-sub-hover;

data/source/stylesheets/refills/_animate.scss

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

data/source/stylesheets/refills/_badges.scss

@@ -1,37 +1,20 @@
-$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;
+$small-font-size: 0.75em;
+$badges: (
+  "alert": #fff6bf,
+  "default": #999,
+  "error": #fbe3e4,
+  "notice": #e5edf8,
+  "success": #e6efc2,
+) !default;
 
-@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;
-}
-
-.badge {
-  @include badge;
-}
-
-.badge-alert {
-  @include badge($alert-color);
-}
-
-.badge-error {
-  @include badge($error-color);
-}
-
-.badge-notice {
-  @include badge($notice-color);
-}
-
-.badge-success {
-  @include badge($success-color);
+@each $badge-type, $color in $badges {
+  .badge-#{$badge-type} {
+    background-color: $color;
+    border-radius: $small-font-size * 5;
+    color: darken($color, 60%);
+    display: inline-block;
+    font-size: $small-font-size;
+    line-height: 1;
+    padding: 0.4em 1.2em;
+  }
 }

data/source/stylesheets/refills/_breadcrumbs.scss

@@ -1,16 +1,12 @@
-.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;
+  $action-color: #477DCA !default;
   $medium-gray: #999 !default;
   $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
-  //////////////////////////////////////////////////////////////////////////////////
-
+  $medium-screen: 40em !default;
   $breadcrumb-border-color: $base-border-color;
   $breadcrumb-border: 1px solid $breadcrumb-border-color;
   $breadcrumb-height: $base-spacing * 1.5;
@@ -18,7 +14,7 @@
   $breadcrumb-background: $base-background-color;
   $breadcrumb-inactive-hover-color: $breadcrumb-background;
   $breadcrumb-color: $medium-gray;
-  $breadcrumb-color-hover: $base-accent-color;
+  $breadcrumb-color-hover: $action-color;
   $breadcrumb-color-active: $breadcrumb-color;
 
   display: inline-block;
@@ -27,8 +23,8 @@
 
   a {
     background-color: $breadcrumb-background;
-    border-left: 0;
     border: $breadcrumb-border;
+    border-left: 0;
     color: $breadcrumb-color;
     display: inline-block;
     font-size: 0.8em;
@@ -60,29 +56,30 @@
       color: $breadcrumb-color-hover;
     }
 
-    &:after,
-    &:before {
-      @include position(absolute, 0px auto 0px 100%);
+    &::after,
+    &::before {
+      @include position(absolute, 0 auto 0 100%);
       border-bottom: $breadcrumb-height / 2 solid transparent;
       border-left: $breadcrumb-height / 4 solid transparent;
       border-top: $breadcrumb-height / 2 solid transparent;
-      content: '';
+      content: "";
       display: block;
       margin: auto;
       z-index: 2;
     }
 
-    &:last-child:after,
-    &:last-child:before {
-       border: none;
+    &:last-child::after,
+    &:last-child::before {
+       border: 0;
     }
 
-    &:before {
+    &::before {
       border-left-color: $breadcrumb-arrow-color;
       margin-left: 1px;
       z-index: 1;
     }
-    &:after {
+
+    &::after {
       border-left-color: $breadcrumb-background;
     }
 
@@ -92,4 +89,3 @@
     }
   }
 }
-