refills 0.0.1 → 0.0.2

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

@@ -1,101 +1,98 @@
-$tab-border-color: $base-border-color;
-$tab-border: 1px solid $tab-border-color;
-
-$tab-content-color: lighten($tab-border-color, 10);
-
-$tab-active-color: $tab-content-color;
-$tab-inactive-color: $base-body-color;
-$tab-inactive-hover-color: darken($light-gray, 5);
-
-.accordion-tabs { // small screens: accordion
-
-	@include clearfix;
-	width: 100%;
-	margin-bottom: $base-line-height;
-	border: $tab-border;
-	border-radius: $base-border-radius;
-
-	li {
-		list-style: none; 
-		display: block;
-
-		&:first-child a {
-			border-top: 0;
-			border-top-right-radius: $base-border-radius; 
-			border-top-left-radius: $base-border-radius; 
-		}
-
-		&:last-child a {
-			border-bottom-right-radius: $base-border-radius; 
-			border-bottom-left-radius: $base-border-radius; 
-		}
-
-		a {
-			display: block;
-			padding: 0.5em 1em;
-			font-weight: bold;
-			background-color: $tab-inactive-color;
-			text-decoration: none;
-			color: $dark-gray;
-			border-top: $tab-border;
-
-			&:hover {
-				color: $base-link-color;
-			} 
-
-			&.active {
-				background-color: $tab-active-color;
-				border-bottom: 0;
-			}
-		}
-
-		section {
-			padding: 1em;
-			display: none; 
-			background-color: $tab-content-color;
-			overflow: hidden; 
-		}
-	}
-}
-
-@include media($medium-screen) { // turns into tabs
-	.accordion-tabs {
-		position: relative; 
-		border: none; 
-
-		li { 
-			display: inline; 
-
-			&:last-child a {
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			a {
-				display: inline-block; 
-				border-top: 0;
-				border-top-right-radius: $base-border-radius; 
-				border-top-left-radius: $base-border-radius; 
-
-				&.active {
-					background-color: $tab-active-color;
-					border-bottom: 1px solid $tab-active-color;
-					margin-bottom: -1px;
-					
-					border-top: $tab-border;
-					border-left: $tab-border;
-					border-right: $tab-border;
-				}
-			}
-		}
-
-		section { 
-			padding: 1em;
-			border: $tab-border;
-			border-bottom-left-radius: $base-border-radius; 
-			border-bottom-right-radius: $base-border-radius; 
-			float: left;
-			left: 0;  
-		}
-	}
+.accordion-tabs {
+  $tab-border-color: $base-border-color;
+  $tab-border: 1px solid $tab-border-color;
+  $tab-content-background: lighten($light-gray, 10);
+  $tab-active-background: $tab-content-background;
+  $tab-inactive-color: $base-body-color;
+  $tab-inactive-hover-color: darken($light-gray, 5);
+  $tab-mode: $medium-screen;
+
+  @include clearfix;
+  border: $tab-border;
+  border-radius: $base-border-radius;
+  margin-bottom: $base-line-height;
+
+  @include media($tab-mode) {
+    border: none;
+  }
+
+  li.tab-header-and-content {
+
+    @include media($tab-mode) {
+      display: inline;
+    }
+
+    &:first-child a.tab-link {
+      border-top-left-radius: $base-border-radius; 
+      border-top-right-radius: $base-border-radius; 
+      border-top: 0;
+    }
+
+    &:last-child a.tab-link {
+      border-bottom-left-radius: $base-border-radius; 
+      border-bottom-right-radius: $base-border-radius; 
+
+      @include media($tab-mode) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  li.tab-header-and-content a.tab-link {
+    background-color: $tab-inactive-color;
+    border-top: $tab-border;
+    color: $dark-gray;
+    display: block;
+    font-weight: bold;
+    padding: $base-line-height/2 $gutter/2;
+
+    @include media($tab-mode) {
+      @include inline-block;
+      border-top: 0;
+      border-top-right-radius: $base-border-radius;
+      border-top-left-radius: $base-border-radius;
+    }
+
+    &:hover {
+      color: $base-link-color;
+    }
+
+    &:focus { 
+      outline: none; 
+    }
+
+    &.is-active {
+      background-color: $tab-active-background;
+      border-bottom: 0;
+
+      @include media($tab-mode) {
+        background-color: $tab-active-background;
+        border: $tab-border;
+        border-bottom: 1px solid $tab-active-background;
+        margin-bottom: -1px;
+      }
+    }
+  }
+
+  li.tab-header-and-content section {
+    padding: $base-line-height $gutter;
+    background: $tab-content-background;
+    display: none;
+    overflow: hidden;
+    width: 100%;
+
+    @include media($tab-mode) {
+      border-bottom-left-radius: $base-border-radius;
+      border-bottom-right-radius: $base-border-radius;
+      border: $tab-border;
+      float: left;
+      left: 0;
+      padding: $base-line-height/2 $gutter/2;
+
+      p {
+        @include columns(2);
+      }
+    }
+  }
 }

data/source/stylesheets/refills/_accordion.scss

@@ -1,4 +1,4 @@
-.accordion-menus {
+.accordion {
   $accordion-menu-border-color: $base-border-color;
   $accordion-menu-border: 1px solid $accordion-menu-border-color;
   $accordion-menu-background: lighten($accordion-menu-border-color, 10);
@@ -6,9 +6,11 @@
   $accordion-menu-sub-background: darken($accordion-menu-background, 5);
   $accordion-menu-sub-inset: darken($accordion-menu-sub-background, 6);
   $accordion-menu-sub-hover: darken($accordion-menu-sub-background, 5);
-  $accordion-menu-list-padding: 0.5em;
+  $accordion-menu-list-padding: $base-line-height/2 $gutter;
+  
   background-color: $accordion-menu-background;
   border: $accordion-menu-border;
+  margin-bottom: $base-line-height;
 
   li {
     border-bottom: $accordion-menu-border;

data/source/stylesheets/refills/_badges.scss

@@ -1,37 +1,44 @@
-$badge-color: $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;
+.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 {
-  background: $badge-color;
-  border-radius: 2em;
-  color: $badge-font-color;
-  font-size: $badge-font-size;
-  font-weight: 600;
-  line-height: 1;
-  padding: 0 .5em;
-  text-align: center;
+  display: block;
+  margin-bottom: $base-line-height;
 
-  &.dark {
-    background: $badge-dark-color;
-  }
+  .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;
 
-  &.error {
-    background: $badge-error-color;
-    color: darken($badge-error-color, 60);
-  }
+    &.dark {
+      background: $badge-dark-color;
+    }
 
-  &.notice {
-    background: $badge-notice-color;
-    color: darken($badge-error-color, 60);
-  }
+    &.error {
+      background: $badge-error-color;
+      color: darken($badge-error-color, 60);
+    }
 
-  &.success {
-    background: $badge-success-color;
-    color: darken($badge-success-color, 60);
+    &.notice {
+      background: $badge-notice-color;
+      color: darken($badge-error-color, 60);
+    }
+
+    &.success {
+      background: $badge-success-color;
+      color: darken($badge-success-color, 60);
+    }
   }
 }
+

data/source/stylesheets/refills/_breadcrumbs.scss

@@ -1,26 +1,30 @@
 .breadcrumb { 
   $breadcrumb-border-color: $base-border-color;
   $breadcrumb-border: 1px solid $breadcrumb-border-color;
-  $breadcrumb-height: 2em;
+  $breadcrumb-height: $base-line-height * 1.5;
   $breadcrumb-arrow-color: $breadcrumb-border-color;
   $breadcrumb-background: $base-body-color;
-  $breadcrumb-inactive-hover-color: darken($breadcrumb-border-color, 5);
+  $breadcrumb-inactive-hover-color: $breadcrumb-background;
+  $breadcrumb-color: $medium-gray;
+  $breadcrumb-color-hover: $base-accent-color;
+  $breadcrumb-color-active: $breadcrumb-color;
 
-  margin: 0;
-  padding: 0;
-  border-radius: $base-border-radius;
-  display: inline-block;
+  @include inline-block;
+  text-align: left;
+  margin-bottom: $base-line-height;
 
   a {
-    color: $base-font-color;
+    @include inline-block;
     background-color: $breadcrumb-background;
     border: $breadcrumb-border;
-    display: inline-block;
+    color: $breadcrumb-color;
     line-height: $breadcrumb-height;
-    text-decoration: none;
-    padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
-    position: relative;
     margin-right: -5px;
+    font-size: .8em;
+    padding: 0 $breadcrumb-height/4 0 $breadcrumb-height/2;
+    position: relative;
+    text-decoration: none;
+    margin-bottom: 2px;
 
     &:first-child {
       padding-left: $breadcrumb-height/2;
@@ -29,14 +33,15 @@
     }
 
     &:last-child {
-      font-weight: bold;
       background-color: $breadcrumb-background;
-      padding-right: $breadcrumb-height/2;
-      border-top-right-radius: $base-border-radius;
+      color: $breadcrumb-color-active;
       border-bottom-right-radius: $base-border-radius;
+      border-top-right-radius: $base-border-radius;
+      padding-right: $breadcrumb-height/2;
     }
 
     &:hover {
+      color: $breadcrumb-color-hover;
       background-color: $breadcrumb-inactive-hover-color;
     }
 
@@ -45,17 +50,14 @@
     }
 
     &:after,
-    &:before { 
-      content: ''; 
-      display: block; 
-      border-top: $breadcrumb-height/2 solid transparent;
+    &:before {
+      @include position(absolute, 0px auto 0px 100%);
       border-bottom: $breadcrumb-height/2 solid transparent;
       border-left: $breadcrumb-height/4 solid transparent;
-      position: absolute;
+      border-top: $breadcrumb-height/2 solid transparent;
+      content: '';
+      display: block;
       margin: auto;
-      top: 0;
-      bottom: 0;
-      left: 100%;
       z-index: 2;
     }
 
@@ -64,14 +66,19 @@
        border: none;
     }
 
-    &:before { 
+    &:before {
       border-left-color: $breadcrumb-arrow-color;
       margin-left: 1px;
       z-index: 1;
     }
-    &:after { 
+    &:after {
       border-left-color: $breadcrumb-background;
     }
+
+    @include media($medium-screen) {
+      font-size: 1em;
+      padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
+    }
   }
 }
 

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

@@ -1,33 +1,57 @@
-$button-group-background: lighten($light-gray, 10);
-$button-group-border-highlight: white;
-$button-group-active: $blue;
-
 .button-group {
-  @include clearfix;
-  
+  $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;
-    float: left;
+    width: 100%;
+    display: block;
+    border-top-width: 0;
 
     &.active {
       @include button(simple, $button-group-active);
+      font-weight: 400;
       font-size: $base-font-size;
     }
 
     &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      @include border-bottom-radius(0);
+      border-top-width: 1px;
     }
+
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      border-left: 1px solid $button-group-border-highlight;
     }
+
     &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 1px solid $button-group-border-highlight;
+      @include border-top-radius(0);
+    }
+
+    @include media($medium-screen) {
+      width: auto;
+      float: left;
+      border-top-width: 1px;
+
+      &:first-child {
+        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 {
+        border-left: 1px solid $button-group-border-highlight;
+        border-bottom-left-radius: 0;
+      }
     }
   }
-}
+}