shibori 1.0.0.beta1

data/source/css/scss/components/_modal.scss

@@ -0,0 +1,218 @@
+@include keyframes(fadeIn) {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@include keyframes(fadeOut) {
+  0%   { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@include keyframes(zoomIn) {
+  0% {
+    @include transform(scale(1.1));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(scale(1));
+    opacity: 1;
+  }
+}
+
+@include keyframes(zoomOut) {
+  0% {
+    @include transform(scale(1));
+    opacity: 1;
+  }
+
+  100% {
+    @include transform(scale(1.1));
+    opacity: 0;
+  }
+}
+
+.modal {
+  $base-border-color: #dcdcdc !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: #fff !default;
+  $base-font-size: 1em !default;
+  $base-line-height: 1.5em !default;
+  $action-color: #477dca !default;
+  $dark-gray: #333 !default;
+  $light-gray: #ddd !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
+  $base-font-color: $dark-gray !default;
+  $modal-padding: 3em;
+  $modal-background: $base-background-color;
+  $modal-close-color: $light-gray;
+  $modal-image-height: 135px;
+  $modal-image-width: $modal-image-height;
+  $modal-trigger-image-width: 300px;
+  $fade-screen-background-base-color: #3F3F44;
+
+  @include transition(width ease .3s);
+  @include animation(zoomIn .2s ease-out);
+
+  label {
+    cursor: pointer;
+    margin-bottom: 0;
+  }
+
+  label img {
+    border-radius: $modal-trigger-image-width / 2;
+    display: block;
+    max-width: $modal-trigger-image-width;
+  }
+
+  .modal-header {
+    padding: 20px $space;
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  .modal-footer {
+    padding: 20px $space;
+    border-top: 1px solid #e5e5e5;
+  }
+
+  .modal-body {
+    padding: $space;
+  }
+
+  .modal-state {
+    display: none;
+  }
+
+  .modal-trigger {
+    padding: 0.8em 1em;
+  }
+
+  .brand-details {
+    margin-bottom: 0;
+
+    .brand-logo {
+      width: $brand-icon;
+      height: $brand-icon;
+      margin-right: 0;
+      float: none;
+      margin: $pad auto;
+    }
+  }
+
+  .modal-fade-screen { // overlay
+    @include position(fixed, 0);
+    background-color: rgba($fade-screen-background-base-color, 0.80);
+    opacity: 0;
+    padding-top: 0.6em;
+    text-align: left;
+    transition: opacity 0.25s ease;
+    visibility: hidden;
+    z-index: 99999999999;
+
+    .modal-bg {
+      @include position(absolute, 0);
+      cursor: pointer;
+    }
+  }
+
+  .modal-close-x {
+    @include position(absolute, 15px 15px nill nill);
+    @include size(1.5em);
+    @include animation(fadeOut .1s ease-out);
+    @include animation(zoomOut .1s ease-out);
+    background: $modal-background;
+    cursor: pointer;
+
+    &::after,
+    &::before {
+      @include position(absolute, 3px 3px 0 50%);
+      @include size(0.15em 1.5em);
+      background: $modal-close-color;
+      content: "";
+      display: block;
+      margin: -3px 0 0 -1px;
+      transform: rotate(45deg);
+    }
+
+    &:hover::after,
+    &:hover::before {
+      background: darken($modal-close-color, 10%);
+    }
+
+    &::before {
+      transform: rotate(-45deg);
+    }
+  }
+
+  .modal-inner {
+    background: $modal-background;
+    border-radius: $base-border-radius;
+    margin: auto;
+    margin-top: 0;
+    position: relative;
+    overflow: hidden;
+    margin-top: $pad;
+
+    @include media(min-width 1400px) {
+      margin-top: 10%;
+    }
+
+    @include media(min-width 1241px) {
+      width: 50%;
+    }
+
+    @include media(max-width 559px) {
+      width: 95%;
+    }
+
+    h1 {
+      color: $base-font-color;
+      text-align: left;
+      text-transform: capitalize;
+    }
+
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
+    .modal-intro {
+      margin-bottom: 1em;
+    }
+
+    .modal-content {
+      color: $base-font-color;
+
+      @include media($medium-screen) {
+        columns: 2 8em;
+      }
+    }
+
+    a.cta {
+      color: $base-background-color;
+      display: inline-block;
+      margin-right: 0.5em;
+      margin-top: 1em;
+
+      &:last-child {
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .modal-state:checked + .modal-fade-screen {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .modal-state:checked + .modal-fade-screen .modal-inner {
+    top: 0.5em;
+  }
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+// Based on code by Kasper Mikiewicz

data/source/css/scss/components/_owlCarousel.scss

@@ -0,0 +1,270 @@
+/*
+ * 	Default theme - Owl Carousel CSS File
+ */
+.owl-theme .owl-controls {
+  margin-top: 10px;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.owl-theme .owl-controls .owl-nav [class*='owl-'] {
+  color: white;
+  font-size: 14px;
+  margin: 5px;
+  padding: 4px 7px;
+  background: #d6d6d6;
+  display: inline-block;
+  cursor: pointer;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.owl-theme .owl-controls .owl-nav [class*='owl-']:hover {
+  background: #869791;
+  color: white;
+  text-decoration: none;
+}
+.owl-theme .owl-controls .owl-nav .disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.owl-theme .owl-dots .owl-dot {
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.owl-theme .owl-dots .owl-dot span {
+  width: 10px;
+  height: 10px;
+  margin: 5px 7px;
+  background: #d6d6d6;
+  display: block;
+  -webkit-backface-visibility: visible;
+  -webkit-transition: opacity 200ms ease;
+  -moz-transition: opacity 200ms ease;
+  -ms-transition: opacity 200ms ease;
+  -o-transition: opacity 200ms ease;
+  transition: opacity 200ms ease;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  border-radius: 30px;
+}
+.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
+  background: #869791;
+}
+
+/*
+ *  Owl Carousel - Animate Plugin
+ */
+.owl-carousel .animated {
+  -webkit-animation-duration: 1000ms;
+  animation-duration: 1000ms;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.owl-carousel .owl-animated-in {
+  z-index: 0;
+}
+.owl-carousel .owl-animated-out {
+  z-index: 1;
+}
+.owl-carousel .fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+/*
+ * 	Owl Carousel - Auto Height Plugin
+ */
+.owl-height {
+  -webkit-transition: height 500ms ease-in-out;
+  -moz-transition: height 500ms ease-in-out;
+  -ms-transition: height 500ms ease-in-out;
+  -o-transition: height 500ms ease-in-out;
+  transition: height 500ms ease-in-out;
+}
+
+/*
+ *  Core Owl Carousel CSS File
+ */
+.owl-carousel {
+  display: none;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* position relative and z-index fix webkit rendering fonts issue */
+  position: relative;
+  z-index: 1;
+}
+.owl-carousel .owl-stage {
+  position: relative;
+  -ms-touch-action: pan-Y;
+}
+.owl-carousel .owl-stage:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+.owl-carousel .owl-stage-outer {
+  position: relative;
+  overflow: hidden;
+  /* fix for flashing background */
+  -webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-controls .owl-nav .owl-prev,
+.owl-carousel .owl-controls .owl-nav .owl-next,
+.owl-carousel .owl-controls .owl-dot {
+  cursor: pointer;
+  cursor: hand;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel.owl-loaded {
+  display: block;
+}
+.owl-carousel.owl-loading {
+  opacity: 0;
+  display: block;
+}
+.owl-carousel.owl-hidden {
+  opacity: 0;
+}
+.owl-carousel .owl-refresh .owl-item {
+  display: none;
+}
+.owl-carousel .owl-item {
+  position: relative;
+  min-height: 1px;
+  float: left;
+  -webkit-backface-visibility: hidden;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel .owl-item img {
+  display: block;
+  width: 100%;
+  -webkit-transform-style: preserve-3d;
+}
+.owl-carousel.owl-text-select-on .owl-item {
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.owl-carousel .owl-grab {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+.owl-carousel .owl-rtl {
+  direction: rtl;
+}
+.owl-carousel .owl-rtl .owl-item {
+  float: right;
+}
+
+/* No Js */
+.no-js .owl-carousel {
+  display: block;
+}
+
+/*
+ * 	Owl Carousel - Lazy Load Plugin
+ */
+.owl-carousel .owl-item .owl-lazy {
+  opacity: 0;
+  -webkit-transition: opacity 400ms ease;
+  -moz-transition: opacity 400ms ease;
+  -ms-transition: opacity 400ms ease;
+  -o-transition: opacity 400ms ease;
+  transition: opacity 400ms ease;
+}
+.owl-carousel .owl-item img {
+  transform-style: preserve-3d;
+}
+
+/*
+ * 	Owl Carousel - Video Plugin
+ */
+.owl-carousel .owl-video-wrapper {
+  position: relative;
+  height: 100%;
+  background: #000;
+}
+.owl-carousel .owl-video-play-icon {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  left: 50%;
+  top: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+  background: url("owl.video.play.png") no-repeat;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  -webkit-transition: scale 100ms ease;
+  -moz-transition: scale 100ms ease;
+  -ms-transition: scale 100ms ease;
+  -o-transition: scale 100ms ease;
+  transition: scale 100ms ease;
+}
+.owl-carousel .owl-video-play-icon:hover {
+  -webkit-transition: scale(1.3, 1.3);
+  -moz-transition: scale(1.3, 1.3);
+  -ms-transition: scale(1.3, 1.3);
+  -o-transition: scale(1.3, 1.3);
+  transition: scale(1.3, 1.3);
+}
+.owl-carousel .owl-video-playing .owl-video-tn,
+.owl-carousel .owl-video-playing .owl-video-play-icon {
+  display: none;
+}
+.owl-carousel .owl-video-tn {
+  opacity: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+  -webkit-transition: opacity 400ms ease;
+  -moz-transition: opacity 400ms ease;
+  -ms-transition: opacity 400ms ease;
+  -o-transition: opacity 400ms ease;
+  transition: opacity 400ms ease;
+}
+.owl-carousel .owl-video-frame {
+  position: relative;
+  z-index: 1;
+}

data/source/css/scss/components/_panel.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Panel
+// ==========================================================================
+
+.panel {
+  border: $border;
+  border-radius: $border-radius-lg;
+  background: $off-white;
+  padding: $pad-lg;
+  box-shadow: $box-shadow;
+}

data/source/css/scss/components/_pill-box.scss

@@ -0,0 +1,38 @@
+.pill-box--navigation {
+  cursor: pointer;
+  display: inline-block;
+  border: 1px solid $purple;
+  border-radius: 3px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: rgba($purple, .9);
+  font-size: 0;
+
+  li {
+    font-size: 13px;
+    font-weight: 600;
+    padding: 10px 14px;
+    display: inline-block;
+    transition: all 150ms ease-in-out;
+
+    & + li {
+      border-left: 1px solid #79589F;
+    }
+
+    &.active {
+      background: rgba(#79589F, .7);
+      color: #fff;
+
+      &:hover {
+        color: #fff;
+        background: rgba(#79589F, .6);
+      }
+    }
+
+    &:hover {
+      color: rgba(#79589F, .9);
+      background: rgba(#79589F, .1);
+    }
+  }
+}

data/source/css/scss/components/_quote.scss

@@ -0,0 +1,96 @@
+// ==========================================================================
+// Quote
+// ==========================================================================
+
+blockquote {
+  position: relative;
+  margin: 0;
+  padding-left: $pad-xl;
+  border-left: 5px solid fade-out($purple-light, .5);
+}
+
+  cite {
+    font-style: normal;
+    font-size: $font-sm;
+  }
+
+    .quote-author {
+      margin-bottom: 0;
+      font-size: $font-sm;
+    }
+
+    .quote-author-meta {
+      margin-top: $pad-sm;
+      color: $text-color-light;
+    }
+
+//- Large quote for full width display
+.pullquote {
+
+  $icon-width: 74px;
+  $icon-height: 44px;
+  $icon-width-sm: 60px;
+  $icon-height-sm: 36px;
+
+  padding: $pad-xl $icon-width*1.25 $pad-xl $icon-width*1.5;
+  border: 0;
+  font-size: $font-lg;
+
+  //Quote icons
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: $icon-width;
+    height: $icon-height;
+    background-repeat: no-repeat;
+  }
+
+  &:before {
+    left: 0;
+    @include retina-image(#{$image-path}/blockquote/open, $icon-width $icon-height);
+  }
+
+  &:after {
+    right: 0;
+    bottom: $icon-height *3;
+    @include retina-image(#{$image-path}/blockquote/close, $icon-width $icon-height);
+  }
+
+  cite {
+    margin-top: $pad;
+    font-size: $font-base;
+
+    img {
+      float: left;
+      margin-right: $pad-lg;
+      margin-top: ($pad-lg)/2;
+    }
+  }
+
+  .quote-author {
+    font-size: $font-base;
+  }
+
+  &.pullquote-sm {
+    padding: $pad-xl $icon-width-sm*1.25 $pad-xl $icon-width-sm*1.5;
+    font-size: $font-base - 1;
+
+    &:before,
+    &:after {
+      width: $icon-width-sm;
+      height: $icon-height-sm;
+    }
+
+    &:before {
+      left: 0;
+      @include retina-image(#{$image-path}/blockquote/open-sm, $icon-width-sm $icon-height-sm);
+    }
+
+    &:after {
+      right: 0;
+      bottom: $icon-height-sm *3;
+      @include retina-image(#{$image-path}/blockquote/close-sm, $icon-width-sm $icon-height-sm);
+    }
+  }
+}

data/source/css/scss/components/_readmore.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Read More snippet
+// ==========================================================================
+
+p.read-more {
+  margin-bottom: 0;
+
+  [data-readmore-toggle] {
+    margin-bottom: $space;
+  }
+}