From c2d4a7e9e50144efc0e080e74ddf0ed4a11ee8a9 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Fri, 3 Mar 2017 22:00:38 +0800 Subject: Fix typo and update docs navbar --- docs/css/docs.css | 8 ++++---- docs/css/docs.less | 2 +- docs/css/docs.min.css | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/css') diff --git a/docs/css/docs.css b/docs/css/docs.css index 60a157d..bf1bed9 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -27,12 +27,12 @@ line-height: .8em; vertical-align: -20%; } -.grid-header .btn { +.grid-header .btn-link { color: #666; } -.grid-header .btn:hover, -.grid-header .btn:focus, -.grid-header .btn:active { +.grid-header .btn-link:hover, +.grid-header .btn-link:focus, +.grid-header .btn-link:active { color: #444; opacity: .75; } diff --git a/docs/css/docs.less b/docs/css/docs.less index 46e586d..d52f2d7 100644 --- a/docs/css/docs.less +++ b/docs/css/docs.less @@ -34,7 +34,7 @@ } } - .btn { + .btn-link { color: #666; &:hover, &:focus, diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index d7a52d5..598639d 100644 --- a/docs/css/docs.min.css +++ b/docs/css/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.5"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.grid-header .navbar-brand{color:#444}.grid-header .navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:2rem 1rem}.docs-content header{color:#444;padding-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:block;height:1rem;margin:auto;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:6rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding-bottom:6rem;padding-top:6rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:480px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.5"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.grid-header .navbar-brand{color:#444}.grid-header .navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn-link{color:#666}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:2rem 1rem}.docs-content header{color:#444;padding-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:block;height:1rem;margin:auto;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:6rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding-bottom:6rem;padding-top:6rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:480px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file -- cgit v1.3.1-23-gd82d From 2a8cbf690cfc117dd76a07fb74742a8691e28a89 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 4 Mar 2017 15:28:42 +0800 Subject: Add Carousels exp component --- dist/spectre-exp.css | 173 +++++++++++++++++++++++++++++++++++++++++++ dist/spectre-exp.min.css | 2 +- docs/components.html | 1 + docs/css/spectre-exp.css | 173 +++++++++++++++++++++++++++++++++++++++++++ docs/css/spectre-exp.min.css | 2 +- docs/experimentals.html | 44 +++++++++++ spectre-exp.less | 1 + src/carousels.less | 123 ++++++++++++++++++++++++++++++ 8 files changed, 517 insertions(+), 2 deletions(-) create mode 100644 src/carousels.less (limited to 'docs/css') diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css index a45451a..0eb7560 100644 --- a/dist/spectre-exp.css +++ b/dist/spectre-exp.css @@ -1,4 +1,177 @@ /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ +.carousel { + background: #f8f8f8; + display: block; + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; +} +.carousel .carousel-container { + height: 100%; + left: 0; + position: relative; +} +.carousel .carousel-container .carousel-item { + -webkit-animation: carousel-slideout 1s 1; + animation: carousel-slideout 1s 1; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; +} +.carousel .carousel-locator { + display: none; +} +.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) { + -webkit-animation: carousel-slidein .75s 1; + animation: carousel-slidein .75s 1; + opacity: 1; + z-index: 99; +} +.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: #ccc; +} +.carousel .carousel-nav { + bottom: 1rem; + display: -webkit-flex; + display: flex; + display: -ms-flexbox; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + left: 50%; + position: absolute; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 20rem; + z-index: 999; +} +.carousel .carousel-nav .nav-item { + color: rgba(204, 204, 204, .5); + display: block; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + height: 4rem; + margin: .4rem; + max-width: 5rem; + position: relative; +} +.carousel .carousel-nav .nav-item::before { + background: currentColor; + content: ""; + display: block; + height: .3rem; + position: absolute; + top: 2rem; + width: 100%; +} +@supports (object-fit: cover) { + .carousel-item img { + height: 100%; + object-fit: cover; + width: 100%; + } +} +@-webkit-keyframes carousel-autoplay { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 25% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 50% { + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + 75% { + -webkit-transform: translateX(-75%); + transform: translateX(-75%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes carousel-autoplay { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 25% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 50% { + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + 75% { + -webkit-transform: translateX(-75%); + transform: translateX(-75%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-50%) scale(.95); + transform: translateX(-50%) scale(.95); + } +} +@keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-50%) scale(.95); + transform: translateX(-50%) scale(.95); + } +} .meter { -webkit-appearance: none; -moz-appearance: none; diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css index 37c5eee..422d830 100644 --- a/dist/spectre-exp.min.css +++ b/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;border-radius:.2rem;display:block;height:1.6rem;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:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.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:.2rem}.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}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2.5rem 5rem rgba(0,0,0,.45);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;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-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:99}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:99}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:99}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:99}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 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:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.carousel{background:#f8f8f8;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s 1;animation:carousel-slideout 1s 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-locator{display:none}.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){-webkit-animation:carousel-slidein .75s 1;animation:carousel-slidein .75s 1;opacity:1;z-index:99}.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:#ccc}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:999}.carousel .carousel-nav .nav-item{color:rgba(204,204,204,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-autoplay{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-25%);transform:translateX(-25%)}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}75%{-webkit-transform:translateX(-75%);transform:translateX(-75%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-autoplay{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-25%);transform:translateX(-25%)}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}75%{-webkit-transform:translateX(-75%);transform:translateX(-75%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}100%{opacity:0;-webkit-transform:translateX(-50%) scale(.95);transform:translateX(-50%) scale(.95)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}100%{opacity:0;-webkit-transform:translateX(-50%) scale(.95);transform:translateX(-50%) scale(.95)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;border-radius:.2rem;display:block;height:1.6rem;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:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.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:.2rem}.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}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2.5rem 5rem rgba(0,0,0,.45);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;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-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:99}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:99}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:99}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:99}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 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:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/components.html b/docs/components.html index 68625ea..b9f29c9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1335,6 +1335,7 @@ <h3 class="page-item-title">Layout</h3> </a> </li> +</ul> diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index a45451a..0eb7560 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -1,4 +1,177 @@ /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ +.carousel { + background: #f8f8f8; + display: block; + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; +} +.carousel .carousel-container { + height: 100%; + left: 0; + position: relative; +} +.carousel .carousel-container .carousel-item { + -webkit-animation: carousel-slideout 1s 1; + animation: carousel-slideout 1s 1; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; +} +.carousel .carousel-locator { + display: none; +} +.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) { + -webkit-animation: carousel-slidein .75s 1; + animation: carousel-slidein .75s 1; + opacity: 1; + z-index: 99; +} +.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: #ccc; +} +.carousel .carousel-nav { + bottom: 1rem; + display: -webkit-flex; + display: flex; + display: -ms-flexbox; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + left: 50%; + position: absolute; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 20rem; + z-index: 999; +} +.carousel .carousel-nav .nav-item { + color: rgba(204, 204, 204, .5); + display: block; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + height: 4rem; + margin: .4rem; + max-width: 5rem; + position: relative; +} +.carousel .carousel-nav .nav-item::before { + background: currentColor; + content: ""; + display: block; + height: .3rem; + position: absolute; + top: 2rem; + width: 100%; +} +@supports (object-fit: cover) { + .carousel-item img { + height: 100%; + object-fit: cover; + width: 100%; + } +} +@-webkit-keyframes carousel-autoplay { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 25% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 50% { + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + 75% { + -webkit-transform: translateX(-75%); + transform: translateX(-75%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes carousel-autoplay { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 25% { + -webkit-transform: translateX(-25%); + transform: translateX(-25%); + } + 50% { + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + 75% { + -webkit-transform: translateX(-75%); + transform: translateX(-75%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-50%) scale(.95); + transform: translateX(-50%) scale(.95); + } +} +@keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-50%) scale(.95); + transform: translateX(-50%) scale(.95); + } +} .meter { -webkit-appearance: none; -moz-appearance: none; diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css index 37c5eee..422d830 100644 --- a/docs/css/spectre-exp.min.css +++ b/docs/css/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;border-radius:.2rem;display:block;height:1.6rem;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:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.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:.2rem}.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}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2.5rem 5rem rgba(0,0,0,.45);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;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-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:99}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:99}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:99}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:99}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 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:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.carousel{background:#f8f8f8;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s 1;animation:carousel-slideout 1s 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-locator{display:none}.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){-webkit-animation:carousel-slidein .75s 1;animation:carousel-slidein .75s 1;opacity:1;z-index:99}.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:#ccc}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:999}.carousel .carousel-nav .nav-item{color:rgba(204,204,204,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-autoplay{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-25%);transform:translateX(-25%)}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}75%{-webkit-transform:translateX(-75%);transform:translateX(-75%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-autoplay{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-25%);transform:translateX(-25%)}50%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}75%{-webkit-transform:translateX(-75%);transform:translateX(-75%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}100%{opacity:0;-webkit-transform:translateX(-50%) scale(.95);transform:translateX(-50%) scale(.95)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}100%{opacity:0;-webkit-transform:translateX(-50%) scale(.95);transform:translateX(-50%) scale(.95)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;border-radius:.2rem;display:block;height:1.6rem;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:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.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:.2rem}.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}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2.5rem 5rem rgba(0,0,0,.45);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;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-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:99}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:99}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:99}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:99}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 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:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/experimentals.html b/docs/experimentals.html index 638d195..5395b02 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -53,12 +53,18 @@ +