zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/_clearing.scss

@@ -0,0 +1,209 @@
+//
+// Clearing Variables
+//
+
+// 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;
+
+
+// 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;
+}
+
+.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-left: 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; }
+}
+
+
+// Large screen overrides
+@media #{$small} {
+  .clearing-main-left,
+  .clearing-main-right {
+    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-left {
+    left: 0;
+    & > span {
+      left: 5px;
+      border-color: transparent $clearing-arrow-color transparent transparent;
+    }
+  }
+  .clearing-main-right {
+    right: 0;
+    & > span {
+      border-color: transparent transparent transparent $clearing-arrow-color;
+    }
+  }
+
+  .clearing-main-left.disabled,
+  .clearing-main-right.disabled { opacity: 0.5; }
+
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature ~ li { display: none; }
+
+  .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-left: 0;
+        position: relative;
+        #{$default-float}: 0;
+
+        li {
+          display: block;
+          width: $clearing-carousel-thumb-width;
+          height: inherit;
+          padding: 0;
+          float: $default-float;
+          overflow: hidden;
+          margin-#{$default-opposite}: 1px;
+          position: relative;
+          cursor: pointer;
+          opacity: 0.4;
+
+          &.fix-height {
+            img {
+              min-height: 100%;
+              height: 100%;
+              max-width: none;
+            }
+          }
+
+          a.th {
+            border: none;
+            -webkit-box-shadow: none;
+                    box-shadow: none;
+            display: block;
+          }
+
+          img {
+            cursor: pointer !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;
+    #{$default-opposite}: 20px;
+    padding-left: 0;
+    padding-top: 0;
+  }
+}

data/scss/foundation/components/_custom-forms.scss

@@ -0,0 +1,232 @@
+//
+// Custom Form Variables
+//
+
+// We use these to control the basic form styles input styles
+$custom-form-border-color:              #ccc !default;
+$custom-form-bg:                        #fff !default;
+$custom-form-bg-disabled:               #ddd !default;
+$custom-form-check-color:               #222 !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:                  emCalc(13px) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom:           emCalc(20px) !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:             emCalc(14px) !default;
+$custom-dropdown-color-selected:        #eeeeee !default;
+$custom-dropdown-font-color-selected:   #000 !default;
+$custom-dropdown-shadow:                0 2px 2px 0px rgba(0,0,0,0.1) !default;
+$custom-dropdown-offset-top:            none !default;
+$custom-dropdown-list-padding:          emCalc(4px) !default;
+$custom-dropdown-left-padding:          emCalc(6px) !default;
+$custom-dropdown-right-padding:         emCalc(38px) !default;
+$custom-dropdown-list-item-min-height:  emCalc(24px) !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.
+
+/* Custom Checkbox and Radio Inputs */
+form.custom {
+  .custom {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 2px;
+    border: solid 1px $custom-form-border-color;
+    background: $custom-form-bg;
+
+    &.radio { @include radius(1000px); }
+
+    &.checkbox {
+      z-index: -1;
+      &:before {
+        content: "";
+        display: block;
+        line-height: 0.8;
+        height: 14px;
+        width: 14px;
+        text-align: center;
+        position: absolute;
+        top: 0;
+        #{$default-float}: 0;
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+
+    &.radio.checked {
+      &:before {
+        content: "";
+        display: block;
+        width: 8px;
+        height: 8px;
+        @include radius(1000px);
+        background: $custom-form-check-color;
+        position: relative;
+        top: 3px;
+        #{$default-float}: 3px;
+      }
+    }
+
+    &.checkbox.checked {
+      &:before {
+        content: "\00d7";
+        color: $custom-form-check-color;
+      }
+    }
+  }
+}
+
+/* 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: 0px;
+    padding: 0px;
+    width: 100%;
+    background: $custom-dropdown-bg;
+    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%);
+    background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-size: emCalc(14px);
+
+    ul {
+      overflow-y: auto;
+      max-height: $custom-dropdown-height;
+    }
+
+    .current {
+      cursor:default;
+      white-space: nowrap;
+      line-height: $custom-select-height - emCalc(1px);
+      color: $input-font-color;
+      text-decoration: none;
+      overflow: hidden;
+      display: block;
+      margin-left: $form-spacing / 2;
+      margin-right: $custom-select-height;
+    }
+
+    .selector {
+      cursor:default;
+      position: absolute;
+      width: $form-spacing * 2.5;
+      height: $custom-select-height;
+      display: block;
+      #{$default-opposite}: 0;
+      top: 0;
+      &:after {
+        content: "";
+        display: block;
+        @include css-triangle(5px, $custom-select-triangle-color, top);
+        position: absolute;
+        left: ($form-spacing * 2.5) / 2 - emCalc(5px);
+        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: 134px !important; }
+    &.medium { max-width: 254px !important; }
+    &.large { max-width: 434px !important; }
+    &.expand { width: 100% !important; }
+
+    &.open.small ul { max-width: 134px !important; @include box-sizing(border-box); }
+    &.open.medium ul { max-width: 254px !important; @include box-sizing(border-box); }
+    &.open.large ul { max-width: 634px !important; @include box-sizing(border-box); }
+  }
+
+  .custom.dropdown ul {
+    position: absolute;
+    width: auto;
+    display: none;
+    margin: 0;
+    #{$default-float}: -$input-border-width;
+    top: $custom-dropdown-offset-top;
+    -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: default;
+      padding-top: $custom-dropdown-list-padding;
+      padding-bottom: $custom-dropdown-list-padding;
+      padding-#{$default-float}: $custom-dropdown-left-padding;
+      padding-#{$default-opposite}: $custom-dropdown-right-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: default;
+        color: $custom-dropdown-font-color-selected;
+      }
+    }
+
+    &.show { display: block; }
+  }
+
+  /* Custom input, disabled */
+  .custom.disabled { background-color: $custom-form-bg-disabled; }
+}

data/scss/foundation/components/_dropdown-buttons.scss

@@ -0,0 +1,114 @@
+//
+// Dropdown Button Variables
+//
+
+// 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-right-tny: $button-tny * 2 !default;
+$dropdown-button-pip-top-tny:   -$button-tny / 2 + emCalc(1px) !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-right-sml: $button-sml * 2 !default;
+$dropdown-button-pip-top-sml:   -$button-sml / 2 + emCalc(1px) !default;
+
+// We use these to style medium dropdown buttons
+$dropdown-button-padding-med:   $button-med * 4 + emCalc(3px) !default;
+$dropdown-button-pip-size-med:  $button-med - emCalc(3px) !default;
+$dropdown-button-pip-right-med: $button-med * 2 !default;
+$dropdown-button-pip-top-med:   -$button-med / 2 + emCalc(2px) !default;
+
+// We use these to style large dropdown buttons
+$dropdown-button-padding-lrg:   $button-lrg * 4 !default;
+$dropdown-button-pip-size-lrg:  $button-lrg - emCalc(6px) !default;
+$dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px) !default;
+$dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !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-#{$default-opposite}: $dropdown-button-padding-tny;
+    &:before {
+      border-width: $dropdown-button-pip-size-tny;
+      right: $dropdown-button-pip-right-tny;
+      margin-top: $dropdown-button-pip-top-tny;
+    }
+  }
+
+  // If we're dealing with small buttons, use these styles
+  @if $padding == small {
+    padding-#{$default-opposite}: $dropdown-button-padding-sml;
+    &:before {
+      border-width: $dropdown-button-pip-size-sml;
+      right: $dropdown-button-pip-right-sml;
+      margin-top: $dropdown-button-pip-top-sml;
+    }
+  }
+
+  // If we're dealing with default (medium) buttons, use these styles
+  @if $padding == medium {
+    padding-#{$default-opposite}: $dropdown-button-padding-med;
+    &:before {
+      border-width: $dropdown-button-pip-size-med;
+      right: $dropdown-button-pip-right-med;
+      margin-top: $dropdown-button-pip-top-med;
+    }
+  }
+
+  // If we're dealing with large buttons, use these styles
+  @if $padding == large {
+    padding-#{$default-opposite}: $dropdown-button-padding-lrg;
+    &:before {
+      border-width: $dropdown-button-pip-size-lrg;
+      right: $dropdown-button-pip-right-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-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; }
+  }
+
+}