## Basics
- Drilldowns use the standard [Menu](menu.html#nested-style) syntax. Add the attribute `data-drilldown` to the root `<ul>`, and `.menu` to each nested menu.
+ Drilldowns use the standard [Menu](menu.html#nested-style) syntax, using `<ul>`, `<li>`, and `<a>`. Add `data-drilldown` to the root menu to set up the drilldown.
+ To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will then open the `<ul>` it's next to.
+
+ Any `<a>` without a submenu will function like a normal link.
+
+ ```html
+ <ul class="vertical menu" data-drilldown>
+ <li>
+ <a href="#">Item 1</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item 1A</a></li>
+ <!-- ... -->
+ </ul>
+ </li>
+ <li><a href="#">Item 2</a></li>
+ </ul>
+ ```
-<ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
+<ul class="menu" data-drilldown style="width: 200px" id="m1">
<li>
<a href="#">Item 1</a>
- <ul class="vertical menu">
+ <ul class="menu">
<li>
<a href="#">Item 1A</a>
- <ul class="vertical menu">
+ <ul class="menu">
<li><a href="#">Item 1Aa</a></li>
<li><a href="#">Item 1Ba</a></li>
<li><a href="#">Item 1Ca</a></li>
## Browser support
-The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in older versions of Android, but not reliably enough for use with this grid. [View flexbox browser support here.](http://caniuse.com/#feat=flexbox) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
+The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
+ <div class="warning callout">
+ <p>In Firefox 43 (the latest version), images in flex columns may overflow their container. To fix this, add a defined <code>width</code> to any images inside a flex column, or use <code>width: 100%</code> for full-bleed images.</p>
+ </div>
+
---
## Importing
```html_example
<div class="row">
- <div class="column order-1 medium-order-2">
- This column will come first on small, and second on medium and larger.
- </div>
- <div class="column order-2 medium-order-1">
+ <div class="column small-order-2 medium-order-1">
This column will come second on small, and first on medium and larger.
</div>
+ <div class="column small-order-1 medium-order-2">
+ This column will come first on small, and second on medium and larger.
+ </div>
</div>
```
+
+---
+
+## 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.
+
+<div class="primary callout">
+ <p>A block grid row has the property <code>align-items: stretch</code> by default, meaning the columns in each row are equal height. To change this, change the <code>align-items</code> property of the row, or use one of the <a href="flexbox.html#vertical-alignment">vertical alignment flexbox classes</a>.</p>
+</div>
+
+```html_example
+<div class="row small-up-1 medium-up-2 large-up-3">
+ <div class="column">1 per row on small</div>
+ <div class="column">2 per row on medium</div>
+ <div class="column">3 per row on large</div>
+</div>
+```
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.
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
}
});
}
},
"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",
}
/// 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} {
}
}
+ &.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;
+ }
+ }
+ }
}
}
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;
+ }
}
/// 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%;
- }
}
}
}
// 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;
+ }
}
}
/// @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;
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;
$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;
}
}
$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;
}
}
}
.#{$-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); }
}
}
// 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);
}
}
- @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);
$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);
$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()
projects / thirdparty / foundation / foundation-sites.git / commitdiff
