From 6bfa00da75a40cd6813d21571a0fa0e3d1cfd064 Mon Sep 17 00:00:00 2001 From: thednp Date: Thu, 2 Jul 2020 10:50:04 +0000 Subject: [PATCH] Changes: * Added a Spicr demo to the index.page. * Some demo updates --- demo/assets/css/kute.css | 820 ++++++++++++++++++++++++++++++-- demo/assets/css/reset.css | 423 +++++++++------- demo/assets/css/spicr-theme.css | 162 +++++++ demo/assets/js/home.js | 74 +-- demo/backgroundPosition.html | 2 +- demo/borderRadius.html | 2 +- demo/boxModel.html | 2 +- demo/clipProperty.html | 2 +- demo/colorProperties.html | 2 +- demo/filterEffects.html | 2 +- demo/htmlAttributes.html | 2 +- demo/index.html | 198 +++++--- demo/opacityProperty.html | 2 +- demo/progress.html | 2 +- demo/scrollProperty.html | 2 +- demo/shadowProperties.html | 2 +- demo/src/kute-base.js | 4 +- demo/src/kute-base.min.js | 4 +- demo/src/kute-extra.js | 4 +- demo/src/kute-extra.min.js | 4 +- demo/src/kute.min.js | 4 +- demo/svgCubicMorph.html | 2 +- demo/svgDraw.html | 2 +- demo/svgMorph.html | 2 +- demo/svgTransform.html | 2 +- demo/textProperties.html | 2 +- demo/textWrite.html | 2 +- demo/transformFunctions.html | 2 +- demo/transformMatrix.html | 2 +- dist/kute.esm.js | 4 +- dist/kute.esm.min.js | 4 +- dist/kute.js | 4 +- dist/kute.min.js | 4 +- package.json | 2 +- 34 files changed, 1372 insertions(+), 381 deletions(-) create mode 100644 demo/assets/css/spicr-theme.css diff --git a/demo/assets/css/kute.css b/demo/assets/css/kute.css index 4ae05ba..8aa85a0 100644 --- a/demo/assets/css/kute.css +++ b/demo/assets/css/kute.css @@ -6,16 +6,15 @@ /* GLOBAL STYLES -------------------------------------------------- */ body { - font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; /* ~25px */ - letter-spacing: 0.02em; color: #ccc; background-color: #08263d; position: relative } -.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;} +.condensed { + font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: normal !important +} /* smooth scroll */ html { @@ -259,10 +258,9 @@ h1.example-item span { .media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center} - /* COLUMN STYLES -------------------------------------------------- */ -.columns { position: relative; width: auto; margin: 0 -20px; display:flex; flex-direction: column; } +.columns { position: relative; width: 100%; margin: 0 -20px; display:flex; flex-wrap: wrap; } .columns > [class*="col"] { padding: 0 20px; position: relative } .columns.welcome {min-height:330px} @@ -290,30 +288,6 @@ h1.example-item span { } } -/* welcome */ -.col3.bg { /*min-height: 120px;*/ width: 32%; margin: 1.3% 1.3% 0 0; float: left; padding: 0; opacity:0 } - -.col3.bg:nth-child(3), -.col3.bg:nth-child(6), -.col3.bg:nth-child(9) { margin: 1.3% 0 0 } - -.welcome > .table > .cell {perspective: 600px; -webkit-perspective: 600px; } -#blocks { - transform: rotateY(-10deg); -webkit-transform: rotateY(-10deg); width: 90%; -} - -/*.replay { display: none; }*/ - -.frontpage { margin-top: 30%; } - -.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1; left: 20%; opacity: 0.5 } -.kute-logo { - margin-top: 12%; -} - -@media (min-width: 768px){ - .columns.welcome .col2:nth-child(2) { position: relative; top: auto; left: auto; z-index: auto; opacity: 1 } -} /* STYLING CONTENT -------------------------------------------------- */ @@ -336,24 +310,18 @@ a:focus { } hr { - border: 1px solid #444; - margin: 10px 0; + border: 1px solid #444; + margin: 10px 0; } - -.d-block {display: block;} -.d-flex {display: flex;} -.d-none {display: none;} - -.align-self-center {align-self: center;} -.align-items-center {align-items: center;} -.justify-content-space {justify-content: space-between;} -.justify-content-even {justify-content: space-evenly;} - - - /* buttons */ -.btns .btn { float: left; line-height: 1; margin: 0 3px 3px 0} +.btns { + display: inline-flex; + flex: 1 1 auto; + justify-content: center; + text-align: center; +} +.btns .btn { display:inline; line-height: 1; margin: 0 3px 3px 0;} .btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; } .bg-gray { color:#fff; background-color: #555; fill: #555 } .btn.active { background-color: #2196F3 } @@ -495,5 +463,761 @@ kbd { font-weight: bold } -.kute-logo, -#rectangle {transform-origin: 50% 50%;} \ No newline at end of file +#rectangle {transform-origin: 50% 50%;} + +.w-20{ + width:20% !important +} +.w-25{ + width:25% !important +} +.w-33{ + width:33.33% !important +} +.w-50{ + width:50% !important +} +.w-66{ + width:66.67% !important +} +.w-75{ + width:75% !important +} +.w-80{ + width:80% !important +} +.w-100{ + width:100% !important +} +.w-auto{ + width:auto !important +} +.h-20vh{ + height:20vh !important +} +.h-25vh{ + height:25vh !important +} +.h-33vh{ + height:33.33vh !important +} +.h-50vh{ + height:50vh !important +} +.h-66vh{ + height:66.67vh !important +} +.h-75vh{ + height:75vh !important +} +.h-80vh{ + height:80vh !important +} +.h-100{ + height:100% !important +} +.h-auto{ + height:auto !important +} +@media(min-width: 768px){ + .w-md-20{ + width:20% !important + } + .w-md-25{ + width:25% !important + } + .w-md-33{ + width:33.33% !important + } + .w-md-50{ + width:50% !important + } + .w-md-66{ + width:66.67% !important + } + .w-md-75{ + width:75% !important + } + .w-md-80{ + width:80% !important + } + .w-md-100{ + width:100% !important + } + .w-md-auto{ + width:auto !important + } + .h-md-20vh{ + height:20vh !important + } + .h-md-25vh{ + height:25vh !important + } + .h-md-33vh{ + height:33.33vh !important + } + .h-md-50vh{ + height:50vh !important + } + .h-md-66vh{ + height:66.67vh !important + } + .h-md-75vh{ + height:75vh !important + } + .h-md-80vh{ + height:80vh !important + } + .h-md-100{ + height:100% !important + } + .h-md-auto{ + height:auto !important + } +} +.d-none{ + display:none +} +.d-inline{ + display:inline +} +.d-flex{ + display:flex +} +.d-block{ + display:block +} +@media(min-width: 768px){ + .d-md-none{ + display:none + } + .d-md-inline{ + display:inline + } + .d-md-flex{ + display:flex + } + .d-md-block{ + display:block + } +} +.flex-row{ + flex-direction:row +} +.flex-row-reverse{ + flex-direction:row-reverse +} +.flex-column{ + flex-direction:column +} +.flex-column-reverse{ + flex-direction:column-reverse +} +.align-items-start{ + align-items:flex-start +} +.align-items-end{ + align-items:flex-end +} +.align-items-center{ + align-items:center +} +.align-items-baseline{ + align-items:baseline +} +.align-items-stretch{ + align-items:stretch +} +.align-self-start{ + align-self:flex-start +} +.align-self-end{ + align-self:flex-end +} +.align-self-center{ + align-self:center +} +.align-self-baseline{ + align-self:baseline +} +.align-self-stretch{ + align-self:stretch +} +.justify-content-start{ + justify-content:flex-start +} +.justify-content-end{ + justify-content:flex-end +} +.justify-content-center{ + justify-content:center +} +.justify-content-between{ + justify-content:space-between +} +.justify-content-around{ + justify-content:space-around +} +.align-content-start{ + align-content:flex-start +} +.align-content-end{ + align-content:flex-end +} +.align-content-center{ + align-content:center +} +.align-content-around{ + align-content:space-around +} +.align-content-stretch{ + align-content:stretch +} +.flex-fill{ + flex:1 1 auto !important +} +.flex-grow-1{ + flex-grow:1 +} +.flex-grow-0{ + flex-grow:0 +} +.flex-shrink-1{ + flex-shrink:1 +} +.flex-shrink-0{ + flex-shrink:0 +} +.flex-nowrap{ + flex-wrap:nowrap +} +.flex-wrap{ + flex-wrap:wrap +} +.flex-wrap-reverse{ + flex-wrap:wrap-reverse +} +@media(min-width: 768px){ + .flex-md-row{ + flex-direction:row + } + .flex-md-row-reverse{ + flex-direction:row-reverse + } + .flex-md-column{ + flex-direction:column + } + .flex-md-column-reverse{ + flex-direction:column-reverse + } + .align-items-md-start{ + align-items:flex-start + } + .align-items-md-end{ + align-items:flex-end + } + .align-items-md-center{ + align-items:center + } + .align-items-md-baseline{ + align-items:baseline + } + .align-items-md-stretch{ + align-items:stretch + } + .align-self-md-start{ + align-self:flex-start + } + .align-self-md-end{ + align-self:flex-end + } + .align-self-md-center{ + align-self:center + } + .align-self-md-baseline{ + align-self:baseline + } + .align-self-md-stretch{ + align-self:stretch + } + .justify-content-md-start{ + justify-content:flex-start + } + .justify-content-md-end{ + justify-content:flex-end + } + .justify-content-md-center{ + justify-content:center + } + .justify-content-md-between{ + justify-content:space-between + } + .justify-content-md-around{ + justify-content:space-around + } + .flex-md-fill{ + flex:1 1 auto !important + } + .flex-md-grow-1{ + flex-grow:1 + } + .flex-md-grow-0{ + flex-grow:0 + } + .flex-md-shrink-1{ + flex-shrink:1 + } + .flex-md-shrink-0{ + flex-shrink:0 + } + .flex-md-nowrap{ + flex-wrap:nowrap + } + .flex-md-wrap{ + flex-wrap:wrap + } + .flex-md-wrap-reverse{ + flex-wrap:wrap-reverse + } +} + +.overflow-visible{ + overflow:visible +} +.overflow-hidden{ + overflow:hidden +} +.perspective{ + perspective:500px; + backface-visibility:hidden +} +.perspective-1000{ + perspective:1000px; + backface-visibility:hidden +} +.perspective-1500{ + perspective:1500px; + backface-visibility:hidden +} +.m-0{ + margin:0 !important +} +.m-1{ + margin:.25rem !important +} +.m-2{ + margin:.5rem !important +} +.m-3{ + margin:1rem !important +} +.m-4{ + margin:1.5rem !important +} +.m-5{ + margin:3rem !important +} +.m-auto{ + margin:auto !important +} +.mx-0{ + margin-right:0 !important; + margin-left:0 !important +} +.mx-1{ + margin-right:.25rem !important; + margin-left:.25rem !important +} +.mx-2{ + margin-right:.5rem !important; + margin-left:.5rem !important +} +.mx-3{ + margin-right:1rem !important; + margin-left:1rem !important +} +.mx-4{ + margin-right:1.5rem !important; + margin-left:1.5rem !important +} +.mx-5{ + margin-right:3rem !important; + margin-left:3rem !important +} +.mx-auto{ + margin-right:auto !important; + margin-left:auto !important +} +.my-0{ + margin-top:0 !important; + margin-bottom:0 !important +} +.my-1{ + margin-top:.25rem !important; + margin-bottom:.25rem !important +} +.my-2{ + margin-top:.5rem !important; + margin-bottom:.5rem !important +} +.my-3{ + margin-top:1rem !important; + margin-bottom:1rem !important +} +.my-4{ + margin-top:1.5rem !important; + margin-bottom:1.5rem !important +} +.my-5{ + margin-top:3rem !important; + margin-bottom:3rem !important +} +.my-auto{ + margin-top:auto !important; + margin-bottom:auto !important +} +.mt-0{ + margin-top:0 !important +} +.mt-1{ + margin-top:.25rem !important +} +.mt-2{ + margin-top:.5rem !important +} +.mt-3{ + margin-top:1rem !important +} +.mt-4{ + margin-top:1.5rem !important +} +.mt-5{ + margin-top:3rem !important +} +.mt-auto{ + margin-top:auto !important +} +.mr-0{ + margin-right:0 !important +} +.mr-1{ + margin-right:.25rem !important +} +.mr-2{ + margin-right:.5rem !important +} +.mr-3{ + margin-right:1rem !important +} +.mr-4{ + margin-right:1.5rem !important +} +.mr-5{ + margin-right:3rem !important +} +.mr-auto{ + margin-right:auto !important +} +.mb-0{ + margin-bottom:0 !important +} +.mb-1{ + margin-bottom:.25rem !important +} +.mb-2{ + margin-bottom:.5rem !important +} +.mb-3{ + margin-bottom:1rem !important +} +.mb-4{ + margin-bottom:1.5rem !important +} +.mb-5{ + margin-bottom:3rem !important +} +.mb-auto{ + margin-bottom:auto !important +} +.ml-0{ + margin-left:0 !important +} +.ml-1{ + margin-left:.25rem !important +} +.ml-2{ + margin-left:.5rem !important +} +.ml-3{ + margin-left:1rem !important +} +.ml-4{ + margin-left:1.5rem !important +} +.ml-5{ + margin-left:3rem !important +} +.ml-auto{ + margin-left:auto !important +} +.p-0{ + padding:0 !important +} +.p-1{ + padding:.25rem !important +} +.p-2{ + padding:.5rem !important +} +.p-3{ + padding:1rem !important +} +.p-4{ + padding:1.5rem !important +} +.p-5{ + padding:3rem !important +} +.px-0{ + padding-right:0 !important; + padding-left:0 !important +} +.px-1{ + padding-right:.25rem !important; + padding-left:.25rem !important +} +.px-2{ + padding-right:.5rem !important; + padding-left:.5rem !important +} +.px-3{ + padding-right:1rem !important; + padding-left:1rem !important +} +.px-4{ + padding-right:1.5rem !important; + padding-left:1.5rem !important +} +.px-5{ + padding-right:3rem !important; + padding-left:3rem !important +} +.py-0{ + padding-top:0 !important; + padding-bottom:0 !important +} +.py-1{ + padding-top:.25rem !important; + padding-bottom:.25rem !important +} +.py-2{ + padding-top:.5rem !important; + padding-bottom:.5rem !important +} +.py-3{ + padding-top:1rem !important; + padding-bottom:1rem !important +} +.py-4{ + padding-top:1.5rem !important; + padding-bottom:1.5rem !important +} +.py-5{ + padding-top:3rem !important; + padding-bottom:3rem !important +} +.pt-0{ + padding-top:0 !important +} +.pt-1{ + padding-top:.25rem !important +} +.pt-2{ + padding-top:.5rem !important +} +.pt-3{ + padding-top:1rem !important +} +.pt-4{ + padding-top:1.5rem !important +} +.pt-5{ + padding-top:3rem !important +} +.pr-0{ + padding-right:0 !important +} +.pr-1{ + padding-right:.25rem !important +} +.pr-2{ + padding-right:.5rem !important +} +.pr-3{ + padding-right:1rem !important +} +.pr-4{ + padding-right:1.5rem !important +} +.pr-5{ + padding-right:3rem !important +} +.pb-0{ + padding-bottom:0 !important +} +.pb-1{ + padding-bottom:.25rem !important +} +.pb-2{ + padding-bottom:.5rem !important +} +.pb-3{ + padding-bottom:1rem !important +} +.pb-4{ + padding-bottom:1.5rem !important +} +.pb-5{ + padding-bottom:3rem !important +} +.pl-0{ + padding-left:0 !important +} +.pl-1{ + padding-left:.25rem !important +} +.pl-2{ + padding-left:.5rem !important +} +.pl-3{ + padding-left:1rem !important +} +.pl-4{ + padding-left:1.5rem !important +} +.pl-5{ + padding-left:3rem !important +} +.vertical-align-top{ + vertical-align:top +} +.vertical-align-middle{ + vertical-align:middle +} +.vertical-align-bottom{ + vertical-align:bottom +} +.vertical-align-baseline{ + vertical-align:baseline +} +.vertical-align-text-top{ + vertical-align:text-top +} +.vertical-align-text-bottom{ + vertical-align:text-bottom +} +@media(min-width: 768px){ + .vertical-align-md-top{ + vertical-align:top + } + .vertical-align-md-middle{ + vertical-align:middle + } + .vertical-align-md-bottom{ + vertical-align:bottom + } + .vertical-align-md-baseline{ + vertical-align:baseline + } + .vertical-align-md-text-top{ + vertical-align:text-top + } + .vertical-align-md-text-bottom{ + vertical-align:text-bottom + } +} +.b-position-center-top{ + background-position:center top !important +} +.b-position-center{ + background-position:center center !important +} +.b-position-center-bottom{ + background-position:center bottom !important +} +.b-position-left-top{ + background-position:left top !important +} +.b-position-left-center{ + background-position:left center !important +} +.b-position-left-bottom{ + background-position:left bottom !important +} +.b-position-right-top{ + background-position:right top !important +} +.b-position-right-center{ + background-position:right center !important +} +.b-position-right-bottom{ + background-position:right bottom !important +} +@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){ + .h-20vh{ + height:216px !important + } + .h-25vh{ + height:270px !important + } + .h-33vh{ + height:359.964px !important + } + .h-50vh{ + height:540px !important + } + .h-66vh{ + height:720.036px !important + } + .h-75vh{ + height:810px !important + } + .h-80vh{ + height:864px !important + } + .h-100{ + height:100% !important + } + .h-auto{ + height:auto !important + } +} +@media screen and (-ms-high-contrast: active)and (min-width: 768px),(-ms-high-contrast: none)and (min-width: 768px){ + .h-md-20vh{ + height:216px !important + } + .h-md-25vh{ + height:270px !important + } + .h-md-33vh{ + height:359.964px !important + } + .h-md-50vh{ + height:540px !important + } + .h-md-66vh{ + height:720.036px !important + } + .h-md-75vh{ + height:810px !important + } + .h-md-80vh{ + height:864px !important + } + .h-md-100{ + height:100% !important + } + .h-md-auto{ + height:auto !important + } +} diff --git a/demo/assets/css/reset.css b/demo/assets/css/reset.css index 827ab33..789f37e 100644 --- a/demo/assets/css/reset.css +++ b/demo/assets/css/reset.css @@ -1,210 +1,305 @@ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; +*,*::before,*::after{ + box-sizing:border-box } -body { - margin: 0; +body{ + margin:0; + font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + font-size:1rem; + font-weight:400; + line-height:1.5; + color:#212529; + background-color:#fff; + -webkit-text-size-adjust:100%; + -webkit-tap-highlight-color:rgba(0,0,0,0) } -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; +[tabindex="-1"]:focus:not(:focus-visible){ + outline:0 !important } -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; +hr{ + margin:1rem 0; + color:inherit; + background-color:currentColor; + border:0; + opacity:.25 } -audio:not([controls]) { - display: none; - height: 0; +hr:not([size]){ + height:1px } -[hidden], -template { - display: none; +h1,h2,h3,h4,h5,h6{ + margin-top:0; + font-weight:500; + line-height:1.2 } -a { - background: transparent; +h1{ + font-size:calc(1.375rem + 1.5vw) } -a:active, -a:hover { - outline: 0; +@media(min-width: 1200px){ + h1{ + font-size:2.5rem + } } -abbr[title] { - border-bottom: 1px dotted; +h2{ + font-size:calc(1.325rem + 0.9vw) } -b, -strong { - font-weight: bold; +@media(min-width: 1200px){ + h2{ + font-size:2rem + } } -dfn { - font-style: italic; +h3{ + font-size:calc(1.3rem + 0.6vw) } -h1 { - font-size: 2em; - margin: 0.67em 0; +@media(min-width: 1200px){ + h3{ + font-size:1.75rem + } } -mark { - background: #ff0; - color: #000; +h4{ + font-size:calc(1.275rem + 0.3vw) } -small { - font-size: 80%; +@media(min-width: 1200px){ + h4{ + font-size:1.5rem + } } -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +h5{ + font-size:1.25rem } -sup { - top: -0.5em; +h6{ + font-size:1rem } -sub { - bottom: -0.25em; +p{ + margin-top:0; + margin-bottom:1rem } -img { - border: 0; +abbr[title],abbr[data-original-title]{ + text-decoration:underline; + -webkit-text-decoration:underline dotted; + text-decoration:underline dotted; + cursor:help; + -webkit-text-decoration-skip-ink:none; + text-decoration-skip-ink:none } -svg:not(:root) { - /*overflow: hidden;*/ - overflow: visible; +address{ + margin-bottom:1rem; + font-style:normal; + line-height:inherit } -figure { - margin: 1em 40px; +ol,ul{ + padding-left:2rem } -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +ol,ul,dl{ + margin-top:0; + margin-bottom:1rem } -pre { - overflow: auto; +ol ol,ul ul,ol ul,ul ol{ + margin-bottom:0 } -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +dt{ + font-weight:700 } -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - margin: 0; +dd{ + margin-bottom:.5rem; + margin-left:0 } -button { - overflow: visible; +blockquote{ + margin:0 0 1rem } -button, -select { - text-transform: none; +b,strong{ + font-weight:bolder } -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; +small{ + font-size:.875em } -button[disabled], -html input[disabled] { - cursor: default; +mark{ + padding:.2em; + background-color:#fcf8e3 } -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +sub,sup{ + position:relative; + font-size:.75em; + line-height:0; + vertical-align:baseline } -input { - line-height: normal; +sub{ + bottom:-0.25em } -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; +sup{ + top:-0.5em } -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +a{ + color:#0d6efd; + text-decoration:underline } -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; +a:hover{ + color:#024dbc } -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +a:not([href]):not([class]),a:not([href]):not([class]):hover{ + color:inherit; + text-decoration:none } -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +pre,code,kbd,samp{ + font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; + font-size:1em } -legend { - border: 0; - padding: 0; +pre{ + display:block; + margin-top:0; + margin-bottom:1rem; + overflow:auto; + font-size:.875em; + -ms-overflow-style:scrollbar } -textarea { - overflow: auto; +pre code{ + font-size:inherit; + color:inherit; + word-break:normal } -optgroup { - font-weight: bold; +code{ + font-size:.875em; + color:#d63384; + word-wrap:break-word } -table { - border-collapse: collapse; - border-spacing: 0; +a>code{ + color:inherit } -td, -th { - padding: 0; +kbd{ + padding:.2rem .4rem; + font-size:.875em; + color:#fff; + background-color:#212529; + border-radius:.2rem } -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +kbd kbd{ + padding:0; + font-size:1em; + font-weight:700 } -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +figure{ + margin:0 0 1rem } -html { - font-size: 10px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +img,svg{ + vertical-align:middle } -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; +table{ + caption-side:bottom; + border-collapse:collapse } -figure { - margin: 0; +caption{ + padding-top:.5rem; + padding-bottom:.5rem; + color:#6c757d; + text-align:left } -img { - /*vertical-align: middle;*/ +th{ + text-align:inherit; + text-align:-webkit-match-parent +} +thead,tbody,tfoot,tr,td,th{ + border-color:inherit; + border-style:solid; + border-width:0 +} +label{ + display:inline-block +} +button{ + border-radius:0 +} +button:focus{ + outline:1px dotted; + outline:5px auto -webkit-focus-ring-color +} +input,button,select,optgroup,textarea{ + margin:0; + font-family:inherit; + font-size:inherit; + line-height:inherit +} +button,input{ + overflow:visible +} +button,select{ + text-transform:none +} +[role=button]{ + cursor:pointer +} +select{ + word-wrap:normal +} +[list]::-webkit-calendar-picker-indicator{ + display:none +} +button,[type=button],[type=reset],[type=submit]{ + -webkit-appearance:button +} +button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){ + cursor:pointer +} +::-moz-focus-inner{ + padding:0; + border-style:none +} +textarea{ + resize:vertical +} +fieldset{ + min-width:0; + padding:0; + margin:0; + border:0 +} +legend{ + float:left; + width:100%; + padding:0; + margin-bottom:.5rem; + font-size:calc(1.275rem + 0.3vw); + line-height:inherit; + white-space:normal +} +@media(min-width: 1200px){ + legend{ + font-size:1.5rem + } +} +legend+*{ + clear:left +} +::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{ + padding:0 +} +::-webkit-inner-spin-button{ + height:auto +} +[type=search]{ + outline-offset:-2px; + -webkit-appearance:textfield +} +::-webkit-search-decoration{ + -webkit-appearance:none +} +::-webkit-color-swatch-wrapper{ + padding:0 +} +::-webkit-file-upload-button{ + font:inherit; + -webkit-appearance:button +} +output{ + display:inline-block +} +iframe{ + border:0 +} +summary{ + display:list-item; + cursor:pointer +} +progress{ + vertical-align:baseline +} +[hidden]{ + display:none !important } \ No newline at end of file diff --git a/demo/assets/css/spicr-theme.css b/demo/assets/css/spicr-theme.css new file mode 100644 index 0000000..2c7f1f9 --- /dev/null +++ b/demo/assets/css/spicr-theme.css @@ -0,0 +1,162 @@ +/* Spicr theme | thednp © 2020 | MIT-License */ + +.text-left{ + text-align:left +} +.text-center{ + text-align:center +} +.text-right{ + text-align:right +} +@media(min-width: 768px){ + .text-md-left{ + text-align:left + } + .text-md-center{ + text-align:center + } + .text-md-right{ + text-align:right + } +} +.center-block{ + display:block; + margin-left:auto; + margin-right:auto +} +.float-right{ + float:right !important +} +.float-left{ + float:left !important +} +.float-none{ + float:none !important +} +.font-weight-normal{ + font-weight:normal +} +.font-weight-bold{ + font-weight:bold +} + +#SpicrDemo{ +height:600px +} +.spicr .lead{ + margin:0; + font-weight:bold; + text-transform:uppercase; + color:#fff +} +.overlay{ + background:rgba(0,0,0,.45); + position:absolute; + top:0; + right:0; + width:100%; + height:100% +} +.spicr-carousel-navigation>*{ + vertical-align:text-bottom +} +@media(min-width: 479px){ + .spicr-control.long-shadows{ + transition:opacity .3s ease-in + } + .spicr-control.long-shadows .arrow-prev{ + margin-left:-280px; + padding:0px 5px 0px 250px; + transform:translate(-100%) + } + .spicr-control.long-shadows .arrow-next{ + margin-right:-280px; + padding:0px 250px 0px 5px; + transform:translate(100%) + } + .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{ + transition:all 1s ease-in + } + .spicr:hover .spicr-control.long-shadows .arrow-prev,.spicr:hover .spicr-control.long-shadows .arrow-next{ + transition-duration:.3s; + transition-timing-function:ease-out + } + .spicr-control.long-shadows:focus .arrow-prev,.spicr-control.long-shadows:focus .arrow-next{ + transform:translate(0%) + } + .spicr:hover .spicr-control.long-shadows .arrow-prev{ + transform:translate(0%) + } + .spicr:hover .spicr-control.long-shadows .arrow-next{ + transform:translate(0%) + } + .spicr-control.long-shadows .spicr-icon{ + width:40px; + height:40px + } + .spicr-control.long-shadows .arrow-next,.spicr-control.long-shadows .arrow-prev{ + border-radius:40px; + margin-top:-20px + } + .spicr-control.long-shadows:focus .arrow-prev{ + transform:translate(0%) + } + .spicr-control.long-shadows:focus .arrow-next{ + transform:translate(0%) + } + .spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{ + display:block; + width:auto; + height:auto; + background-color:#000; + background-color:rgba(0,0,0,.3) + } +} +.spicr-carousel h4{ + margin-top:0 +} +.spicr-slider{ + font-size:calc(0.5rem + 1.5vw); + line-height:calc(0.6rem + 1.5vw) +} +.spicr-slider h1{ + font-size:calc(1.375rem + 1.5vw); + letter-spacing:-1px; + margin:0 +} +.spicr-slider h2{ + font-size:calc(1.375rem + 0.9vw); + letter-spacing:0; + margin:0 +} +.features-carousel .spicr-pages{ + top:.5rem +} +.features-carousel .spicr-pages li{ + line-height:1.5rem; + padding:.5rem 1rem +} +@media(min-width: 768px){ + .featurette-heading span{ + font-size:24px; + line-height:1; + letter-spacing:-1px + } + .spicr-slider{ + font-size:1rem; + line-height:1.8rem + } + .spicr-slider h1{ + font-size:42px; + line-height:1; + letter-spacing:-2px; + margin:0 0 1.5rem + } + .spicr-slider h2{ + font-size:36px; + line-height:1; + letter-spacing:-1px; + margin:0 0 1.5rem + } +} \ No newline at end of file diff --git a/demo/assets/js/home.js b/demo/assets/js/home.js index ac2b551..f13b12a 100644 --- a/demo/assets/js/home.js +++ b/demo/assets/js/home.js @@ -1,68 +1,14 @@ -var frontpage = document.getElementsByClassName('frontpage'), - rectangle = document.getElementById('rectangle'), - star = document.getElementById('star'), - hexagon = document.getElementById('hexagon'), - cat = document.getElementById('cat'), - circle = document.getElementById('circle'), - head = document.getElementById('head'), - winkyFace = document.getElementById('winky-face'), - dropInitial = document.getElementById('drop-initial'), - drop = document.getElementById('drop'), - mouth = document.getElementById('mouth'), - eyeLeft = document.getElementById('eye-left'), - eyeRight = document.getElementById('eye-right'), - heading = document.querySelector('h2.nomargin'), - plead = document.querySelector('p.lead') +var SpicrMainDemo = document.getElementById('SpicrDemo'); -var t0 = KUTE.to(rectangle,{translateX:0, opacity:1 }, { easing:'easingCubicOut'}), - t1 = KUTE.fromTo(rectangle,{path:rectangle, attr: {fill: rectangle.getAttribute('fill') }}, {path:star, attr: {fill: star.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}), - t2 = KUTE.fromTo(rectangle,{path:star, rotateZ: 0, attr: {fill: rectangle.getAttribute('fill') }}, {path:hexagon, rotateZ: 360, attr: {fill: hexagon.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}), - t3 = KUTE.fromTo(rectangle,{path:hexagon, attr: {fill: rectangle.getAttribute('fill') }}, {path:cat, attr: {fill: cat.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}), - t4 = KUTE.fromTo(rectangle,{path:cat, attr: {fill: rectangle.getAttribute('fill') }}, {path:circle, attr: {fill: circle.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}), - t5 = KUTE.fromTo(rectangle,{path:circle, attr: {fill: rectangle.getAttribute('fill') }}, {path:head, attr: {fill: head.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}), - t6 = KUTE.fromTo(dropInitial,{path: dropInitial,opacity:1},{path: drop,opacity:1}, {morphPrecision: 5, easing:'easingCubicOut', onComplete: mergeLogo}), - t7 = KUTE.to(mouth,{opacity:1}), - t8 = KUTE.to(eyeLeft,{opacity:1}), - t9 = KUTE.to(eyeRight,{opacity:1}), - t10 = KUTE.fromTo(winkyFace,{opacity:0,translateY:50},{opacity:1,translateY:0},{easing:'easingCubicOut'}), - t11 = KUTE.to(eyeLeft,{path:'#eye-left-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}), - t12 = KUTE.to(eyeRight,{path:'#eye-right-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}), - t13 = KUTE.to(mouth,{path:'#mouth-happy'}, {morphPrecision: 5, easing:'easingCubicOut', duration:3500}), - loop1 = KUTE.to(rectangle,{ attr: {fill: '#52aef7' }}, {duration: 1500}), - loop2 = KUTE.to(rectangle,{ attr: {fill: '#f98f6d' }}, {duration: 1500}), - loop3 = KUTE.to(rectangle,{ attr: {fill: '#f95054' }}, {duration: 1500}), - loop4 = KUTE.to(rectangle,{ attr: {fill: '#ffd626' }}, {duration: 1500}), - loop5 = KUTE.to(rectangle,{ attr: {fill: '#d661ea' }}, {duration: 1500}), - showText = KUTE.to(heading,{opacity: 1},{duration: 3000}), - showText1 = KUTE.fromTo(heading,{ text: ''},{ text:heading.getAttribute('data-text')},{duration: 1500}), - showText2 = KUTE.fromTo(plead,{ text:''}, { text:plead.getAttribute('data-text')},{duration: 3500, onComplete: textComplete}), - showBTNS = KUTE.allFromTo('.btns .btn',{opacity: 0, translate3d: [150,50,0]}, {opacity: 1, translate3d: [0,0,0]},{duration: 500, offset: 250, delay: 500, easing: 'easingBackOut'}) - -function mergeLogo(){ - rectangle.setAttribute('d', rectangle.getAttribute('d')+ drop.getAttribute('d') ) - dropInitial.style.opacity = 0 -} -function textComplete(){ - heading.removeAttribute('data-text') - plead.removeAttribute('data-text') - showBTNS.start() +function initMainSpicr(){ + new Spicr(SpicrMainDemo); } -t0.chain(t1) -t1.chain(t2) -t2.chain(t3) -t3.chain(t4) -t4.chain([t5,t6]) -t6.chain([t7,t8,t9]) -t9.chain([t10,t11,t12,t13]) +function loadCarouselMedia(){ + new dll(SpicrMainDemo,initMainSpicr) +} -t8.chain([loop1,showText,showText1]) -showText1.chain(showText2) - -loop1.chain(loop2) -loop2.chain(loop3) -loop3.chain(loop4) -loop4.chain(loop5) -loop5.chain(loop1) - -t0.start() \ No newline at end of file +document.addEventListener('DOMContentLoaded', function loadWrapper(){ + loadCarouselMedia(); + document.removeEventListener('DOMContentLoaded', loadWrapper, false) +}, false); \ No newline at end of file diff --git a/demo/backgroundPosition.html b/demo/backgroundPosition.html index 379d0fb..18643ce 100644 --- a/demo/backgroundPosition.html +++ b/demo/backgroundPosition.html @@ -33,7 +33,7 @@