refills 0.0.1

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

@@ -0,0 +1,101 @@
+$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;  
+		}
+	}
+}

data/source/stylesheets/refills/_accordion.scss

@@ -0,0 +1,51 @@
+.accordion-menus {
+  $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);
+  $accordion-menu-hover: lighten($accordion-menu-background, 10);
+  $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;
+  background-color: $accordion-menu-background;
+  border: $accordion-menu-border;
+
+  li {
+    border-bottom: $accordion-menu-border;
+
+    > a {
+      padding: $accordion-menu-list-padding;
+      display: block;
+    }
+
+    &:last-child {
+      border: none;
+    }
+
+    &:hover {
+      background-color: $accordion-menu-hover;
+    }
+  }
+
+  ul.submenu {
+    display: none;
+
+    li {
+      background-color: $accordion-menu-sub-background;
+
+      &:first-child {
+        border-top: $accordion-menu-border;
+        box-shadow: inset 0 1px 1px $accordion-menu-sub-inset;
+      }
+
+      &:hover {
+        background-color: $accordion-menu-sub-hover;
+      }
+    }
+  }
+
+  .is-expanded {
+    display: block;
+    padding-bottom: 0;
+  }
+}

data/source/stylesheets/refills/_badges.scss

@@ -0,0 +1,37 @@
+$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;
+
+.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;
+
+  &.dark {
+    background: $badge-dark-color;
+  }
+
+  &.error {
+    background: $badge-error-color;
+    color: darken($badge-error-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

@@ -0,0 +1,77 @@
+.breadcrumb { 
+  $breadcrumb-border-color: $base-border-color;
+  $breadcrumb-border: 1px solid $breadcrumb-border-color;
+  $breadcrumb-height: 2em;
+  $breadcrumb-arrow-color: $breadcrumb-border-color;
+  $breadcrumb-background: $base-body-color;
+  $breadcrumb-inactive-hover-color: darken($breadcrumb-border-color, 5);
+
+  margin: 0;
+  padding: 0;
+  border-radius: $base-border-radius;
+  display: inline-block;
+
+  a {
+    color: $base-font-color;
+    background-color: $breadcrumb-background;
+    border: $breadcrumb-border;
+    display: inline-block;
+    line-height: $breadcrumb-height;
+    text-decoration: none;
+    padding: 0 $breadcrumb-height/2 0 $breadcrumb-height/1.5;
+    position: relative;
+    margin-right: -5px;
+
+    &:first-child {
+      padding-left: $breadcrumb-height/2;
+      border-top-left-radius: $base-border-radius;
+      border-bottom-left-radius: $base-border-radius;
+    }
+
+    &:last-child {
+      font-weight: bold;
+      background-color: $breadcrumb-background;
+      padding-right: $breadcrumb-height/2;
+      border-top-right-radius: $base-border-radius;
+      border-bottom-right-radius: $base-border-radius;
+    }
+
+    &:hover {
+      background-color: $breadcrumb-inactive-hover-color;
+    }
+
+    &:hover:after {
+      border-left-color: $breadcrumb-inactive-hover-color;;
+    }
+
+    &:after,
+    &:before { 
+      content: ''; 
+      display: block; 
+      border-top: $breadcrumb-height/2 solid transparent;
+      border-bottom: $breadcrumb-height/2 solid transparent;
+      border-left: $breadcrumb-height/4 solid transparent;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      left: 100%;
+      z-index: 2;
+    }
+
+    &:last-child:after,
+    &:last-child:before {
+       border: none;
+    }
+
+    &:before { 
+      border-left-color: $breadcrumb-arrow-color;
+      margin-left: 1px;
+      z-index: 1;
+    }
+    &:after { 
+      border-left-color: $breadcrumb-background;
+    }
+  }
+}
+

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

@@ -0,0 +1,33 @@
+$button-group-background: lighten($light-gray, 10);
+$button-group-border-highlight: white;
+$button-group-active: $blue;
+
+.button-group {
+  @include clearfix;
+  
+  button {
+    @include button(simple, $button-group-background);
+    font-size: $base-font-size;
+    outline: none;
+    float: left;
+
+    &.active {
+      @include button(simple, $button-group-active);
+      font-size: $base-font-size;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &: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;
+    }
+  }
+}

data/source/stylesheets/refills/_cards.scss

@@ -0,0 +1,64 @@
+.cards {
+  $card-border-color: $base-border-color;
+  $card-border: 1px solid $card-border-color;
+  $card-color: lighten($card-border-color, 10);
+  $card-header-color: $card-color;
+  $card-hover-color: darken($card-color, 5);
+
+  @include clearfix;
+  cursor: pointer;
+  margin-bottom: 1em;
+
+  .card {
+    height: 190px;
+    border: $card-border;
+    background-color: $card-color;
+    border-radius: $base-border-radius;
+    margin-bottom: $base-line-height;
+
+    @include media($medium-screen) {
+      @include span-columns(4 of 12);
+    }
+
+    .card-header {
+      background-color: $card-header-color;
+      border-bottom: $card-border;
+      border-top-left-radius: $base-border-radius;
+      border-top-right-radius: $base-border-radius;
+      font-weight: bold;
+      padding: 0.5em 1em;
+    }
+
+    .card-content {
+      padding-left: 1em;
+      padding-right: 1em;
+      padding-top: 1em;
+      
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }  
+    }
+
+    h3 {
+      font-weight: 800;
+    }
+
+    &:hover {
+      background-color: $card-hover-color;
+      .card-header {
+        background-color: $card-hover-color;
+      }
+    }
+
+    &:active {
+      background-color: $card-color;
+      .card-header {
+        background-color: $card-color;
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_dashboard.scss

@@ -0,0 +1,33 @@
+.dashboard {
+	@include clearfix;
+	background-color: $light-gray;
+	border-radius: $base-border-radius;
+	width: 100%;
+	padding: 1em;
+	
+	.dashboard-item {
+		@include span-columns(3);
+		h1 {
+			font-size: $base-font-size * 5;
+			text-align: center;
+			font-weight: 200;
+			margin: 0;
+
+			span {
+				font-size: $base-font-size/2;
+				margin: 5px;
+				font-weight: 300;
+			}
+		}
+
+		p {
+			border-top: 1px solid;
+			text-transform: uppercase;
+			font-weight: bold;
+			padding-top: 1em;
+			text-align: center;
+			margin-left: 3em;
+			margin-right: 3em;
+		}
+	}
+}

data/source/stylesheets/refills/_dropdown-menu.scss

@@ -0,0 +1,65 @@
+@mixin ui-dropdown($align: center, $width: 180px, $style: null) {
+
+  @if $style == null {
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid rgb(150,150,150);
+    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
+    margin: 0px;
+    padding: 1px;
+    text-align: left;
+
+    ul, ol {
+      margin: 0px;
+      overflow: scroll;
+      padding: 0px;
+
+      > li {
+        list-style: none;
+
+        > a {
+          display: block;
+          margin: 2px 0px;
+          padding: 6px 15px;
+          text-decoration: none;
+
+          &:hover {
+            background: rgb(248,248,248);
+          }
+        }
+      }
+    }
+  }
+
+  @else {
+    @extend %#{$style};
+  }
+
+  display: none;
+  position: absolute;
+  width: $width;
+  z-index: 20;
+
+  // position the dropdown absolute to its container
+  @if $align == center {
+    left: 50%;
+    margin-left: -($width/2);
+  }
+  @else {
+    #{$align}: 0%;
+  }
+}
+
+.dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.dropdown-link {
+  @include button(simple, $base-accent-color);
+  font-size: $base-font-size;
+}
+
+.dropdown-menu {
+  @include ui-dropdown(left, 11.25em);
+}