From 2d12f808e4b91e92cf4c28de7dca1c9f02dd0b8b Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 18 Oct 2017 15:01:36 +0800 Subject: Rewrite Off-canvas component and update the Docs --- docs/css/docs.css | 311 ++++++++++++++++++++++-------------------------------- 1 file changed, 125 insertions(+), 186 deletions(-) (limited to 'docs/css/docs.css') diff --git a/docs/css/docs.css b/docs/css/docs.css index 2988bef..539bde5 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,70 +1,85 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ .version::after { - content: "0.4.4"; + content: "0.4.5"; } -/* Spectre New Docs */ -.s-container > .columns { - -ms-flex-flow: nowrap; - flex-flow: nowrap; - min-height: 100vh; +.off-canvas .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; } -.s-sidebar { - background: #f8f9fa; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: 1.5rem 0 1.5rem 1.5rem; +.off-canvas .off-canvas-sidebar { width: 12rem; } -.s-sidebar .s-nav { +.off-canvas .off-canvas-content { + padding: 0 4rem; +} + +.docs-navbar { + height: 3.8rem; + position: fixed; + right: 0; + top: 0; + z-index: 200; +} + +.docs-navbar .btn { + position: absolute; + right: 1.5rem; + top: 1rem; +} + +.docs-sidebar .docs-nav { bottom: 1.5rem; overflow-y: auto; + padding: .5rem 1.5rem; position: fixed; - top: 5rem; - width: 10.5rem; + top: 3.5rem; + width: 12rem; } -.s-sidebar .accordion { - font-size: .7rem; +.docs-sidebar .accordion { margin-bottom: .75rem; } -.s-sidebar .accordion input ~ .accordion-header { +.docs-sidebar .accordion input ~ .accordion-header { color: #5b657a; - font-size: .6rem; + font-size: .65rem; font-weight: 600; text-transform: uppercase; } -.s-sidebar .accordion input:checked ~ .accordion-header { +.docs-sidebar .accordion input:checked ~ .accordion-header { color: #667189; } -.s-sidebar .accordion .menu .menu-item { +.docs-sidebar .accordion .menu .menu-item { + font-size: .7rem; padding-left: 1rem; } -.s-sidebar .accordion .menu .menu-item > a { +.docs-sidebar .accordion .menu .menu-item > a { background: transparent; color: #667189; display: inline-block; } -.s-content { +.docs-content { -ms-flex: 1 1 auto; flex: 1 1 auto; - max-width: 960px; - padding: 0 4rem; width: calc(100vw - 12rem); } -.s-content > .container { +.docs-content > .container { + margin-left: 0; + max-width: 800px; padding-bottom: 1.5rem; } -.s-content .anchor { +.docs-content .anchor { color: #6362dc; height: 0; margin-left: -2em; @@ -76,33 +91,34 @@ z-index: 100; } -.s-content .anchor:focus, -.s-content .anchor:hover { +.docs-content .anchor:focus, +.docs-content .anchor:hover { box-shadow: none; height: auto; text-decoration: none; width: 2em; } -.s-content .s-title, -.s-content .s-subtitle { - line-height: 1.6rem; +.docs-content .s-title, +.docs-content .s-subtitle { + color: #414857; + line-height: 1.8rem; margin-bottom: 0; - padding-bottom: 1.5rem; - padding-top: 1.5rem; + padding-bottom: 1rem; + padding-top: 1rem; position: static; } @supports ((position: -webkit-sticky) or (position: sticky)) { - .s-content .s-title, - .s-content .s-subtitle { + .docs-content .s-title, + .docs-content .s-subtitle { position: sticky; position: -webkit-sticky; top: 0; - z-index: 200; + z-index: 100; } - .s-content .s-title::before, - .s-content .s-subtitle::before { + .docs-content .s-title::before, + .docs-content .s-subtitle::before { background: #fff; bottom: 0; content: ""; @@ -115,22 +131,22 @@ } } -.s-content .s-title:hover .anchor, -.s-content .s-subtitle:hover .anchor { +.docs-content .s-title:hover .anchor, +.docs-content .s-subtitle:hover .anchor { height: auto; width: 1em; } -.s-content .s-title + .docs-note, -.s-content .s-subtitle + .docs-note { +.docs-content .s-title + .docs-note, +.docs-content .s-subtitle + .docs-note { margin-top: .4rem; } -.s-content .docs-note { +.docs-content .docs-note { margin: 1.5rem 0; } -.s-content .docs-ad { +.docs-content .docs-ad { background: #f8f9fa; border-radius: .1rem; display: inline-block; @@ -138,7 +154,7 @@ position: relative; } -.s-content .docs-ad::before { +.docs-content .docs-ad::before { color: #acb3c2; content: "AD"; font-size: .7rem; @@ -147,27 +163,27 @@ top: .1rem; } -.s-content .column { +.docs-content .column { padding: .4rem; } -.s-content .docs-block { +.docs-content .docs-block { border-radius: .1rem; padding: .4rem; } -.s-content .docs-block.bg-gray { +.docs-content .docs-block.bg-gray { background: #f0f1f4; } -.s-content .docs-shape { +.docs-content .docs-shape { height: 4.8rem; line-height: 1.2rem; padding: 1.8rem 0; width: 4.8rem; } -.s-content .docs-dot { +.docs-content .docs-dot { border-radius: 50%; display: inline-block; height: .5rem; @@ -175,43 +191,43 @@ width: .5rem; } -.s-content .docs-table th, -.s-content .docs-table td { +.docs-content .docs-table th, +.docs-content .docs-table td { padding: .75rem .25rem; } -.s-content .docs-color { +.docs-content .docs-color { border-radius: .1rem; margin: .25rem 0; padding: .5rem; } -.s-content .docs-color .color-subtitle { +.docs-content .docs-color .color-subtitle { font-size: .7rem; opacity: .75; } -.s-content .code { +.docs-content .code { color: #667189; } -.s-content .code .com { +.docs-content .code .com { color: #acb3c2; } -.s-content .code .tag { +.docs-content .code .tag { color: #5755d9; } -.s-content .code .atn { +.docs-content .code .atn { color: #667189; } -.s-content .code .atv { +.docs-content .code .atv { color: #e06870; } -.s-content .code[data-lang="Bash"] .tag { +.docs-content .code[data-lang="Bash"] .tag { margin-right: 1em; -webkit-user-select: none; -moz-user-select: none; @@ -219,23 +235,23 @@ user-select: none; } -.s-content .panel { +.docs-content .panel { height: 75vh; } -.s-content .panel .tile { +.docs-content .panel .tile { margin: .75rem 0; } -.s-content .parallax { +.docs-content .parallax { margin: 2rem auto; } -.s-content .form-autocomplete .menu { +.docs-content .form-autocomplete .menu { position: static; } -.s-content .example-tile-icon { +.docs-content .example-tile-icon { align-content: space-around; align-items: center; background: #5755d9; @@ -250,34 +266,33 @@ width: 2rem; } -.s-content .example-tile-icon .icon { +.docs-content .example-tile-icon .icon { margin: auto; } -.s-content .comparison-slider { +.docs-content .comparison-slider { height: auto; padding-bottom: 56.2222%; } -.s-content .comparison-slider .filter-grayscale { +.docs-content .comparison-slider .filter-grayscale { -webkit-filter: grayscale(75%); filter: grayscale(75%); } -.s-content .off-canvas { +.docs-content .off-canvas { height: 20rem; position: relative; } -.s-brand { +.docs-brand { color: #5755d9; - left: 0; - padding: 0 1.5rem; + left: 1.5rem; position: fixed; - top: 1.3rem; + top: .85rem; } -.s-brand .s-logo { +.docs-brand .docs-logo { align-items: center; border-radius: .1rem; display: inline-flex; @@ -288,32 +303,32 @@ width: auto; } -.s-brand .s-logo:focus, -.s-brand .s-logo:hover { +.docs-brand .docs-logo:focus, +.docs-brand .docs-logo:hover { text-decoration: none; } -.s-brand .s-logo img { +.docs-brand .docs-logo img { display: inline; height: auto; width: 1.6rem; } -.s-brand .s-logo h2 { +.docs-brand .docs-logo h2 { display: inline; - font-size: .8rem; + font-size: .9rem; font-weight: 500; margin-bottom: 0; margin-left: .5rem; margin-right: .5rem; } -.s-footer { +.docs-footer { color: #acb3c2; padding: .5rem .5rem 1.5rem .5rem; } -.s-footer a { +.docs-footer a { color: #667189; } @@ -408,116 +423,40 @@ margin-bottom: 0; } -.docs-nav-clear { - display: none; -} - -.s-navbar { - height: 3.5rem; - left: 0; - padding: .85rem 1.5rem; - position: fixed; - text-align: center; - z-index: 400; -} - -.s-navbar .s-logo, -.s-navbar .menu-btn { - display: none; -} - -.s-navbar .float-btn { - position: fixed; - right: 4rem; - top: 1.4rem; -} - -@media (max-width: 880px) { - .s-sidebar { - background: #f8f9fa; - bottom: 0; - left: 0; - overflow-y: auto; - padding: 3rem 1.5rem; - position: fixed; - top: 0; - transform: translateX(-100%); - transition: transform .2s ease; - z-index: 400; - } - .s-sidebar:target { - transform: translateX(0); - transition: transform .2s ease; - } - .s-sidebar:target + .docs-nav-clear { - display: block; +@media (max-width: 960px) { + .off-canvas .off-canvas-toggle { + z-index: 300; } - .s-sidebar .s-brand { - margin-top: -1.7rem; + .docs-sidebar .docs-brand { + margin: .85rem 1.5rem; padding: 0; position: static; } - .s-sidebar .s-nav { - margin-top: 2rem; + .docs-sidebar .docs-nav { + margin-top: 1rem; position: static; } - .s-sidebar .menu .menu-item > a { + .docs-sidebar .menu .menu-item > a { padding: .3rem .4rem; } - .s-navbar { - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - background: rgba(255, 255, 255, .65); - right: 0; - top: 0; - z-index: 200; - } - .s-navbar .menu-btn { - display: block; - left: 2.6rem; - position: fixed; - top: .85rem; - } - .s-navbar .menu-btn .btn { - font-size: 1rem; - } - .s-navbar .s-logo { - align-items: center; - border-radius: .1rem; - display: inline-flex; - display: -ms-inline-flexbox; - -ms-flex-align: center; - height: 2rem; - padding: .2rem; - width: auto; - } - .s-navbar .float-btn { - right: 2.9rem; - top: .85rem; - } - .docs-nav-clear { - background: rgba(0, 0, 0, .15); - display: none; - height: 100%; + .docs-navbar { + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + background: rgba(248, 249, 250, .65); left: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 300; } - .s-content { + .docs-content.off-canvas-content { min-width: auto; - padding: 0 2.5rem; + padding: 0 1.5rem; width: 100%; } - .s-content .s-title, - .s-content .s-subtitle { - padding-top: 4rem; + .docs-content .s-title, + .docs-content .s-subtitle { + padding-top: 5rem; position: static; } - .s-content .s-title::before, - .s-content .s-subtitle::before { + .docs-content .s-title::before, + .docs-content .s-subtitle::before { content: none; } .section-hero .s-brand { @@ -545,19 +484,19 @@ .grid-hero .card { padding: 0; } - .s-content { - padding: 3.5rem .5rem 0 .5rem; + .off-canvas .off-canvas-toggle { + left: .5rem; } - .s-content .docs-block { - padding: .4rem .1rem; + .docs-navbar .btn { + right: 1rem; } - .s-content .anchor { - display: none; + .docs-content.off-canvas-content { + padding: 0 .5rem; } - .s-navbar .menu-btn { - left: .65rem; + .docs-content .docs-block { + padding: .4rem .1rem; } - .s-navbar .float-btn { - right: 1rem; + .docs-content .anchor { + display: none; } } \ No newline at end of file -- cgit v1.3.1-23-gd82d From e018687db3924b80445b6e917d744e2efab1e6bb Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 18 Oct 2017 15:19:38 +0800 Subject: Fix the Docs homepage icon --- docs/css/docs.css | 4 ++-- docs/index.html | 6 +++--- docs/src/docs.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/css/docs.css') diff --git a/docs/css/docs.css b/docs/css/docs.css index 539bde5..23ba6bf 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -342,12 +342,12 @@ padding: 1rem .5rem; } -.section-hero .s-brand { +.section-hero .docs-brand { position: absolute; top: .5rem; } -.section-hero .s-brand h2 { +.section-hero .docs-brand h2 { color: #5755d9; } diff --git a/docs/index.html b/docs/index.html index 0859393..c706bd7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,11 +14,11 @@
-
-

Spectre.css

A lightweight, responsive and modern CSS framework

diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 64f2e95..3a88102 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -343,7 +343,7 @@ .section-hero { padding: 1rem .5rem; - .s-brand { + .docs-brand { position: absolute; top: .5rem; -- cgit v1.3.1-23-gd82d From b2d3c9bb46733227046f00a68213a0fc27422f4b Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 18 Oct 2017 16:06:15 +0800 Subject: Rewrite Off-canvas example and code --- docs/css/docs.css | 16 +++++++++++----- docs/dist/spectre-exp.css | 28 ++++++++++++++-------------- docs/dist/spectre-exp.min.css | 2 +- docs/experimentals.html | 26 +++++++++++--------------- docs/index.html | 1 + docs/src/docs.scss | 16 +++++++++++----- src/_off-canvas.scss | 38 +++++++++++++++++++------------------- 7 files changed, 68 insertions(+), 59 deletions(-) (limited to 'docs/css/docs.css') diff --git a/docs/css/docs.css b/docs/css/docs.css index 23ba6bf..216ab00 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -14,10 +14,6 @@ width: 12rem; } -.off-canvas .off-canvas-content { - padding: 0 4rem; -} - .docs-navbar { height: 3.8rem; position: fixed; @@ -73,6 +69,10 @@ width: calc(100vw - 12rem); } +.docs-content.off-canvas-content { + padding: 0 4rem; +} + .docs-content > .container { margin-left: 0; max-width: 800px; @@ -281,10 +281,16 @@ } .docs-content .off-canvas { - height: 20rem; position: relative; } +.docs-content .off-canvas .off-canvas-toggle { + left: .4rem; + position: absolute; + top: .4rem; + z-index: 1; +} + .docs-brand { color: #5755d9; left: 1.5rem; diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css index 2e19b40..aa6666a 100644 --- a/docs/dist/spectre-exp.css +++ b/docs/dist/spectre-exp.css @@ -552,7 +552,6 @@ -ms-flex-flow: nowrap; flex-flow: nowrap; height: 100%; - min-height: 100vh; position: relative; width: 100%; } @@ -574,38 +573,39 @@ -ms-flex: 1 1 auto; flex: 1 1 auto; height: 100%; - padding: .8rem .8rem .8rem 4rem; + padding: .4rem .4rem .4rem 4rem; } -.off-canvas .off-canvas-sidebar:target { - transform: translateX(0); -} - -.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay { +.off-canvas .off-canvas-overlay { background: rgba(69, 77, 93, .1); border-color: transparent; border-radius: 0; bottom: 0; - display: block; + display: none; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; +} + +.off-canvas .off-canvas-sidebar:target { + transform: translateX(0); +} + +.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay { + display: block; z-index: 200; } .off-canvas .off-canvas-toggle { display: block; - left: .8rem; - padding-left: 0; - padding-right: 0; + left: .4rem; position: absolute; - top: .8rem; + top: .4rem; transition: none; - width: 2rem; - z-index: 200; + z-index: 1; } @media (min-width: 960px) { diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css index 71f4720..c24d653 100644 --- a/docs/dist/spectre-exp.min.css +++ b/docs/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#f1f1fc;border-radius:.1rem;color:#5755d9;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;min-height:100vh;position:relative;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.8rem .8rem .8rem 4rem}.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:block;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:200}.off-canvas .off-canvas-toggle{display:block;left:.8rem;padding-left:0;padding-right:0;position:absolute;top:.8rem;transition:none;width:2rem;z-index:200}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none} \ No newline at end of file +/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#f1f1fc;border-radius:.1rem;color:#5755d9;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.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 .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:200}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none} \ No newline at end of file diff --git a/docs/experimentals.html b/docs/experimentals.html index e24a8f8..72e6d8a 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -754,24 +754,18 @@
- - -
+ + +

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-

Cupcake ipsum

-

Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.

-

De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.

-

Candy ipsum

-

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.

-

Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.

@@ -780,15 +774,17 @@ 
<div class="off-canvas">
-  <input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden>
-  <!-- off-screen toggle button and close mask -->
-  <label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox">
+  <!-- off-screen toggle button -->
+  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
     <i class="icon icon-menu"></i>
-  </label>
+  </a>
 
-  <div class="off-canvas-sidebar">
+  <div id="sidebar-id" class="off-canvas-sidebar">
     <!-- off-screen sidebar -->
   </div>
+
+  <a class="off-canvas-overlay" href="#close"></a>
+
   <div class="off-canvas-content">
     <!-- off-screen content -->
   </div>
diff --git a/docs/index.html b/docs/index.html
index c706bd7..e45c9ef 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,6 +12,7 @@
   
 
 
+  
   

     

       

diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index 3a88102..f441630 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -18,10 +18,6 @@
   .off-canvas-sidebar {
     width: 12rem;
   }
-
-  .off-canvas-content {
-    padding: 0 4rem;
-  }
 }
 
 .docs-navbar {
@@ -85,6 +81,10 @@
   flex: 1 1 auto;
   width: calc(100vw - 12rem);
 
+  &.off-canvas-content {
+    padding: 0 4rem;
+  }
+
   & > .container {
     margin-left: 0;
     max-width: 800px;
@@ -282,8 +282,14 @@
   }
 
   .off-canvas {
-    height: 20rem;
     position: relative;
+
+    .off-canvas-toggle {
+      left: $layout-spacing;
+      position: absolute;
+      top: $layout-spacing;
+      z-index: $zindex-0;
+    }
   }
 }
 
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
index 52c4e55..29d4ea6 100644
--- a/src/_off-canvas.scss
+++ b/src/_off-canvas.scss
@@ -1,11 +1,10 @@
 // Off canvas menus
-$off-canvas-breakpoint: 960px;
+$off-canvas-breakpoint: 960px !default;
 
 .off-canvas {
   display: flex;
   flex-flow: nowrap;
   height: 100%;
-  min-height: 100vh;
   position: relative;
   width: 100%;
 
@@ -25,7 +24,21 @@ $off-canvas-breakpoint: 960px;
   .off-canvas-content {
     flex: 1 1 auto;
     height: 100%;
-    padding: $layout-spacing-lg $layout-spacing-lg $layout-spacing-lg 4rem;
+    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-sidebar {
@@ -34,31 +47,18 @@ $off-canvas-breakpoint: 960px;
     }
 
     &: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%;
       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;
   }
 }
 
-- 
cgit v1.3.1-23-gd82d