shibori 1.0.0.beta1

data/source/css/scss/components/_slider.scss

@@ -0,0 +1,96 @@
+// // ==========================================================================
+// // Slider
+// //
+// // For use with unslider js plugin
+// // ==========================================================================
+
+$dot-size: 10px;
+
+//- Unslider css
+
+.unslider {
+  overflow: auto;
+
+  ol, ul {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.unslider-wrap {
+  position: relative;
+}
+
+.unslider-wrap.unslider-carousel li {
+  float: left;
+}
+
+.unslider-fade {
+  position: relative;
+}
+
+.unslider-fade .unslider-wrap li {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: 8;
+}
+
+.unslider-fade .unslider-wrap li.unslider-active {
+  z-index: 10;
+}
+
+.unslider li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.unslider-arrow {
+  position: absolute;
+  left: 20px;
+  z-index: 2;
+  cursor: pointer;
+
+  &.next {
+    left: auto;
+    right: 20px;
+  }
+}
+
+.unslider-nav,
+.slider-nav {
+  width: 100%;
+  height: 48px;
+  padding-top: $space;
+
+  ol {
+    position: absolute;
+    left: 50%;
+    @include transform(translateX(-50%));
+  }
+
+  li {
+    display: block;
+    float: left;
+    width: $dot-size;
+    height: $dot-size;
+    margin: floor($pad-sm/2);
+    border-radius: $border-radius-circle;
+    background: fade-out($purple, .8);
+    cursor: pointer;
+    @include transition(background $transition);
+    @include hide-text();
+
+    &:hover {
+      background: fade-out($purple, .5);
+    }
+
+    &.slide-active {
+      background: fade-out($purple, .1);
+    }
+  }
+}
+

data/source/css/scss/components/_spinner.scss

@@ -0,0 +1,64 @@
+// ==========================================================================
+// Spinner
+// ==========================================================================
+
+// Pulled from purple.heroku for most of it
+
+$spinner-dot-size: 7px;
+$spinner-color: $purple;
+
+.spinner {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: ($spinner-dot-size * 3) + 10;
+  height: $spinner-dot-size;
+  text-align: center;
+
+  > span {
+    vertical-align: top;
+    display: inline-block;
+    width: $spinner-dot-size;
+    height: $spinner-dot-size;
+    border-radius: $border-radius-circle;
+    background: $spinner-color;
+
+    .purple & {
+      background: $white;
+    }
+
+    @include animation(pulse 1s infinite ease-in-out);
+    @include animation-fill-mode(both);
+
+    &:first-child {
+      float: left;
+      @include animation-delay(-0.32s);
+    }
+
+    &:nth-child(1) {
+      @include animation-delay(-0.16s);
+    }
+
+    &:nth-child(2) {
+      float: right;
+    }
+  }
+
+  &.spinner-centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    @include transform(translateX(-50%) translateY(-50%));
+  }
+
+  .btn-saving & {
+    width: 15px;
+    opacity: .6;
+    margin-right: 8px;
+
+    .spinner > span {
+      width: 3px;
+      height: 3px;
+    }
+  }
+}

data/source/css/scss/components/_sprites.scss

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Sprites
+// ==========================================================================

data/source/css/scss/components/_sr-only.scss

@@ -0,0 +1,10 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}

data/source/css/scss/components/_tables.scss

@@ -0,0 +1,62 @@
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+table {
+  display: table;
+  color: $gray-darker;
+  font-size: $font-sm;
+  // max-width:  860px;
+  // margin: 0 auto;
+  border-collapse: collapse;
+  overflow: scroll;
+  text-align: left;
+
+  @media (max-width: $mobile) {
+    font-size: $font-xs;
+  }
+
+  th {
+    text-transform: uppercase;
+    color: $gray-dark;
+    font-size: $font-xs;
+    display: table-header-group;
+  }
+
+  td, th {
+    display: table-cell;
+    min-width: 64px;
+    padding: 10px 0;
+
+    // &:first-child {
+    //   flex: 1;
+    // }
+  }
+
+  tr {
+    display: table-row;
+    // display: flex;
+    border-bottom: 1px solid $gray-lighter;
+    padding: 8px 0;
+  }
+
+  &.zebra {
+    tr {
+      &:nth-child(2n) {
+        background: rgba($gray-lighter, .2);
+      }
+    }
+  }
+
+  tfoot {
+    display: table-footer-group;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+}

data/source/css/scss/components/_tooltips.scss

@@ -0,0 +1,93 @@
+// ==========================================================================
+// Tooltips
+// ==========================================================================
+
+$tooltip-width: 250px;
+$tooltip-offset: 24px;
+$tooltip-delay: .1s; //Delay pop up of tooltip from trigger
+$tooltip-bg: $black;
+
+[data-tooltip] {
+  position: relative;
+  // cursor: help;
+  // border-bottom: 1px dotted $text-color;
+  text-decoration: none;
+
+  &:hover:after,
+  &:hover:before {
+    opacity: 1;
+    visibility: visible;
+    @include transition-delay($tooltip-delay);
+  }
+
+  &:before,
+  &:after {
+    display: block;
+    position: absolute;
+    left: 50%;
+    @include transform(translateX(-50%));
+
+    //Hide and transition
+    opacity: 0;
+    visibility: hidden;
+    @include transition(opacity $transition, visibility $transition);
+    @include transition-delay(0s);
+  }
+
+  &:after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: $tooltip-offset;
+    left: 50%;
+    width: $tooltip-width;
+    padding: $pad;
+    z-index: $z-foreground;
+    line-height: $line-height-sm;
+    border-radius: $border-radius;
+    background: $tooltip-bg;
+    color: $white;
+    font-size: $font-sm;
+    font-weight: $font-normal;
+    text-align: center;
+    text-transform: none;
+  }
+
+  &.tooltip-narrow-oneline {
+    &:after {
+      width: auto;
+      white-space: nowrap;
+    }
+  }
+
+  &:before {
+    content: "";
+    bottom: $tooltip-offset/1.25;
+    @include triangle(16px, $tooltip-bg, down);
+  }
+}
+
+//- Tooltip Marker
+// Use left and top to position the marker relative to its parent (a diagram for example)
+
+$tooltip-marker-size: 16px;
+
+.tooltip-marker {
+  position: absolute;
+  display: block;
+  left: 0;
+  top: 0;
+  @include transform(translateX(-50%));
+  width: $tooltip-marker-size;
+  height: $tooltip-marker-size;
+  background: $white;
+  border: 2px solid $blue;
+  box-shadow: 0 0 4px fade-out($blue, .5);
+  border-radius: $border-radius-circle;
+  cursor: pointer;
+  @include transition(background $transition);
+
+  &.active,
+  &:hover {
+    background: $blue;
+  }
+}

data/source/css/scss/components/_users.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Users (avatars, usernames, etc)
+// ==========================================================================
+
+.avatar > img {
+  border-radius: $border-radius-circle;
+  overflow: hidden;
+  margin: $pad-sm;
+  box-shadow: $box-shadow;
+  border: 2px solid $white;
+}

data/source/css/scss/components/_vertical-tabs.scss

@@ -0,0 +1,129 @@
+.vertical-tabs-container {
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $base-line-height: 1.5em !default;
+  $base-spacing: 1.5em !default;
+  $action-color: #477dca !default;
+  $dark-gray: #333 !default;
+  $medium-screen: 40em !default;
+  $base-font-color: $dark-gray !default;
+  $tab-border-color: $base-border-color;
+  $tab-border: 1px solid $tab-border-color;
+  $tab-border-radius: $base-border-radius;
+  $tab-content-background: lighten($tab-border-color, 10%);
+  $tab-active-color: $tab-content-background;
+  $tab-inactive-color: $base-background-color;
+  $vertical-tabs-height: em(300);
+  $vertical-tab-mode: $medium-screen;
+
+  @include clearfix;
+  border: $tab-border;
+  border-radius: $tab-border-radius;
+  margin-bottom: $base-spacing;
+  overflow: hidden;
+
+  li {
+    list-style: none;
+  }
+
+  a {
+    color: $action-color;
+    text-decoration: none;
+  }
+
+  .vertical-tabs {
+    display: none;
+
+    @include media($vertical-tab-mode) {
+      background-color: $tab-inactive-color;
+      display: inline;
+      float: left;
+      height: $vertical-tabs-height;
+      width: 20%;
+    }
+  }
+
+  .vertical-tab {
+    @include media($vertical-tab-mode) {
+      border-bottom: $tab-border;
+      display: block;
+      font-weight: bold;
+      margin-right: -1px;
+      padding: ($base-spacing / 2) ($gutter / 2);
+
+      &.is-active {
+        background-color: $tab-content-background;
+        margin-right: -1px;
+      }
+    }
+  }
+
+  a.vertical-tab-accordion-heading,
+  a.vertical-tab {
+    color: $dark-gray;
+  }
+
+  .vertical-tab:focus {
+    outline: none;
+  }
+
+  .vertical-tab-content-container {
+    display: block;
+    margin: 0 auto;
+
+    & a:focus {
+      outline: none;
+    }
+
+    @include media($vertical-tab-mode) {
+      @include size(80% $vertical-tabs-height);
+      background-color: $tab-content-background;
+      display: inline-block;
+    }
+  }
+
+  .vertical-tab-content {
+    background-color: $tab-content-background;
+    padding: $base-spacing $gutter;
+
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
+    @include media($vertical-tab-mode) {
+      border: 0;
+      display: none;
+    }
+  }
+
+  .vertical-tab-accordion-heading {
+    background-color: $tab-inactive-color;
+    border-top: $tab-border;
+    cursor: pointer;
+    display: block;
+    font-weight: bold;
+    padding: $base-spacing / 2 $gutter / 2;
+
+    &:focus,
+    &:hover {
+      color: $action-color;
+    }
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    &.is-active {
+      background: $tab-active-color;
+      border-bottom: 0;
+    }
+
+    @include media($vertical-tab-mode) {
+      display: none;
+    }
+  }
+}
+
+// Based on code by Jett Miller jettmiller.net

data/source/css/scss/components/_video.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// Video
+// ==========================================================================
+
+.video-wrapper {
+
+}

data/source/css/scss/ecosystem/_addons-card.scss

@@ -0,0 +1,3 @@
+.add-ons {
+
+}