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 /docs/src/docs.scss | |
parent | 7b7137c277fb38e67d39a11acd1342f6c2891dfd (diff) |
Rewrite Off-canvas component and update the Docs
Diffstat (limited to 'docs/src/docs.scss')
-rw-r--r-- | docs/src/docs.scss | 222 |
1 files changed, 85 insertions, 137 deletions
diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 6a19281..64f2e95 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -7,36 +7,54 @@ content: "#{$version}"; } -/* Spectre New Docs */ -.s-container { - & > .columns { - flex-flow: nowrap; - min-height: 100vh; +.off-canvas { + .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; + } + + .off-canvas-sidebar { + width: 12rem; + } + + .off-canvas-content { + padding: 0 4rem; } } -.s-sidebar { - background: $bg-color; - flex: 0 0 auto; - padding: 1.5rem 0 1.5rem 1.5rem; - width: 12rem; +.docs-navbar { + height: 3.8rem; + right: 0; + position: fixed; + top: 0; + z-index: $zindex-2; + + .btn { + position: absolute; + right: 1.5rem; + top: 1rem; + } +} - .s-nav { +.docs-sidebar { + .docs-nav { bottom: 1.5rem; - overflow-y: auto; + overflow-y: auto; + padding: .5rem 1.5rem; position: fixed; - top: 5rem; - width: 10.5rem; + top: 3.5rem; + width: 12rem; } .accordion { - font-size: .7rem; margin-bottom: .75rem; input { & ~ .accordion-header { color: lighten($dark-color, 10%); - font-size: .6rem; + font-size: .65rem; font-weight: 600; text-transform: uppercase; } @@ -50,6 +68,7 @@ .menu { .menu-item { + font-size: .7rem; padding-left: 1rem; & > a { @@ -62,13 +81,13 @@ } } -.s-content { +.docs-content { flex: 1 1 auto; - max-width: 960px; - padding: 0 4rem; width: calc(100vw - 12rem); & > .container { + margin-left: 0; + max-width: 800px; padding-bottom: 1.5rem; } @@ -93,16 +112,17 @@ .s-title, .s-subtitle { - line-height: 1.6rem; + color: darken($dark-color, 2%); + line-height: 1.8rem; margin-bottom: 0; - padding-top: 1.5rem; - padding-bottom: 1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; position: static; @supports (position: sticky) { position: sticky; top: 0; - z-index: $zindex-2; + z-index: $zindex-1; &::before { background: $light-color; @@ -267,14 +287,13 @@ } } -.s-brand { +.docs-brand { color: $primary-color; - left: 0; - padding: 0 1.5rem; + left: 1.5rem; position: fixed; - top: 1.3rem; + top: .85rem; - .s-logo { + .docs-logo { align-items: center; border-radius: $border-radius; display: inline-flex; @@ -295,7 +314,7 @@ h2 { display: inline; - font-size: .8rem; + font-size: .9rem; font-weight: 500; margin-bottom: 0; margin-left: .5rem; @@ -304,7 +323,7 @@ } } -.s-footer { +.docs-footer { color: $gray-color; padding: .5rem .5rem 1.5rem .5rem; @@ -406,60 +425,22 @@ } } -.docs-nav-clear { - display: none; -} - -.s-navbar { - height: 3.5rem; - left: 0; - padding: .85rem 1.5rem; - position: fixed; - text-align: center; - z-index: $zindex-4; - - .s-logo, - .menu-btn { - display: none; - } - - .float-btn { - position: fixed; - right: 4rem; - top: 1.4rem; - } -} - -@media (max-width: 880px) { - .s-sidebar { - background: $bg-color; - bottom: 0; - overflow-y: auto; - padding: 3rem 1.5rem; - position: fixed; - left: 0; - top: 0; - transform: translateX(-100%); - transition: transform .2s ease; - z-index: 400; - - &:target { - transform: translateX(0); - transition: transform .2s ease; - - & + .docs-nav-clear { - display: block; - } +@media (max-width: 960px) { + .off-canvas { + .off-canvas-toggle { + z-index: $zindex-3; } + } - .s-brand { - margin-top: -1.7rem; + .docs-sidebar { + .docs-brand { + margin: .85rem 1.5rem; padding: 0; position: static; } - .s-nav { - margin-top: 2rem; + .docs-nav { + margin-top: 1rem; position: static; } @@ -468,59 +449,22 @@ } } - .s-navbar { - backdrop-filter: blur(10px); - background: rgba($bg-color-light, .65); - right: 0; - top: 0; - z-index: $zindex-2; - - .menu-btn { - display: block; - left: 2.6rem; - position: fixed; - top: .85rem; - - .btn { - font-size: 1rem; - } - } - - .s-logo { - align-items: center; - border-radius: $border-radius; - display: inline-flex; - height: 2rem; - padding: .2rem; - width: auto; - } - - .float-btn { - right: 2.9rem; - top: .85rem; - } - } - - .docs-nav-clear { - background: rgba(0, 0, 0, .15); - display: none; - height: 100%; + .docs-navbar { + backdrop-filter: blur(5px); + background: rgba($bg-color, .65); left: 0; - right: 0; - top: 0; - position: fixed; - width: 100%; - z-index: $zindex-3; } - .s-content { - min-width: auto; - padding: 0 2.5rem; - width: 100%; + .docs-content { + &.off-canvas-content { + min-width: auto; + padding: 0 1.5rem; + width: 100%; + } .s-title, .s-subtitle { - padding-top: 4rem; + padding-top: 5rem; position: static; &::before { @@ -561,9 +505,23 @@ padding: 0; } } + + .off-canvas { + .off-canvas-toggle { + left: .5rem; + } + } - .s-content { - padding: 3.5rem .5rem 0 .5rem; + .docs-navbar { + .btn { + right: 1rem; + } + } + + .docs-content { + &.off-canvas-content { + padding: 0 .5rem; + } .docs-block { padding: $unit-2 $unit-h; @@ -573,14 +531,4 @@ display: none; } } - - .s-navbar { - .menu-btn { - left: .65rem; - } - - .float-btn { - right: 1rem; - } - } }
\ No newline at end of file |