locomotivecms_wagon 1.4.0 → 1.5.0.rc1

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

@@ -0,0 +1,227 @@
+//
+// Clearing Variables
+//
+$include-html-clearing-classes: $include-html-classes !default;
+
+// We use these to set the background colors for parts of Clearing.
+$clearing-bg: #111 !default;
+$clearing-caption-bg: $clearing-bg !default;
+$clearing-carousel-bg: #111 !default;
+$clearing-img-bg: $clearing-bg !default;
+
+// We use these to style the close button
+$clearing-close-color: #fff !default;
+$clearing-close-size: 40px !default;
+
+// We use these to style the arrows
+$clearing-arrow-size: 16px !default;
+$clearing-arrow-color: $clearing-close-color !default;
+
+// We use these to style captions
+$clearing-caption-font-color: #fff !default;
+$clearing-caption-padding: 10px 30px !default;
+
+// We use these to make the image and carousel height and style
+$clearing-active-img-height: 75% !default;
+$clearing-carousel-height: 150px !default;
+$clearing-carousel-thumb-width: 175px !default;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
+
+@if $include-html-clearing-classes {
+  // We decided to not create a mixin for Clearing because it relies
+  // on predefined classes and structure to work properly.
+  // The variables above should give enough control.
+
+  /* Clearing Styles */
+  [data-clearing] {
+    @include clearfix;
+    margin-bottom: 0;
+    margin-#{$default-float}: 0;
+    list-style: none;
+
+    li {
+      float: $default-float;
+      margin-#{$opposite-direction}: 10px;
+    }
+  }
+
+  .clearing-blackout {
+    background: $clearing-bg;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    #{$default-float}: 0;
+    z-index: 998;
+
+    .clearing-close { display: block; }
+  }
+
+  .clearing-container {
+    position: relative;
+    z-index: 998;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  .visible-img {
+    height: 95%;
+    position: relative;
+
+    img {
+      position: absolute;
+      #{$default-float}: 50%;
+      top: 50%;
+      margin-#{$default-float}: -50%;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  .clearing-caption {
+    color: $clearing-caption-font-color;
+    line-height: 1.3;
+    margin-bottom: 0;
+    text-align: center;
+    bottom: 0;
+    background: $clearing-caption-bg;
+    width: 100%;
+    padding: $clearing-caption-padding;
+    position: absolute;
+    #{$default-float}: 0;
+  }
+
+  .clearing-close {
+    z-index: 999;
+    padding-#{$default-float}: 20px;
+    padding-top: 10px;
+    font-size: $clearing-close-size;
+    line-height: 1;
+    color: $clearing-close-color;
+    display: none;
+
+    &:hover,
+    &:focus { color: #ccc; }
+  }
+
+  .clearing-assembled .clearing-container { height: 100%;
+    .carousel > ul { display: none; }
+  }
+
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature li {
+    display: none;
+    &.clearing-featured-img {
+      display: block;
+    }
+  }
+
+  // Large screen overrides
+  @media #{$small} {
+    .clearing-main-prev,
+    .clearing-main-next {
+      position: absolute;
+      height: 100%;
+      width: 40px;
+      top: 0;
+      & > span {
+        position: absolute;
+        top: 50%;
+        display: block;
+        width: 0;
+        height: 0;
+        border: solid $clearing-arrow-size;
+      }
+    }
+    .clearing-main-prev {
+      #{$default-float}: 0;
+      & > span {
+        #{$default-float}: 5px;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $clearing-arrow-color;
+      }
+    }
+    .clearing-main-next {
+      #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-color: $clearing-arrow-color;
+      }
+    }
+
+    .clearing-main-prev.disabled,
+    .clearing-main-next.disabled { opacity: 0.5; }
+
+    .clearing-assembled .clearing-container {
+
+      .carousel {
+        background: $clearing-carousel-bg;
+        height: $clearing-carousel-height;
+        margin-top: 5px;
+
+        & > ul {
+          display: block;
+          z-index: 999;
+          width: 200%;
+          height: 100%;
+          margin-#{$default-float}: 0;
+          position: relative;
+          #{$default-float}: 0;
+
+          li {
+            display: block;
+            width: $clearing-carousel-thumb-width;
+            height: inherit;
+            padding: 0;
+            float: $default-float;
+            overflow: hidden;
+            margin-#{$opposite-direction}: 1px;
+            position: relative;
+            cursor: $cursor-pointer-value;
+            opacity: 0.4;
+
+            &.fix-height {
+              img {
+                min-height: 100%;
+                height: 100%;
+                max-width: none;
+              }
+            }
+
+            a.th {
+              border: none;
+              @if $experimental {
+                -webkit-box-shadow: none;
+              }
+                      box-shadow: none;
+              display: block;
+            }
+
+            img {
+            cursor: $cursor-pointer-value !important;
+              min-width: 100% !important;
+            }
+
+            &.visible { opacity: 1; }
+          }
+        }
+      }
+
+      .visible-img {
+        background: $clearing-img-bg;
+        overflow: hidden;
+        height: $clearing-active-img-height;
+      }
+    }
+
+    .clearing-close {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 20px;
+      padding-#{$default-float}: 0;
+      padding-top: 0;
+    }
+  }
+
+}

data/generators/line_case/public/stylesheets/foundation/components/_custom-forms.scss

@@ -0,0 +1,278 @@
+//
+// Custom Form Variables
+//
+$include-html-custom-form-classes: $include-html-classes !default;
+
+// We use these to control the basic form styles input styles
+$custom-form-border-color: #ccc !default;
+$custom-form-border-size: 1px !default;
+$custom-form-bg: #fff !default;
+$custom-form-bg-disabled: #ddd !default;
+$custom-form-input-size: 16px !default;
+$custom-form-check-color: #222 !default;
+$custom-form-check-size: 16px !default;
+$custom-form-radio-size: 8px !default;
+$custom-form-checkbox-radius: 0 !default;
+
+// We use these to style the custom select form element.
+$custom-select-bg: #fff !default;
+$custom-select-fade-to-color: #f3f3f3 !default;
+$custom-select-border-color: #ddd !default;
+$custom-select-triangle-color: #aaa !default;
+$custom-select-triangle-color-open: #222 !default;
+$custom-select-height: em-calc(13) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom: em-calc(20) !default;
+$custom-select-font-color-selected: #141414 !default;
+$custom-select-disabled-color: #888 !default;
+
+// We use these to control the style of the custom select dropdown element.
+$custom-dropdown-height: 200px !default;
+$custom-dropdown-bg: #fff !default;
+$custom-dropdown-border-color: darken(#fff, 20%) !default;
+$custom-dropdown-border-width: 1px !default;
+$custom-dropdown-border-style: solid !default;
+$custom-dropdown-font-color: #555 !default;
+$custom-dropdown-font-size: em-calc(14) !default;
+$custom-dropdown-color-selected: #eeeeee !default;
+$custom-dropdown-font-color-selected: #000 !default;
+$custom-dropdown-shadow: 0 2px 2px 0 rgba(0,0,0,0.1) !default;
+$custom-dropdown-offset-top: auto !default;
+$custom-dropdown-list-padding: em-calc(4) !default;
+$custom-dropdown-default-float-padding: em-calc(6) !default;
+$custom-dropdown-opposite-padding: em-calc(38) !default;
+$custom-dropdown-list-item-min-height: em-calc(24) !default;
+$custom-dropdown-width-small: 134px !default;
+$custom-dropdown-width-medium: 254px !default;
+$custom-dropdown-width-large: 434px !default;
+
+// We decided not to make a mixin for the custom forms because
+// they rely on a very specific class naming structure.
+// We may look at updating this in the future.
+@mixin custom-form-input($radius:0px, $mark-size:0px) {
+  @include radius($radius);
+  $custom-form-input-padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+  @if $custom-form-input-padding >= 0 {
+    padding: $custom-form-input-padding;
+  } @else {
+    padding: 0;
+  }
+}
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-custom-form-classes != false {
+
+  /* Custom Checkbox and Radio Inputs */
+  form.custom {
+
+    .hidden-field {
+      margin-#{$default-float}: -99999px;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .custom {
+      display: inline-block;
+      width: $custom-form-input-size;
+      height: $custom-form-input-size;
+      position: relative;
+      top:-1px; /* fix centering issue */
+      vertical-align: middle;
+      border: solid $custom-form-border-size $custom-form-border-color;
+      background: $custom-form-bg;
+
+      &.checkbox {
+        @include custom-form-input($radius:$custom-form-checkbox-radius, $mark-size:$custom-form-check-size);
+      }
+
+      &.radio {
+        @include custom-form-input($radius:1000px, $mark-size:$custom-form-radio-size);
+      }
+
+      &.checkbox {
+        &:before {
+          content: "";
+          display: block;
+          font-size: $custom-form-check-size;
+          color: $custom-form-bg;
+        }
+      }
+
+      &.radio.checked {
+        &:before {
+          content: "";
+          display: block;
+          width: $custom-form-radio-size;
+          height: $custom-form-radio-size;
+          @include radius(1000px);
+          background: $custom-form-check-color;
+          position: relative;
+        }
+      }
+
+      &.checkbox.checked {
+        &:before {
+          content: "\00d7";
+          color: $custom-form-check-color;
+          position: absolute;
+          top: -50%;
+          left: 50%;
+          margin-top: 4px;
+          margin-left: -5px;
+        }
+      }
+    }
+  }
+
+  /* Custom Select Options and Dropdowns */
+  form.custom {
+    .custom.dropdown {
+      display: block;
+      position: relative;
+      top: 0;
+      height: $custom-select-height;
+      margin-bottom: $custom-select-margin-bottom;
+      margin-top: 0;
+      padding: 0;
+      width: 100%;
+      background: $custom-dropdown-bg;
+      @if $experimental {
+        background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
+        background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+        -webkit-box-shadow: none;
+      }
+      background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      box-shadow: none;
+      font-size: $custom-dropdown-font-size;
+      vertical-align: top;
+
+      ul {
+        overflow-y: auto;
+        max-height: $custom-dropdown-height;
+      }
+
+      .current {
+        cursor:default;
+        white-space: nowrap;
+        line-height: $custom-select-height - em-calc(1);
+        color: $input-font-color;
+        text-decoration: none;
+        overflow: hidden;
+        display: block;
+        margin-#{$default-float}: $form-spacing / 2;
+        margin-#{$opposite-direction}: $custom-select-height;
+      }
+
+      .selector {
+        cursor:default;
+        position: absolute;
+        width: $form-spacing * 2.5;
+        height: $custom-select-height;
+        display: block;
+        #{$opposite-direction}: 0;
+        top: 0;
+        &:after {
+          content: "";
+          display: block;
+          @include css-triangle(5px, $custom-select-triangle-color, top);
+          position: absolute;
+          #{$default-float}: ($form-spacing * 2.5) / 2 - em-calc(5);
+          top: 50%;
+          margin-top: -3px;
+        }
+      }
+
+      &:hover, &.open {
+        a.selector {
+          &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
+        }
+      }
+
+      .disabled {
+        color: $custom-select-disabled-color;
+        &:hover {
+          background: transparent;
+          color: $custom-select-disabled-color;
+          &:after { display: none; }
+        }
+      }
+
+      &.open ul {
+        display: block;
+        z-index: 10;
+        min-width:100%;
+        @include box-sizing(content-box);
+      }
+
+      &.small { max-width: $custom-dropdown-width-small; }
+      &.medium { max-width: $custom-dropdown-width-medium; }
+      &.large { max-width: $custom-dropdown-width-large; }
+      &.expand { width: 100% !important; }
+
+      &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
+      &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
+      &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
+    }
+
+    .error .custom.dropdown {
+      @include form-error-color;
+      background: rgba($alert-color, 0.1);
+      margin-bottom: 0;
+    }
+
+    .error .custom.dropdown + small.error {
+      margin-top: 0;
+    }
+
+    .custom.dropdown ul {
+      position: absolute;
+      width: auto;
+      display: none;
+      margin: 0;
+      #{$default-float}: -$input-border-width;
+      top: $custom-dropdown-offset-top;
+      @if $experimental {
+        -webkit-box-shadow: $custom-dropdown-shadow;
+      }
+      box-shadow: $custom-dropdown-shadow;
+      margin: 0;
+      padding: 0;
+      background: $custom-dropdown-bg;
+      border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
+      font-size: $em-base;
+
+      li {
+        color: $custom-dropdown-font-color;
+        font-size: $custom-dropdown-font-size;
+        cursor: $cursor-default-value;
+        padding-top: $custom-dropdown-list-padding;
+        padding-bottom: $custom-dropdown-list-padding;
+        padding-#{$default-float}: $custom-dropdown-default-float-padding;
+        padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
+        min-height: $custom-dropdown-list-item-min-height;
+        line-height: $custom-dropdown-list-item-min-height;
+        margin: 0;
+        white-space: nowrap;
+        list-style: none;
+
+        &.selected {
+          background: $custom-dropdown-color-selected;
+          color: $custom-dropdown-font-color-selected;
+        }
+        &:hover {
+          background-color: darken($custom-dropdown-color-selected, 4%);
+          color: $custom-dropdown-font-color-selected;
+        }
+        &.selected:hover {
+          background: $custom-dropdown-color-selected;
+          cursor: $cursor-default-value;
+          color: $custom-dropdown-font-color-selected;
+        }
+      }
+
+      &.show { display: block; }
+    }
+
+    /* Custom input, disabled */
+    .custom.disabled { background: $custom-form-bg-disabled; }
+  }
+}

data/generators/line_case/public/stylesheets/foundation/components/_dropdown-buttons.scss

@@ -0,0 +1,115 @@
+//
+// Dropdown Button Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to set the color of the pip in dropdown buttons
+$dropdown-button-pip-color: #fff !default;
+$dropdown-button-pip-color-alt: #333 !default;
+
+// We use these to style tiny dropdown buttons
+$dropdown-button-padding-tny: $button-tny * 5 !default;
+$dropdown-button-pip-size-tny: $button-tny !default;
+$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1) !default;
+
+// We use these to style small dropdown buttons
+$dropdown-button-padding-sml: $button-sml * 5 !default;
+$dropdown-button-pip-size-sml: $button-sml !default;
+$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1) !default;
+
+// We use these to style medium dropdown buttons
+$dropdown-button-padding-med: $button-med * 4 + em-calc(3) !default;
+$dropdown-button-pip-size-med: $button-med - em-calc(3) !default;
+$dropdown-button-pip-opposite-med: $button-med * 2 !default;
+$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2) !default;
+
+// We use these to style large dropdown buttons
+$dropdown-button-padding-lrg: $button-lrg * 4 !default;
+$dropdown-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12) !default;
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3) !default;
+
+//
+// Dropdown Button Mixin
+//
+
+// We use this mixin to build off of the button mixin and add dropdown button styles
+@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
+
+  // We add in base styles, but they can be negated by setting to 'false'.
+  @if $base-style {
+    position: relative;
+
+    // This creates the base styles for the triangle pip
+    &:before {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 0;
+      display: block;
+      border-style: solid;
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      top: 50%;
+    }
+  }
+
+  // If we're dealing with tiny buttons, use these styles
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+    &:before {
+      border-width: $dropdown-button-pip-size-tny;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
+      margin-top: $dropdown-button-pip-top-tny;
+    }
+  }
+
+  // If we're dealing with small buttons, use these styles
+  @if $padding == small {
+    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+    &:before {
+      border-width: $dropdown-button-pip-size-sml;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
+      margin-top: $dropdown-button-pip-top-sml;
+    }
+  }
+
+  // If we're dealing with default (medium) buttons, use these styles
+  @if $padding == medium {
+    padding-#{$opposite-direction}: $dropdown-button-padding-med;
+    &:before {
+      border-width: $dropdown-button-pip-size-med;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
+      margin-top: $dropdown-button-pip-top-med;
+    }
+  }
+
+  // If we're dealing with large buttons, use these styles
+  @if $padding == large {
+    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+    &:before {
+      border-width: $dropdown-button-pip-size-lrg;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
+      margin-top: $dropdown-button-pip-top-lrg;
+    }
+  }
+
+  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
+  @if $pip-color {
+    &:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+
+@if $include-html-button-classes {
+
+  /* Dropdown Button */
+  .dropdown.button { @include dropdown-button;
+    &.tiny { @include dropdown-button(tiny,$base-style:false); }
+    &.small { @include dropdown-button(small,$base-style:false); }
+    &.large { @include dropdown-button(large,$base-style:false); }
+    &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+  }
+
+}