foundation-rails 5.0.1.0

data/vendor/assets/stylesheets/foundation/components/_accordion.scss

@@ -0,0 +1,49 @@
+@import "global";
+@import "grid";
+
+//
+// @variables
+//
+
+$include-html-accordion-classes: $include-html-classes !default;
+
+$accordion-navigation-padding: rem-calc(16) !default;
+$accordion-navigation-bg-color: #efefef !default;
+$accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%) !default;
+$accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%) !default;
+$accordion-navigation-font-color: #222 !default;
+$accordion-navigation-font-size: rem-calc(16) !default;
+$accordion-navigation-font-family: $body-font-family !default;
+
+$accordion-content-padding: $column-gutter/2 !default;
+$accordion-content-active-bg-color: #fff !default;
+
+@include exports("accordion") {
+  @if $include-html-accordion-classes {
+    .accordion { 
+      @include clearfix; margin-bottom: 0;
+      dd { 
+        display: block; 
+        margin-bottom: 0 !important; 
+        &.active a { background: $accordion-navigation-active-bg-color; }
+        > a { 
+          background: $accordion-navigation-bg-color; 
+          color: $accordion-navigation-font-color; 
+          padding: $accordion-navigation-padding; 
+          display: block; 
+          font-family: $body-font-family; 
+          font-size: $accordion-navigation-font-size;
+          &:hover { background: $accordion-navigation-hover-bg-color; }
+        }
+      }
+      .content { 
+        display: none; 
+        padding: $accordion-content-padding;
+        &.active {
+          display: block;
+          background: $accordion-content-active-bg-color;
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -0,0 +1,113 @@
+@import "global";
+
+//
+// Alert Box Variables
+//
+$include-html-alert-classes: $include-html-classes !default;
+
+// We use this to control alert padding.
+$alert-padding-top: rem-calc(14) !default;
+$alert-padding-default-float: $alert-padding-top !default;
+$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default;
+$alert-padding-bottom: $alert-padding-top !default;
+
+// We use these to control text style.
+$alert-font-weight: normal !default;
+$alert-font-size: rem-calc(13) !default;
+$alert-font-color: #fff !default;
+$alert-font-color-alt: darken($secondary-color, 60%) !default;
+
+// We use this for close hover effect.
+$alert-function-factor: 5% !default;
+
+// We use these to control border styles.
+$alert-border-style: solid !default;
+$alert-border-width: 1px !default;
+$alert-border-color: darken($primary-color, $alert-function-factor) !default;
+$alert-bottom-margin: rem-calc(20) !default;
+
+// We use these to style the close buttons
+$alert-close-color: #333 !default;
+$alert-close-position: rem-calc(5) !default;
+$alert-close-font-size: rem-calc(22) !default;
+$alert-close-opacity: 0.3 !default;
+$alert-close-opacity-hover: 0.5 !default;
+$alert-close-padding: 9px 6px 4px !default;
+
+// We use this to control border radius
+$alert-radius: $global-radius !default;
+
+//
+// Alert Mixins
+//
+
+// We use this mixin to create a default alert base.
+@mixin alert-base {
+  border-style: $alert-border-style;
+  border-width: $alert-border-width;
+  display: block;
+  font-weight: $alert-font-weight;
+  margin-bottom: $alert-bottom-margin;
+  position: relative;
+  padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
+  font-size: $alert-font-size;
+}
+
+// We use this mixin to add alert styles
+//
+// $bg - The background of the alert. Default: $primary-color.
+@mixin alert-style($bg:$primary-color) {
+
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  // We control which background color and border come through.
+  background-color: $bg;
+  border-color: darken($bg, $alert-function-factor);
+
+  // We control the text color for you based on the background color.
+  @if $bg-lightness > 70% { color: $alert-font-color-alt; }
+  @else                   { color: $alert-font-color; }
+
+}
+
+// We use this to create the close button.
+@mixin alert-close {
+  font-size: $alert-close-font-size;
+  padding: $alert-close-padding;
+  line-height: 0;
+  position: absolute;
+  top: $alert-close-position + rem-calc(2);
+  #{$opposite-direction}: $alert-close-position;
+  color: $alert-close-color;
+  opacity: $alert-close-opacity;
+  &:hover,
+  &:focus { opacity: $alert-close-opacity-hover; }
+}
+
+// We use this to quickly create alerts with a single mixin.
+//
+// $bg - Background of alert. Default: $primary-color.
+// $radius - Radius of alert box. Default: false.
+@mixin alert($bg:$primary-color, $radius:false) {
+  @include alert-base;
+  @include alert-style($bg);
+  @include radius($radius);
+}
+
+@include exports("alert-box") {
+  @if $include-html-alert-classes {
+    .alert-box {
+      @include alert;
+
+      .close      { @include alert-close; }
+
+      &.radius    { @include radius($alert-radius); }
+      &.round     { @include radius($global-rounded); }
+
+      &.success   { @include alert-style($success-color); }
+      &.alert     { @include alert-style($alert-color); }
+      &.secondary { @include alert-style($secondary-color); }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -0,0 +1,83 @@
+@import "global";
+
+//
+// Block Grid Variables
+//
+$include-html-grid-classes: $include-html-classes !default;
+
+// We use this to control the maximum number of block grid elements per row
+$block-grid-elements: 12 !default;
+$block-grid-default-spacing: rem-calc(20) !default;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+$block-grid-media-queries: true !default;
+
+//
+// Block Grid Mixins
+//
+
+// Create a custom block grid
+//
+// $per-row - # of items to display per row. Default: false.
+// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
+// $base-style - Apply a base style to block grid. Default: true.
+@mixin block-grid(
+  $per-row:false, 
+  $spacing:$block-grid-default-spacing, 
+  $base-style:true) {
+
+  @if $base-style {
+    display: block;
+    padding: 0;
+    margin: 0 (-$spacing/2);
+    @include clearfix;
+
+    &>li {
+      display: inline;
+      height: auto;
+      float: $default-float;
+      padding: 0 ($spacing/2) $spacing;
+    }
+  }
+
+  @if $per-row {
+    &>li {
+      width: 100%/$per-row;
+      padding: 0 ($spacing/2) $spacing;
+
+      &:nth-of-type(n) { clear: none; }
+      &:nth-of-type(#{$per-row}n+1) { clear: both; }
+    }
+  }
+
+}
+
+// Generate presentational markup for block grid.
+//
+// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
+@mixin block-grid-html-classes($size) {
+  @for $i from 1 through $block-grid-elements {
+    .#{$size}-block-grid-#{($i)} {
+      @include block-grid($i,$block-grid-default-spacing,false);
+    }
+  }
+}
+
+@include exports("block-grid") {
+  @if $include-html-grid-classes {
+    
+    [class*="block-grid-"] { @include block-grid; }
+
+    @media #{$small-up} {
+      @include block-grid-html-classes($size:small);
+    }
+
+    @media #{$medium-up} {
+      @include block-grid-html-classes($size:medium);
+    }
+
+    @media #{$large-up} {
+      @include block-grid-html-classes($size:large);
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss

@@ -0,0 +1,123 @@
+@import "global";
+
+//
+// Breadcrumb Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to set the background color for the breadcrumb container.
+$crumb-bg: lighten($secondary-color, 5%) !default;
+
+// We use these to set the padding around the breadcrumbs.
+$crumb-padding: rem-calc(9 14 9) !default;
+$crumb-side-padding: rem-calc(12) !default;
+
+// We use these to control border styles.
+$crumb-function-factor: 10% !default;
+$crumb-border-size: 1px !default;
+$crumb-border-style: solid !default;
+$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
+$crumb-radius: $global-radius !default;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size: rem-calc(11) !default;
+$crumb-font-color: $primary-color !default;
+$crumb-font-color-current: #333 !default;
+$crumb-font-color-unavailable: #999 !default;
+$crumb-font-transform: uppercase !default;
+$crumb-link-decor: underline !default;
+
+// We use these to control the slash between breadcrumbs
+$crumb-slash-color: #aaa !default;
+$crumb-slash: "/" !default;
+
+//
+// Breakcrumb Mixins
+//
+
+// We use this mixin to create a container around our breadcrumbs
+@mixin crumb-container {
+  display: block;
+  padding: $crumb-padding;
+  overflow: hidden;
+  margin-#{$default-float}: 0;
+  list-style: none;
+  border-style: $crumb-border-style;
+  border-width: $crumb-border-size;
+
+  // We control which background color and border come through.
+  background-color: $crumb-bg;
+  border-color: $crumb-border-color;
+}
+
+// We use this mixin to create breadcrumb styles from list items.
+@mixin crumbs {
+
+  // A normal state will make the links look and act like clickable breadcrumbs.
+  margin: 0;
+  float: $default-float;
+  font-size: $crumb-font-size;
+  text-transform: $crumb-font-transform;
+
+  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
+
+  a,
+  span {
+    text-transform: $crumb-font-transform;
+    color: $crumb-font-color;
+  }
+
+  // Current is for the link of the current page
+  &.current {
+    cursor: $cursor-default-value;
+    color: $crumb-font-color-current;
+    a {
+      cursor: $cursor-default-value;
+      color: $crumb-font-color-current;
+    }
+
+    &:hover, &:hover a,
+    &:focus, &:focus a { text-decoration: none; }
+  }
+
+  // Unavailable removed color and link styles so it looks inactive.
+  &.unavailable {
+    color: $crumb-font-color-unavailable;
+    a { color: $crumb-font-color-unavailable; }
+
+    &:hover,
+    &:hover a,
+    &:focus,
+    a:focus {
+      text-decoration: none;
+      color: $crumb-font-color-unavailable;
+      cursor: $cursor-default-value;
+    }
+  }
+
+  &:before {
+    content: "#{$crumb-slash}";
+    color: $crumb-slash-color;
+    margin: 0 $crumb-side-padding;
+    position: relative;
+    top: 1px;
+  }
+
+  &:first-child:before {
+    content: " ";
+    margin: 0;
+  }
+}
+
+@include exports("breadcrumbs") {
+  @if $include-html-nav-classes {
+    .breadcrumbs {
+      @include crumb-container;
+      @include radius($crumb-radius);
+
+      &>* {
+        @include crumbs;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_button-groups.scss

@@ -0,0 +1,97 @@
+@import "global";
+@import "buttons";
+
+
+//
+// Button Group Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+$button-bar-margin-opposite: rem-calc(10) !default;
+$button-group-border-width: 1px !default;
+
+//
+// Button Group Mixins
+//
+
+// We use this to add styles for a button group container
+@mixin button-group-container($styles:true, $float:false) {
+  @if $styles {
+    list-style: none;
+    margin: 0;
+    @include clearfix();
+  }
+  @if $float {
+    float: #{$default-float};
+    margin-#{$opposite-direction}: $button-bar-margin-opposite;
+    & div { overflow: hidden; }
+  }
+}
+
+// We use this to control styles for button groups
+@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+
+	> button, .button { 
+	border-#{$opposite-direction}: $button-group-border-width solid;
+	border-color: rgba(255, 255, 255, 0.5);	
+	}
+
+  // We use this to control the flow, or remove those styles completely.
+  @if $float {
+    margin: 0;
+    float: $float;
+    // Make sure the first child doesn't get the negative margin.
+    &:first-child { margin-#{$default-float}: 0; }
+  }
+
+  // We use these to control left and right radius on first/last buttons in the group.
+  @if $radius == true {
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $button-radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
+  }
+  @else if $radius {
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
+  }
+
+  // We use this to make the buttons even width across their container
+  @if $even {
+    width: percentage((100/$even) / 100);
+    button, .button { width: 100%; }
+  }
+
+}
+
+@include exports("button-group") {
+  @if $include-html-button-classes {
+    .button-group { @include button-group-container;
+
+      &> * { @include button-group-style(); }
+
+      &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+      &.round > * { @include button-group-style($radius:$button-round, $float:null); }
+
+      @for $i from 2 through 8 {
+        &.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
+      }
+    }
+
+    .button-bar {
+      @include clearfix;
+      .button-group { @include button-group-container($styles:false,$float:true); }
+    }
+  }
+}