- This column will come first on small, and second on medium and larger. -

This column will come second on small, and first on medium and larger.

+ This column will come first on small, and second on medium and larger. +

``` + +--- + +## Block Grids + +To define column widths at the row-level, instead of the individual column level, add the class `.[size]-up-[n]` to a row, where `[n]` is the number of columns to display per row, and `[size]` is the breakpoint at which to apply the effect. + +

A block grid row has the property align-items: stretch by default, meaning the columns in each row are equal height. To change this, change the align-items property of the row, or use one of the vertical alignment flexbox classes.

+ +```html_example +

1 per row on small

2 per row on medium

3 per row on large

+``` diff --cc js/foundation.slider.js index faf4e8add,c3fe5e051..e7f67b7b8 --- a/js/foundation.slider.js +++ b/js/foundation.slider.js @@@ -324,11 -350,13 +350,18 @@@ halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2, barDim = this.$element[0].getBoundingClientRect()[param], barOffset = (this.$element.offset()[direction] - pageXY), - barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),//if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds - // eleDim = this.$element[0].getBoundingClientRect()[param], + //if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds + barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset), offsetPct = percent(barXY, barDim); value = (this.options.end - this.options.start) * offsetPct; ++// FIX ME WEE WOO WEE WOO ++// <<<<<<< HEAD + value = _this._adjustValue(null, value); ++// ======= + // turn everything around for RTL, yay math! + if (Foundation.rtl() && !this.options.vertical) {value = this.options.end - value;} + //boolean flag for the setHandlePos fn, specifically for vertical sliders ++// >>>>>>> develop hasVal = false; if(!$handle){//figure out which handle it is, pass it to the next function. @@@ -394,14 -393,11 +427,22 @@@ if(this.options.clickSelect){ this.$element.off('click.zf.slider').on('click.zf.slider', function(e){ if(_this.$element.data('dragging')){ return false; } ++<<<<<<< HEAD + _this.animComplete = false; + + if(!$(e.target).is('[data-slider-handle]')) { + if (_this.options.doubleSided) { + _this._handleEvent(e); + } else { + _this._handleEvent(e, _this.$handle); + } ++======= + + if(_this.options.doubleSided){ + _this._handleEvent(e); + }else{ + _this._handleEvent(e, _this.$handle); ++>>>>>>> develop } }); } diff --cc package.json index 3551c55bc,deb96a707..0afa575bb --- a/package.json +++ b/package.json @@@ -16,30 -16,20 +16,32 @@@ }, "license": "MIT", "devDependencies": { - "browser-sync": "^2.11.1", + "babel-core": "^6.3.26", + "babel-plugin-transform-es2015-arrow-functions": "^6.3.13", + "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13", + "babel-plugin-transform-es2015-block-scoping": "^6.4.0", + "babel-plugin-transform-es2015-classes": "^6.3.15", + "babel-plugin-transform-es2015-destructuring": "^6.3.15", + "babel-plugin-transform-es2015-modules-umd": "^6.3.13", + "babel-plugin-transform-es2015-parameters": "^6.3.26", + "babel-plugin-transform-es2015-spread": "^6.4.0", + "babel-plugin-transform-es2015-template-literals": "^6.3.13", + "bootcamp": "^1.1.7", + "browser-sync": "^2.8.2", "clipboard": "^1.5.5", + "corejs-typeahead": "corejavascript/typeahead.js", "foundation-docs": "zurb/foundation-docs", - "gitty": "^3.3.0", + "gitty": "^3.3.3", "gulp": "^3.8.10", - "gulp-autoprefixer": "^3.1.0", + "gulp-autoprefixer": "^2.3.1", + "gulp-babel": "^6.1.1", "gulp-cache-bust": "^1.0.2", "gulp-concat": "^2.4.3", - "gulp-filter": "^2.0.2", - "gulp-jshint": "^1.9.2", - "gulp-load-plugins": "^0.8.0", - "gulp-minify-css": "^1.2.1", + "gulp-cssnano": "^2.1.0", + "gulp-filter": "^3.0.1", + "gulp-jshint": "^2.0.0", + "gulp-load-plugins": "^1.2.0", + "gulp-mocha": "^2.2.0", "gulp-newer": "^1.1.0", "gulp-plumber": "^1.0.1", "gulp-prompt": "^0.1.2", diff --cc scss/components/_button-group.scss index c1a28dfc6,7295bd4b8..037ab74be --- a/scss/components/_button-group.scss +++ b/scss/components/_button-group.scss @@@ -60,21 -43,22 +60,27 @@@ $buttongroup-expand-max: 6 !default } /// Creates a full-width button group, making each button equal width. - /// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons. /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. @mixin button-group-expand( - $selector: $buttongroup-child-selector + $selector: $buttongroup-child-selector, + $count: null ) { + @if $count != null { + @warn 'button-group-expand(): the $count property is no longer needed. This parameter will be removed in Foundation 6.2.'; + } + + display: table; + table-layout: fixed; width: 100%; - &::before, - &::after { - display: none; + @if not $global-flexbox { + display: table; + table-layout: fixed; + + &::before, + &::after { + display: none; + } } #{$selector} { @@@ -177,10 -131,15 +183,21 @@@ } } + &.stacked-for-medium { + @include breakpoint(large) { + @include button-group-unstack; + } + } ++ + &.stacked-for-small.expanded { + @include breakpoint(small only) { + display: block; + + #{$buttongroup-child-selector} { + display: block; + border-right: 0; + } + } + } } } diff --cc scss/components/_title-bar.scss index 60e89c6f6,c7fdeb4b2..3ce5fe755 --- a/scss/components/_title-bar.scss +++ b/scss/components/_title-bar.scss @@@ -82,9 -62,11 +82,13 @@@ $titlebar-icon-spacing: 0.25rem !defaul display: inline-block; } - .menu-icon { - @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover); + // Remove this in 6.3 + @if not $-zf-menu-icon-imported { + @warn 'In Foundation 6.2, a new component mixin was added called "foundation-menu-icon". Add "@import foundation-menu-icon" to the main Sass file of your project to remove this warning.'; + @include foundation-menu-icon; } + + .menu-icon.dark { + @include hamburger; + } } diff --cc scss/components/_top-bar.scss index 9134bccc1,480b9fd13..afdb55dc9 --- a/scss/components/_top-bar.scss +++ b/scss/components/_top-bar.scss @@@ -57,24 -45,17 +54,22 @@@ $topbar-input-width: 200px !default /// makes sections stacked @mixin top-bar-stacked { - // Sub-sections - .top-bar-title { - width: 100%; - } - - .top-bar-right { - width: 100%; + @if $global-flexbox { + flex-wrap: wrap; + + // Sub-sections ++ .top-bar-left, + .top-bar-right { + flex: 0 0 100%; + max-width: 100%; + } } - - .top-bar-left { - width: 100%; + @else { + // Sub-sections ++ .top-bar-left, + .top-bar-right { + width: 100%; + } - - .top-bar-left { - width: 100%; - } } } @@@ -99,19 -80,15 +94,29 @@@ } // Sub-sections - .top-bar-title { - float: left; - margin-right: $topbar-title-spacing; - } - .top-bar-left { - float: left; + @if $global-flexbox { ++ .top-bar-title { ++ flex: 0 0 auto; ++ margin-right: $topbar-title-spacing; ++ } ++ + .top-bar-left, + .top-bar-right { + flex: 0 0 auto; + } } + @else { ++ .top-bar-title { ++ float: left; ++ margin-right: $topbar-title-spacing; ++ } ++ + .top-bar-left { + float: left; + } - + - .top-bar-right { - float: right; + .top-bar-right { + float: right; + } } } diff --cc scss/forms/_forms.scss index e7cd3146f,ddad21b58..1507fda3e --- a/scss/forms/_forms.scss +++ b/scss/forms/_forms.scss @@@ -10,18 -10,14 +10,17 @@@ /// @type Number $form-spacing: rem-calc(16) !default; - @import - 'text', - 'checkbox', - 'label', - 'help-text', - 'input-group', - 'fieldset', - 'select', - 'range', - 'progress', - 'meter', - 'error'; + @import 'text'; + @import 'checkbox'; + @import 'label'; + @import 'help-text'; + @import 'input-group'; + @import 'fieldset'; + @import 'select'; ++@import 'range'; ++@import 'progress'; ++@import 'meter'; + @import 'error'; @mixin foundation-forms { @include foundation-form-text; diff --cc scss/forms/_input-group.scss index b3fb5b34a,f15206d6e..8d825aa1e --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@@ -60,17 -56,8 +60,18 @@@ $input-prefix-padding: 1rem !default background: $input-prefix-background; color: $input-prefix-color; border: $input-prefix-border; + white-space: nowrap; + @if $global-flexbox { + flex: 0 0 auto; + display: flex; + align-items: center; + } + @else { + width: 1%; + height: 100%; + } + @if has-value($input-prefix-border) { &:first-child { border-#{$global-right}: 0; diff --cc scss/grid/_column.scss index 954e5052b,29b5a813a..6babbb383 --- a/scss/grid/_column.scss +++ b/scss/grid/_column.scss @@@ -57,17 -57,17 +57,16 @@@ $columns: $grid-column-count, $gutter: $grid-column-gutter ) { - // Core properties - @if $gutter != null { - $gutter: rem-calc($gutter) / 2; - } - @else { - @each $breakpoint, $gutter in $grid-column-responsive-gutter { - $padding: rem-calc($gutter) / 2; + @include grid-column-size($columns); + float: $global-left; - @include breakpoint($breakpoint) { - padding-left: $padding; - padding-right: $padding; - } + // Gutters + @each $breakpoint, $value in $gutter { + $padding: rem-calc($value) / 2; - ++ + @include breakpoint($breakpoint) { + padding-left: $padding; + padding-right: $padding; } } diff --cc scss/grid/_flex-grid.scss index 72cb74e50,f8241c086..a3ef6620f --- a/scss/grid/_flex-grid.scss +++ b/scss/grid/_flex-grid.scss @@@ -75,16 -92,17 +76,16 @@@ $columns: null, $gutter: $grid-column-gutter ) { - @if $gutter != null { - $gutter: rem-calc($gutter) / 2; - } - @else { - @each $breakpoint, $gutter in $grid-column-responsive-gutter { - $padding: rem-calc($gutter) / 2; + // Base properties + flex: flex-grid-column($columns); - @include breakpoint($breakpoint) { - padding-left: $padding; - padding-right: $padding; - } + // Padding + @each $breakpoint, $value in $gutter { + $padding: rem-calc($value) / 2; - ++ + @include breakpoint($breakpoint) { + padding-left: $padding; + padding-right: $padding; } } @@@ -220,8 -255,14 +234,19 @@@ } .#{$-zf-size}-uncollapse { ++<<<<<<< HEAD + $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size); + ++======= + $gutter: null; + + @if $grid-column-gutter { + $gutter: $grid-column-gutter; + } + @else { + $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size); + } ++>>>>>>> develop > .column { @include grid-col-uncollapse($gutter); } } } @@@ -229,13 -270,24 +254,14 @@@ // Sizing (shrink) .shrink { flex: flex-grid-column(shrink); + max-width: 100%; } - // Horizontal alignment using justify-content - @each $hdir, $prop in map-remove($-zf-flex-justify, left) { - .row.align-#{$hdir} { - @include flex-grid-row-align($x: $hdir); - } - } - // Vertical alignment using align-items and align-self + // Remove these in 6.3 @each $vdir, $prop in $-zf-flex-align { - .row.align-#{$vdir} { - @include flex-grid-row-align($y: $vdir); - } - .column.align-#{$vdir} { - @include flex-grid-column-align($vdir); + @include flex-align-self($vdir); } } diff --cc test/sass/_value.scss index b5715bef2,db4c876df..8e3be6267 --- a/test/sass/_value.scss +++ b/test/sass/_value.scss @@@ -1,7 -1,11 +1,11 @@@ - @import 'util/value'; + @import "true"; - @include describe('Has Value') { - @include it('returns false if the value is not falsey') { + @import '../../scss/util/unit'; + @import '../../scss/util/value'; + + @include test-module('Value') { - ++ + @include test('Value (Not Falsey) [function]') { $boolean: has-value(true); $number: has-value(1px); $color: has-value(#000); @@@ -17,67 -23,65 +23,65 @@@ $null: has-value(null); $none: has-value(none); $empty: has-value(()); + $description: 'Returns false if the value is falsey'; - @include should(expect($zero), to(be(false))); - @include should(expect($null), to(be(false))); - @include should(expect($none), to(be(false))); - @include should(expect($empty), to(be(false))); + @include assert-equal($zero, false, $description); + @include assert-equal($null, false, $description); + @include assert-equal($none, false, $description); + @include assert-equal($empty, false, $description); } - } - @include describe('Get Side') { - @include it('returns correct sides when given one side value') { - $value: 1rem; - $actual: ( - get-side($value, top), - get-side($value, right), - get-side($value, bottom), - get-side($value, left), + @include test('Get Side [function]') { + $valueOne: 1rem; + $testOne: ( + get-side($valueOne, top), + get-side($valueOne, right), + get-side($valueOne, bottom), + get-side($valueOne, left), ); - $expected: (1rem, 1rem, 1rem, 1rem,); + $expectOne: (1rem, 1rem, 1rem, 1rem,); - @include should(expect($actual), to(be($expected))); - } - @include it('returns correct sides when given two side values') { - $value: 1rem 2rem; - $actual: ( - get-side($value, top), - get-side($value, right), - get-side($value, bottom), - get-side($value, left), + @include assert-equal($testOne, $expectOne, + 'Returns correct sides when given one side value'); - ++ + $valueTwo: 1rem 2rem; + $testTwo: ( + get-side($valueTwo, top), + get-side($valueTwo, right), + get-side($valueTwo, bottom), + get-side($valueTwo, left), ); - $expected: (1rem, 2rem, 1rem, 2rem,); + $expectTwo: (1rem, 2rem, 1rem, 2rem,); - @include should(expect($actual), to(be($expected))); - } - @include it('returns correct sides when given three side values') { - $value: 1rem 2rem 3rem; - $actual: ( - get-side($value, top), - get-side($value, right), - get-side($value, bottom), - get-side($value, left), + @include assert-equal($testTwo, $expectTwo, + 'Returns correct sides when given two side values'); + + $valueThree: 1rem 2rem 3rem; + $testThree: ( + get-side($valueThree, top), + get-side($valueThree, right), + get-side($valueThree, bottom), + get-side($valueThree, left), ); - $expected: (1rem, 2rem, 3rem, 2rem,); + $expectThree: (1rem, 2rem, 3rem, 2rem,); - @include should(expect($actual), to(be($expected))); - } - @include it('returns correct sides when given four side values') { - $value: 1rem 2rem 3rem 4rem; - $actual: ( - get-side($value, top), - get-side($value, right), - get-side($value, bottom), - get-side($value, left), + @include assert-equal($testThree, $expectThree, + 'Returns correct sides when given three side values'); + + $valueFour: 1rem 2rem 3rem 4rem; + $testFour: ( + get-side($valueFour, top), + get-side($valueFour, right), + get-side($valueFour, bottom), + get-side($valueFour, left), ); - $expected: (1rem, 2rem, 3rem, 4rem,); + $expectFour: (1rem, 2rem, 3rem, 4rem,); - @include should(expect($actual), to(be($expected))); + @include assert-equal($testFour, $expectFour, + 'Returns correct sides when given four side values'); } - } - @include describe('Get Border Value') { - @include it('returns the right value of a border property') { + @include test('Get Border Value [function]') { $value: 10px dashed green; $width: get-border-value($value, width); $style: get-border-value($value, style); @@@ -86,28 -95,12 +95,26 @@@ $defaultWidth: get-border-value(solid black, width); $defaultStyle: get-border-value(10px black, style); $defaultColor: get-border-value(10px solid, color); + $defaultDescription: 'Returns a default value if a property is missing'; - @include should(expect($defaultWidth), to(be(0))); - @include should(expect($defaultStyle), to(be(solid))); - @include should(expect($defaultColor), to(be(black))); + @include assert-equal($defaultWidth, 0, $defaultDescription); + @include assert-equal($defaultStyle, solid, $defaultDescription); + @include assert-equal($defaultColor, black, $defaultDescription); } - ++ + // TODO: Add spec for pow() } + +@include describe('Map Deep Get') { + @include it('gets a value from a nested map') { + $map: ( + one: ( + two: 'three', + ), + ); + + @include should(expect(map-deep-get($map, one, two)), to(be('three'))); + } +} + +// TODO: Add spec for pow()