From 4bfed53b08f4bc2225ea4256dbdb74b79fd3828d Mon Sep 17 00:00:00 2001 From: Paul Bailey Date: Mon, 4 Jan 2016 22:38:08 -0600 Subject: [PATCH] Remove bottom off-canvas as it was more awkward than a junior high dance. --- docs/pages/off-canvas.md | 12 +++++------- docs/partials/off-canvi.html | 29 +++++++---------------------- scss/components/_off-canvas.scss | 16 ++-------------- 3 files changed, 14 insertions(+), 43 deletions(-) diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md index 7789499a2..4631218e1 100644 --- a/docs/pages/off-canvas.md +++ b/docs/pages/off-canvas.md @@ -117,16 +117,15 @@ The main content area (`.off-canvas-content`) will be padded to the left or righ --- -## Off-canvas from Any Direction +## Vertical Off-canvas -In addition to left and right off-canvas menus, you can also have top or bottom off-canvases as well. +In addition to left and right off-canvas menus, you can have vertical off-canvases as well. ```html
-
@@ -134,20 +133,19 @@ In addition to left and right off-canvas menus, you can also have top or bottom ``` -
-

When using the `title-bar`, the title-bar icons are still either `title-bar-left` or `title-bar-right`, but the off-canvas can be set to top or bottom.

+

When using the `title-bar` with a vertical off-canvas, the title-bar icons are still either `title-bar-left` or `title-bar-right`.

```html_example
- Foundation title bar with vertical off-canvas + Foundation title bar with top off-canvas
- +
``` diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html index ea4b8c38b..94430ee6a 100644 --- a/docs/partials/off-canvi.html +++ b/docs/partials/off-canvi.html @@ -3,18 +3,18 @@ - -
- - -
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss index c4c05dadf..080757736 100644 --- a/scss/components/_off-canvas.scss +++ b/scss/components/_off-canvas.scss @@ -33,7 +33,7 @@ $offcanvas-fixed-reveal: true !default; /// @type Color $offcanvas-exit-background: rgba($white, 0.25) !default; -/// Height of a top or bottom off-canvas menu. +/// Height of a vertical off-canvas menu. /// @type Number $offcanvas-vertical-size: 250px !default; @@ -131,10 +131,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default; top: -$vertical-size; width: 100%; } - @else if $position == bottom { - bottom: -$vertical-size; - width: 100%; - } // Generates an open state class that matches the width of the menu @at-root { @@ -148,9 +144,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default; @else if $position == top { transform: translateY($vertical-size); } - @else if $position == bottom { - transform: translateY(-$vertical-size); - } } } } @@ -182,7 +175,6 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default; &.position-left { @include off-canvas-position(left); } &.position-right { @include off-canvas-position(right); } &.position-top { @include off-canvas-position(top); } - &.position-bottom { @include off-canvas-position(bottom); } } // Reveal off-canvas menu on larger screens @@ -197,13 +189,9 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default; @include off-canvas-reveal(right); } - .position-right.reveal-for-#{$name} { + .position-top.reveal-for-#{$name} { @include off-canvas-reveal(top); } - - .position-right.reveal-for-#{$name} { - @include off-canvas-reveal(bottom); - } } } } -- 2.47.2