diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-09-12 18:52:31 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-09-12 18:52:31 +0300 |
commit | ea508ef4aa932188a1c8cd3a76bd1be6e318b196 (patch) | |
tree | 0386126bcb00ccf7ac0dec8b177fc19fc6f38d4a /src | |
parent | 388fcd4107498400f05ccfe1dde682f6b09c0546 (diff) |
Add Off-screen experimental code
Diffstat (limited to 'src')
-rw-r--r-- | src/_buttons.scss | 2 | ||||
-rw-r--r-- | src/_off-canvas.scss | 82 | ||||
-rw-r--r-- | src/_parallax.scss | 10 | ||||
-rw-r--r-- | src/spectre-exp.scss | 2 | ||||
-rw-r--r-- | src/utilities/_position.scss | 6 |
5 files changed, 95 insertions, 7 deletions
diff --git a/src/_buttons.scss b/src/_buttons.scss index 0c9540d..1860ed8 100644 --- a/src/_buttons.scss +++ b/src/_buttons.scss @@ -96,7 +96,7 @@ &.btn-lg { font-size: $font-size-lg; height: $control-size-lg; - padding: $control-padding-v-lg $control-padding-h * 1.5; + padding: $control-padding-v-lg $control-padding-h * 1.25; } // Button Block diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss new file mode 100644 index 0000000..ef8603e --- /dev/null +++ b/src/_off-canvas.scss @@ -0,0 +1,82 @@ +// Off canvas menus +.off-canvas { + display: flex; + height: 100%; + left: 0; + overflow: hidden; + position: fixed; + top: 0; + width: 100%; + + .off-canvas-sidebar { + background: $bg-color; + height: 100%; + left: 0; + padding: $layout-spacing-lg; + position: absolute; + 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; + } + + .off-canvas-checkbox { + &:checked ~ .off-canvas-sidebar { + transform: translateX(0); + } + + &:checked ~ .off-canvas-btn { + background: rgba($dark-color, .1); + border-color: transparent; + bottom: 0; + border-radius: 0; + height: 100%; + left: 0; + right: 0; + top: 0; + width: 100%; + + .icon { + display: none; + } + } + } + + .off-canvas-toggle { + display: block; + left: $layout-spacing-lg; + padding-left: 0; + padding-right: 0; + position: absolute; + top: $layout-spacing-lg; + transition: none; + width: $control-size-lg; + z-index: $zindex-2; + } +} + +// Responsive layout +@media (min-width: $size-md) { + .off-canvas { + .off-canvas-sidebar { + flex: 0 0 auto; + position: static; + transform: translateX(0); + } + + .off-canvas-content { + padding-left: $layout-spacing-lg; + } + + .off-canvas-toggle { + display: none; + } + } +}
\ No newline at end of file diff --git a/src/_parallax.scss b/src/_parallax.scss index fcde262..da101bf 100644 --- a/src/_parallax.scss +++ b/src/_parallax.scss @@ -1,9 +1,9 @@ // Parallax -$parallax-deg: 3deg; -$parallax-offset: 4.5px; -$parallax-offset-z: 50px; -$parallax-perspective: 1000px; -$parallax-scale: .95; +$parallax-deg: 3deg !default; +$parallax-offset: 4.5px !default; +$parallax-offset-z: 50px !default; +$parallax-perspective: 1000px !default; +$parallax-scale: .95 !default; // Mixin: Parallax direction @mixin parallax-dir() { diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss index c83b1a3..e0de331 100644 --- a/src/spectre-exp.scss +++ b/src/spectre-exp.scss @@ -1,5 +1,4 @@ /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ - // Core variables and mixins @import "variables"; @import "mixins"; @@ -10,6 +9,7 @@ @import "comparison-sliders"; @import "filters"; @import "meters"; +@import "off-canvas"; @import "parallax"; @import "progress"; @import "sliders"; diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss index 1f4c5e8..97407d8 100644 --- a/src/utilities/_position.scss +++ b/src/utilities/_position.scss @@ -30,6 +30,12 @@ margin-right: auto; } +.flex-centered { + align-items: center; + display: flex; + justify-content: center; +} + // Spacing @include margin-variant(0, 0); |