zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/_keystrokes.scss

@@ -0,0 +1,56 @@
+//
+// Keystroke Variables
+//
+
+// We use these to control text styles.
+$keystroke-font:            "Consolas", "Menlo", "Courier", monospace !default;
+$keystroke-font-size:       emCalc(15px) !default;
+$keystroke-font-color:      #222 !default;
+$keystroke-font-color-alt:  #fff !default;
+$keystroke-function-factor: 7% !default;
+
+// We use this to control keystroke padding.
+$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px) !default;
+
+// We use these to control background and border styles.
+$keystroke-bg:              darken(#fff, $keystroke-function-factor) !default;
+$keystroke-border-style:    solid !default;
+$keystroke-border-width:    1px !default;
+$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor) !default;
+$keystroke-radius:          $button-radius !default;
+
+//
+// Keystroke Mixins
+//
+
+// We use this mixin to create keystroke styles.
+@mixin keystroke($bg:$keystroke-bg) {
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  background-color: $bg;
+  border-color: darken($bg, $keystroke-function-factor);
+
+  // We adjust the font color based on the brightness of the background.
+  @if $bg-lightness > 70% { color: $keystroke-font-color; }
+  @else { color: $keystroke-font-color-alt; }
+
+  border-style: $keystroke-border-style;
+  border-width: $keystroke-border-width;
+  margin: 0;
+  font-family: $keystroke-font;
+  font-size: $keystroke-font-size;
+  padding: $keystroke-padding;
+}
+
+
+@if $include-html-classes {
+
+  /* Keytroke Characters */
+  .keystroke,
+  kbd {
+    @include keystroke;
+    @include radius($keystroke-radius);
+  }
+
+}

data/scss/foundation/components/_labels.scss

@@ -0,0 +1,81 @@
+//
+// Label Variables
+//
+
+// We use these to style the labels
+$label-padding:     emCalc(3px) emCalc(10px) emCalc(4px) !default;
+$label-radius:      $button-radius !default;
+
+// We use these to style the label text
+$label-font-size:   emCalc(14px) !default;
+$label-font-weight: bold !default;
+
+//
+// Label Mixins
+//
+
+// We use this mixin to create a default label base.
+@mixin label-base {
+  font-weight: $label-font-weight;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  white-space: nowrap;
+  display: inline;
+  position: relative;
+}
+
+// We use this mixin to add label size styles.
+@mixin label-size($padding:$label-padding, $text-size:$label-font-size) {
+  @if $padding { padding: $padding; }
+  @if $text-size { font-size: $text-size; }
+}
+
+// We use this mixin to add label styles.
+@mixin label-style($bg:$primary-color, $radius:false) {
+
+  // We control which background color comes through
+  @if $bg {
+
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness < 70% { color: #fff; }
+    @else { color: #333; }
+  }
+
+  // We use this to control the radius on labels.
+  @if $radius == true { @include radius($label-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// We use this to add close buttons to alerts
+@mixin label($padding:$label-padding, $text-size:$label-font-size, $bg:$primary-color, $radius:false) {
+  @include label-base;
+  @include label-size($padding, $text-size);
+  @include label-style($bg, $radius);
+}
+
+
+@if $include-html-classes {
+
+  /* Labels */
+  .label {
+    @include label-base;
+    @include label-size;
+    @include label-style;
+
+
+    &.radius { @include label-style(false, true); }
+    &.round { @include label-style(false, $radius:1000px); }
+
+    &.alert     { @include label-style($alert-color); }
+    &.success   { @include label-style($success-color); }
+    &.secondary { @include label-style($secondary-color); }
+  }
+
+}

data/scss/foundation/components/_magellan.scss

@@ -0,0 +1,15 @@
+@if $include-html-classes {
+
+  [data-magellan-expedition] {
+    background: #fff;
+    z-index: 999;
+    min-width: 100%;
+    padding: 10px;
+
+    .sub-nav {
+      margin-bottom: 0;
+      dd { margin-bottom: 0; }
+    }
+  }
+
+}

data/scss/foundation/components/_orbit.scss

@@ -0,0 +1,193 @@
+// Orbit Settings
+
+// We use these to control the caption styles
+$orbit-caption-bg-old-browser: #000 !default;
+$orbit-caption-bg-old: rgb(0,0,0) !default;
+$orbit-caption-bg: rgba(0,0,0,0.6) !default;
+$orbit-caption-font-color: #fff !default;
+
+// We use these to control the left/right nav styles
+$orbit-nav-bg-old: rgb(0,0,0) !default;
+$orbit-nav-bg: rgba(0,0,0,0.6) !default;
+
+// We use these to control the timer styles
+$orbit-timer-bg-old: rgb(0,0,0) !default;
+$orbit-timer-bg: rgba(0,0,0,0.6) !default;
+
+// We use these to control the bullet nav styles
+$orbit-bullet-nav-color: #999 !default;
+$orbit-bullet-nav-color-active: #222 !default;
+
+// We use thes to controls the style of slide numbers
+$orbit-slide-number-bg: rgb(0,0,0) !default;
+$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-padding: emCalc(5px) !default;
+
+
+.orbit-container {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+  background: #f5f5f5;
+
+  .orbit-slides-container {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    img { display: block; }
+
+    &>* {
+      position: relative;
+      float: left;
+      height: 100%;
+
+      .orbit-caption {
+        position: absolute;
+        bottom: 0;
+        background-color: $orbit-caption-bg-old;
+        background-color: $orbit-caption-bg;
+        color: #fff;
+        width: 100%;
+        padding: 10px 14px;
+        font-size: emCalc(14px);
+
+        * { color: #fff; }
+      }
+    }
+  }
+
+  .orbit-slide-number {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 12px;
+    span { font-weight: 700; }
+  }
+
+  .orbit-timer {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    height: 6px;
+    width: 100px;
+    .orbit-progress {
+      height: 100%;
+      background-color: $orbit-timer-bg-old;
+      background-color: $orbit-timer-bg;
+      display: block;
+      width: 0%;
+    }
+
+    & > span {
+      display: none;
+      position: absolute;
+      top: 10px;
+      right: 0px;
+      width: 11px;
+      height: 14px;
+      border: solid 4px #000;
+      border-top: none;
+      border-bottom: none;
+    }
+
+    &.paused {
+      & > span {
+        right: -6px;
+        top: 9px;
+        width: 11px;
+        height: 14px;
+        border: solid 8px;
+        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-old;
+    background-color: $orbit-nav-bg;
+    width: 50px;
+    height: 60px;
+    line-height: 50px;
+    color: white;
+    text-indent: -9999px !important;
+
+    & > span {
+      position: absolute;
+      top: 50%;
+      margin-top: -16px;
+      display: block;
+      width: 0;
+      height: 0;
+      border: solid 16px;
+    }
+  }
+  .orbit-prev { left: 0;
+    & > span { border-color: transparent #fff transparent transparent; }
+    &:hover > span { border-color: transparent #ccc transparent transparent; }
+  }
+  .orbit-next { right: 0;
+    & > span {
+      border-color: transparent transparent transparent #fff;
+      left: 50%;
+      margin-left: -8px;
+    }
+    &:hover > span { border-color: transparent transparent transparent #ccc; }
+  }
+}
+
+.orbit-bullets {
+  margin: 0 auto 30px auto;
+  overflow: hidden;
+  position: relative;
+  top: 10px;
+
+  li {
+    display: block;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    float: left;
+    margin-right: 6px;
+    border: solid 2px #000;
+    @include radius(1000px);
+
+    &.active {
+      background: #000;
+    }
+
+    &:last-child { margin-right: 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; }
+  }
+
+
+
+}

data/scss/foundation/components/_pagination.scss

@@ -0,0 +1,99 @@
+//
+// Pagination Variables
+//
+
+// We use these to control the pagination container
+$pagination-height:                      emCalc(24px) !default;
+$pagination-margin:                      emCalc(-5px) !default;
+
+// We use these to set the list-item properties
+$pagination-li-float:                    $default-float;
+$pagination-li-height:                   emCalc(24px) !default;
+$pagination-li-font-color:               #222 !default;
+$pagination-li-font-size:                emCalc(14px) !default;
+$pagination-li-margin:                   emCalc(5px) !default;
+
+// We use these for the pagination anchor links
+$pagination-link-pad:                    emCalc(1px) emCalc(7px) emCalc(1px) !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
+//
+
+// We use this mixin to set the properties for the creating Foundation pagination
+@mixin pagination($center:false, $base-style:true) {
+
+  @if $base-style {
+    display: block;
+    height: $pagination-height;
+    margin-#{$default-float}: $pagination-margin;
+
+    li {
+      display: block;
+      float: $pagination-li-float;
+      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; }
+
+      &.unavailable a {
+        cursor: $pagination-link-unavailable-cursor;
+        color: $pagination-link-unavailable-font-color;
+      }
+
+      &.unavailable:hover a, &.unavailable a:focus { background: $pagination-link-unavailable-bg-active; }
+
+      &.current 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; }
+      }
+    }
+  }
+
+  @if $center {
+    & { text-align: center;
+      ul > li {
+        float: none;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+
+
+
+@if $include-html-classes {
+
+  /* Pagination */
+  .pagination { @include pagination; }
+  .pagination-centered { @include pagination(true,false); }
+}

data/scss/foundation/components/_panels.scss

@@ -0,0 +1,76 @@
+//
+// Panel Variables
+//
+
+// 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:   emCalc(20px) !default;
+$panel-padding:         emCalc(20px) !default;
+
+// We use these to set default font colors
+$panel-font-color:      #333 !default;
+$panel-font-color-alt:  #fff !default;
+
+
+//
+// Panel Mixins
+//
+
+// We use this mixin to create panels.
+@mixin panel($bg:$panel-bg, $padding:$panel-padding) {
+
+  @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;
+
+    // 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; } }
+
+    // Respect the padding, fool.
+    &>:first-child { margin-top: 0; }
+    &>:last-child { margin-bottom: 0; }
+
+    // reset header line-heights for panels
+    h1,h2,h3,h4,h5,h6 {
+      line-height: 1; margin-bottom: emCalc(20px) / 2;
+      &.subheader { line-height: 1.4; }
+    }
+  }
+}
+
+// Only include these classes if the option exists
+@if $include-html-classes {
+
+  /* Panels */
+  .panel { @include panel;
+
+    &.callout {
+      @include panel($primary-color);
+      @include inset-shadow($active:false);
+    }
+
+    &.radius {
+      @include panel($bg:false);
+      @include radius;
+    }
+
+  }
+
+}