locomotivecms_wagon 1.4.0 → 1.5.0.rc1

data/generators/line_case/public/stylesheets/foundation/components/_orbit.scss

@@ -0,0 +1,340 @@
+// Orbit Variables
+//
+$include-html-orbit-classes: $include-html-classes !default;
+
+// We use these to control the caption styles
+$orbit-container-bg: #f5f5f5 !default;
+$orbit-caption-bg: rgba(0,0,0,0.6) !default;
+$orbit-caption-font-color: #fff !default;
+$orbit-caption-font-size: em-calc(14) !default;
+$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
+$orbit-caption-padding: em-calc(10,14) !default;
+$orbit-caption-height: auto !default;
+
+// We use these to control the left/right nav styles
+$orbit-nav-bg: rgba(0,0,0,0.6) !default;
+$orbit-nav-bg-hover: rgba(0,0,0,0.6) !default;
+$orbit-nav-arrow-color: #fff !default;
+$orbit-nav-arrow-color-hover: #ccc !default;
+
+// We use these to control the timer styles
+$orbit-timer-bg: rgba(0,0,0,0.6) !default;
+$orbit-timer-show-progress-bar: true !default;
+
+// We use these to control the bullet nav styles
+$orbit-bullet-nav-color: #999 !default;
+$orbit-bullet-nav-color-active: #555 !default;
+$orbit-bullet-radius: em-calc(12) !default;
+
+// We use these to controls the style of slide numbers
+$orbit-slide-number-bg: rgba(0,0,0,0) !default;
+$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-padding: em-calc(5) !default;
+
+// Graceful Loading Wrapper and preloader
+$wrapper-class: "slideshow-wrapper" !default;
+$preloader-class: "preloader" !default;
+
+
+@if $include-html-orbit-classes != false {
+
+  @if $experimental {
+    @-webkit-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-moz-keyframes rotate {
+      from { -moz-transform: rotate(0deg); }
+      to { -moz-transform: rotate(360deg); }
+    }
+    @-o-keyframes rotate {
+      from { -o-transform: rotate(0deg); }
+      to { -o-transform: rotate(360deg); }
+    }
+  }
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Orbit Graceful Loading */
+  .#{$wrapper-class} {
+    position: relative;
+
+    ul {
+      // Prevent bullets showing before .orbit-container is loaded
+      list-style-type: none;
+      margin: 0;
+
+      // Hide all list items
+      li,
+      li .orbit-caption { display: none; }
+
+      // ...except for the first one
+      li:first-child { display: block; }
+    }
+
+    .orbit-container { background-color: transparent;
+
+      // Show images when .orbit-container is loaded
+      li { display: block;
+
+        .orbit-caption { display: block; }
+      }
+    }
+  }
+
+  // Orbit preloader
+  .#{$preloader-class} {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    border: solid 3px;
+    border-color: #555 #fff;
+    @include radius(1000px);
+    @if $experimental {
+      -webkit-animation-name: rotate;
+      -webkit-animation-duration: 1.5s;
+      -webkit-animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      -moz-animation-name: rotate;
+      -moz-animation-duration: 1.5s;
+      -moz-animation-iteration-count: infinite;
+      -moz-animation-timing-function: linear;
+      -o-animation-name: rotate;
+      -o-animation-duration: 1.5s;
+      -o-animation-iteration-count: infinite;
+      -o-animation-timing-function: linear;
+    }
+    animation-name: rotate;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+
+  .orbit-container {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    background: $orbit-container-bg;
+
+    .orbit-slides-container {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+
+      img { display: block; max-width: 100%; }
+
+      &>* {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @if $text-direction == rtl {
+          margin-right: 100%;
+        }
+        @else {
+          margin-left: 100%;
+        }
+
+        &:first-child {
+          @if $text-direction == rtl {
+          margin-right: 0%;
+          }
+          @else {
+          margin-left: 0%;
+          }
+        }
+
+        .orbit-caption {
+          @if $orbit-caption-position == "bottom" {
+            position: absolute;
+            bottom: 0;
+          } @else if $orbit-caption-position == "under" {
+            position: relative;
+          }
+
+          background-color: $orbit-caption-bg;
+          color: $orbit-caption-font-color;
+          width: 100%;
+          padding: 10px 14px;
+          font-size: em-calc(14);
+        }
+      }
+    }
+
+    .orbit-slide-number {
+      position: absolute;
+      top: 10px;
+      #{$default-float}: 10px;
+      font-size: 12px;
+      span { font-weight: 700; padding: $orbit-slide-number-padding;}
+      color: $orbit-slide-number-font-color;
+      background: $orbit-slide-number-bg;
+      z-index: 10;
+    }
+
+    .orbit-timer {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 10px;
+      height: 6px;
+      width: 100px;
+      z-index: 10;
+      .orbit-progress {
+        @if $orbit-timer-show-progress-bar {
+          height: 100%;
+          background-color: $orbit-timer-bg;
+          display: block;
+          width: 0%;
+        }
+      }
+
+      // Play button
+      & > span {
+        display: none;
+        position: absolute;
+        top: 10px;
+        #{$opposite-direction}: 0;
+        width: 11px;
+        height: 14px;
+        border: solid 4px #000;
+        border-top: none;
+        border-bottom: none;
+      }
+
+      // Pause button
+      &.paused {
+        & > span {
+          #{$opposite-direction}: -6px;
+          top: 9px;
+          width: 11px;
+          height: 14px;
+          border: inset 8px;
+          border-right-style: solid;
+          border-color: transparent transparent transparent #000;
+        }
+      }
+    }
+
+    &:hover .orbit-timer > span { display: block; }
+
+    // Let's get those controls to be right in the center on each side
+    .orbit-prev,
+    .orbit-next {
+      position: absolute;
+      top: 50%;
+      margin-top: -25px;
+      background-color: $orbit-nav-bg;
+      width: 50px;
+      height: 60px;
+      line-height: 50px;
+      color: white;
+      text-indent: -9999px !important;
+      z-index: 10;
+
+      &:hover {
+        background-color: $orbit-nav-bg-hover;
+      }
+
+      & > span {
+        position: absolute;
+        top: 50%;
+        margin-top: -16px;
+        display: block;
+        width: 0;
+        height: 0;
+        border: inset 16px;
+      }
+    }
+    .orbit-prev { #{$default-float}: 0;
+      & > span {
+        border-#{$opposite-direction}-style: solid;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color;
+      }
+      &:hover > span {
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover;
+      }
+    }
+    .orbit-next { #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-style: solid;
+        border-#{$default-float}-color: $orbit-nav-arrow-color;
+        #{$default-float}: 50%;
+        margin-#{$default-float}: -8px;
+      }
+      &:hover > span {
+        border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
+      }
+    }
+  }
+
+  .orbit-bullets {
+    margin: 0 auto 30px auto;
+    overflow: hidden;
+    position: relative;
+    top: 10px;
+
+    li {
+      display: block;
+      width: $orbit-bullet-radius;
+      height: $orbit-bullet-radius;
+      background: $orbit-bullet-nav-color;
+      float: $default-float;
+      margin-#{$opposite-direction}: 6px;
+      border: solid 1px $orbit-bullet-nav-color-active;
+      @include radius(1000px);
+
+      &.active {
+        background: $orbit-bullet-nav-color-active;
+      }
+
+      &:last-child { margin-#{$opposite-direction}: 0; }
+    }
+  }
+
+  .touch {
+    .orbit-container {
+      .orbit-prev,
+      .orbit-next { display: none; }
+    }
+
+    .orbit-bullets { display: none; }
+  }
+
+
+  @media #{$small} {
+
+    .touch {
+      .orbit-container {
+        .orbit-prev,
+        .orbit-next { display: inherit; }
+      }
+
+      .orbit-bullets { display: block; }
+    }
+
+  }
+
+  @media only screen and (max-width: #{$small-screen}) {
+    .orbit-stack-on-small {
+      .orbit-slides-container {height: auto !important;}
+      .orbit-slides-container > * {
+        position: relative;
+        margin-left: 0% !important;
+      }
+      .orbit-timer,
+      .orbit-next,
+      .orbit-prev,
+      .orbit-bullets {display: none;}
+    }
+  }
+
+}

data/generators/line_case/public/stylesheets/foundation/components/_pagination.scss

@@ -0,0 +1,140 @@
+//
+// Pagination Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control the pagination container
+$pagination-height: em-calc(24) !default;
+$pagination-margin: em-calc(-5) !default;
+
+// We use these to set the list-item properties
+$pagination-li-float: $default-float;
+$pagination-li-height: em-calc(24) !default;
+$pagination-li-font-color: #222 !default;
+$pagination-li-font-size: em-calc(14) !default;
+$pagination-li-margin: em-calc(5) !default;
+
+// We use these for the pagination anchor links
+$pagination-link-pad: em-calc(1 7 1) !default;
+$pagination-link-font-color: #999 !default;
+$pagination-link-active-bg: darken(#fff, 10%) !default;
+
+// We use these for disabled anchor links
+$pagination-link-unavailable-cursor: default !default;
+$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-bg-active: transparent !default;
+
+// We use these for currently selected anchor links
+$pagination-link-current-background: $primary-color !default;
+$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-weight: bold !default;
+$pagination-link-current-cursor: default !default;
+$pagination-link-current-active-bg: $primary-color !default;
+
+//
+// Pagination Mixin
+//
+
+// Style the pagination container. Currently only used when centering elements.
+@mixin pagination-container($center:false) {
+  @if $center { text-align: center; }
+}
+
+// Style unavailable list items
+@mixin pagination-unavailable-item() {
+  a {
+    cursor: $pagination-link-unavailable-cursor;
+    color: $pagination-link-unavailable-font-color;
+  }
+  &:hover a,
+  & a:focus { background: $pagination-link-unavailable-bg-active; }
+}
+
+// Style the current list item. Do not assume that the current item has
+// an anchor <a> element.
+@mixin pagination-current-item($has-anchor: true) {
+  @if $has-anchor {
+    a {
+      background: $pagination-link-current-background;
+      color: $pagination-link-current-font-color;
+      font-weight: $pagination-link-current-font-weight;
+      cursor: $pagination-link-current-cursor;
+
+      &:hover,
+      &:focus { background: $pagination-link-current-active-bg; }
+    }
+  } @else {
+    height: auto;
+    padding: $pagination-link-pad;
+    background: $pagination-link-current-background;
+    color: $pagination-link-current-font-color;
+    font-weight: $pagination-link-current-font-weight;
+    cursor: $pagination-link-current-cursor;
+
+    &:hover,
+    &:focus { background: $pagination-link-current-active-bg; }
+  }
+}
+
+// We use this mixin to set the properties for the creating Foundation pagination
+@mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
+
+  @if $base-style {
+    display: block;
+    height: $pagination-height;
+    margin-#{$default-float}: $pagination-margin;
+
+    li {
+      height: $pagination-li-height;
+      color: $pagination-li-font-color;
+      font-size: $pagination-li-font-size;
+      margin-#{$default-float}: $pagination-li-margin;
+
+      a {
+        display: block;
+        padding: $pagination-link-pad;
+        color: $pagination-link-font-color;
+      }
+
+      &:hover a,
+      a:focus { background: $pagination-link-active-bg; }
+
+      @if $use-default-classes {
+        &.unavailable { @include pagination-unavailable-item(); }
+        &.current { @include pagination-current-item(); }
+      }
+    }
+  }
+
+  // Left or center align the li elements
+  li {
+    @if $center {
+      float: none;
+      display: inline-block;
+    } @else {
+      float: $pagination-li-float;
+      display: block;
+    }
+  }
+}
+
+@if $include-html-nav-classes != false {
+
+  // Detach the nested class selectors from the containing
+  // ul and div elements in order to support more flexibility
+  // for external code that uses the Sass mixins.
+
+  /* Default Pagination */
+  ul.pagination {
+    @include pagination;
+  }
+
+  /* Pagination centred wrapper */
+  .pagination-centered {
+    @include pagination-container(true);
+
+    ul.pagination {
+      @include pagination(true, false);
+    }
+  }
+}

data/generators/line_case/public/stylesheets/foundation/components/_panels.scss

@@ -0,0 +1,83 @@
+//
+// Panel Variables
+//
+$include-html-panel-classes: $include-html-classes !default;
+
+// We use these to control the background and border styles
+$panel-bg: darken(#fff, 5%) !default;
+$panel-border-style: solid !default;
+$panel-border-size: 1px !default;
+
+// We use this % to control how much we darken things on hover
+$panel-function-factor: 10% !default;
+$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
+
+// We use these to set default inner padding and bottom margin
+$panel-margin-bottom: em-calc(20) !default;
+$panel-padding: em-calc(20) !default;
+
+// We use these to set default font colors
+$panel-font-color: #333 !default;
+$panel-font-color-alt: #fff !default;
+
+$panel-header-adjust: true !default;
+$callout-panel-link-color: #fff !default;
+//
+// Panel Mixins
+//
+
+// We use this mixin to create panels.
+@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+
+    border-style: $panel-border-style;
+    border-width: $panel-border-size;
+    border-color: darken($bg, $panel-function-factor);
+    margin-bottom: $panel-margin-bottom;
+    padding: $padding;
+
+    background: $bg;
+
+    // Respect the padding, fool.
+    &>:first-child { margin-top: 0; }
+    &>:last-child { margin-bottom: 0; }
+
+    @if $adjust {
+      // We set the font color based on the darkness of the bg.
+      @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
+      @else if $bg-lightness >= 50%            { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
+      @else                                    { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
+
+      // reset header line-heights for panels
+      h1,h2,h3,h4,h5,h6 {
+        line-height: 1; margin-bottom: em-calc(20) / 2;
+        &.subheader { line-height: 1.4; }
+      }
+    }
+  }
+}
+
+// Only include these classes if the option exists
+@if $include-html-panel-classes != false {
+
+  /* Panels */
+  .panel { @include panel;
+
+    &.callout {
+      @include panel($primary-color);
+      @include inset-shadow($active:false);
+      a {
+        color: $callout-panel-link-color;
+      }
+    }
+
+    &.radius {
+      @include panel($bg:false);
+      @include radius;
+    }
+
+  }
+
+}

data/generators/line_case/public/stylesheets/foundation/components/_pricing-tables.scss

@@ -0,0 +1,131 @@
+//
+// Pricing Table Variables
+//
+$include-html-pricing-classes: $include-html-classes !default;
+
+// We use this to control the border color
+$price-table-border: solid 1px #ddd !default;
+
+// We use this to control the bottom margin of the pricing table
+$price-table-margin-bottom: em-calc(20) !default;
+
+// We use these to control the title styles
+$price-title-bg: #ddd !default;
+$price-title-padding: em-calc(15 20) !default;
+$price-title-align: center !default;
+$price-title-color: #333 !default;
+$price-title-weight: bold !default;
+$price-title-size: em-calc(16) !default;
+
+// We use these to control the price styles
+$price-money-bg: #eee !default;
+$price-money-padding: em-calc(15 20) !default;
+$price-money-align: center !default;
+$price-money-color: #333 !default;
+$price-money-weight: normal !default;
+$price-money-size: em-calc(20) !default;
+
+// We use these to control the description styles
+$price-bg: #fff !default;
+$price-desc-color: #777 !default;
+$price-desc-padding: em-calc(15) !default;
+$price-desc-align: center !default;
+$price-desc-font-size: em-calc(12) !default;
+$price-desc-weight: normal !default;
+$price-desc-line-height: 1.4 !default;
+$price-desc-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the list item styles
+$price-item-color: #333 !default;
+$price-item-padding: em-calc(15) !default;
+$price-item-align: center !default;
+$price-item-font-size: em-calc(14) !default;
+$price-item-weight: normal !default;
+$price-item-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the CTA area styles
+$price-cta-bg: #f5f5f5 !default;
+$price-cta-align: center !default;
+$price-cta-padding: em-calc(20 20 0) !default;
+
+//
+// Pricing Table Mixins
+//
+
+// We use this to create the container element for the pricing tables
+@mixin pricing-table-container {
+  border: $price-table-border;
+  margin-#{$default-float}: 0;
+  margin-bottom: $price-table-margin-bottom;
+
+  & * {
+    list-style: none;
+    line-height: 1;
+  }
+}
+
+// We use this mixin to create the pricing table title styles
+@mixin pricing-table-title {
+  background-color: $price-title-bg;
+  padding: $price-title-padding;
+  text-align: $price-title-align;
+  color: $price-title-color;
+  font-weight: $price-title-weight;
+  font-size: $price-title-size;
+}
+
+// We use this mixin to control the pricing table price styles
+@mixin pricing-table-price {
+  background-color: $price-money-bg;
+  padding: $price-money-padding;
+  text-align: $price-money-align;
+  color: $price-money-color;
+  font-weight: $price-money-weight;
+  font-size: $price-money-size;
+}
+
+// We use this mixin to create the description styles for the pricing table
+@mixin pricing-table-description {
+  background-color: $price-bg;
+  padding: $price-desc-padding;
+  text-align: $price-desc-align;
+  color: $price-desc-color;
+  font-size: $price-desc-font-size;
+  font-weight: $price-desc-weight;
+  line-height: $price-desc-line-height;
+  border-bottom: $price-desc-bottom-border;
+}
+
+// We use this mixin to style the bullet items in the pricing table
+@mixin pricing-table-bullet {
+  background-color: $price-bg;
+  padding: $price-item-padding;
+  text-align: $price-item-align;
+  color: $price-item-color;
+  font-size: $price-item-font-size;
+  font-weight: $price-item-weight;
+  border-bottom: $price-item-bottom-border;
+}
+
+// We use this mixin to style the CTA area of the pricing tables
+@mixin pricing-table-cta {
+  background-color: $price-cta-bg;
+  text-align: $price-cta-align;
+  padding: $price-cta-padding;
+}
+
+
+@if $include-html-pricing-classes != false {
+
+  /* Pricing Tables */
+  .pricing-table {
+    @include pricing-table-container;
+
+    .title { @include pricing-table-title; }
+    .price { @include pricing-table-price; }
+    .description { @include pricing-table-description; }
+    .bullet-item { @include pricing-table-bullet; }
+    .cta-button { @include pricing-table-cta; }
+  }
+
+}