diff --git a/docs/templates/action-sheet.html b/docs/templates/action-sheet.html
index 3cde5b3..492b899 100644
--- a/docs/templates/action-sheet.html
+++ b/docs/templates/action-sheet.html
@@ -82,7 +82,7 @@ Additional Options
External Triggers
-To use an entirely different element entirely to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.
+To use an entirely different element to control the action sheet, use the following markup. Make sure that the ID for the action sheet and the toggle match up. The zf-as-button element is optional here, since you're using another element to trigger the action sheet.
Toggle
@@ -117,12 +117,10 @@ Sass Mixins
// This is the action sheet itself
.custom-action-sheet {
// These are the core styles for the sheet menu
-
- $padding: 1rem,
- $color: #000,
- $border-color,
- $background-hover: #ccc
- );
+ $padding: 1rem,
+ $color: #000,
+ $border-color,
+ $background-hover: #ccc
// This mixin sets up styles for the mobile action sheet
@include action-sheet(
diff --git a/js/angular/components/common/common.js b/js/angular/components/common/common.js
index 03b8a69..30fb720 100644
--- a/js/angular/components/common/common.js
+++ b/js/angular/components/common/common.js
@@ -192,22 +192,40 @@
function link(scope, element, attrs) {
element.on('click', function(e) {
- var tar = e.target;
- var avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e, i){
+ var tar = e.target, avoid, activeElements, closedElements, i;
+
+ // check if clicked target is designated to open/close another component
+ avoid = ['zf-toggle', 'zf-hard-toggle', 'zf-open', 'zf-close'].filter(function(e){
return e in tar.attributes;
});
+ if(avoid.length > 0) {
+ // do nothing
+ return;
+ }
- if(avoid.length > 0){ return; }
+ // check if clicked element is inside active closable parent
+ if (getParentsUntil(tar, 'zf-closable') !== false) {
+ // do nothing
+ return;
+ }
- var activeElements = document.querySelectorAll('.is-active[zf-closable]');
+ // close all active elements
+ activeElements = document.querySelectorAll('.is-active[zf-closable]');
+ closedElements = 0;
+ if(activeElements.length > 0) {
+ for(i = 0; i < activeElements.length; i++) {
+ if (!activeElements[i].hasAttribute('zf-ignore-all-close')) {
+ foundationApi.publish(activeElements[i].id, 'close');
+ closedElements++;
+ }
+ }
- if(activeElements.length && !activeElements[0].hasAttribute('zf-ignore-all-close')){
- if(getParentsUntil(tar, 'zf-closable') === false){
+ // if one or more elements were closed,
+ // prevent the default action
+ if (closedElements > 0) {
e.preventDefault();
- foundationApi.publish(activeElements[0].id, 'close');
}
}
- return;
});
}
/** special thanks to Chris Ferdinandi for this solution.
diff --git a/js/angular/components/iconic/iconic.js b/js/angular/components/iconic/iconic.js
index e40d8ab..24c7791 100644
--- a/js/angular/components/iconic/iconic.js
+++ b/js/angular/components/iconic/iconic.js
@@ -152,9 +152,11 @@
injectSvg(element[0]);
- foundationApi.subscribe('resize', function () {
- // only run update on current element
- ico.update(element[0]);
+ // subscribe for resize events
+ foundationApi.subscribe('resize', resize);
+
+ scope.$on("$destroy", function() {
+ foundationApi.unsubscribe('resize', resize);
});
// handle dynamic updating of src
@@ -254,6 +256,11 @@
}
});
}
+
+ function resize() {
+ // run update on current element
+ ico.update(element[0]);
+ }
}
function addDataDash(attr) {
diff --git a/js/angular/components/interchange/interchange.js b/js/angular/components/interchange/interchange.js
index 3e91c84..1764391 100644
--- a/js/angular/components/interchange/interchange.js
+++ b/js/angular/components/interchange/interchange.js
@@ -31,8 +31,32 @@
var globalQueries = foundationMQ.getMediaQueries();
- //setup
- foundationApi.subscribe('resize', function(msg) {
+ // subscribe for resize events
+ foundationApi.subscribe('resize', resize);
+
+ scope.$on("$destroy", function() {
+ foundationApi.unsubscribe('resize', resize);
+ });
+
+ //init
+ foundationApi.publish('resize', 'initial resize');
+
+ function templateLoader(templateUrl) {
+ return $http.get(templateUrl, {cache: $templateCache});
+ }
+
+ function collectInformation(el) {
+ var data = foundationMQ.collectScenariosFromElement(el);
+
+ scenarios = data.scenarios;
+ innerTemplates = data.templates;
+ }
+
+ function checkScenario(scenario) {
+ return !current || current !== scenario;
+ }
+
+ function resize(msg) {
transclude(function(clone, newScope) {
if(!scenarios || !innerTemplates) {
collectInformation(clone);
@@ -72,25 +96,6 @@
}
}
});
-
- });
-
- //init
- foundationApi.publish('resize', 'initial resize');
-
- function templateLoader(templateUrl) {
- return $http.get(templateUrl, {cache: $templateCache});
- }
-
- function collectInformation(el) {
- var data = foundationMQ.collectScenariosFromElement(el);
-
- scenarios = data.scenarios;
- innerTemplates = data.templates;
- }
-
- function checkScenario(scenario) {
- return !current || current !== scenario;
}
}
}
@@ -224,17 +229,10 @@
function postLink(scope, element, attrs) {
// subscribe for resize events
- foundationApi.subscribe('resize', function() {
- var orignalVisibilty = scope[queryResult];
- runQuery();
- if (orignalVisibilty != scope[queryResult]) {
- // digest if visibility changed
- scope.$digest();
- }
- });
+ foundationApi.subscribe('resize', resize);
scope.$on("$destroy", function() {
- foundationApi.unsubscribe('resize');
+ foundationApi.unsubscribe('resize', resize);
});
// run first media query check
@@ -259,6 +257,15 @@
}
}
}
+
+ function resize() {
+ var orignalVisibilty = scope[queryResult];
+ runQuery();
+ if (orignalVisibilty != scope[queryResult]) {
+ // digest if visibility changed
+ scope.$digest();
+ }
+ }
}
}
}
diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js
index 2f6d642..1f72060 100644
--- a/js/angular/components/modal/modal.js
+++ b/js/angular/components/modal/modal.js
@@ -71,7 +71,7 @@
var dialog = angular.element(element.children()[0]);
var animateFn = attrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate;
- scope.active = scope.active || false;
+ scope.active = false;
scope.overlay = attrs.overlay === 'false' ? false : true;
scope.overlayClose = attrs.overlayClose === 'false' ? false : true;
@@ -88,27 +88,32 @@
};
scope.hide = function() {
- scope.active = false;
- animate();
+ if (scope.active) {
+ scope.active = false;
+ adviseActiveChanged();
+ animate();
+ }
return;
};
scope.show = function() {
- scope.active = true;
- animate();
- dialog.tabIndex = -1;
- dialog[0].focus();
+ if (!scope.active) {
+ scope.active = true;
+ adviseActiveChanged();
+ animate();
+ dialog.tabIndex = -1;
+ dialog[0].focus();
+ }
return;
};
scope.toggle = function() {
scope.active = !scope.active;
+ adviseActiveChanged();
animate();
return;
};
- init();
-
//setup
foundationApi.subscribe(attrs.id, function(msg) {
if(msg === 'show' || msg === 'open') {
@@ -126,6 +131,12 @@
return;
});
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
+
function animate() {
//animate both overlay and dialog
if(!scope.overlay) {
@@ -136,7 +147,7 @@
// due to a bug where the overlay fadeIn is essentially covering up
// the dialog's animation
if (!scope.active) {
- animateFn(element, scope.active, overlayIn, overlayOut);
+ foundationApi.animate(element, scope.active, overlayIn, overlayOut);
}
else {
element.addClass('is-active');
@@ -144,12 +155,6 @@
animateFn(dialog, scope.active, animationIn, animationOut);
}
-
- function init() {
- if(scope.active) {
- scope.show();
- }
- }
}
}
}
@@ -165,6 +170,7 @@
id = config.id || foundationApi.generateUuid(),
attached = false,
destroyed = false,
+ activated = false,
html,
element,
fetched,
@@ -177,6 +183,7 @@
'animationOut',
'overlay',
'overlayClose',
+ 'ignoreAllClose',
'class'
];
@@ -196,12 +203,12 @@
assembleDirective();
}
+ self.isActive = isActive;
self.activate = activate;
self.deactivate = deactivate;
self.toggle = toggle;
self.destroy = destroy;
-
return {
isActive: isActive,
activate: activate,
@@ -217,44 +224,53 @@
}
function isActive() {
- return !destroyed && scope && scope.active === true;
+ return !destroyed && scope && activated;
}
function activate() {
checkStatus();
$timeout(function() {
- init(true);
- foundationApi.publish(id, 'show');
+ activated = true;
+ init('show');
}, 0, false);
}
function deactivate() {
checkStatus();
$timeout(function() {
- init(false);
- foundationApi.publish(id, 'hide');
+ activated = false;
+ init('hide');
}, 0, false);
}
function toggle() {
checkStatus();
$timeout(function() {
- init(true);
- foundationApi.publish(id, 'toggle');
+ activated = !activated;
+ init('toggle');
}, 0, false);
}
- function init(state) {
+ function init(msg) {
$q.when(fetched).then(function() {
- if(!attached && html.length > 0) {
- var modalEl = container.append(element);
+ var delayMsg = false;
+ if(!attached && html.length > 0) {
+ container.append(element);
$compile(element)(scope);
-
attached = true;
+
+ // delay message so directive can be compiled and respond to messages
+ delayMsg = true;
}
- scope.active = state;
+ if (delayMsg) {
+ $timeout(function() {
+ foundationApi.publish(id, msg);
+ }, 0, false);
+ } else {
+ foundationApi.publish(id, msg);
+ }
});
}
@@ -274,7 +290,7 @@
for(var i = 0; i < props.length; i++) {
var prop = props[i];
- if(config[prop]) {
+ if(angular.isDefined(config[prop])) {
switch (prop) {
case 'animationIn':
element.attr('animation-in', config[prop]);
@@ -283,7 +299,10 @@
element.attr('animation-out', config[prop]);
break;
case 'overlayClose':
- element.attr('overlay-close', config[prop] === 'false' ? 'false' : 'true'); // must be string, see postLink() above
+ element.attr('overlay-close', (config[prop] === 'false' || config[prop] === false) ? 'false' : 'true'); // must be string, see postLink() above
+ break;
+ case 'ignoreAllClose':
+ element.attr('zf-ignore-all-close', 'zf-ignore-all-close');
break;
case 'class':
if (angular.isString(config[prop])) {
diff --git a/js/angular/components/notification/notification.js b/js/angular/components/notification/notification.js
index 2478b91..efe6ba7 100644
--- a/js/angular/components/notification/notification.js
+++ b/js/angular/components/notification/notification.js
@@ -163,11 +163,13 @@
//due to dynamic insertion of DOM, we need to wait for it to show up and get working!
setTimeout(function() {
scope.active = true;
+ adviseActiveChanged();
animate(element, scope.active, animationIn, animationOut);
}, 50);
scope.hide = function() {
scope.active = false;
+ adviseActiveChanged();
animate(element, scope.active, animationIn, animationOut);
setTimeout(function() {
controller.removeNotification(scope.notifId);
@@ -200,6 +202,12 @@
}
});
}
+
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
}
}
}
@@ -275,23 +283,35 @@
});
scope.hide = function() {
- scope.active = false;
- animateFn(element, scope.active, animationIn, animationOut);
+ if (scope.active) {
+ scope.active = false;
+ adviseActiveChanged();
+ animateFn(element, scope.active, animationIn, animationOut);
+ }
return;
};
scope.show = function() {
- scope.active = true;
- animateFn(element, scope.active, animationIn, animationOut);
+ if (!scope.active) {
+ scope.active = true;
+ adviseActiveChanged();
+ animateFn(element, scope.active, animationIn, animationOut);
+ }
return;
};
scope.toggle = function() {
scope.active = !scope.active;
+ adviseActiveChanged();
animateFn(element, scope.active, animationIn, animationOut);
return;
};
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
}
}
}
diff --git a/js/angular/components/offcanvas/offcanvas.js b/js/angular/components/offcanvas/offcanvas.js
index 0e8acf2..47c2b61 100644
--- a/js/angular/components/offcanvas/offcanvas.js
+++ b/js/angular/components/offcanvas/offcanvas.js
@@ -88,18 +88,27 @@
scope.hide = function() {
scope.active = false;
+ adviseActiveChanged();
return;
};
scope.show = function() {
scope.active = true;
+ adviseActiveChanged();
return;
};
scope.toggle = function() {
scope.active = !scope.active;
+ adviseActiveChanged();
return;
};
+
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
}
}
}
diff --git a/js/angular/components/panel/panel.js b/js/angular/components/panel/panel.js
index d608dc1..37a5c24 100644
--- a/js/angular/components/panel/panel.js
+++ b/js/angular/components/panel/panel.js
@@ -51,6 +51,7 @@
function compile(tElement, tAttrs, transclude) {
var type = 'panel';
var animate = tAttrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate;
+ var forceAnimation = tAttrs.hasOwnProperty('forceAnimation');
return {
pre: preLink,
@@ -106,10 +107,12 @@
foundationApi.subscribe(attrs.id, function(msg) {
var panelPosition = $window.getComputedStyle(element[0]).getPropertyValue("position");
- // patch to prevent panel animation on larger screen devices
- // don't run animation on grid elements, only panel
- if (panelPosition == 'static' || panelPosition == 'relative') {
- return;
+ if (!forceAnimation) {
+ // patch to prevent panel animation on larger screen devices
+ // don't run animation on grid elements, only panel
+ if (panelPosition == 'static' || panelPosition == 'relative') {
+ return;
+ }
}
if(msg == 'show' || msg == 'open') {
@@ -127,11 +130,10 @@
return;
});
- // function finish(el)
-
scope.hide = function() {
if(scope.active){
scope.active = false;
+ adviseActiveChanged();
animate(element, scope.active, animationIn, animationOut);
}
@@ -141,6 +143,7 @@
scope.show = function() {
if(!scope.active){
scope.active = true;
+ adviseActiveChanged();
animate(element, scope.active, animationIn, animationOut);
}
@@ -149,8 +152,8 @@
scope.toggle = function() {
scope.active = !scope.active;
+ adviseActiveChanged();
animate(element, scope.active, animationIn, animationOut);
-
return;
};
@@ -161,9 +164,14 @@
if (!matchMedia(globalQueries.medium).matches && srcEl.href && srcEl.href.length > 0) {
// Hide element if it can't match at least medium
scope.hide();
- animate(element, scope.active, animationIn, animationOut);
}
});
+
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
}
}
}
diff --git a/js/angular/components/popup/popup.js b/js/angular/components/popup/popup.js
index 5181953..bd2898b 100644
--- a/js/angular/components/popup/popup.js
+++ b/js/angular/components/popup/popup.js
@@ -92,22 +92,30 @@
scope.hide = function() {
- scope.active = false;
- tetherElement();
- tether.disable();
+ if (scope.active) {
+ scope.active = false;
+ adviseActiveChanged();
+ tetherElement();
+ tether.disable();
+ }
+
return;
};
scope.show = function(newTarget) {
- scope.active = true;
- tetherElement(newTarget);
- tether.enable();
+ if (!scope.active) {
+ scope.active = true;
+ adviseActiveChanged();
+ tetherElement(newTarget);
+ tether.enable();
+ }
return;
};
scope.toggle = function(newTarget) {
scope.active = !scope.active;
+ adviseActiveChanged();
tetherElement(newTarget);
if(scope.active) {
@@ -119,6 +127,17 @@
return;
};
+ scope.$on('$destroy', function() {
+ foundationApi.unsubscribe(attrs.id);
+
+ scope.active = false;
+ if(tetherInit) {
+ tether.destroy();
+ element.remove();
+ tetherInit = false;
+ }
+ });
+
function tetherElement(target) {
if(tetherInit) {
return;
@@ -137,6 +156,11 @@
tetherInit = true;
}
+ function adviseActiveChanged() {
+ if (!angular.isUndefined(attrs.zfAdvise)) {
+ foundationApi.publish(attrs.id, scope.active ? 'activated' : 'deactivated');
+ }
+ }
}
}
}
diff --git a/js/angular/services/base.core.js b/js/angular/services/base.core.js
index 5baee72..e9a3e0e 100644
--- a/js/angular/services/base.core.js
+++ b/js/angular/services/base.core.js
@@ -51,8 +51,27 @@
}
function unsubscribe(name, callback) {
+ var listenerIndex = -1, i, resizeListeners;
+
if (listeners[name] !== undefined) {
- delete listeners[name];
+ if (name == 'resize') {
+ resizeListeners = listeners['resize'];
+ for (i = 0; i < resizeListeners.length; i++) {
+ if (resizeListeners[i] === callback) {
+ // listener found
+ listenerIndex = i;
+ break;
+ }
+ }
+
+ if (listenerIndex != -1) {
+ // remove listener
+ resizeListeners.splice(listenerIndex, 1);
+ }
+ } else {
+ // delete all listeners
+ delete listeners[name];
+ }
}
if (typeof callback == 'function') {
callback.call(this);
@@ -128,11 +147,13 @@
}
function animateAndAdvise(element, futureState, animationIn, animationOut) {
+ var msgPrefix = "animation-" + (futureState ? "open" : "close");
+ publish(element[0].id, msgPrefix + "-started");
var promise = FoundationAnimation.animate(element, futureState, animationIn, animationOut);
promise.then(function() {
- publish(element[0].id, futureState ? 'active-true' : 'active-false');
+ publish(element[0].id, msgPrefix + "-finished");
}, function() {
- publish(element[0].id, 'active-aborted');
+ publish(element[0].id, msgPrefix + "-aborted");
});
return promise;
}
diff --git a/js/angular/services/base.dynamicRouting.animations.js b/js/angular/services/base.dynamicRouting.animations.js
index fb46969..781240e 100644
--- a/js/angular/services/base.dynamicRouting.animations.js
+++ b/js/angular/services/base.dynamicRouting.animations.js
@@ -106,22 +106,24 @@
function resetParent() {
element.parent().removeClass('position-absolute');
- if(presetHeight !== true) {
+ if(element.parent()[0] && presetHeight !== true) {
element.parent()[0].style.height = null;
}
}
function prepareParent() {
- var parentHeight = parseInt(element.parent()[0].style.height);
- var elHeight = parseInt(window.getComputedStyle(element[0], null).getPropertyValue('height'));
- var tempHeight = parentHeight > 0 ? parentHeight : elHeight > 0 ? elHeight : '';
+ if (element.parent()[0]) {
+ var parentHeight = parseInt(element.parent()[0].style.height);
+ var elHeight = parseInt(window.getComputedStyle(element[0], null).getPropertyValue('height'));
+ var tempHeight = parentHeight > 0 ? parentHeight : elHeight > 0 ? elHeight : '';
- if(parentHeight > 0) {
- presetHeight = true;
- }
+ if(parentHeight > 0) {
+ presetHeight = true;
+ }
- element.parent()[0].style.height = tempHeight + 'px';
- element.parent().addClass('position-absolute');
+ element.parent()[0].style.height = tempHeight + 'px';
+ element.parent().addClass('position-absolute');
+ }
}
}
}
diff --git a/js/angular/services/base.mediaquery.js b/js/angular/services/base.mediaquery.js
index f1b1ec7..bc65c4d 100644
--- a/js/angular/services/base.mediaquery.js
+++ b/js/angular/services/base.mediaquery.js
@@ -22,9 +22,9 @@
mqInit.init();
}
- FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils'];
+ FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils', 'FoundationMQ'];
- function FoundationMQInit(helpers, foundationApi, u){
+ function FoundationMQInit(helpers, foundationApi, u, foundationMQ){
var factory = {};
var namedQueries = {
'default' : 'only screen',
@@ -91,6 +91,9 @@
});
window.addEventListener('resize', u.throttle(function() {
+ // any resize event causes a clearing of the media cache
+ foundationMQ.clearCache();
+
foundationApi.publish('resize', 'window resized');
}, 50));
}
@@ -171,20 +174,21 @@
mediaQueryResultCache = {},
queryMinWidthCache = {};
- foundationApi.subscribe('resize', function() {
- // any new resize event causes a clearing of the media cache
- mediaQueryResultCache = {};
- });
-
service.getMediaQueries = getMediaQueries;
service.match = match;
service.matchesMedia = matchesMedia;
service.matchesMediaOrSmaller = matchesMediaOrSmaller;
service.matchesMediaOnly = matchesMediaOnly;
service.collectScenariosFromElement = collectScenariosFromElement;
+ service.clearCache = clearCache;
return service;
+ // METHOD INTENDED FOR INTERNAL USE ONLY
+ function clearCache() {
+ mediaQueryResultCache = {};
+ }
+
function getMediaQueries() {
return foundationApi.getSettings().mediaQueries;
}
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 147b4e6..5fe4b1f 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -93,6 +93,10 @@ $button-tag-selector: false !default;
){
@if $style == hollow {
border: 1px solid $background;
+ padding-top: calc(#{get-side($button-padding, top)} - 1px);
+ padding-right: calc(#{get-side($button-padding, right)} - 1px);
+ padding-bottom: calc(#{get-side($button-padding, bottom)} - 1px);
+ padding-left: calc(#{get-side($button-padding, left)} - 1px);
background: transparent;
color: $background;
@@ -194,7 +198,7 @@ $button-tag-selector: false !default;
}
}
- &.disabled { @include button-disabled; }
+ &.disabled, &:disabled { @include button-disabled; }
}
@if $button-tag-selector {
diff --git a/scss/components/_grid.scss b/scss/components/_grid.scss
index 80f986c..24801fe 100644
--- a/scss/components/_grid.scss
+++ b/scss/components/_grid.scss
@@ -1,4 +1,5 @@
@import "panel";
+@import "motion";
/*
THE GRID
@@ -174,8 +175,8 @@ $block-grid-max-size: 6 !default;
*/
@mixin grid-nest($nest: true) {
@if ($nest) {
- margin-left: -1rem;
- margin-right: -1rem;
+ margin-left: -($block-padding);
+ margin-right: -($block-padding);
}
}
/*
@@ -193,6 +194,23 @@ $block-grid-max-size: 6 !default;
}
}
+@mixin grid-panel-animating($isAnimating: true) {
+ $sel1: map-get($motion-class, in);
+ $sel1A: map-get($motion-class-active, in);
+ $sel2: map-get($motion-class, out);
+ $sel2A: map-get($motion-class-active, out);
+
+ @if ($isAnimating == true) {
+ &.#{$sel1}.#{$sel1A}, &.#{$sel2}.#{$sel2A} {
+ @content;
+ }
+ } @else {
+ &:not(.#{$sel1}):not(.#{$sel1A}):not(.#{$sel2}):not(.#{$sel2A}) {
+ @content;
+ }
+ }
+}
+
/*
Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
@@ -274,7 +292,7 @@ $block-grid-max-size: 6 !default;
list-style-type: none;
> li, > div, > section {
- padding: 0 1rem 1rem;
+ padding: 0 $block-padding $block-padding;
flex: 0 0 percentage(1 / $up);
max-width: percentage(1 / $up);
}
@@ -338,8 +356,6 @@ $block-grid-max-size: 6 !default;
// Grids inside content blocks should wrap by default, so they mimic traditional float grids
.grid-block {
- margin-left: -($block-padding);
- margin-right: -($block-padding);
flex-wrap: wrap;
overflow: visible;
@@ -352,6 +368,12 @@ $block-grid-max-size: 6 !default;
overflow: visible;
}
}
+
+ // Grids inside content blocks should undo padding
+ &:not(.collapse) > .grid-block {
+ margin-left: -($block-padding);
+ margin-right: -($block-padding);
+ }
}
.grid-container {
@include grid-container;
@@ -370,7 +392,24 @@ $block-grid-max-size: 6 !default;
@include grid-block;
// Override panel styles
- &.panel { @include grid-panel-reset; }
+ &.panel {
+ &.is-active {
+ @include grid-panel-animating(true) {
+ position: absolute;
+ display: block;
+ }
+ @include grid-panel-animating(false) {
+ @include grid-panel-reset;
+ }
+ }
+ &:not(.is-active) {
+ display: none;
+
+ @include grid-panel-animating(true) {
+ position: absolute;
+ }
+ }
+ }
}
}
.#{$size}-grid-content {
@@ -380,7 +419,24 @@ $block-grid-max-size: 6 !default;
@include grid-content;
// Override panel styles
- &.panel { @include grid-panel-reset; }
+ &.panel {
+ &.is-active {
+ @include grid-panel-animating(true) {
+ position: absolute;
+ display: block;
+ }
+ @include grid-panel-animating(false) {
+ @include grid-panel-reset;
+ }
+ }
+ &:not(.is-active) {
+ display: none;
+
+ @include grid-panel-animating(true) {
+ position: absolute;
+ }
+ }
+ }
}
}
}
diff --git a/scss/components/_iconic.scss b/scss/components/_iconic.scss
index e290458..bdbcc89 100644
--- a/scss/components/_iconic.scss
+++ b/scss/components/_iconic.scss
@@ -2,7 +2,7 @@
// ------
//
// A sample of 24 flexible, easily schemable icons from the folks at Iconic.
-//
+//
// Features:
// - 24 icons
// - Built-in coloring and sizing classes
@@ -85,11 +85,11 @@ $iconic-accent-stroke: $iconic-accent-fill !default;
}
@each $color in map-keys($foundation-colors) {
- .iconic-color-#{$color} {
+ .iconic-color-#{$color}, .iconic.iconic-color-#{$color}, a.iconic-color-#{$color} > .iconic {
@include color-icon(map-get($foundation-colors, $color));
}
}
- .iconic-color-secondary {
+ .iconic-color-secondary, a > .iconic.iconic-color-secondary {
@include color-icon($secondary-color);
}
}
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 2e2367a..72eb91e 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -67,7 +67,7 @@ $modal-overlay-background: rgba(#333, 0.7) !default;
@if $border != 0 {
border: $border;
}
- @if $radius != 0 {
+ @if $radius != 0px {
border-radius: $radius;
}
@if $shadow != none {
diff --git a/scss/components/_motion.scss b/scss/components/_motion.scss
index ef8b501..23b107f 100644
--- a/scss/components/_motion.scss
+++ b/scss/components/_motion.scss
@@ -377,7 +377,7 @@ $motion-delay-long: 700ms !default;
$delay: $motion-delay-default,
$iterations: null
) {
-
+
animation-name: $animation;
animation-duration: $duration;
animation-timing-function: $timing;
@@ -498,8 +498,8 @@ $motion-delay-long: 700ms !default;
&.long-delay { animation-delay: $motion-delay-long !important; }
}
.stagger { @include stagger($motion-stagger-duration-default); }
- .stort-stagger { @include stagger($motion-stagger-duration-default); }
- .long-stagger { @include stagger($motion-stagger-duration-default); }
+ .stort-stagger { @include stagger($motion-stagger-duration-short); }
+ .long-stagger { @include stagger($motion-stagger-duration-long); }
}
// View animation classes
diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss
index ca64124..b602242 100644
--- a/scss/components/_title-bar.scss
+++ b/scss/components/_title-bar.scss
@@ -40,7 +40,7 @@ $titlebar-item-classes: (
// Denotes the title of the bar
.#{$title} {
- font-weight: bold;
+ font-weight: $font-weight-bold;
}
// Denotes left, right, and center sections of the bar