refills 0.0.2 → 0.1.0

data/source/stylesheets/refills/_tables.scss

@@ -1,28 +1,49 @@
-.table-borders {
+.tables {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-line-height: 1.5em !default;
+  $base-spacing: 1.5em !default;
+  $base-accent-color: #477DCA !default;
+  $base-link-color: $base-accent-color !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $medium-screen: em(640) !default;
+  $large-screen: em(860) !default;
+  $base-font-color: $dark-gray !default;
+  
+  width: 100%;
+
+  th {
+    text-align: left;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
+
   $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;
+  $table-background: lighten($table-border-color, 12%);
+  $table-header-background: lighten($table-background, 10%);
+  $table-hover-background: darken($table-background, 5%);
+  $table-stripe-background: darken($table-background, 2%);
+  $table-stripe-background-hover: darken($table-stripe-background, 5%);
+  $table-padding: 0.75em 1em;
 
-  border: $table-border;
-  border-left: 0px;
   border-collapse: separate;
-  border-spacing: 0;
+  border-left: 0px;
   border-radius: $base-border-radius;
+  border-spacing: 0;
+  border: $table-border;
 
   tbody {
     background-color: $table-background;
+
     tr:hover > td, tr:hover > th {
-      background-color: $table-hover-color;
+      background-color: $table-hover-background;
     }
     tr:nth-child(even) {
-      background-color: $table-stripe-color;
+      background-color: $table-stripe-background;
       &:hover > td {
-        background-color: $table-stripe-color-hover;
+        background-color: $table-stripe-background-hover;
       }
     }
   }
@@ -49,10 +70,14 @@
 
   thead {
     th {
-      background-color: $table-header-color;
-      padding: $table-padding;
-      border-left: 1px solid $table-border-color;
+      background-color: $table-header-background;
       border-bottom: 0px;
+      border-left: 1px solid $table-border-color;
+      padding: $table-padding;
+
+      &:first-child {
+        border-left: none;
+      }
     }
   }
 
@@ -60,22 +85,29 @@
     background-color: $table-background;
 
     td {
-      padding: $table-padding;
+      border-bottom: 0px;
       border-left: 1px solid $table-border-color;
       border-top: 1px solid $table-border-color;
-      border-bottom: 0px;
+      padding: $table-padding;
+
+      &:first-child {
+        border-left: none;
+      }
 
       button {
-        @include button(simple, $table-background);
-        margin-right: 0.5em;
+        @include button(flat, $base-accent-color);
         display: inline-block;
-        width: 100%;
-        margin-bottom: .3em;
+        font-size: 0.7em;
+        line-height: $base-line-height;
+        margin-bottom: 0.3em;
+        margin-right: 0.5em;
         outline: none;
+        padding: 0.3em 1em;
+        width: 100%;
 
         @include media($medium-screen) {
-          width: auto;
           margin-bottom: 0;
+          width: auto;
         }
       }
     }

data/source/stylesheets/refills/_texture-legend.scss

@@ -0,0 +1,193 @@
+@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $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"
+  "noisy_grid_simple.png";
+
+  @if ($inverted == 1) {
+    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+  }
+
+  @else {
+    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+  }
+}
+
+.texture-examples {
+  @include clearfix;
+  border-radius: 6px;
+  border: 1px solid silver;
+  margin-bottom: 3em;
+  padding: 1em;
+
+  .texture-examples-container {
+    @include clearfix;
+  }
+
+  h3 {
+    color: #CDCDCD;
+    font-size: 1em;
+    margin-bottom: 1.5em;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  h4 {
+    color: gray;
+    font-size: .8em;
+    font-weight: 200;
+    line-height: 2.2em;
+    margin: 0;
+    padding-left: 0.5em;
+    text-align: center;
+  }
+
+  .instructions {
+    clear: both;
+    display: block;
+    padding-top: 2em;
+    text-align: center;    
+  }
+
+  a {
+    color: $refills-anchor-color;
+    text-decoration: none;
+  }
+
+  b {
+    font-weight: 800;
+  }
+
+  p {
+    color: #909090;
+    font-size: 0.9em;
+    line-height: 1.5em;
+    margin: 1em auto 1em auto;
+    max-width: 74%;
+  }
+}
+
+.examples {
+  height: 2.5em;
+  width: 100%;
+}
+
+.example-normal {
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+  float: left;
+  height: 100%;
+  width: 50%;
+}
+
+.example-inverted {
+  border-bottom-right-radius: 6px;
+  border-top-right-radius: 6px;
+  float: left;
+  height: 100%;
+  width: 50%;
+}
+
+@for $i from 1 through 88 {
+  .texture-#{$i} {
+    $texture-legend-top-background: lighten(#ddf0ef, 1%);
+    $texture-legend-bottom-background: darken(#ddf0ef, 10%);
+    float: left;
+    margin-bottom: 1em;
+    margin: 0 0.95% 1em 0.95%;
+    width: 14.7%;
+
+    .example-normal {
+      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 0); 
+      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+    }
+    .example-inverted {
+      @include texture(180deg, $texture-legend-top-background, $texture-legend-bottom-background, $i, 1); 
+      // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+    }
+  }
+}

data/source/stylesheets/refills/_textures.scss

@@ -0,0 +1,123 @@
+@mixin texture($gradient-angle, $bg-color-1, $bg-color-2, $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"
+  "noisy_grid_simple.png";
+
+  @if ($inverted == 1) {
+    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+  }
+
+  @else {
+    @include background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/inverted/#{nth($texture-list, $texture-number)}"), linear-gradient($gradient-angle, $bg-color-1, $bg-color-2), center no-repeat $bg-color-1 scroll);
+  }
+}
+
+// The mixin above should preferably be in a file of its own. Below is the code for the object that has the texture.
+
+.texture {
+  $texture-top-background: lighten(#ddf0ef, 1%);
+  $texture-bottom-background: darken(#ddf0ef, 10%);
+  height: 5em;
+  width: 100%;
+
+  .texture-normal {
+    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 1); 
+    float: left;
+    height: 5em;
+    width: 50%;
+  }
+
+  .texture-inverted {
+    // gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal  
+    @include texture(180deg, $texture-top-background, $texture-bottom-background, 67, 0); 
+    float: left;
+    height: 5em;
+    width: 50%;
+  }
+}

data/source/stylesheets/refills/_tooltip.scss

@@ -1,35 +1,56 @@
-.tooltip-item {
-  $tooltip-background: transparentize($dark-gray, 0.1);
-  $tooltip-color: white;
-  $tooltip-width: 10em;
+.tooltip-item {  
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-line-height: 1.5em !default;
+  $dark-gray: #333 !default;
+  $base-font-color: $dark-gray !default;
+  
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+    margin: 0;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
 
-  border: 1px solid $base-border-color;
-  padding: .5em 1em;
+  $tooltip-background: white;
+  $tooltip-color: $base-font-color;
+  $tooltip-max-width: 16em;
+  $tooltip-arrow-width: 8px;
+  $tooltip-shadow: 0 2px 2px silver;
+  $tooltip-distance-from-item: 3em;
+  $tooltip-arrow-distance-from-box: -1.3em;
+
+  background: $tooltip-background;
   border-radius: $base-border-radius;
+  border: 1px solid $base-border-color;
+  display: inline-block;
+  padding: 0.5em 1em;
   position: relative;
-  margin-bottom: $base-line-height;
+  text-align: center;
 
+  &:focus,
   &:hover .tooltip {
     opacity: 1;
     visibility: visible;
   }
 
   .tooltip {
-    @include position(absolute, 0 0 0 50%);
-    @include box-sizing(border-box);
+    @include position(absolute, null 0 $tooltip-distance-from-item 0);
     @include transition (all 0.2s ease-in-out);
-    bottom: 130%;
     background-color: $tooltip-background;
+    background: #fff;
     border-radius: $base-border-radius;
+    box-shadow: $tooltip-shadow;
     color: $tooltip-color;
-    font-size: .9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
+    font-size: 0.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);
+    margin: 0 auto;
+    max-width: $tooltip-max-width;
     opacity: 0;
-    padding: .5em 0;
+    padding: 1em;
     text-align: center;
     visibility: hidden;
-    min-width: $tooltip-width;
     z-index: 10;
 
     p {
@@ -37,13 +58,15 @@
     }
 
     &:after {
-      @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;
+      @include position(absolute, null 0 null 0);
+      border: $tooltip-arrow-width solid transparent;
+      bottom: $tooltip-arrow-distance-from-box;
+      color: $tooltip-background;
+      content: '▼';
+      font-size: 1.4em;
+      margin-left: -$tooltip-arrow-width;
+      text-align: center;
+      text-shadow: $tooltip-shadow;
     }
   }
 }