refills 0.0.1 → 0.0.2

data/source/stylesheets/refills/_progress-bar-indication.scss

@@ -0,0 +1,39 @@
+.progress-bar-indication {
+  $progress-border-color: $base-border-color;
+  $progress-border: 1px solid $progress-border-color;
+  $progress-meter-border-color: $base-accent-color;
+  $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
+  $progress-meter-color: $progress-meter-border-color;
+  $progress-background: darken($base-body-color, 5);
+  $progress-animation-duration: 0.7s;
+  $progress-color: white;
+
+  background-color: $progress-background;
+  border: $progress-border;
+  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
+  border-radius: $base-border-radius;
+  margin: 0 auto;
+  width: 50%;
+
+  > span.meter {
+    @include box-sizing(border-box);
+    background-color: $progress-meter-color;
+    background-size: 40px 40px;
+    background-repeat: repeat-x;
+    border: $progress-meter-border;
+    border-radius: $base-border-radius /1.5;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    display: block;
+    height: 100%;
+    width: 60%;
+  }
+
+  p {
+    margin-bottom: 0;
+    padding: .1em .5em;
+    font-weight: 800;
+    color: $progress-color;    
+    text-shadow: 0 0 1px black;
+  }
+}

data/source/stylesheets/refills/_progress-bar.scss

@@ -6,18 +6,20 @@
   $progress-meter-color: $progress-meter-border-color;
   $progress-background: darken($base-body-color, 5);
   $progress-animation-duration: 0.7s;
+  $progress-height: 30px;
 
   background-color: $progress-background;
   border: $progress-border;
   box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
   border-radius: $base-border-radius;
-  height: 20px;
+  height: $progress-height;
   margin: 0 auto;
   padding: 2px;
-  width: 100%;
+  width: 50%;
 
   > span.meter {
     @include animation(progress $progress-animation-duration linear infinite);
+    @include box-sizing(border-box);
     background-color: $progress-meter-color;
     @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
                                                       transparent 25%,
@@ -29,10 +31,8 @@
     background-repeat: repeat-x;
     border: $progress-meter-border;
     border-radius: $base-border-radius /1.5;
-    @include box-sizing(border-box);
     display: block;
     height: 100%;
-    @include transition(all 0.2s linear);
     width: 60%;
   }
 }

data/source/stylesheets/refills/_search-bar.scss

@@ -3,17 +3,8 @@
   $search-bar-border: 1px solid $search-bar-border-color;
   $search-bar-background: lighten($search-bar-border-color, 10);
 
-  @include clearfix;
-  border: $search-bar-border;
-  background-color: $search-bar-background;
-  border-radius: $base-border-radius;
-  padding: 0.5em;
-  margin-bottom: 1em;
-
-  .search-item {
-    @include fill-parent;
-    position: relative; 
-  }
+  position: relative; 
+  display: inline-block;
 
   input {
     @include box-sizing(border-box);
@@ -26,18 +17,23 @@
     input[type=search] {
       @include appearance(none);
       width: 100%;
-      padding: 1em;
+      padding: .5em .8em;
+      font-size: .9em;
       font-style: italic;
       border-radius: $base-border-radius * 2;
       margin: 0;
     }
 
-    input[type=submit] {
-      @include button(simple, lighten($light-gray, 10));
+    button[type=submit] {
+      @include button(simple, lighten($base-border-color, 10));
       @include position(absolute, 0.3em 0.3em 0.3em 0);
-      font-size: $base-font-size;
-      color: darken($light-gray, 20);
       outline: none;
+      padding: 5px 10px;
+
+      img {
+        height: 12px;
+        opacity: .7;
+      }
     }
   }
-}
+}

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

@@ -1,58 +1,64 @@
 $sliding-menu-border-color: $dark-gray;
 $sliding-menu-background: lighten($sliding-menu-border-color, 5);
-$sliding-menu-color: white;
+$sliding-menu-color: #fff;
 $sliding-menu-border: 1px solid $sliding-menu-border-color;
 $sliding-menu-background-hover: $base-accent-color;
-$sliding-menu-color-hover: white;
+$sliding-menu-color-hover: #fff;
 
-.menu-anchor {
-  @include button(simple, lighten($light-gray, 10));
+.sliding-menu-button {
+  @include button(simple, $base-body-color);
+  @include inline-block;
+  cursor: pointer;
   font-size: $base-font-size;
-  display: inline-block;
+  margin-bottom: $base-line-height;
   position: relative;
-  cursor: pointer;
+  outline: none;
+
+  img {
+    height: 1.3em;
+  }
 }
 
-menu.sliding-menu-content {
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 999999;
-  width: 220px;
-  height: 100%;
-  background: $sliding-menu-background;
+.sliding-menu-content {
+  @include position(fixed, 0px auto 0px 0px);
+  @include size(220px 100%);
   @include transform(translateX(-220px));
   @include transition(all .25s linear);
+  background: $sliding-menu-background;
+  z-index: 999999;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 
   li a {
-    display: block;
     border-bottom: $sliding-menu-border;
-    padding: 1em;
-    font-weight: bold;
     color: $sliding-menu-color;
+    display: block;
+    font-weight: bold;
+    padding: 1em;
+
     &:hover {
       background-color: $sliding-menu-background-hover;
       color: $sliding-menu-color-hover;
     }
   }
-}
 
-.sliding-menu-moving-content, 
-.main {
-  @include transform(translateX(0));
-  @include transition(all .25s linear);
+  &.is-visible {
+    @include transform(translateX(0));
+  }
 }
 
-// .menu-active is added to <html> on click
-.menu-active menu {
-  @include transform(translateX(0));
-}
+.menu-screen {
+  @include position(fixed, 0px 0px 0px 0px);
+  @include transition;
+  background: $sliding-menu-border-color;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 999998;
 
-.menu-active .sliding-menu-moving-content, 
-.menu-active .main {
-  @include transform(translateX(220px));
+  &.is-visible {
+    opacity: .4;
+    visibility: visible;
+  }
 }
 
 // Based on code by Diego Eis

data/source/stylesheets/refills/{_switch-toggle.scss → _switch.scss}

@@ -1,11 +1,15 @@
-$st-width: 72px;
-$st-rounded-radius: $st-width / 2;
-$st-rectangle-radius: 3px;
+.switch-container {
+  $switch-container-width: 5em;
+  $switch-height: 2em;
+  $switch-width: 1em;
+  $switch-radius: 3px;
+  $switch-inner-margin: .2em;
 
-.switch-toggle {
   @include user-select(none);
+  @include inline-block;
   position: relative;
-  width: $st-width;
+  width: $switch-container-width;
+  margin-bottom: $base-line-height;
 
   input.switch-checkbox {
     display: none;
@@ -20,21 +24,20 @@ $st-rectangle-radius: 3px;
   }
 
   label.switch-label {
-    border-radius: $st-rounded-radius;
+    border-radius: $switch-radius;
     cursor: pointer;
     display: block;
     overflow: hidden;
 
     .switch-inner {
-      @include transition(opacity 0.5s ease);
-      border-radius: 3px;
+      @include transition(opacity 0.3s ease);
       margin-left: -100%;
       width: 200%;
 
       &:before, &:after {
         @include box-sizing(border-box);
         float: left;
-        height: 35px;
+        height: $switch-height;
         padding: 0;
         width: 50%;
       }
@@ -51,23 +54,14 @@ $st-rectangle-radius: 3px;
     }
 
     .switch-toggle-switch {
-      @include size(24px);
-      @include position(absolute, 0px 35px 0px 0);
+      @include position(absolute, 0px ($switch-container-width - $switch-width - $switch-inner-margin *2) 0px 0);
       @include transition(all 0.3s ease-in 0s);
-      border-radius: 100%;
-      margin: 6px;
+      height: $switch-height - $switch-inner-margin *2;
+      width: $switch-width;
+      border-radius: $switch-radius / 2;
+      margin: $switch-inner-margin;
       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-minimal.scss

@@ -0,0 +1,54 @@
+.table-minimal {
+  $table-border-color: $base-border-color;
+  $table-border: 1px solid $table-border-color;
+  $table-background: $base-body-color;
+  $table-header-color: lighten($table-background, 10);
+  $table-hover-color: darken($table-background, 2);
+  $table-stripe-color: darken($table-background, 4);
+  $table-stripe-color-hover: darken($table-stripe-color, 5);
+  $table-padding: 0.5em;
+
+  border-collapse: separate;
+  border-spacing: 0;
+
+  tbody {
+    tr:hover > td, tr:hover > th {
+      background-color: $table-hover-color;
+    }
+    tr:first-child td {
+      border-top: 2px solid $table-border-color;
+    }
+  }
+
+  thead {
+    th {
+      background-color: $table-header-color;
+      padding: $table-padding;
+      border-bottom: 0px;
+    }
+  }
+
+  tbody {
+    background-color: $table-background;
+
+    td {
+      padding: $table-padding;
+      border-top: 1px solid $table-border-color;
+      border-bottom: 0px;
+
+      button {
+        @include button(simple, $table-background);
+        margin-right: 0.5em;
+        display: inline-block;
+        width: 100%;
+        margin-bottom: .3em;
+        outline: none;
+
+        @include media($medium-screen) {
+          width: auto;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

data/source/stylesheets/refills/_tables.scss

@@ -7,11 +7,11 @@
   $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: $table-border;
+  border-left: 0px;
+  border-collapse: separate;
+  border-spacing: 0;
   border-radius: $base-border-radius;
 
   tbody {
@@ -47,11 +47,6 @@
     }
   }
 
-  border: $table-border;
-  border-left: 0px;
-  border-collapse: separate;
-  border-spacing: 0;
-
   thead {
     th {
       background-color: $table-header-color;
@@ -74,6 +69,14 @@
         @include button(simple, $table-background);
         margin-right: 0.5em;
         display: inline-block;
+        width: 100%;
+        margin-bottom: .3em;
+        outline: none;
+
+        @include media($medium-screen) {
+          width: auto;
+          margin-bottom: 0;
+        }
       }
     }
   }

data/source/stylesheets/refills/_tooltip.scss

@@ -1,81 +1,49 @@
-$tooltip-color: transparentize($dark-gray, 0.1);
-$tooltip-placement: top; // "top" or "bottom"
-
-@mixin tooltip($position) {
+.tooltip-item {
+  $tooltip-background: transparentize($dark-gray, 0.1);
+  $tooltip-color: white;
+  $tooltip-width: 10em;
+
+  border: 1px solid $base-border-color;
+  padding: .5em 1em;
+  border-radius: $base-border-radius;
   position: relative;
-  $opposite-position: bottom;
-
-  @if ($position == top) {
-    $opposite-position: bottom;
-  }
-
-  @else if ($position == bottom) {
-    $opposite-position: top;
-  }
+  margin-bottom: $base-line-height;
 
-  &:hover {
-    .tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
+  &: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;
+    @include position(absolute, 0 0 0 50%);
+    @include box-sizing(border-box);
+    @include transition (all 0.2s ease-in-out);
+    bottom: 130%;
+    background-color: $tooltip-background;
     border-radius: $base-border-radius;
-    position: absolute;
+    color: $tooltip-color;
+    font-size: .9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
+    line-height: 1.5em;
+    margin-left: -($tooltip-width/2);
+    opacity: 0;
+    padding: .5em 0;
     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;
+    min-width: $tooltip-width;
     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);
+    p {
+      margin-bottom: 0;
     }
 
     &:after {
-      border-#{$position}-color: $tooltip-color;
-      $position: auto;
-      #{$opposite-position}: -16px;
-      left: auto;
-      right: auto;
-      left: 50%;
-      margin-left: -8px;
+      @include size(0);
+      @include position(absolute, 0 0 0 $tooltip-width/2);
+      border: 8px solid transparent;
+      border-top-color: $tooltip-background;
+      content: '';
+      pointer-events: none;
+      bottom: -15px;
     }
   }
 }
-
-a.tooltip-item {
-  @include button(simple, lighten($light-gray, 10));
-  @include tooltip($tooltip-placement);
-  font-size: $base-font-size;
-}