zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/_dropdown.scss

@@ -0,0 +1,137 @@
+//
+// Dropdown Variables
+//
+
+// We use these to controls height and width styles.
+$f-dropdown-max-width:            200px !default;
+$f-dropdown-height:               auto !default;
+$f-dropdown-max-height:           none !default;
+$f-dropdown-margin-top:           2px !default;
+
+// We use this to control the background color
+$f-dropdown-bg:                   #fff !default;
+
+// We use this to set the border styles for dropdowns.
+$f-dropdown-border-style:         solid !default;
+$f-dropdown-border-width:         1px !default;
+$f-dropdown-border-color:         darken(#fff, 20%) !default;
+
+// We use these to style the triangle pip.
+$f-dropdown-triangle-size:        6px !default;
+$f-dropdown-triangle-color:       #fff !default;
+$f-dropdown-triangle-side-offset: 10px !default;
+
+// We use these to control styles for the list elements.
+$f-dropdown-list-style:           none !default;
+$f-dropdown-font-color:           #555 !default;
+$f-dropdown-font-size:            emCalc(14px) !default;
+$f-dropdown-list-padding:         emCalc(5px) emCalc(10px) !default;
+$f-dropdown-line-height:          emCalc(18px) !default;
+$f-dropdown-list-hover-bg:        #eeeeee !default;
+$dropdown-mobile-left:            0 !default;
+
+// We use this to control the styles for when the dropdown has custom content.
+$f-dropdown-content-padding:      emCalc(20px) !default;
+
+//
+// Dropdown Mixins
+//
+
+// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
+
+// We use this to style the dropdown container element.
+@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  list-style: $f-dropdown-list-style;
+
+  *:first-child { margin-top: 0; }
+  *:last-child { margin-bottom: 0; }
+
+  @if $content == list {
+    width: 100%;
+    max-height: $f-dropdown-max-height;
+    height: $f-dropdown-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+  @else if $content == content {
+    padding: $f-dropdown-content-padding;
+    width: 100%;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+
+  @if $triangle {
+    margin-top: $f-dropdown-margin-top;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
+      position: absolute;
+      top: -($f-dropdown-triangle-size * 2);
+      left: $f-dropdown-triangle-side-offset;
+      z-index: 99;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1,$f-dropdown-border-color,bottom);
+      position: absolute;
+      top: -(($f-dropdown-triangle-size + 1) * 2);
+      left: $f-dropdown-triangle-side-offset - 1;
+      z-index: 98;
+    }
+  }
+
+  @if $max-width { max-width: $max-width; }
+  @else { max-width: $f-dropdown-max-width; }
+
+}
+
+// We use this to style the list elements or content inside the dropdown.
+@mixin dropdown-style {
+  font-size: $f-dropdown-font-size;
+  cursor: pointer;
+  padding: $f-dropdown-list-padding;
+  line-height: $f-dropdown-line-height;
+  margin: 0;
+
+  &:hover,
+  &:focus { background: $f-dropdown-list-hover-bg; }
+
+  a { color: $f-dropdown-font-color; }
+}
+
+
+@if $include-html-classes {
+
+  @media only screen and (max-width: 767px) {
+    .f-dropdown {
+      max-width: 100%;
+      left: $dropdown-mobile-left;
+    }
+  }
+
+  /* Foundation Dropdowns */
+  .f-dropdown {
+    @include dropdown-container;
+    // max-width: none;
+
+    li { @include dropdown-style; }
+
+    // You can also put custom content in these dropdowns
+    &.content { @include dropdown-container(content, $triangle:false); }
+
+    // Sizes
+    &.tiny    { max-width: 200px; }
+    &.small   { max-width: 300px; }
+    &.medium  { max-width: 500px; }
+    &.large   { max-width: 800px; }
+  }
+
+}

data/scss/foundation/components/_flex-video.scss

@@ -0,0 +1,45 @@
+//
+// Flex Video Variables
+//
+
+// We use these to control video container padding and margins
+$flex-video-padding-top:               emCalc(25px) !default;
+$flex-video-padding-bottom:            67.5% !default;
+$flex-video-margin-bottom:             emCalc(16px) !default;
+
+// We use this to control widescreen bottom padding
+$flex-video-widescreen-padding-bottom: 57.25% !default;
+
+//
+// Flex Video Mixins
+//
+
+@mixin flex-video-container {
+  position: relative;
+  padding-top: $flex-video-padding-top;
+  padding-bottom: $flex-video-padding-bottom;
+  height: 0;
+  margin-bottom: $flex-video-margin-bottom;
+  overflow: hidden;
+
+  &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
+  &.vimeo { padding-top: 0; }
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$default-float}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@if $include-html-classes {
+
+  /* Flex Video */
+  .flex-video { @include flex-video-container; }
+
+}

data/scss/foundation/components/_forms.scss

@@ -0,0 +1,309 @@
+//
+// Form Variables
+//
+
+// We use this to set the base for lots of form spacing and positioning styles
+$form-spacing:                       emCalc(16px) !default;
+
+// We use these to style the labels in different ways
+$label-pointer:                      pointer !default;
+$label-font-size:                    emCalc(14px) !default;
+$label-font-weight:                  500 !default;
+$label-font-color:                   lighten(#000, 30%) !default;
+$label-bottom-margin:                emCalc(3px) !default;
+$input-font-color:                   rgba(0,0,0,0.75) !default;
+$input-font-size:                    emCalc(14px) !default;
+$input-bg-color:                     #fff !default;
+$input-focus-bg-color:               darken(#fff, 2%) !default;
+$input-border-color:                 darken(#fff, 20%) !default;
+$input-focus-border-color:           darken(#fff, 40%) !default;
+$input-border-style:                 solid !default;
+$input-border-width:                 1px !default;
+$input-disabled-bg:                  #ddd !default;
+$input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1) !default;
+
+// We use these to style the fieldset border and spacing.
+$fieldset-border-style:              solid !default;
+$fieldset-border-width:              1px !default;
+$fieldset-border-color:              #ddd !default;
+$fieldset-padding:                   emCalc(20px) !default;
+$fieldset-margin:                    emCalc(18px) 0 !default;
+
+// We use these to style the legends when you use them
+$legend-bg:                          #fff !default;
+$legend-font-weight:                 bold !default;
+$legend-padding:                     0 emCalc(3px) !default;
+
+// We use these to style the prefix and postfix input elements
+$input-prefix-bg:                    darken(#fff, 5%) !default;
+$input-prefix-border-color:          darken(#fff, 20%) !default;
+$input-prefix-border-size:           1px !default;
+$input-prefix-border-type:           solid !default;
+$input-prefix-overflow:              hidden !default;
+$input-prefix-font-color:            #333 !default;
+$input-prefix-font-color-alt:        #fff !default;
+
+// We use these to style the error states for inputs and labels
+$input-error-message-padding:        emCalc(6px) emCalc(4px) !default;
+$input-error-message-top:            -($form-spacing) - emCalc(5px) !default;
+$input-error-message-font-size:      emCalc(12px) !default;
+$input-error-message-font-weight:    bold !default;
+$input-error-message-font-color:     #fff !default;
+$input-error-message-font-color-alt: #333 !default;
+
+
+//
+// Form Mixins
+//
+
+// We use this mixin to give us form styles for rows inside of forms
+@mixin form-row-base {
+  .row { margin: 0 -$form-spacing / 2;
+
+    .column,
+    .columns { padding: 0 $form-spacing / 2; }
+
+    // Use this to collapse the margins of a form row
+    &.collapse { margin: 0;
+
+      .column,
+      .columns { padding: 0; }
+
+    }
+  }
+  input.column,
+  input.columns { padding-left: $form-spacing / 2; }
+}
+
+// We use this mixin to give all basic form elements their style
+@mixin form-element() {
+  background-color: $input-bg-color;
+  font-family: inherit;
+  border: $input-border-width $input-border-style $input-border-color;
+  -webkit-box-shadow: $input-box-shadow;
+  box-shadow: $input-box-shadow;
+  color: $input-font-color;
+  display: block;
+  font-size: $input-font-size;
+  margin: 0 0 $form-spacing 0;
+  padding: $form-spacing / 2;
+  height: emCalc(13px) + ($form-spacing * 1.5);
+  width: 100%;
+  @include box-sizing(border-box);
+
+  // Basic focus styles
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+    outline: none;
+  }
+
+  // Disabled background input background color
+  &[disabled] { background-color: $input-disabled-bg; }
+}
+
+// We use this mixin to create form labels
+@mixin form-label($alignment:false, $base-style:true) {
+
+  // Control whether or not the base styles come through.
+  @if $base-style {
+    font-size: $label-font-size;
+    color: $label-font-color;
+    cursor: $label-pointer;
+    display: block;
+    font-weight: $label-font-weight;
+    margin-bottom: $label-bottom-margin;
+  }
+
+  // Alignment options
+  @if $alignment == right {
+    float: none;
+    text-align: right;
+  }
+  @else if $alignment == inline {
+    margin: 0 0 $form-spacing 0;
+    padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
+  }
+}
+
+// We use this mixin to create postfix/prefix form Labels
+@mixin prefix-postfix-base {
+  display: block;
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  width: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-style: $input-prefix-border-type;
+  border-width: $input-prefix-border-size;
+  overflow: $input-prefix-overflow;
+  font-size: $label-font-size;
+  height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
+  line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
+}
+
+// We use this mixin to create prefix label styles
+@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    border-color: darken($bg, 10%);
+    border-right: none;
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $is-button {
+    padding-#{$default-float}: 0;
+    padding-#{$default-opposite}: 0;
+    text-align: center;
+    line-height: emCalc(34px);
+  }
+
+}
+
+// We use this mixin to create postfix label styles
+@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    border-color: darken($bg, 15%);
+    border-left: none;
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $is-button {
+    padding-#{$default-float}: 0;
+    padding-#{$default-opposite}: 0;
+    text-align: center;
+    line-height: emCalc(34px);
+  }
+
+}
+
+// We use this mixin to style fieldsets
+@mixin fieldset {
+  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
+  padding: $fieldset-padding;
+  margin: $fieldset-margin;
+
+  // and legend styles
+  legend {
+    font-weight: $legend-font-weight;
+    background: $legend-bg;
+    padding: $legend-padding;
+    margin: 0;
+    margin-#{$default-float}: emCalc(-3px);
+  }
+}
+
+// We use this mixin to control border and background color of error inputs
+@mixin form-error-color($color:$alert-color) {
+  border-color: $color;
+  background-color: rgba($color, 0.1);
+
+  // Go back to normal on focus
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+  }
+}
+
+// We use this simple mixin to style labels for error inputs
+@mixin form-label-error-color($color:$alert-color) { color: $color; }
+
+// We use this mixin to create error message styles
+@mixin form-error-message($bg:$alert-color) {
+  display: block;
+  padding: $input-error-message-padding;
+  margin-top: $input-error-message-top;
+  margin-bottom: $form-spacing;
+  font-size: $input-error-message-font-size;
+  font-weight: $input-error-message-font-weight;
+
+  // We can control the text color based on the brightness of the background.
+  $bg-lightness: lightness($bg);
+  background: $bg;
+  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
+  @else { color: $input-error-message-font-color-alt; }
+}
+
+
+/* Standard Forms */
+form { margin: 0 0 $form-spacing; }
+
+/* Using forms within rows, we need to set some defaults */
+form .row { @include form-row-base; }
+form .row .row { margin: 0; }
+
+/* Label Styles */
+label { @include form-label;
+  &.right { @include form-label(right,false); }
+  &.inline { @include form-label(inline,false); }
+}
+
+/* Attach elements to the beginning or end of an input */
+.prefix,
+.postfix { @include prefix-postfix-base; }
+
+/* Adjust padding, alignment and radius if pre/post element is a button */
+.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
+.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
+.prefix.button.radius { @include side-radius(left, $global-radius); }
+.postfix.button.radius { @include side-radius(right, $global-radius); }
+
+/* Separate prefix and postfix styles when on span so buttons keep their own */
+span.prefix { @include prefix();
+  &.radius { @include side-radius(left, $global-radius); }
+}
+span.postfix { @include postfix();
+  &.radius { @include side-radius(right, $global-radius); }
+}
+
+/* We use this to get basic styling on all basic form elements */
+input[type="text"],
+input[type="password"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+textarea {
+  @include form-element;
+  @include single-transition(all, 0.15s, linear);
+}
+
+/* We add basic fieldset styling */
+fieldset {
+  @include fieldset;
+}
+
+/* Error Handling */
+.error input,
+input.error,
+.error textarea,
+textarea.error {
+  @include form-error-color;
+}
+
+.error label,
+label.error { @include form-label-error-color; }
+
+.error small,
+small.error {
+  @include form-error-message;
+}