refills 0.0.1

data/source/stylesheets/refills/_switch-toggle.scss

@@ -0,0 +1,73 @@
+$st-width: 72px;
+$st-rounded-radius: $st-width / 2;
+$st-rectangle-radius: 3px;
+
+.switch-toggle {
+  @include user-select(none);
+  position: relative;
+  width: $st-width;
+
+  input.switch-checkbox {
+    display: none;
+
+    &:checked + .switch-label .switch-inner {
+      margin-left: 0;
+    }
+
+    &:checked + .switch-label .switch-toggle-switch {
+      right: 0;
+    }
+  }
+
+  label.switch-label {
+    border-radius: $st-rounded-radius;
+    cursor: pointer;
+    display: block;
+    overflow: hidden;
+
+    .switch-inner {
+      @include transition(opacity 0.5s ease);
+      border-radius: 3px;
+      margin-left: -100%;
+      width: 200%;
+
+      &:before, &:after {
+        @include box-sizing(border-box);
+        float: left;
+        height: 35px;
+        padding: 0;
+        width: 50%;
+      }
+
+      &:before {
+        content: '';
+        background: $blue;
+      }
+
+      &:after {
+        content: '';
+        background: #DDD;
+      }
+    }
+
+    .switch-toggle-switch {
+      @include size(24px);
+      @include position(absolute, 0px 35px 0px 0);
+      @include transition(all 0.3s ease-in 0s);
+      border-radius: 100%;
+      margin: 6px;
+      background: white;
+      box-shadow: 0 0 1px 2px rgba(0,0,0,0.1);
+    }
+  }
+
+  &.rectangle {
+    label.switch-label {
+      border-radius: $st-rectangle-radius;
+
+      .switch-toggle-switch {
+        border-radius: $st-rectangle-radius;
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_tables.scss

@@ -0,0 +1,80 @@
+.table-borders {
+  $table-border-color: $base-border-color;
+  $table-border: 1px solid $table-border-color;
+  $table-background: lighten($table-border-color, 10);
+  $table-header-color: lighten($table-background, 10);
+  $table-hover-color: darken($table-background, 5);
+  $table-stripe-color: darken($table-background, 4);
+  $table-stripe-color-hover: darken($table-stripe-color, 5);
+  $table-padding: 0.5em;
+  
+  @if lightness($table-background) < 50% {
+    color: white;
+  }
+
+  border-radius: $base-border-radius;
+
+  tbody {
+    background-color: $table-background;
+    tr:hover > td, tr:hover > th {
+      background-color: $table-hover-color;
+    }
+    tr:nth-child(even) {
+      background-color: $table-stripe-color;
+      &:hover > td {
+        background-color: $table-stripe-color-hover;
+      }
+    }
+  }
+
+  thead:first-of-type {
+    tr:first-child > th:first-child {
+      border-top-left-radius: $base-border-radius;
+    }
+
+    tr:first-child > th:last-child {
+      border-top-right-radius: $base-border-radius;
+    }
+  }
+
+  tbody:last-child {
+    tr:last-child > td:first-child {
+      border-bottom-left-radius: $base-border-radius;
+    }
+
+    tr:last-child > td:last-child {
+      border-bottom-right-radius: $base-border-radius;
+    }
+  }
+
+  border: $table-border;
+  border-left: 0px;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    th {
+      background-color: $table-header-color;
+      padding: $table-padding;
+      border-left: 1px solid $table-border-color;
+      border-bottom: 0px;
+    }
+  }
+
+  tbody {
+    background-color: $table-background;
+
+    td {
+      padding: $table-padding;
+      border-left: 1px solid $table-border-color;
+      border-top: 1px solid $table-border-color;
+      border-bottom: 0px;
+
+      button {
+        @include button(simple, $table-background);
+        margin-right: 0.5em;
+        display: inline-block;
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_toggle-cards.scss

@@ -0,0 +1,104 @@
+.course-cards-wrapper {
+  @include outer-container;
+  ul li {
+    @include media($medium-screen) {
+      // @include span-columns(4);
+      // @include omega(3n);
+      width: 33%;
+      float: left;
+      margin-bottom: 1em;
+      
+    }
+  }
+}
+
+
+
+.course-cards {
+  margin: auto;
+  width: 100%;
+  z-index: 999;
+
+  .card {
+    position: relative;
+    cursor: pointer;
+    margin-bottom: 1em;
+    float: left;
+    background-color: red;
+    background-size: 100%;
+    text-align: center;    
+    color: white;
+    padding: 1em;
+    min-height: 20em;
+
+
+
+    &.active {
+      position: relative;
+      .card-bottom h3 {
+        color: white;
+      }
+      .pointer {
+        position: absolute;
+        bottom: 0;
+        left: 48%;
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid white;
+      }
+    }
+  }
+
+  li:last-child .card {
+    // display: none;
+    // position: relative;
+    background-color: green;
+  }
+
+  .card-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: transparentize(black, 0.8);
+    @include transition (all 0.2s ease-in-out);
+
+    &:hover {
+      background-color: transparentize(black, 0.9);
+    }
+    h3 {
+      padding: 2em 0 1.5em 0;
+    }
+  }
+}
+
+.system {
+  display: block;
+
+  li:last-child .card {
+    display: block;
+    @include media(460px) {
+      background-size: 100%;
+    }
+  }
+
+  @include media($large-screen) {
+    display: none;
+  }
+
+  ul, ul li, ul li a {
+    width: 100%;
+    background-size: 100%;  
+    display: block;
+  }
+  ul li {
+    @extend .card;
+    display: block;
+  }
+}
+
+
+
+

data/source/stylesheets/refills/_tooltip.scss

@@ -0,0 +1,81 @@
+$tooltip-color: transparentize($dark-gray, 0.1);
+$tooltip-placement: top; // "top" or "bottom"
+
+@mixin tooltip($position) {
+  position: relative;
+  $opposite-position: bottom;
+
+  @if ($position == top) {
+    $opposite-position: bottom;
+  }
+
+  @else if ($position == bottom) {
+    $opposite-position: top;
+  }
+
+  &:hover {
+    .tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .tooltip {
+    background-color: $tooltip-color;
+    box-sizing: border-box;
+    color: white;
+    font-weight: normal;
+    opacity: 0;
+    padding: 0.5em 1em;
+    border-radius: $base-border-radius;
+    position: absolute;
+    text-align: center;
+    text-overflow: ellipsis;
+    text-shadow: 0 1px 0 darken(rgb(80,80,80), 4%);
+    text-transform: none;
+    transition: all 0.15s linear;
+    white-space: nowrap;
+    visibility: hidden;
+    width: 200px;
+    z-index: 10;
+    #{$position}: -50px;
+    left: 50%;
+    margin-left: -(200px/2);
+
+    &:before,
+    &:after {
+      display: block;
+      pointer-events: none;
+      position: absolute;
+      width: 0;
+      height: 0;
+      content: '';
+      border: 8px solid transparent;
+    }
+
+    &:before {
+      top: auto;
+      bottom: -18px;
+      left: auto;
+      right: auto;
+      left: 50%;
+      margin-left: -(8px + 1);
+    }
+
+    &:after {
+      border-#{$position}-color: $tooltip-color;
+      $position: auto;
+      #{$opposite-position}: -16px;
+      left: auto;
+      right: auto;
+      left: 50%;
+      margin-left: -8px;
+    }
+  }
+}
+
+a.tooltip-item {
+  @include button(simple, lighten($light-gray, 10));
+  @include tooltip($tooltip-placement);
+  font-size: $base-font-size;
+}

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

@@ -0,0 +1,113 @@
+$tab-border-color: $base-border-color;
+$tab-border: 1px solid $tab-border-color;
+$tab-content-background: lighten($tab-border-color, 10);
+$tab-active-color: $tab-content-background;
+$tab-inactive-color: $base-body-color;
+$vertical-tabs-height: em(300);
+
+.vertical-tabs { // small screens: accordion
+  @include clearfix;
+  margin-bottom: $base-line-height;
+  border: $tab-border;
+  border-radius: $base-border-radius;
+
+  .tabs {
+    display: none;
+  }
+
+  .tab-container {
+    display: block;
+    margin: 0 auto;
+
+    .tab-content {
+      padding: 1em;
+      background-color: $tab-content-background;
+
+      &:last-child {
+        border-bottom-left-radius: $base-border-radius;
+        border-bottom-right-radius: $base-border-radius;
+      }
+    }
+  }
+
+  .accordion-heading {
+    padding: $base-line-height/2 $gutter/2;
+    border-top: $tab-border;
+    font-weight: bold;
+    background-color: $tab-inactive-color;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      color: $base-accent-color;
+    }
+
+    &:first-child {
+      border-top: none;
+      border-top-right-radius: $base-border-radius; 
+      border-top-left-radius: $base-border-radius; 
+    }
+
+    &.accordion-active {
+    	background: $tab-active-color;
+    	border-bottom: none;
+  	}
+  }
+
+  @include media($medium-screen) { // turns into tabs
+    .tab-content,
+    .accordion-heading {
+      display: none;
+    }
+
+    .tabs {
+      float: left;
+      width: 20%;
+      height: $vertical-tabs-height; 
+      display: inline; 
+      border-top-left-radius: $base-border-radius;
+      border-bottom-left-radius: $base-border-radius;
+      background-color: $tab-inactive-color;
+
+      .tab {
+        display: block;
+        padding: $base-line-height/2 $gutter/2;
+        font-weight: bold;
+        border-bottom: $tab-border;
+        margin-right: -1px;
+
+        &:hover {
+          color: $base-accent-color;
+        }
+
+        &:first-child.active {
+          border-top-left-radius: $base-border-radius;
+        }
+
+        &.active {
+          background-color: $tab-content-background;
+          margin-right: -1px;
+        }
+      }
+    }
+
+    .tab-container {
+      @include inline-block;
+      @include size(80% $vertical-tabs-height);
+      background-color: $tab-content-background;
+      border-top-right-radius: $base-border-radius;
+      border-bottom-right-radius: $base-border-radius;
+
+      .tab-content {
+        border: none;
+      }
+
+      p {
+        border: none;
+        padding: 0;
+      }
+    }
+  }
+}
+
+// Based on code by Jett Miller jettmiller.net