diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
commit | 2d12f808e4b91e92cf4c28de7dca1c9f02dd0b8b (patch) | |
tree | ccc0e464cd6a4fe6c35c698ac4a56170cbd4a94b /src | |
parent | 7b7137c277fb38e67d39a11acd1342f6c2891dfd (diff) |
Rewrite Off-canvas component and update the Docs
Diffstat (limited to 'src')
-rw-r--r-- | src/_off-canvas.scss | 38 | ||||
-rw-r--r-- | src/_variables.scss | 2 |
2 files changed, 20 insertions, 20 deletions
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss index 8364bff..52c4e55 100644 --- a/src/_off-canvas.scss +++ b/src/_off-canvas.scss @@ -1,51 +1,51 @@ // Off canvas menus +$off-canvas-breakpoint: 960px; + .off-canvas { display: flex; + flex-flow: nowrap; height: 100%; - left: 0; - overflow: hidden; - position: fixed; - top: 0; + min-height: 100vh; + 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; + height: 100%; padding: $layout-spacing-lg $layout-spacing-lg $layout-spacing-lg 4rem; } - .off-canvas-checkbox { - &:checked ~ .off-canvas-sidebar { + .off-canvas-sidebar { + &:target { transform: translateX(0); } - &:checked ~ .off-canvas-toggle { + &:target ~ .off-canvas-overlay { background: rgba($dark-color, .1); border-color: transparent; border-radius: 0; bottom: 0; + display: block; height: 100%; left: 0; + position: fixed; right: 0; top: 0; width: 100%; - - .icon { - display: none; - } + z-index: $zindex-2; } } @@ -63,12 +63,12 @@ } // 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; |