zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/_alert-boxes.scss

@@ -0,0 +1,106 @@
+//
+// Alert Variables
+//
+
+// We use this to control alert padding.
+$alert-padding-top:         emCalc(11px)                                   !default;
+$alert-padding-left:        $alert-padding-top                             !default;
+$alert-padding-right:       $alert-padding-top + emCalc(10px)              !default;
+$alert-padding-bottom:      $alert-padding-top + emCalc(1px)               !default;
+
+// We use these to control text style.
+$alert-font-weight:         bold                                           !default;
+$alert-font-size:           emCalc(14px)                                   !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:     10%                                            !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:       emCalc(20px)                                   !default;
+
+// We use these to style the close buttons
+$alert-close-color:         #333                                           !default;
+$alert-close-position:      emCalc(5px)                                    !default;
+$alert-close-font-size:     emCalc(22px)                                   !default;
+$alert-close-opacity:       0.3                                            !default;
+$alert-close-opacity-hover: 0.5                                            !default;
+$alert-close-padding:       5px 4px 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-right $alert-padding-bottom $alert-padding-left;
+  font-size: $alert-font-size;
+}
+
+// We use this mixin to add alert styles
+@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 + emCalc(2px);
+  #{$default-opposite}: $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.
+@mixin alert($bg:$primary-color, $radius:false) {
+  @include alert-base;
+  @include alert-style($bg);
+  @include radius($radius);
+}
+
+@if $include-html-classes {
+
+  /* Foundation Alerts */
+  .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/scss/foundation/components/_block-grid.scss

@@ -0,0 +1,63 @@
+//
+// Block Grid Variables
+//
+
+// We use this to control the maximum number of block grid elements per row
+$block-grid-elements: 12 !default;
+$block-grid-default-spacing: 10px !default;
+
+
+//
+// Block Grid Mixins
+//
+
+// We use this mixin to create different block-grids. You can apply per-row and spacing options.
+// Setting $base-style to false will ommit default styles.
+@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
+
+  @if $base-style {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    margin: 0 (-$spacing);
+
+    &>li {
+      display: block;
+      height: auto;
+      float: $default-float;
+      padding: 0 $spacing $spacing;
+    }
+  }
+
+  @if $per-row {
+    &>li {
+      width: 100%/$per-row;
+      padding: 0 $spacing $spacing;
+    }
+    &:nth-of-type(#{$per-row}n+1) { clear: both; }
+  }
+
+}
+
+
+/* Foundation Block Grids for below small breakpoint */
+@media only screen {
+  [class*="block-grid-"] { @include block-grid; }
+
+  @for $i from 2 through $block-grid-elements {
+    .small-block-grid-#{($i)} {
+      @include block-grid($i,$block-grid-default-spacing,false);
+    }
+  }
+}
+
+/* Foundation Block Grids for above small breakpoint */
+@media #{$small} {
+  @for $i from 2 through $block-grid-elements {
+    .large-block-grid-#{($i)} {
+      @if      $i == 2 { @include block-grid(2,15px,false); }
+      @else if $i == 3 { @include block-grid(3,12px,false); }
+      @else { @include block-grid($i,$block-grid-default-spacing,false); }
+    }
+  }
+}

data/scss/foundation/components/_breadcrumbs.scss

@@ -0,0 +1,117 @@
+//
+// Breadcrumb Variables
+//
+
+// 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: emCalc(6px) emCalc(14px) emCalc(9px)           !default;
+$crumb-side-padding: emCalc(12px)                              !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: $button-radius                                  !default;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size: emCalc(11px)                                 !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;
+  padding: 0 $crumb-side-padding 0 0;
+  float: $default-float;
+
+  &:hover a,
+  &:focus a { text-decoration: $crumb-link-decor; }
+
+  a,
+  span {
+    font-size: $crumb-font-size;
+    padding-#{$default-float}: $crumb-side-padding;
+    text-transform: $crumb-font-transform;
+    color: $crumb-font-color;
+  }
+
+  // Current is for the link of the current page
+  &.current {
+    a {
+      cursor: default;
+      color: $crumb-font-color-current;
+    }
+
+    &:hover a,
+    &:focus a { text-decoration: none; }
+  }
+
+  // Unavailable removed color and link styles so it looks inactive.
+  &.unavailable {
+    a { color: $crumb-font-color-unavailable; }
+
+    &:hover a,
+    a:focus {
+      text-decoration: none;
+      color: $crumb-font-color-unavailable;
+      cursor: default;
+    }
+  }
+
+  &:before {
+    content: "#{$crumb-slash}";
+    color: $crumb-slash-color;
+    position: relative;
+    top: 1px;
+  }
+  &:first-child a,
+  &:first-child span { padding-#{$default-float}: 0; }
+  &:first-child:before { content: ""; }
+
+}
+
+
+@if $include-html-classes {
+
+  /* Breadcrumbs */
+  .breadcrumbs {
+    @include crumb-container;
+    @include radius($crumb-radius);
+
+    li {
+      @include crumbs;
+    }
+  }
+
+}

data/scss/foundation/components/_button-groups.scss

@@ -0,0 +1,59 @@
+//
+// Button Group Mixins
+//
+
+// We use this to add styles for a button group container
+@mixin button-group-container($styles:true) {
+  @if $styles {
+    list-style: none;
+    margin: 0 0 $button-margin-bottom;
+    @include clearfix();
+  }
+}
+
+// We use this to control styles for button groups
+@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+
+  // We use this to control the flow, or remove those styles completely.
+  @if $float {
+    margin: 0 0 0 -1px;
+    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 > a { @include side-radius($default-float, $button-radius); }
+    &:last-child > a { @include side-radius($default-opposite, $button-radius); }
+  }
+  @else if $radius {
+    &:first-child > a { @include side-radius($default-float, $radius); }
+    &:last-child > a { @include side-radius($default-opposite, $radius); }
+  }
+
+  // We use this to make the buttons even width across their container
+  @if $even {
+    width: percentage((100/$even) / 100);
+    .button { width: 100%; }
+  }
+
+}
+
+// Only include these CSS classes if $include-html-classes: true
+@if $include-html-classes {
+
+  /* Button Groups */
+  .button-group { @include button-group-container;
+
+    li { @include button-group-style(); }
+
+    &.radius li { @include button-group-style($radius:$button-radius, $float:null); }
+    &.round li { @include button-group-style($radius:1000px, $float:null); }
+
+    @for $i from 2 through 8 {
+      &.even#{-$i} li { @include button-group-style($even:3, $float:null); }
+    }
+  }
+
+}

data/scss/foundation/components/_buttons.scss

@@ -0,0 +1,217 @@
+//
+// Button Variables
+//
+
+// We use these to build padding for buttons.
+$button-med:              emCalc(12px) !default;
+$button-tny:              emCalc(7px) !default;
+$button-sml:              emCalc(9px) !default;
+$button-lrg:              emCalc(16px) !default;
+
+// We use this to control the display property.
+$button-display:          inline-block !default;
+$button-margin-bottom:    emCalc(20px) !default;
+
+// We use these to control button text styles.
+$button-font-color:       #fff !default;
+$button-font-color-alt:   #333 !default;
+$button-font-med:         emCalc(16px) !default;
+$button-font-tny:         emCalc(11px) !default;
+$button-font-sml:         emCalc(13px) !default;
+$button-font-lrg:         emCalc(20px) !default;
+$button-font-weight:      bold !default;
+$button-font-align:       center !default;
+
+// We use these to control various hover effects.
+$button-function-factor:  10% !default;
+
+// We use these to control button border styles.
+$button-border-width:     1px !default;
+$button-border-style:     solid !default;
+$button-border-color:     darken($primary-color, $button-function-factor) !default;
+
+// We use this to set the default radius used throughout the core.
+$button-radius:           $global-radius !default;
+
+// We use this to set default opacity for disabled buttons.
+$button-disabled-opacity: 0.6 !default;
+
+
+//
+// Button Mixins
+//
+
+// We use this mixin to create a default button base.
+@mixin button-base($style:true, $display:$button-display) {
+  @if $style {
+    border-style: $button-border-style;
+    border-width: $button-border-width;
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: $button-font-weight;
+    line-height: 1;
+    margin: 0 0 $button-margin-bottom;
+    position: relative;
+    text-decoration: none;
+    text-align: $button-font-align;
+  }
+  @if $display { display: $display; }
+}
+
+// We use this mixin to add button size styles
+@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
+
+  // We control which padding styles come through,
+  // these can be turned off by setting $padding:false
+  @if $padding {
+    padding-top: $padding;
+    padding-right: $padding * 2;
+    padding-bottom: $padding + emCalc(1px);
+    padding-left: $padding * 2;
+
+    // We control the font-size based on mixin input.
+    @if      $padding == $button-med { font-size: $button-font-med; }
+    @else if $padding == $button-tny { font-size: $button-font-tny; }
+    @else if $padding == $button-sml { font-size: $button-font-sml; }
+    @else if $padding == $button-lrg { font-size: $button-font-lrg; }
+    @else                     { font-size: $padding - emCalc(2px); }
+  }
+
+  // We can set $full-width:true to remove side padding extend width.
+  @if $full-width {
+    padding-top: $padding;
+    padding-right: 0px;
+    padding-bottom: $padding + emCalc(1px);
+    padding-left: 0px;
+    width: 100%;
+  }
+
+  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
+  @if $is-input == $button-lrg {
+    padding-top: $is-input + emCalc(.5px);
+    padding-bottom: $is-input + emCalc(.5px);
+  }
+  @else if $is-input {
+    padding-top: $is-input + emCalc(1px);
+    padding-bottom: $is-input;
+  }
+}
+
+// We use this mixin to add button color styles
+@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
+
+  // We control which background styles are used,
+  // these can be removed by setting $bg:false
+  @if $bg {
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+    border-color: darken($bg, $button-function-factor);
+    &:hover,
+    &:focus { background-color: darken($bg, $button-function-factor); }
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness > 70% {
+      color: $button-font-color-alt;
+      &:hover,
+      &:focus { color: $button-font-color-alt; }
+    }
+    @else {
+      color: $button-font-color;
+      &:hover,
+      &:focus { color: $button-font-color; }
+    }
+  }
+
+  // We can set $disabled:true to create a disabled transparent button.
+  @if $disabled {
+    cursor: default;
+    opacity: $button-disabled-opacity;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    &:hover,
+    &:focus { background-color: $bg; }
+  }
+
+  // We can control how much button radius us used.
+  @if $radius == true { @include radius($button-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
+@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
+  @include button-base;
+  @include button-size($padding, $full-width, $is-input);
+  @include button-style($bg, $radius, $disabled);
+}
+
+
+//
+// Button Classes
+//
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-classes {
+
+  // Default styles applied outside of media query
+  .button {
+    @include button-base($display:block);
+    @include button-size;
+    @include button-style;
+
+    &.secondary { @include button-style($bg:$secondary-color); }
+    &.success   { @include button-style($bg:$success-color); }
+    &.alert     { @include button-style($bg:$alert-color); }
+
+    &.large  { @include button-size($padding:$button-lrg); }
+    &.small  { @include button-size($padding:$button-sml); }
+    &.tiny   { @include button-size($padding:$button-tny); }
+    &.expand { @include button-size($padding:false, $full-width:true); }
+
+    &.left-align  { text-align: left; text-indent: emCalc(12px); }
+    &.right-align { text-align: right; padding-right: emCalc(12px); }
+
+    &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
+      &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
+      &.success { @include button-style($bg:$success-color, $disabled:true); }
+      &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+    }
+
+  }
+
+  input.button,
+  button.button {
+    @include button-size($padding:false, $is-input:$button-med);
+    &.tiny { @include button-size($padding:false, $is-input:$button-tny); }
+    &.small { @include button-size($padding:false, $is-input:$button-sml); }
+    &.large { @include button-size($padding:false, $is-input:$button-lrg); }
+  }
+
+  // Styles for any browser or device that support media queries
+  @media only screen {
+
+    .button {
+      @include inset-shadow();
+      @include single-transition(background-color);
+
+      &.large  { @include button-size($padding:false, $full-width:false); }
+      &.small  { @include button-size($padding:false, $full-width:false); }
+      &.tiny   { @include button-size($padding:false, $full-width:false); }
+
+      &.radius { @include button-style($bg:false, $radius:true); }
+      &.round  { @include button-style($bg:false, $radius:1000px); }
+    }
+
+  }
+
+  // Additional styles for screens larger than 768px
+  @media #{$small} {
+    .button {
+      @include button-base($style:false, $display:inline-block);
+      @include button-size($padding:false, $full-width:false);
+    }
+  }
+
+}