foundation-sass-rails 5.5.3.2

data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss

@@ -0,0 +1,125 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @name _sub-nav.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control margin and padding
+$sub-nav-list-margin: rem-calc(-4 0 18) !default;
+$sub-nav-list-padding-top: rem-calc(4) !default;
+
+// We use this to control the definition
+$sub-nav-font-family: $body-font-family !default;
+$sub-nav-font-size: rem-calc(14) !default;
+$sub-nav-font-color: $aluminum !default;
+$sub-nav-font-weight: $font-weight-normal !default;
+$sub-nav-text-decoration: none !default;
+$sub-nav-padding: rem-calc(3 16) !default;
+$sub-nav-border-radius: 3px !default;
+$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
+
+
+// We use these to control the active item styles
+
+$sub-nav-active-font-weight: $font-weight-normal !default;
+$sub-nav-active-bg: $primary-color !default;
+$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
+$sub-nav-active-color: $white !default;
+$sub-nav-active-padding: $sub-nav-padding !default;
+$sub-nav-active-cursor: default !default;
+
+$sub-nav-item-divider: "" !default;
+$sub-nav-item-divider-margin: rem-calc(12) !default;
+
+//
+// @mixins
+//
+
+
+// Create a sub-nav item
+//
+// $font-color - Font color. Default: $sub-nav-font-color.
+// $font-size - Font size. Default: $sub-nav-font-size.
+// $active-bg - Background of active nav item. Default: $sub-nav-active-bg.
+// $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover.
+@mixin sub-nav(
+  $font-color: $sub-nav-font-color,
+  $font-size: $sub-nav-font-size,
+  $active-bg: $sub-nav-active-bg,
+  $active-bg-hover: $sub-nav-active-bg-hover) {
+  display: block;
+  margin: $sub-nav-list-margin;
+  overflow: hidden;
+  padding-top: $sub-nav-list-padding-top;
+  width: auto;
+
+  dt {
+    text-transform: uppercase;
+  }
+
+  dt,
+  dd,
+  li {
+    color: $font-color;
+    float: $default-float;
+    font-family: $sub-nav-font-family;
+    font-size: $font-size;
+    font-weight: $sub-nav-font-weight;
+    margin-#{$default-float}: rem-calc(16);
+    margin-bottom: 0;
+
+    a {
+      color: $sub-nav-font-color;
+      padding: $sub-nav-padding;
+      text-decoration: $sub-nav-text-decoration;
+
+      &:hover {
+        color: $sub-nav-font-color-hover;
+      }
+    }
+
+    &.active a {
+      @include radius($sub-nav-border-radius);
+      background: $active-bg;
+      color: $sub-nav-active-color;
+      cursor: $sub-nav-active-cursor;
+      font-weight: $sub-nav-active-font-weight;
+      padding: $sub-nav-active-padding;
+
+      &:hover {
+        background: $active-bg-hover;
+      }
+    }
+
+    @if $sub-nav-item-divider != "" {
+      margin-#{$default-float}: 0;
+
+      &:before {
+        content: "#{$sub-nav-item-divider}";
+        margin: 0 $sub-nav-item-divider-margin;
+      }
+
+      &:first-child:before {
+        content: "";
+        margin: 0;
+      }
+    }
+  }
+}
+
+@include exports("sub-nav") {
+  @if $include-html-nav-classes {
+    .sub-nav { @include sub-nav; }
+  }
+}

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

@@ -0,0 +1,241 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @name
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling background color for the switch container
+$switch-bg: $gainsboro !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny: 1.5rem !default;
+$switch-height-sml: 1.75rem !default;
+$switch-height-med: 2rem !default;
+$switch-height-lrg: 2.5rem !default;
+$switch-bottom-margin: 1.5rem !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg: $white !default;
+$switch-paddle-transition-speed: .15s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-active-color: $primary-color !default;
+
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+@mixin switch-base(
+  $transition-speed:$switch-paddle-transition-speed,
+  $transition-ease:$switch-paddle-transition-ease) {
+
+  border: none;
+  margin-bottom: $switch-bottom-margin;
+  outline: 0;
+  padding: 0;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  // Default label styles for type and transition
+  label {
+    background: $switch-bg;
+    color: transparent;
+    cursor: pointer;
+    display: block;
+    margin-bottom: ($switch-height-med / 2);
+    position: relative;
+    text-indent: 100%;
+    width: $switch-height-med * 2; height: $switch-height-med;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(left, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing checkbox or radio button, but we cleverly position and hide it.
+  input {
+    left: 10px;
+    opacity: 0;
+    padding:0;
+    position: absolute;
+    top: 9px;
+
+    & + label { margin-left: 0; margin-right: 0; }
+  }
+
+  // The paddle for the switch is created from an after psuedoclass
+  // content element. This is sized and positioned, and reacts to
+  // the state of the input.
+
+  label:after {
+    background: $switch-paddle-bg;
+    content: "";
+    display: block;
+    height: $switch-height-med - .5rem;
+    left: .25rem;
+    position: absolute;
+    top: .25rem;
+    width: $switch-height-med - .5rem;
+
+    -webkit-transition: left $transition-speed $transition-ease;
+    -moz-transition: left $transition-speed $transition-ease;
+    -o-transition: translate3d(0,0,0);
+    transition: left $transition-speed $transition-ease;
+
+    -webkit-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    -o-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  input:checked + label {
+    background: $switch-active-color;
+  }
+
+  input:checked + label:after {
+    left: $switch-height-med + .25rem;
+  }
+}
+
+// We use this mixin to create the size styles for switches.
+//
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $font-size - Font size of text in switch. Default: $switch-font-size-med.
+// $line-height - Line height of switch. Default: 2.3rem.
+@mixin switch-size($height: $switch-height-med) {
+
+  label {
+    height: $height;
+    width: $height * 2;
+  }
+
+  label:after {
+    height: $height - .5rem;
+    width: $height - .5rem;
+  }
+
+  input:checked + label:after {
+    left: $height + .25rem;
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+//
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch-style(
+  $paddle-bg:$switch-paddle-bg,
+  $active-color:$switch-active-color,
+  $radius:false,
+  $base-style:true) {
+
+  @if $base-style {
+
+    label {
+      color: transparent;
+      background: $switch-bg;
+    }
+
+    label:after {
+      background: $paddle-bg;
+    }
+
+    input:checked + label {
+      background: $active-color;
+    }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    label {
+      border-radius: 2rem;
+    }
+    label:after {
+      border-radius: 2rem;
+    }
+  }
+  @else if $radius {
+    label {
+      border-radius: $radius;
+    }
+    label:after {
+      border-radius: $radius;
+    }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of an active switch. Default: $switch-active-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch(
+  $transition-speed: $switch-paddle-transition-speed,
+  $transition-ease: $switch-paddle-transition-ease,
+  $height: $switch-height-med,
+  $paddle-bg: $switch-paddle-bg,
+  $active-color: $switch-active-color,
+  $radius:false,
+  $base-style:true) {
+    @include switch-base($transition-speed, $transition-ease);
+    @include switch-size($height);
+    @include switch-style($paddle-bg, $active-color, $radius, $base-style);
+}
+
+@include exports("switch") {
+  @if $include-html-form-classes {
+      .switch {
+        @include switch;
+
+        // Large radio switches
+        &.large { @include switch-size($switch-height-lrg); }
+
+        // Small radio switches
+        &.small { @include switch-size($switch-height-sml); }
+
+        // Tiny radio switches
+        &.tiny { @include switch-size($switch-height-tny); }
+
+        // Add a radius to the switch
+        &.radius {
+          label { @include radius(4px); }
+          label:after { @include radius(3px); }
+        }
+
+        // Make the switch completely round, like a pill
+        &.round { @include radius(1000px);
+          label { @include radius(2rem); }
+          label:after { @include radius(2rem); }
+        }
+
+      }
+  }
+}

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

@@ -0,0 +1,135 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @name _tables.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-table-classes: $include-html-classes !default;
+
+// These control the background color for the table and even rows
+$table-bg: $white !default;
+$table-even-row-bg: $snow !default;
+
+// These control the table cell border style
+$table-border-style: solid !default;
+$table-border-size: 1px !default;
+$table-border-color: $gainsboro !default;
+
+// These control the table head styles
+$table-head-bg: $white-smoke !default;
+$table-head-font-size: rem-calc(14) !default;
+$table-head-font-color: $jet !default;
+$table-head-font-weight: $font-weight-bold !default;
+$table-head-padding: rem-calc(8 10 10) !default;
+
+// These control the table foot styles
+$table-foot-bg: $table-head-bg !default;
+$table-foot-font-size: $table-head-font-size !default;
+$table-foot-font-color: $table-head-font-color !default;
+$table-foot-font-weight: $table-head-font-weight !default;
+$table-foot-padding: $table-head-padding !default;
+
+// These control the caption
+$table-caption-bg: transparent !default;
+$table-caption-font-color: $table-head-font-color !default;
+$table-caption-font-size: rem-calc(16) !default;
+$table-caption-font-weight: bold !default;
+
+// These control the row padding and font styles
+$table-row-padding: rem-calc(9 10) !default;
+$table-row-font-size: rem-calc(14) !default;
+$table-row-font-color: $jet !default;
+$table-line-height: rem-calc(18) !default;
+
+// These are for controlling the layout, display and margin of tables
+$table-layout: auto !default;
+$table-display: table-cell !default;
+$table-margin-bottom: rem-calc(20) !default;
+
+
+//
+// @mixins
+//
+
+@mixin table {
+  background: $table-bg;
+  border: $table-border-style $table-border-size $table-border-color;
+  margin-bottom: $table-margin-bottom;
+  table-layout: $table-layout;
+
+  caption {
+    background: $table-caption-bg;
+    color: $table-caption-font-color;
+    font: {
+      size: $table-caption-font-size;
+      weight: $table-caption-font-weight;
+    }
+  }
+
+  thead {
+    background: $table-head-bg;
+
+    tr {
+      th,
+      td {
+        color: $table-head-font-color;
+        font-size: $table-head-font-size;
+        font-weight: $table-head-font-weight;
+        padding: $table-head-padding;
+      }
+    }
+  }
+
+  tfoot {
+    background: $table-foot-bg;
+
+    tr {
+      th,
+      td {
+        color: $table-foot-font-color;
+        font-size: $table-foot-font-size;
+        font-weight: $table-foot-font-weight;
+        padding: $table-foot-padding;
+      }
+    }
+  }
+
+  tr {
+    th,
+    td {
+      color: $table-row-font-color;
+      font-size: $table-row-font-size;
+      padding: $table-row-padding;
+      text-align: $default-float;
+    }
+
+    &.even,
+    &.alt,
+    &:nth-of-type(even) { background: $table-even-row-bg; }
+  }
+
+  thead tr th,
+  tfoot tr th,
+  tfoot tr td,
+  tbody tr th,
+  tbody tr td,
+  tr td { display: $table-display; line-height: $table-line-height; }
+}
+
+
+@include exports("table") {
+  @if $include-html-table-classes {
+    table {
+      @include table;
+    }
+  }
+}