staple 0.0.9 → 0.1.0

data/source/stylesheets/staple/_navigation.scss

@@ -1,329 +0,0 @@
-header.navigation {
-  $navigation-padding: 1em;
-  $navigation-background: $dark-gray;
-  $navigation-color: transparentize(white, 0.3);
-  $navigation-color-hover: white;
-  $navigation-height: 60px;
-  $navigation-nav-button-background: $base-accent-color;
-  $navigation-nav-button-background-hover: lighten($navigation-background, 10);
-  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
-  $navigation-search-background: lighten($navigation-background, 5);
-  $navigation-search-border: 1px solid darken($navigation-background, 5);
-  $navigation-active-link-color: transparentize(white, 0.5);
-  $navigation-submenu-padding: 1em;
-  $navigation-submenu-width: 12em;
-  $horizontal-bar-mode: $large-screen;
-
-  background-color: $navigation-background;
-  border-bottom: 1px solid darken($navigation-background, 10);
-  height: $navigation-height;
-  width: 100%;
-  z-index: 999;
-
-  .navigation-wrapper {
-    @include clearfix;
-    @include outer-container;
-    position: relative;
-    z-index: 9999;
-  }
-
-  .logo {
-    float: left;    
-    max-height: $navigation-height;
-    padding-left: $navigation-padding;
-    padding-right: 2em;
-
-    img {
-      max-height: $navigation-height;
-      padding: .8em 0;
-    }
-  }
-
-  // Mobile view
-
-  .navigation-menu-button {
-    color: $navigation-color;
-    display: block;
-    float: right;
-    font-family: $sans-serif;
-    font-weight: 700;
-    line-height: $navigation-height;
-    margin: 0;
-    padding-right: 1em;
-    text-transform: uppercase;
-
-    @include media ($horizontal-bar-mode) {
-      display: none;
-    }
-
-    &:hover {
-      color: $navigation-color-hover;
-    }
-  }
-
-  // Nav menu
-
-  .nav {
-    z-index: 9999999;
-    float: none;
-    @include media ($horizontal-bar-mode) {
-      float: left;
-    }
-  }
-
-  ul#navigation-menu {    
-    -webkit-transform-style: preserve-3d; // stop webkit flicker
-    clear: both;
-    display: none;
-    margin: 0 auto;
-    overflow: visible;
-    padding: 0;
-    width: 100%;
-    z-index: 9999;
-
-    @include media ($horizontal-bar-mode) {
-      display: inline;
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  // The nav items
-
-  ul li.nav-link {
-    background: $navigation-background;
-    display: block;
-    line-height: $navigation-height;
-    overflow: hidden;
-    padding-right: .8em;
-    text-align: right;
-    width: 100%;
-    z-index: 9999;
-
-    @include media ($horizontal-bar-mode) {
-      background: transparent;
-      display: inline;
-      line-height: $navigation-height;
-      text-decoration: none;
-      width: auto;
-    }
-
-    a {
-      color: $navigation-color;
-      display: inline-block;
-      font-weight: 400;
-
-      @include media ($horizontal-bar-mode) {
-        padding-right: 1em;
-      }
-
-      &:hover {
-        color: $navigation-color-hover;
-      }
-    }
-  }
-
-  .active-nav-item a {
-    border-bottom: 1px solid $navigation-active-link-color;
-    padding-bottom: 3px;
-  }
-
-  // Sub menus
-
-  li.more.nav-link {
-    padding-right: 0;
-
-    @include media($large-screen) {
-      padding-right: $navigation-submenu-padding;
-    }
-
-    > ul > li:first-child a  {
-      padding-top: 1em;
-    }
-
-    a {
-      margin-right: $navigation-submenu-padding;
-    }
-
-    > a {
-      padding-right: 0.6em;
-    }
-
-    > a:after {
-      @include position(absolute, auto -.4em auto auto);
-      content: '\25BE';
-      color: $navigation-color;
-    }
-  }
-
-  li.more {
-    overflow: visible;
-    padding-right: 0;
-
-    a {
-      padding-right: .8em;
-    }
-
-    > a {
-      padding-right: 1.6em;
-      position: relative;
-
-      @include media($large-screen) {
-        margin-right: $navigation-submenu-padding;
-      }
-
-      &:after {
-        content: '›';
-        font-size: 1.2em;
-        position: absolute;
-        right: $navigation-submenu-padding / 2;
-      }      
-    }
-
-    &:hover > .submenu {
-      display: block;
-    }
-
-    @include media($horizontal-bar-mode) {
-      padding-right: .8em;
-      position: relative;
-    }
-  }
-
-  ul.submenu {
-    display: none;
-    padding-left: 0;
-
-    @include media($horizontal-bar-mode) {
-      left: -$navigation-submenu-padding;
-      position: absolute;
-      top: 1.5em;
-    }
-
-    .submenu {
-      @include media($horizontal-bar-mode) {
-        left: $navigation-submenu-width - .2em;
-        top: 0;
-      }
-    }
-
-    li {
-      display: block;
-      padding-right: 0;
-
-      @include media($horizontal-bar-mode) {
-        line-height: $navigation-height / 1.3;
-
-        &:first-child > a {
-          border-top-left-radius: $base-border-radius;
-          border-top-right-radius: $base-border-radius;
-        }
-
-        &:last-child > a {
-          border-bottom-left-radius: $base-border-radius;
-          border-bottom-right-radius: $base-border-radius;
-          padding-bottom: .7em;
-        }
-      }
-
-      a {
-        background-color: darken($navigation-background, 3);
-        display: inline-block;
-        text-align: right;
-        width: 100%;
-
-        @include media($horizontal-bar-mode) {
-          background-color: $navigation-background;
-          padding-left: $navigation-submenu-padding;
-          text-align: left;
-          width: $navigation-submenu-width;
-        }
-      }
-    }
-  }
-
-  // Elements on the far right
-
-  .navigation-tools {
-    @include clearfix;
-    display: block;
-    padding-right: $navigation-padding;
-    padding-left: $navigation-padding/2;
-    clear: both;
-    background: #505050;
-
-    @include media($large-screen) {
-      background: transparent;
-      float: right;
-      clear: none;
-    }
-  }
-
-  .sign-up {
-    @extend button;
-    margin-top: 1.2em;
-    float: right;
-    display: inline;
-    font-size: .8em;  
-    text-transform: uppercase;
-    padding: .75em 1em;
-  }
-
-  // Search bar
-
-  .search-bar {
-    $search-bar-border-color: $base-border-color;
-    $search-bar-border: 1px solid $search-bar-border-color;
-    $search-bar-background: lighten($search-bar-border-color, 10);
-
-    padding: .85em .6em; 
-    width: 60%;
-    float: left;
-
-    .search-and-submit {
-      position: relative;
-
-      input[type=search] {
-        background: $navigation-search-background;
-        border: $navigation-search-border;
-        padding: .6em .8em;
-        font-size: .9em;
-        font-style: italic;
-        color: $navigation-color;
-        border-radius: $base-border-radius * 2;
-        margin: 0;
-
-        @include media($large-screen) {
-          width: 100%;
-        }
-      }
-
-      button[type=submit] {
-        @include button(flat, $navigation-search-background);
-        position: absolute;
-        top: 0.3em;
-        right: 0.3em;
-        bottom: 0.3em;
-        left: auto;
-        outline: none;
-        padding: 0 15px;
-
-        img {
-          height: 12px;
-          opacity: .7;
-        }
-      }
-    }
-
-    @include media($horizontal-bar-mode) {
-      width: 16em;
-      position: relative; 
-      display: inline-block;
-
-      input {
-        @include box-sizing(border-box);
-        display: block;
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_pagination.scss

@@ -1,51 +0,0 @@
-.pagination {
-  $pagination-border-color: $base-border-color;
-  $pagination-border: 1px solid $pagination-border-color;
-  $pagination-background: lighten($pagination-border-color, 10);
-  $pagination-hover-background: lighten($pagination-background, 5);
-  $pagination-color: $base-font-color;
-
-  text-align: center;
-
-  ul {
-    display: inline;
-    text-align: center;
-
-    li {
-      display: inline;
-    }
-
-    ul li {
-      display: none;
-      
-      &:nth-child(1),
-      &:nth-child(2),
-      &:nth-child(3) {
-        display: inline;
-      }
-
-      @include media($large-screen) {
-        display: inline;
-      }
-    }
-
-    li a {
-      @include transition (all 0.2s ease-in-out);
-      background: $pagination-background;
-      border-radius: $base-border-radius;
-      border: $pagination-border;
-      color: $pagination-color;
-      padding: $base-spacing/4 $gutter/2;
-
-      &:hover,
-      &:focus {
-        background: $pagination-hover-background;
-        color: $base-link-color;
-      }
-
-      &:active {
-        background: $pagination-background;
-      }
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-.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-background-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/staple/_progress-bar.scss

@@ -1,83 +0,0 @@
-.progress-bar {
-  $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-background-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: $progress-height;
-  margin: 0 auto;
-  padding: 2px;
-  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%,
-                                                      transparent 50%,
-                                                      rgba(255,255,255, 0.15) 50%,
-                                                      rgba(255,255,255, 0.15) 75%,
-                                                      transparent 75%));
-    background-size: 40px 40px;
-    background-repeat: repeat-x;
-    border: $progress-meter-border;
-    border-radius: $base-border-radius /1.5;
-    display: block;
-    height: 100%;
-    width: 60%;
-  }
-}
-
-@-webkit-keyframes progress {
-  0% {
-    background-position: 0px 0px;
-  }
-  100% {
-    background-position: 40px 0px;
-  }
-}
-
-@-moz-keyframes progress {
-  0% {
-    background-position: 0px 0px;
-  }
-  100% {
-    background-position: 40px 0px;
-  }
-}
-
-@-ms-keyframes progress {
-  0% {
-    background-position: 0px 0px;
-  }
-  100% {
-    background-position: 40px 0px;
-  }
-}
-
-@-o-keyframes progress {
-  0% {
-    background-position: 0px 0px;
-  }
-  100% {
-    background-position: 40px 0px;
-  }
-}
-
-@keyframes progress {
-  0% {
-    background-position: 0px 0px;
-  }
-  100% {
-    background-position: 40px 0px;
-  }
-}

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

@@ -1,40 +0,0 @@
-.search-bar {
-  $search-bar-border-color: $base-border-color;
-  $search-bar-border: 1px solid $search-bar-border-color;
-  $search-bar-background: lighten($search-bar-border-color, 10);
-
-  position: relative; 
-  display: inline-block;
-
-  input {
-    @include box-sizing(border-box);
-    display: block;
-  }
-
-  div.search-and-submit {
-    position: relative;
-
-    input[type=search] {
-      @include appearance(none);
-      width: 100%;
-      padding: .5em .8em;
-      font-size: .9em;
-      font-style: italic;
-      border-radius: $base-border-radius;
-      margin: 0;
-    }
-
-    button[type=submit] {
-      @include position(absolute, 0em 0em 0em null);
-      outline: none;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      padding: 5px 10px;
-
-      img {
-        height: 12px;
-        opacity: .7;
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_search-tools.scss

@@ -1,67 +0,0 @@
-.search-tools {
-  $search-tools-border-color: $base-border-color;
-  $search-tools-background: lighten($search-tools-border-color, 10);
-
-  @include clearfix;
-  border: 1px solid $search-tools-border-color;
-  background: $search-tools-background;
-  padding: $gutter / 2;
-  border-radius: $base-border-radius;
-
-  .filter {
-    margin-bottom: 1em;
-
-    @include media($large-screen) {
-      @include span-columns(3.5);
-      margin-bottom: 0;
-    }
-
-    > div {
-      @extend input[type="text"];
-      position: relative;
-
-      label {
-        font-weight: 400;
-        cursor: pointer;
-        margin-bottom: 0;
-      }
-    }
-
-    ol label {
-      display: inline;
-    }
-
-    button {
-      @include button(simple, lighten($search-tools-background, 10));
-      @include position(absolute, 5px 5px auto auto);
-      font-size: .7em;
-    }
-
-    .hide-options {
-      margin-bottom: 0;
-
-      ol, button {
-        display: none;
-      }
-    }
-  }
-
-  .trigger {
-    width: 100%;
-
-    @include media($large-screen) {
-      @include span-columns(1.5);
-    }
-
-    button {
-      width: 100%;
-      margin-top: 1em;
-      padding-top: .7em;
-      padding-bottom: .7em;
-
-      @include media($large-screen) {
-        margin-top: 1.95em;
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_side-image.scss

@@ -1,59 +0,0 @@
-$side-image-background-top: #B5EBEB;
-$side-image-background-bottom: #5DAC5D;
-$side-image-border: 1px solid darken(transparentize($side-image-background-bottom, .8), 30);
-
-.side-image {
-  background: #F9F9F9;
-
-  @include media($large-screen) {
-    @include row(table);
-  }
-
-  .images-wrapper {
-    @include background(url('https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'), linear-gradient($side-image-background-top, $side-image-background-bottom), no-repeat $side-image-background-top scroll);
-    background-color: $side-image-background-top;
-    border-bottom: $side-image-border;
-    background-size: cover;
-    display: block;
-    min-height: 12em;
-    padding: 3em;
-
-    @include media($large-screen) {
-      @include span-columns(4);
-      background-position: bottom;
-      background-size: cover;
-      border-right: $side-image-border;
-    }
-  }
-
-  .content {
-    @include span-columns(12);
-    padding: 1em 1em 4em 1em;
-
-    @include media($large-screen) {
-      @include span-columns(8);
-      padding: 4em 4em 8em 4em;
-    }
-  }
-
-  .content h1 {
-    margin-bottom: .9em;
-  }
-
-  .content h4 {
-    background: #BBB;
-    color: white;
-    display: inline-block;
-    font-size: .75em;
-    font-weight: 800;
-    margin-bottom: 1.3em;
-    padding: 3px 8px;
-    text-transform: uppercase;
-  }
-
-  .content p {
-    color: gray;
-    margin-bottom: 3em;
-  }
-  @include reset-display();
-}