locomotivecms_wagon 1.4.0 → 1.5.0.rc1

data/generators/line_case/public/stylesheets/foundation/components/_progress-bars.scss

@@ -0,0 +1,71 @@
+//
+// Progress Bar Variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use this to se the prog bar height
+$progress-bar-height: em-calc(25) !default;
+$progress-bar-color: transparent !default;
+
+// We use these to control the border styles
+$progress-bar-border-color: darken(#fff, 20%) !default;
+$progress-bar-border-size: 1px !default;
+$progress-bar-border-style: solid !default;
+$progress-bar-border-radius: $global-radius !default;
+
+// We use these to control the margin & padding
+$progress-bar-pad: em-calc(2) !default;
+$progress-bar-margin-bottom: em-calc(10) !default;
+
+// We use these to set the meter colors
+$progress-meter-color: $primary-color !default;
+$progress-meter-secondary-color: $secondary-color !default;
+$progress-meter-success-color: $success-color !default;
+$progress-meter-alert-color: $alert-color !default;
+
+
+//
+// Progress Bar Mixins
+//
+
+// We use this to set up the progress bar container
+@mixin progress-container {
+  background-color: $progress-bar-color;
+  height: $progress-bar-height;
+  border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
+  padding: $progress-bar-pad;
+  margin-bottom: $progress-bar-margin-bottom;
+}
+
+@mixin progress-meter($bg:$progress-meter-color) {
+  background: $bg;
+  height: 100%;
+  display: block;
+}
+
+
+@if $include-html-media-classes != false {
+
+  /* Progress Bar */
+  .progress {
+    @include progress-container;
+
+    // Meter
+    .meter {
+      @include progress-meter;
+    }
+    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
+    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
+    &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
+
+    &.radius { @include radius($global-radius);
+      .meter { @include radius($global-radius - 1); }
+    }
+
+    &.round { @include radius(1000px);
+      .meter { @include radius(999px); }
+    }
+
+  }
+
+}

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

@@ -0,0 +1,136 @@
+//
+// Reveal Variables
+//
+
+$include-html-reveal-classes: $include-html-classes !default;
+
+// We use these to control the style of the reveal overlay.
+$reveal-overlay-bg: rgba(#000, .45) !default;
+$reveal-overlay-bg-old: #000 !default;
+
+// We use these to control the style of the modal itself.
+$reveal-modal-bg: #fff !default;
+$reveal-position-top: 50px !default;
+$reveal-default-width: 80% !default;
+$reveal-modal-padding: em-calc(20) !default;
+$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+
+// We use these to style the reveal close button
+$reveal-close-font-size: em-calc(22) !default;
+$reveal-close-top: em-calc(8) !default;
+$reveal-close-side: em-calc(11) !default;
+$reveal-close-color: #aaa !default;
+$reveal-close-weight: bold !default;
+
+// We use these to control the modal border
+$reveal-border-style: solid !default;
+$reveal-border-width: 1px !default;
+$reveal-border-color: #666 !default;
+
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
+//
+// Reveal Mixins
+//
+
+// We use this to create the reveal background overlay styles
+@mixin reveal-bg {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: $reveal-overlay-bg-old;
+  background: $reveal-overlay-bg;
+  z-index: 98;
+  display: none;
+  top: 0;
+  #{$default-float}: 0;
+}
+
+// We use this mixin to create the structure of a reveal modal
+@mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
+  @if $base-style {
+    visibility: hidden;
+    display: none;
+    position: absolute;
+    #{$default-float}: 50%;
+    z-index: 99;
+    height: auto;
+
+    // Make sure rows don't have a min-width on them
+    .column,
+    .columns { min-width: 0; }
+
+    // Get rid of margin from first and last element inside modal
+    & > :first-child { margin-top: 0; }
+    & > :last-child { margin-bottom: 0; }
+  }
+
+  @if $width {
+    margin-#{$default-float}: -($width / 2);
+    width: $width;
+  }
+}
+
+// We use this to style the reveal modal defaults
+@mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
+
+  @if $bg { background-color: $bg; }
+  @if $padding { padding: $padding; }
+
+  @if $border { border: $border-style $border-width $border-color; }
+
+  // We can choose whether or not to include the default box-shadow.
+  @if $box-shadow {
+    @if $experimental {
+      -webkit-box-shadow: $reveal-box-shadow;
+    }
+    box-shadow: $reveal-box-shadow;
+  }
+
+  @if $top-offset { top: $top-offset; }
+}
+
+// We use this to create a close button for the reveal modal
+@mixin reveal-close($color:$reveal-close-color) {
+  font-size: $reveal-close-font-size;
+  line-height: 1;
+  position: absolute;
+  top: $reveal-close-top;
+  #{$opposite-direction}: $reveal-close-side;
+  color: $color;
+  font-weight: $reveal-close-weight;
+  cursor: $cursor-pointer-value;
+}
+
+@if $include-html-reveal-classes != false {
+
+  // Reveal Modals
+  .reveal-modal-bg { @include reveal-bg; }
+
+  .#{$reveal-modal-class} {
+    @include reveal-modal-base;
+    @include reveal-modal-style;
+
+    .#{$close-reveal-modal-class} { @include reveal-close; }
+  }
+
+  // Large Screen Styles
+  @media #{$small} {
+
+    .#{$reveal-modal-class} {
+      @include reveal-modal-style(false, em-calc(30), false, $box-shadow: false, $top-offset: em-calc(100));
+
+      &.tiny  { @include reveal-modal-base(false, 30%); }
+      &.small { @include reveal-modal-base(false, 40%); }
+      &.medium  { @include reveal-modal-base(false, 60%); }
+      &.large { @include reveal-modal-base(false, 70%); }
+      &.xlarge { @include reveal-modal-base(false, 95%); }
+    }
+  }
+
+  // Reveal Print Styles
+  @media print {
+    .#{$reveal-modal-class} {background: #fff !important;}
+  }
+}

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

@@ -0,0 +1,391 @@
+//
+// Section Variables
+//
+$include-html-section-classes: $include-html-classes !default;
+
+// We use these to set padding and hover factor
+$section-title-padding: em-calc(15) !default;
+$section-content-padding: em-calc(15) !default;
+$section-function-factor: 10% !default;
+
+// These style the titles
+$section-title-color: #333 !default;
+$section-title-color-active: #333 !default;
+$section-title-bg: #efefef !default;
+$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
+$section-title-bg-active-tabs: #fff !default;
+$section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2) !default;
+
+// Want to control border size, here ya go!
+$section-border-size: 1px !default;
+$section-border-style: solid !default;
+$section-border-color: #ccc !default;
+
+// Font controls
+$section-font-size: em-calc(14) !default;
+
+// Control the color of the background and some size options
+$section-content-bg: #fff !default;
+$section-vertical-nav-min-width: em-calc(200) !default;
+$section-vertical-tabs-title-width: em-calc(200) !default;
+$section-bottom-margin: em-calc(20) !default;
+
+$title-selector: ".title" !default;
+$content-selector: ".content" !default;
+$active-region-selector: ".active" !default;
+
+//
+// Section Mixins
+//
+
+// basic styles for sections.js: positions
+@mixin section-container-base($section-type: accordion) {
+  width: 100%;
+  position: relative;
+  display: block;
+  margin-bottom: $section-bottom-margin;
+
+  @if $section-type != accordion {
+    &:not([data-section-resized]):not([data-section-small-style]) {
+      visibility: hidden;
+    }
+  }
+
+  @if $section-type != tabs {
+  	&[data-section-small-style] {
+      width: 100% !important; // override inline style
+
+	  & > [data-section-region], & > section, & > .section {
+        padding: 0 !important; // override inline style
+        margin: 0 !important; // override inline style
+        & > [data-section-title], & > #{$title-selector}{
+          width: 100% !important; // override inline style
+        }
+      }
+	}
+  }
+}
+
+// foundation styles for sections
+@mixin section-container-style($section-type: accordion) {
+
+  // Accordion container border styles
+  @if $section-type == accordion {
+    border-top: $section-border-size $section-border-style $section-border-color;
+  }
+
+  // Tabs container border styles
+  @else if $section-type == tabs {
+	border: none;
+  }
+
+  // Vertical Tabs container border styles
+  @else if $section-type == vertical-tabs {
+    border: none;
+  }
+
+  // Vertical Nav container border styles
+  @else if $section-type == vertical-nav {
+    border: none;
+  }
+
+  // Horizontal Nav container border styles
+  @else if $section-type == horizontal-nav {
+    background: $section-title-bg;
+    border: $section-border-size $section-border-style $section-border-color;
+  }
+}
+
+//basic styles for section.js: section region positions
+@mixin section-base($section-type: accordion) {
+
+  & > [data-section-title], & > #{$title-selector} {
+    margin-bottom: 0;
+	a {
+	  width: 100%;
+      display: inline-block;
+      white-space: nowrap;
+    }
+  }
+
+  & > [data-section-content], & > #{$content-selector} {
+    display: none;
+  }
+
+  &#{$active-region-selector} {
+    & > [data-section-content], & > #{$content-selector} { display: block; }
+  }
+
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
+  }
+
+  // Style for when Accordion
+  @if $section-type == accordion {
+	margin: 0;
+    & > [data-section-title], & > #{$title-selector} { width: 100%; }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+
+    & > [data-section-title], & > #{$title-selector} {
+	  width: auto;
+      position: absolute;
+      top: 0;
+	  #{$default-float}: 0;
+    }
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+
+    & > [data-section-title], & > #{$title-selector} {
+	  position: absolute;
+	  top:0;
+      #{$default-float}: 0;
+      width: $section-vertical-tabs-title-width;
+    }
+
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width;
+
+      & > [data-section-title], & > #{$title-selector} {
+        width: $section-vertical-tabs-title-width;
+      }
+    }
+  }
+
+  // Styles for when Vertical Nav
+  @else if $section-type == vertical-nav {
+
+	position: relative;
+    display: inline-block;
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
+    }
+
+	& > [data-section-content], & > #{$content-selector} {
+	    position: absolute;
+	    top:0;
+		#{$default-float}: 0;
+		z-index: 999;
+		min-width: $section-vertical-nav-min-width;
+	}
+  }
+
+  // Styles for when Horizontal Nav
+  @else if $section-type == horizontal-nav {
+
+	position: relative;
+	float: #{$default-float};
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
+    }
+
+	& > [data-section-content], & > #{$content-selector} {
+	  width: auto;
+	  position: absolute;
+	  top: 0;
+      #{$default-float}: 0;
+	  z-index: 999;
+	  min-width: $section-vertical-nav-min-width;
+	}
+  }
+}
+
+//foundation styles for section regions
+@mixin section-style($section-type:accordion, $title-selector: $title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
+
+  // Default Styles
+  & > #{$title-selector} {
+    background-color: $title-bg;
+    cursor: $cursor-pointer-value;
+	border: $section-border-style $section-border-size $section-border-color;
+	a {
+      padding: $title-padding;
+      color: $title-color;
+      font-size: $title-font-size;
+	  background: none;
+    }
+    &:hover { background-color: $title-bg-hover; }
+  }
+
+  & > #{$content-selector} {
+    padding: $content-padding;
+    background-color: $content-bg;
+	border: $section-border-style $section-border-size $section-border-color;
+
+    &>*:last-child { margin-bottom: 0; }
+    &>*:first-child { padding-top: 0; }
+    &>*:last-child:not(.flex-video) { padding-bottom: 0; }
+  }
+
+  &#{$active-region-selector} {
+	& > #{$title-selector} {
+	  background: $title-bg-active;
+      a { color: $title-color-active; }
+    }
+  }
+
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
+  }
+
+  // Style for when Accordion
+  @if $section-type == accordion {
+    & > #{$title-selector} { border-top: none; }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+
+	&#{$active-region-selector} > #{$title-selector} {
+      border-bottom: 0;
+	}
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width - em-calc(1px);
+
+      & > #{$title-selector} {
+        background-color: $title-bg-active;
+      }
+    }
+  }
+}
+
+@mixin section-container($base-style:true, $section-type:accordion)  {
+  @include section-container-base($section-type);
+  @include section-container-style($section-type);
+}
+
+@mixin section($section-type:accordion, $title-selector:$title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
+  @include section-base($section-type);
+  @include section-style($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color);
+}
+
+@if $include-html-section-classes != false {
+
+  /* Sections */
+
+  [data-section=''], [data-section='auto'], .section-container.auto,
+  [data-section='vertical-tabs'], .section-container.vertical-tabs,
+  [data-section='vertical-nav'], .section-container.vertical-nav,
+  [data-section='horizontal-nav'], .section-container.horizontal-nav,
+  [data-section='accordion'], .section-container.accordion {
+	@include section-container-base(accordion);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(accordion);
+    }
+  }
+
+  .section-container.auto,
+  .section-container.vertical-tabs,
+  .section-container.vertical-nav,
+  .section-container.horizontal-nav,
+  .section-container.accordion {
+	@include section-container-style(accordion);
+	& > section, & > .section {
+      @include section-style(accordion);
+    }
+  }
+
+  [data-section='tabs'], .section-container.tabs {
+	@include section-container-base(tabs);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(tabs);
+    }
+  }
+
+  .section-container.tabs {
+	@include section-container-style(tabs);
+	& > section, & > .section {
+      @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+    }
+  }
+
+  @media #{$small} {
+
+    [data-section=''], [data-section='auto'], .section-container.auto {
+	  @include section-container-base(tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(tabs);
+      }
+    }
+
+	.section-container.auto {
+	  @include section-container-style(tabs);
+	  & > section, & > .section {
+        @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+      }
+    }
+
+	[data-section='vertical-tabs'], .section-container.vertical-tabs {
+	  @include section-container-base(vertical-tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-tabs);
+      }
+    }
+
+	.section-container.vertical-tabs {
+	  @include section-container-style(vertical-tabs);
+	  & > section, & > .section {
+        @include section-style(vertical-tabs);
+      }
+    }
+
+	[data-section='vertical-nav'], .section-container.vertical-nav {
+	  @include section-container-base(vertical-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-nav);
+      }
+    }
+
+	.section-container.vertical-nav {
+	  @include section-container-style(vertical-nav);
+	  & > section, & > .section {
+        @include section-style(vertical-nav);
+      }
+    }
+
+	[data-section='horizontal-nav'], .section-container.horizontal-nav {
+	  @include section-container-base(horizontal-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(horizontal-nav);
+      }
+    }
+
+	.section-container.horizontal-nav {
+	  @include section-container-style(horizontal-nav);
+	  & > section, & > .section {
+        @include section-style(horizontal-nav);
+      }
+    }
+  }
+
+  // Change all variations to expanded accordions when no JS is detected.
+  .no-js {
+    [data-section], .section-container {
+	  @include section-container-base(accordion);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(accordion);
+      }
+    }
+	.section-container {
+      @include section-container-style(accordion);
+	  & > section, & > .section {
+        @include section-style(accordion);
+      }
+    }
+  }
+}

data/generators/line_case/public/stylesheets/foundation/components/_side-nav.scss

@@ -0,0 +1,69 @@
+//
+// Side Nav Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to control padding.
+$side-nav-padding: em-calc(14 0) !default;
+
+// We use these to control list styles.
+$side-nav-list-type: none !default;
+$side-nav-list-position: inside !default;
+$side-nav-list-margin: em-calc(0 0 7 0) !default;
+
+// We use these to control link styles.
+$side-nav-link-color: $primary-color !default;
+$side-nav-link-color-active: lighten(#000, 30%) !default;
+$side-nav-font-size: em-calc(14) !default;
+$side-nav-font-weight: bold !default;
+
+// We use these to control border styles
+$side-nav-divider-size: 1px !default;
+$side-nav-divider-style: solid !default;
+$side-nav-divider-color: darken(#fff, 10%) !default;
+
+
+//
+// Side Nav Mixins
+//
+
+
+// We use this to style the side-nav
+@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
+  display: block;
+  margin: 0;
+  padding: $side-nav-padding;
+  list-style-type: $side-nav-list-type;
+  list-style-position: $side-nav-list-position;
+
+  li {
+    margin: $side-nav-list-margin;
+    font-size: $font-size;
+
+    a {
+      display: block;
+      color: $link-color;
+    }
+
+    &.active > a:first-child {
+      color: $side-nav-link-color-active;
+      font-weight: $side-nav-font-weight;
+    }
+
+    &.divider {
+      border-top: $side-nav-divider-size $side-nav-divider-style;
+      height: 0;
+      padding: 0;
+      list-style: none;
+      border-top-color: $divider-color;
+    }
+  }
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Side Nav */
+  .side-nav { @include side-nav; }
+
+}