refills 0.0.1

data/source/stylesheets/_refills-styles.scss

@@ -0,0 +1,269 @@
+$refills-color: lighten(desaturate(teal, 60), 40);
+$base-body-color: white;
+
+body {
+  background-color: $base-body-color; 
+}
+
+$refills-nav-height: 60px;
+
+
+
+.refills-header {
+  width: 100%;
+  margin: 0 0 $base-line-height*3;
+  height: $refills-nav-height;
+  background-color: $base-body-color;
+
+  .logo {
+    font-weight: bold;
+    float: left;
+    padding: 0; 
+    text-transform: uppercase;
+    line-height: $refills-nav-height;
+    color: white;
+    background-color: $dark-gray;
+    padding: 0 2em;
+  }
+
+  p {
+    padding-right: 1em;
+    display: block;
+    float: right;
+    margin: 0;
+    line-height: $refills-nav-height;
+    background-color: $base-body-color;
+  }
+
+  &:hover {
+    .nav ul {
+      display: block;
+    }
+  }
+
+  .nav {
+    ul {
+      display: none;
+      -webkit-transform-style: preserve-3d; // stop webkit flicker
+      overflow: hidden;
+      margin: 0 auto;
+      padding: 0;
+      width: 100%;
+
+      li {
+        position: relative;
+        overflow: hidden;
+        display: block;
+        width: 100%;
+        text-align: right;
+        padding: 1em;
+        border-radius: $base-border-radius;
+        line-height: $refills-nav-height;
+        width: 100%;
+        position: relative;
+        display: block;
+        z-index: 99999999;
+        overflow: hidden;
+        font-size: $base-font-size /1.2;
+        font-weight: 200;
+        background-color: $refills-color;
+
+        &:hover {
+          background-color: darken($refills-color, 10);          
+        }
+
+
+        a {
+          padding: 1em;
+          color: white;
+        }
+      }
+    }
+  }
+
+  @include media ($medium-screen) {
+    margin: 2em 0 $base-line-height*3;
+    p {
+      display: none;
+    }
+    .nav {
+      float: right;
+
+      ul {
+        display: block;
+        margin: 0;
+        padding: 0;
+
+        li {
+          display: inline;
+          display: inline;
+          text-decoration: none;
+          line-height: $refills-nav-height;
+          padding-right: 1em;
+        }
+      }
+    }
+  }
+}
+
+/////////////////////////
+
+.refills-wrapper {
+    @include outer-container;
+    padding: 1em;
+
+  h1.main-header {
+    background-color: $refills-color;
+    display: inline-block;
+    padding: 0.5em;
+  }
+
+  .refill {
+    margin-bottom: 2em;
+    padding-bottom: 3em;
+    border-bottom: 2px dashed $light-gray;
+    position: relative;
+
+    > h3 {
+      padding-top: 0.5em;
+      margin-top: 1em;
+      margin-bottom: 1.3em;
+    }
+  }
+}
+
+.js-hide-code {
+  display: none;
+}
+
+.js-show-code {
+  display: block;
+}
+
+pre {
+  display: none;
+  padding: 0;
+  width: 50%;
+  float: left;
+
+  code {
+    max-height: em(400);
+    font-size: $base-font-size/2;  
+    line-height: $base-line-height/2;
+    overflow: scroll;
+  }
+  
+}
+
+.row {
+  @include clearfix;
+
+  .narrow {
+    @include media($medium-screen) {
+      @include span-columns(6);
+      @include omega(2n);  
+    }    
+  }
+}
+
+
+
+@mixin texture($bg-color, $texture-number, $inverted) { $texture-list: "paper.png"             // Fabric and paper
+  "rice_paper.png"
+  "noise_lines.png"
+  "fabric_plaid.png"
+  "first_aid_kit.png"
+  "texturetastic_gray.png"
+  "lil_fiber.png"
+  "tex2res5.png"
+  "skin_side_up.png"
+  "light_noise_diagonal.png"
+  "chruch.png"
+  "45degreee_fabric.png"
+  "bgnoise_lg.png"
+  "little_pluses.png"
+  "squairy_light.png"
+  "white_texture.png"
+  "binding_light.png"
+  "double_lined.png"      // Grid, mesh and squares
+  "grid.png"
+  "absurdidad.png"
+  "grid_noise.png"
+  "fancy_deboss.png"
+  "graphy.png"
+  "noise_pattern_with_crosslines.png"
+  "old_mathematics.png"
+  "ps_neutral.png"
+  "subtle_freckles.png"
+  "wavegrid.png"
+  "az_subtle.png"
+  "tiny_grid.png"
+  "wavegrid.png"
+  "gridme.png"
+  "noisy_grid.png"
+  "subtlenet2.png"
+  "white_carbon.png"
+  "lghtmesh.png"
+  "p5.png"                 // Dots
+  "worn_dots.png"
+  "subtle_dots.png"
+  "brillant.png"
+  "farmer.png"
+  "retina_dust.png"        // Lines
+  "pinstripe.png"
+  "line_horizontal1.png"
+  "line_horizontal2.png"
+  "linen.png" 
+  "vintage_speckles.png"   // Patina and irregular
+  "subtle_grunge.png"
+  "old_wall.png"
+  "brushed.png"
+  "stucco.png"
+  "mooning.png"
+  "husk.png"
+  "concrete_wall_2.png"
+  "noisy.png"
+  "concrete_wall_3.png"
+  "subtle_surface.png"
+  "dust.png"
+  "light_alu.png"
+  "corrugation.png" 
+  "kindajean.png"           // Diagonal
+  "line_diagonal1.png"
+  "line_diagonal2.png"
+  "groovepaper.png"
+  "brushed_alu.png"
+  "rough_diagonal.png"
+  "diagonal-noise.png"
+  "cross_scratches.png"
+  "striped_lens.png"
+  "debut_light.png"
+  "diagonal_waves.png"    // Special
+  "honey_im_subtle.png"
+  "pw_maze_white.png"
+  "subtle_zebra_3d.png"
+  "white_wave.png"
+  "circles.png"
+  "crosses.png"
+  "grilled.png"
+  "pw_pattern.png"
+  "struckaxiom.png"
+  "vichy.png"
+  "wavecut.png"
+  "whitey.png"
+  "cream_pixels.png"
+  "grey.png"
+  "shinedotted.png"
+  "stacked_circles.png"
+  ;
+
+  @if ($inverted == 1) {
+    background: url("https://raw.github.com/Magnus-G/texture-mixin/gh-pages/textures/inverted/#{nth($texture-list, $texture-number)}");
+    background-color: $bg-color;
+  }
+
+  @else {
+    background: url("https://raw.github.com/Magnus-G/texture-mixin/gh-pages/textures/#{nth($texture-list, $texture-number)}");
+    background-color: $bg-color;
+  }
+}

data/source/stylesheets/all.scss

@@ -0,0 +1,36 @@
+@import "normalize";
+@import "bourbon/bourbon";
+@import "bitters/grid-settings";
+@import "neat/neat";
+@import "bitters/bitters";
+@import "normalize";
+@import "prism";
+
+@import "refills-styles";
+
+@import "refills/accordion";
+@import "refills/accordion-tabs";
+@import "refills/badges";
+@import "refills/breadcrumbs";
+@import "refills/button-group";
+@import "refills/cards";
+@import "refills/dashboard";
+@import "refills/dropdown-menu";
+@import "refills/footer";
+@import "refills/hero";
+@import "refills/image-cards";
+@import "refills/info-section";
+@import "refills/item-list";
+@import "refills/master-detail";
+@import "refills/modal";
+@import "refills/navigation";
+@import "refills/overlap";
+@import "refills/progress-bar";
+@import "refills/search-bar";
+@import "refills/sidebar-layout";
+@import "refills/sliding-menu";
+@import "refills/switch-toggle";
+@import "refills/tables";
+@import "refills/toggle-cards";
+@import "refills/tooltip";
+@import "refills/vertical-tabs";

data/source/stylesheets/bitters/_bitters.scss

@@ -0,0 +1,7 @@
+@import "variables";
+@import "extends/base";
+@import "typography";
+@import "forms";
+@import "tables";
+@import "lists";
+@import "flashes";

data/source/stylesheets/bitters/_flashes.scss

@@ -0,0 +1,50 @@
+/* Success, error & notice boxes for messages and errors. */
+%flash {
+  margin-bottom: $base-line-height / 2;
+  padding: $base-line-height / 2;
+  font-weight: bold;
+}
+
+.error, #flash_failure {
+  @extend %flash;
+  background: $error-color;
+  color: darken($error-color, 60);
+
+  a {
+    color: darken($error-color, 70);
+
+    &:hover {
+      color: darken($error-color, 90);
+    }
+  }
+}
+
+.notice, #flash_notice {
+  @extend %flash;
+  background: $notice-color;
+  color: darken($notice-color, 60);
+
+  a {
+    color: darken($notice-color, 70);
+
+    &:hover {
+      color: darken($notice-color, 90);
+    }
+  }
+}
+
+
+.success, #flash_success {
+  @extend %flash;
+  background: $success-color;
+  color: darken($success-color, 60);
+
+  a {
+    color: darken($success-color, 70);
+
+    &:hover {
+      color: darken($success-color, 90);
+    }
+  }
+}
+

data/source/stylesheets/bitters/_forms.scss

@@ -0,0 +1,87 @@
+$form-border-color: $base-border-color;
+$form-border-color-hover: darken($base-border-color, 10);
+$form-border-color-focus: $base-accent-color;
+$form-border-radius: $base-border-radius;
+$form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
+$form-font-size: $base-font-size;
+$form-font-family: $base-font-family;
+
+fieldset {
+  background: lighten($base-border-color, 10);
+  border: 1px solid $base-border-color;
+  margin: 0 0 ($base-line-height / 2) 0;
+  padding: $base-line-height;
+}
+
+input,
+label,
+select {
+  display: block;
+  font-family: $form-font-family;
+  font-size: $form-font-size;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: $base-line-height / 4;
+
+  &.required:after {
+    content: "*";
+  }
+
+  abbr {
+    display: none;
+  }
+}
+
+textarea,
+#{$all-text-inputs} {
+  @include box-sizing(border-box);
+  @include transition(border-color);
+  background-color: white;
+  border-radius: $form-border-radius;
+  border: 1px solid $form-border-color;
+  box-shadow: $form-box-shadow;
+  font-family: $form-font-family;
+  font-size: $form-font-size;
+  margin-bottom: $base-line-height / 2;
+  padding: ($base-line-height / 3) ($base-line-height / 3);
+  resize: vertical;
+  width: 100%;
+
+  &:hover {
+    border-color: $form-border-color-hover;
+  }
+
+  &:focus {
+    border-color: $form-border-color-focus;
+    box-shadow: $form-box-shadow-focus;
+    outline: none;
+  }
+}
+
+input[type="search"] {
+  @include appearance(none);
+}
+
+input[type="checkbox"], input[type="radio"] {
+  display: inline;
+  margin-right: $base-line-height / 4;
+}
+
+select {
+  width: auto;
+  margin-bottom: $base-line-height;
+}
+
+button,
+input[type="submit"] {
+  @extend %button;
+  @include appearance(none);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  background-clip: border-box;
+}