diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-10-23 14:33:12 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-10-23 14:33:12 +0300 |
commit | 721fb6f5f4d2f9e6ffdce6ec45f631ab125fdb57 (patch) | |
tree | 87431bc0a387364d100c3accf36de4c17e1a32e6 /src | |
parent | 7b7137c277fb38e67d39a11acd1342f6c2891dfd (diff) | |
parent | d31dca854b683a3e749b95f0e526cb4e335f9d60 (diff) |
Merge pull request #318 from picturepan2/0.4.5v0.4.5
0.4.5
Diffstat (limited to 'src')
-rw-r--r-- | src/_off-canvas.scss | 72 | ||||
-rw-r--r-- | src/_variables.scss | 2 |
2 files changed, 38 insertions, 36 deletions
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss index 8364bff..009f9f0 100644 --- a/src/_off-canvas.scss +++ b/src/_off-canvas.scss @@ -1,74 +1,76 @@ // Off canvas menus +$off-canvas-breakpoint: 960px !default; + .off-canvas { display: flex; + flex-flow: nowrap; height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; + position: relative; width: 100%; .off-canvas-sidebar { background: $bg-color; - height: 100%; + bottom: 0; left: 0; - padding: $layout-spacing-lg; - position: absolute; + min-width: 10rem; + overflow-y: auto; + position: fixed; top: 0; transform: translateX(-100%); transition: transform .25s ease; - width: 10rem; z-index: $zindex-3; } .off-canvas-content { flex: 1 1 auto; - overflow-y: auto; - padding: $layout-spacing-lg $layout-spacing-lg $layout-spacing-lg 4rem; + height: 100%; + padding: $layout-spacing $layout-spacing $layout-spacing 4rem; + } + + .off-canvas-overlay { + background: rgba($dark-color, .1); + border-color: transparent; + border-radius: 0; + bottom: 0; + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; } - .off-canvas-checkbox { - &:checked ~ .off-canvas-sidebar { + .off-canvas-sidebar { + &:target, + &.active { transform: translateX(0); } - &:checked ~ .off-canvas-toggle { - background: rgba($dark-color, .1); - border-color: transparent; - border-radius: 0; - bottom: 0; - height: 100%; - left: 0; - right: 0; - top: 0; - width: 100%; - - .icon { - display: none; - } + &:target ~ .off-canvas-overlay, + &.active ~ .off-canvas-overlay { + display: block; + z-index: $zindex-2; } } .off-canvas-toggle { display: block; - left: $layout-spacing-lg; - padding-left: 0; - padding-right: 0; + left: $layout-spacing; position: absolute; - top: $layout-spacing-lg; + top: $layout-spacing; transition: none; - width: $control-size-lg; - z-index: $zindex-2; + z-index: $zindex-0; } } // Responsive layout -@media (min-width: $size-lg) { +@media (min-width: $off-canvas-breakpoint) { .off-canvas { .off-canvas-sidebar { flex: 0 0 auto; - position: static; - transform: translateX(0); + position: relative; + transform: none; } .off-canvas-content { diff --git a/src/_variables.scss b/src/_variables.scss index be56711..f7fa86a 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -1,5 +1,5 @@ // Core variables -$version: "0.4.4"; +$version: "0.4.5"; // Core colors $primary-color: #5755d9 !default; |