zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/components/modules/_ui.scss

@@ -1,292 +0,0 @@
-/* Table of Contents
-
-:: Visibility
-:: Alerts
-:: Labels
-:: Tooltips
-:: Panels
-:: Accordion
-:: Side Nav
-:: Sub Nav
-:: Pagination
-:: Breadcrumbs
-:: Lists
-:: Inline/Link Lists
-:: Keystroke Chars
-:: Image Thumbnails
-:: Video
-:: Tables
-:: Microformats
-:: Progress Bars
-:: Pricing Tables
-
-*/
-
-  /* Alerts ---------------------- */
-
-  div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius($alertBorderRadius); text-shadow: 0 -1px rgba(#000,.3); position: relative;
-
-    &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
-    &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); }
-    &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); text-shadow: 0 1px rgba(#fff,.3); }
-
-    a.close { color: #333; position: absolute; #{$defaultOpposite}: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; }
-    a.close:hover, a.close:focus { opacity: 0.4; }
-
-  }
-
-
-  /* Labels ---------------------- */
-
-  .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor;
-
-    &.radius { @include border-radius($buttonRadius); }
-    &.round { padding: 1px 7px 2px; @include border-radius(1000px); }
-
-    &.alert     { background-color: $alertColor; }
-    &.success   { background-color: $successColor; }
-    &.secondary   { background-color: $secondaryColor; color: darken($secondaryColor, 60%); }
-
-  }
-
-  /* Tooltips ---------------------- */
-
-  .has-tip { border-bottom: $hasTipBorderBottom; cursor: help; font-weight: $hasTipFontWeight; color: $hasTipFontColor;
-
-    &:hover, &:focus { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; }
-    &.tip-left, &.tip-right { float: none !important; }
-
-  }
-
-  .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; font-size: $tooltipFontSize; padding: 5px; z-index: 999; @include border-radius($tooltipBorderRadius); line-height: normal;
-
-    &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; #{$defaultFloat}: 10px; }
-    &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; }
-    &.tip-top>.nub, &.tip-centered-top>.nub  { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; }
-
-    &.tip-left, &.tip-right { float: none !important; }
-
-    &.tip-left>.nub { border-color: transparent transparent transparent $tooltipBackgroundColor; border-color: transparent transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); right: -10px; left: auto; }
-    &.tip-right>.nub { border-color: transparent $tooltipBackgroundColor transparent transparent; border-color: transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent; right: auto; left: -10px; }
-
-    &.noradius { @include border-radius(0); }
-    &.opened { color: $hasTipFontColorHover !important; border-bottom: $hasTipBorderBottomHover !important; }
-
-  }
-
-  .tap-to-close { display: block; @include font-size($tapToCloseFontSize); color: $tapToCloseFontColor; font-weight: $tapToCloseFontWeight; }
-
-  /* Panels ---------------------- */
-
-  .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px;
-
-    > :first-child { margin-top: 0; }
-    > :last-child { margin-bottom: 0; }
-
-    &.callout { background: $mainColor; color: #fff; border-color: darken($mainColor, 10%); @include box-shadow(inset 0px 1px 0px rgba(255,255,255,0.5));
-      a { color: #fff; }
-      .button { background: $white; border: none; color: $mainColor; @include text-shadow(none);
-
-        &:hover, &:focus { background: rgba(255,255,255,0.8); }
-      }
-    }
-
-    &.radius { @include border-radius($buttonRadius); }
-
-  }
-
-  /* Accordion ---------------------- */
-
-  ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor;
-
-    &>li {  list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor;
-
-      & > div.title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative;  border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear);
-
-        h1, h2, h3, h4, h5 { margin: 0; }
-        &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; }
-      }
-
-      .content { display: none; padding: 15px; }
-
-      &.active { border-top: 3px solid $mainColor;
-
-        .title { background: $white; padding-top: 13px;
-
-          &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); }
-        }
-        .content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; }
-      }
-    }
-  }
-
-
-
-  /* Side Nav ---------------------- */
-
-  ul.side-nav { display: block; list-style: none; margin: 0; padding: ms(1) 0;
-
-    li { display: block; list-style: none; margin: 0 0 (ms(0)/2) 0;
-
-      a { display: block; }
-      &.active a { color: lighten($black, 30%); font-weight: bold; }
-      &.divider { border-top: 1px solid darken($white, 10%); height: 0; padding: 0; }
-    }
-  }
-
-  /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
-
-  dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px;
-
-    dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; }
-    dt { color: #999; font-weight: $bodyFontWeight; }
-    dd a { text-decoration: none; @include border-radius(1000px); }
-    dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; }
-
-  }
-
-  /* Pagination ---------------------- */
-
-  ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px;
-
-    li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px;
-
-      a { display: block; padding: 1px 7px 1px; color: #555; }
-      &:hover a, a:focus { background: darken($white, 10%); }
-      &.unavailable a { cursor: default; color: #999; }
-      &.unavailable:hover a, &.unavailable a:focus { background: transparent; }
-      &.current a { background: $mainColor; color: $white; font-weight: bold; cursor: default;
-        &:hover, &:focus { background: $mainColor; }
-      }
-    }
-
-  }
-
-  div.pagination-centered { text-align: center; 
-
-    ul > li { float: none; display: inline-block; }
-  }
-
-  /* Breadcrums ---------------------- */
-
-  ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden; margin-#{$defaultFloat}: 0;
-
-    li { margin: 0; padding: 0 12px 0 0; float: $defaultFloat; list-style: none;
-
-      a, span { text-transform: uppercase; @include font-size(11); padding-#{$defaultFloat}: 12px; }
-      &:first-child a, &:first-child span { padding-#{$defaultFloat}: 0; }
-    }
-
-    li:before { content: "/"; color: #aaa; }
-    li:first-child:before { content: " "; }
-    li.current a { cursor: default; color: #333; }
-    li:hover a, li a:focus { text-decoration: underline; }
-    li.current:hover a, li.current a:focus { text-decoration: none; }
-    li.unavailable {
-      a { color: #999; }
-      &:hover a, a:focus { text-decoration: none; color: #999; cursor: default; }
-    }
-
-  }
-
-  /* Inline Link List */
-  ul.inline-list, ul.link-list { margin: 0 0 $linkListBottomMargin; padding: 0; list-style: none; overflow: hidden;
-
-    & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block;
-
-      & > * { display: block; }
-    }
-  }
-
-  /* Keytroke Characters ---------------------- */
-
-  .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); }
-
-  /* Image Thumbnails ---------------------- */
-  .th { display: block;
-    img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(box-shadow); @include transition-duration(300ms); }
-    &:hover, &:focus {
-      img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); }
-    }
-  }
-
-  /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */
-
-  .flex-video {
-    position: relative;
-    padding-top: 25px;
-    padding-bottom: 67.5%;
-    height: 0;
-    margin-bottom: 16px;
-    overflow: hidden;
-
-    &.widescreen { padding-bottom: 57.25%; }
-    &.vimeo { padding-top: 0; }
-
-    iframe, object, embed, video { position: absolute; top: 0; #{$defaultFloat}: 0; width: 100%; height: 100%; }
-
-  }
-
-  /* Tables ---------------------- */
-
-  table { background: #fff; @include border-radius($tableBorderRadius); margin: 0 0 18px; border: 1px solid #ddd;  }
-
-  table thead, table tfoot { background: #f5f5f5; }
-  table thead tr th,
-  table tfoot tr th,
-  table tbody tr td,
-  table tr td,
-  table tfoot tr td { display: table-cell; font-size: ms(0); line-height: 18px; text-align: #{$defaultFloat}; }
-  table thead tr th,
-  table tfoot tr td { padding: 8px 10px 9px; font-size: ms(0); font-weight: bold; color: #222; }
-  table thead tr th:first-child, table tfoot tr td:first-child { border-#{$defaultFloat}: none; }
-  table thead tr th:last-child, table tfoot tr td:last-child { border-#{$defaultOpposite}: none; }
-
-  table tbody tr.even,
-  table tbody tr.alt { background: #f9f9f9; }
-  table tbody tr:nth-child(even) { background: #f9f9f9; }
-  table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
-
-  /* Microformats ---------------------- */
-
-  ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px;
-
-    li { margin: 0; display: block; }
-    li.fn { font-weight: bold; font-size: ms(0) + 1; }
-
-  }
-
-  p.vevent {
-    span.summary { font-weight: bold; }
-    abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
-  }
-
-  /* Progress Bar ---------------------- */
-
-  div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight;
-
-  	/* meter */
-  	.meter { background: $mainColor; height: 100%; display: block; width:50%; }
-   	&.secondary .meter { background: $secondaryColor;}
-  	&.success .meter { background: $successColor;}
-  	&.alert .meter { background: $alertColor;}
-
-  	/* border radii */
-  	&.radius { @include border-radius($buttonRadius);
-      .meter { @include border-radius(2px); }
-    }
-  	&.round { @include border-radius(1000px);
-      .meter { @include border-radius(1000px); }
-    }
-
-  }
-
-  /* Pricing Tables ---------------------- */
-  .pricing-table { border: $priceTableBorder; margin-left: 0; margin-bottom: 20px;
-    & * { list-style: none; line-height: 1; }
-    .title { background-color: $priceTitleBgColor; padding: $priceTitlePadding; text-align: $priceTitleAlign; color: $priceTitleColor; font-weight: $priceTitleWeight; font-size: $priceTitleSize; }
-    .price { background-color: $priceMoneyBgColor; padding: $priceMoneyPadding; text-align: $priceMoneyAlign; color: $priceMoneyColor; font-weight: $priceMoneyWeight; font-size: $priceMoneySize; }
-    .description { background-color: $priceBgColor; padding: $priceDescPadding; text-align: $priceDescAlign; color: $priceDescColor; font-size: $priceDescFontSize; font-weight: $priceDescWeight; line-height: $priceDescLineHeight; border-bottom: $priceDescBtmBorder; }
-    .bullet-item { background-color: $priceBgColor; padding: $priceItemPadding; text-align: $priceItemAlign; color: $priceItemColor; font-size: $priceItemFontSize; font-weight: $priceItemWeight; border-bottom: $priceItemBtmBorder; }
-    .cta-button { background-color: $priceCtaBgColor; text-align: $priceCtaAlign; padding: $priceCtaPadding; }
-  }

data/scss/foundation/functions/_all.scss

@@ -1,2 +0,0 @@
-@import "convert-number-to-word";
-@import "grid-calc";

data/scss/foundation/functions/_convert-number-to-word.scss

@@ -1,10 +0,0 @@
-@function convert-number-to-word($num) {
-  $count:1;
-  @each $word in one,two,three,four,five,six,seven,eight,nine,ten,eleven,
-    twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,
-    twenty,twentyone,twentytwo,twentythree,twentyfour{
-    @if ($count == $num) { @return $word; }
-    $count: $count + 1;
-  }
-  @return "invalid";
-}

data/scss/foundation/functions/_grid-calc.scss

@@ -1,5 +0,0 @@
-// Grid Calculation for Percentages
-
-@function gridCalc($colNumber, $totalColumns) {
-	@return percentage(($colNumber / $totalColumns));
-}

data/scss/foundation/functions/modular-scale.scss

@@ -1,3 +0,0 @@
-// Legacy support since modular scale
-// used to reside directly within Foundation
-@import "modular-scale";

data/scss/foundation/mixins/_all.scss

@@ -1,5 +0,0 @@
-@import "font-size";
-@import "css-triangle";
-@import "respond-to";
-@import "clearfix";
-@import "semantic-grid";

data/scss/foundation/mixins/_clearfix.scss

@@ -1,13 +0,0 @@
-// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
-
-  @mixin clearfix() { *zoom:1;
-    &:before, &:after { content: " "; display: table; }
-    &:after { clear: both; }
-  }
-  
-  @mixin mobileClearfix() {
-    @include respondTo(smallScreen) { &:before, &:after { content: " "; display: table; }
-      &:after { clear: both; }
-      &:last-child { float: none; }
-    }
-  }

data/scss/foundation/mixins/_css-triangle.scss

@@ -1,22 +0,0 @@
-  // Create CSS Triangles in a Breeze
-
-  @mixin cssTriangle($triangleSize, $triangleColor, $triangleDirection) {
-    content: "";
-    display: block;
-    width: 0;
-    height: 0;
-    border: solid $triangleSize;
-    @if ($triangleDirection == top) {
-      border-color: $triangleColor transparent transparent transparent;
-    }
-    @if ($triangleDirection == bottom) {
-      border-color: transparent transparent $triangleColor transparent;
-    }
-    @if ($triangleDirection == left) {
-      border-color: transparent transparent transparent $triangleColor;
-    }
-    @if ($triangleDirection == right) {
-      border-color: transparent $triangleColor transparent transparent;
-    }
-    // .example { @include cssTriangle(5px, #fff, bottom); }
-  }

data/scss/foundation/mixins/_font-size.scss

@@ -1,13 +0,0 @@
-  // Font size mixin to include px and rem
-
-  @mixin font-size($size, $is-important: false) {
-    $size: if(unitless($size), $size, $size / 1px);
-    
-    @if $is-important {
-      font-size: $size + px !important;
-      font-size: ($size / 10) + rem !important;
-    } @else {
-      font-size: $size + px;
-      font-size: ($size / 10) + rem;
-    }
-  }

data/scss/foundation/mixins/_respond-to.scss

@@ -1,11 +0,0 @@
-// Mixin for Semantic Grid reponsiveness
-
-  @mixin respondTo($media) {
-    @if $media == smallScreen {
-      @media only screen and (max-width: $screenSmall - 1) { @content; }
-    } @else if $media == mediumScreen {
-      @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
-    } @else if $media == largeScreen {
-      @media only screen and (min-width: $screenXlarge) { @content; }
-    }
-  }

data/scss/foundation/mixins/_semantic-grid.scss

@@ -1,66 +0,0 @@
-// Inspired by https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss
-
-  // Outer row mixin for container rows
-
-  @mixin outerRow() {
-    width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto; @extend %clearfix;
-    @include respondTo(smallScreen) { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
-  }
-
-  // Inner row mixin for nested rows, must be a child of an outer-row element. $behavior can be 'collapse' to get rid of margins
-
-  @mixin innerRow($behavior: false) {
-      @if $behavior == collapse { @extend %row-i-base; margin: 0; @extend %clearfix;
-    } @else                     { @extend %row-i-base; margin: 0 (-($columnGutter/2)); @extend %clearfix; }
-  }
-
-  // Columns mixin, syntax is ($columns, $behavior). Behavior can be 'centered' which centers things or 'collapse' which collapses the gutters. ex @include row(4,[center | collapse])
-
-  @mixin column($columns:$columns, $behavior: false) {
-      @if      $behavior == center   { @extend %fl-n; margin-left: auto; margin-right: auto; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; }
-    } @else if $behavior == collapse { @extend %fl-l; @extend %c-base; padding: 0; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; }
-    } @else                          { @extend %fl-l; @extend %c-base; width: gridCalc($columns, $totalColumns); @include respondTo(smallScreen) { float: none; width: auto; } }
-  }
-
-  // Offset Mixin, include after a column mixin to manipulate its grid offset.
-
-  @mixin offsetBy($offset:1) { margin-left: gridCalc($offset, $totalColumns); }
-
-  // Push/Pull Mixins, include after a column mixin to manipulate stack ordering.
-
-  @mixin push($push:1) { left: gridCalc($push, $totalColumns); }
-  @mixin pull($push:1) { right: gridCalc($push, $totalColumns); }
-
-  // Mobile Row, synctax is @include mobile-row(); (This mixin isn't really necessary, will be deprecated in 4)
-  @mixin mobileRow() { @include respondTo(smallScreen) { width: auto; min-width: 0; margin-left: 0; margin-right: 0; @include clearfix(); } }
-
-  // Mobile Columns, syntax is @include mobile-column(#);
-
-  @mixin mobileColumn($columns:$columns, $behavior: false) {
-      @if      $behavior == center   { @include respondTo(smallScreen) { float: none; margin: 0 auto; position: relative; min-height: 1px; padding: 0 ($columnGutter/2); width: gridCalc($columns, $mobileTotalColumns); }
-    } @else if $behavior == collapse { @include respondTo(smallScreen) { float: left; position: relative; min-height: 1px; padding: 0; width: gridCalc($columns, $mobileTotalColumns); }
-    } @else                          { @include respondTo(smallScreen) { float: left; width: gridCalc($columns, $mobileTotalColumns); padding: 0 ($columnGutter/2); } }
-  }
-
-  // Mobile Push/Pull Mixin
-
-  @mixin mobilePush($push:1) { @include respondTo(smallScreen) { left: gridCalc($push, $mobileTotalColumns); } }
-  @mixin mobilePull($push:1) { @include respondTo(smallScreen) { right: gridCalc($push, $mobileTotalColumns); } }
-
-  // Invisible Placeholder Classes for Grid
-  %fl-l { float: left; }
-  %fl-r { float: right; }
-  %fl-n { float: none; }
-
-  %clearfix { @include clearfix(); }
-  %clearfix-m { @include mobileClearfix(); }
-
-  %row-o { @include outerRow(); }
-  %row-i-base { width: auto; max-width: none; min-width: 0; }
-  %row-i { @include innerRow(); }
-
-  %c-base { position: relative; min-height: 1px; padding: 0 ($columnGutter/2); }
-
-  @for $i from 1 through $totalColumns {
-    %c-#{$i} { @include column($i); }
-  }