mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 17:59:55 +02:00
Add js-circle-progress libs
This commit is contained in:
DanieL
parent
2428c83de4
commit
e184e09ec1
42 changed files with 25410 additions and 0 deletions
316
node_modules/js-circle-progress/docs/sass/_examples.scss
generated
vendored
Normal file
316
node_modules/js-circle-progress/docs/sass/_examples.scss
generated
vendored
Normal file
|
|
@ -0,0 +1,316 @@
|
|||
.about {
|
||||
padding: 25px;
|
||||
background: hsl(0, 0%, 22%);
|
||||
color: hsl(0, 0%, 92%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
a {
|
||||
color: hsl(210, 100%, 60%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: hsl(240, 90%, 80%);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.example {
|
||||
@extend %clearfix;
|
||||
clear: both;
|
||||
margin: 30px 0;
|
||||
padding: 10px 5px;
|
||||
@media screen and (min-width: 50rem) {
|
||||
padding: 25px;
|
||||
// box-shadow: 1px 1px 7px rgba(0, 0, 0, .3);
|
||||
}
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.example-figure {
|
||||
width: -moz-min-content;
|
||||
width: min-content;
|
||||
margin: auto;
|
||||
@media screen and (min-width: 50rem) {
|
||||
float: left;
|
||||
padding-top: 2.4rem;
|
||||
padding-right: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
[class^="progress"],
|
||||
[class*=" progress"] {
|
||||
> svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 4em;
|
||||
padding: .3em .6em;
|
||||
text-align: left;
|
||||
background: hsl(0, 0%, 85%);
|
||||
border: 0;
|
||||
font-size: .85em;
|
||||
&:focus {
|
||||
background: hsl(0, 0%, 70%);
|
||||
outline: none;
|
||||
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
label {
|
||||
font-weight: bold;
|
||||
color: hsl(0, 0%, 40%);
|
||||
}
|
||||
label:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
label:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.example h3 {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.4rem;
|
||||
margin: 1rem 0 0;
|
||||
color: hsl(14, 80%, 50%);
|
||||
}
|
||||
.slash {
|
||||
color: gray;
|
||||
}
|
||||
.select-variant {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.select-variant[data-variant=jquery] {
|
||||
color: gray;
|
||||
}
|
||||
.variant-jquery {
|
||||
display: none;
|
||||
}
|
||||
body.show-variant-jquery {
|
||||
.select-variant[data-variant=vanilla] {
|
||||
color: gray;
|
||||
}
|
||||
.select-variant[data-variant=jquery] {
|
||||
color: inherit;
|
||||
}
|
||||
.variant-jquery {
|
||||
display: block;
|
||||
}
|
||||
.variant-vanilla {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
background: hsl(0, 0%, 22%);
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.progress-1 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(39, 100%, 50%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(39, 100%, 85%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(39, 100%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-2 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(320, 80%, 60%);
|
||||
stroke-dasharray: 4 1;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 6px;
|
||||
stroke: #eee;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-weight: bold;
|
||||
fill: hsl(180, 80%, 47%);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-3 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(280, 90%, 50%);
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-4 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 50px;
|
||||
stroke: hsl(160, 63%, 55%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 50px;
|
||||
stroke: #999;
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-5 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: white;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 8px;
|
||||
stroke: #888;
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-6 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 50px;
|
||||
stroke: hsl(100, 90%, 70%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 40px;
|
||||
stroke: hsl(100, 15%, 60%);
|
||||
fill: hsl(100, 15%, 60%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-7 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 11px;
|
||||
stroke: aqua;
|
||||
stroke-dasharray: 0 23.3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
&[aria-valuenow="0"] .circle-progress-value {
|
||||
display: none;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke: transparent;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Varela Round", "Gotham rounded", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
fill: fuchsia;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-9 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 12px;
|
||||
stroke: hsl(210, 100%, 45%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke: white;
|
||||
stroke-width: 22px;
|
||||
fill: #666;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Georgia", serif;
|
||||
font-size: 13px;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-10 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 2px;
|
||||
stroke: aquamarine;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke: #ddd;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Georgia", serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-11 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(100, 100%, 60%);
|
||||
stroke-dasharray: 0.6 3;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 6px;
|
||||
stroke: #ddd;
|
||||
stroke-dasharray: 0.6 3;
|
||||
stroke-dashoffset: 1.6;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Dosis", "Varela Round", "Gotham Rounded Light", sans-serif;
|
||||
fill: hsl(100, 81%, 55%);
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-12 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 12px;
|
||||
stroke: darkmagenta;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke: white;
|
||||
stroke-width: 11px;
|
||||
fill: #666;
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Georgia", serif;
|
||||
font-size: 13px;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-13 {
|
||||
.circle-progress-value {
|
||||
stroke-width: 25px;
|
||||
stroke: hsl(210, 100%, 45%);
|
||||
stroke-dasharray: 58 1;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke: hsl(210, 100%, 85%);
|
||||
stroke-width: 25px;
|
||||
fill: hsl(210, 100%, 85%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
font-family: "Montserrat", "Gotham", sans-serif;
|
||||
font-size: 16px;
|
||||
fill: hsl(210, 100%, 45%);
|
||||
}
|
||||
}
|
||||
398
node_modules/js-circle-progress/docs/sass/_index.scss
generated
vendored
Normal file
398
node_modules/js-circle-progress/docs/sass/_index.scss
generated
vendored
Normal file
|
|
@ -0,0 +1,398 @@
|
|||
.check {
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
color: hsl(142, 80%, 40%);
|
||||
animation: check .1s .7s backwards;
|
||||
}
|
||||
@keyframes check {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-heading {
|
||||
animation: bounce-in .4s ease-in-out;
|
||||
}
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: translateY(-2.7em);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px) scaleY(1.4);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-6px) scaleY(1.2);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(2.5px);
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
color: hsl(0, 0%, 30%);
|
||||
|
||||
.example {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
min-height: calc(300px + 25px * 2);
|
||||
}
|
||||
.progress {
|
||||
padding: 20px 50px 0 20px;
|
||||
width: 300px;
|
||||
|
||||
> svg {
|
||||
width: 100%;
|
||||
* {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-progress-value {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(39, 100%, 50%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 6px;
|
||||
stroke: hsl(39, 100%, 85%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(39, 100%, 50%);
|
||||
}
|
||||
.circle-progress-text-value {
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
&[data-style="1"] {
|
||||
.circle-progress-value {
|
||||
transition: .4s .3s;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 12;
|
||||
stroke: hsl(300, 80%, 64%);
|
||||
}
|
||||
.circle-progress-circle {
|
||||
transition: .4s;
|
||||
stroke: hsl(300, 80%, 85%);
|
||||
stroke-width: 3;
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(0, 0%, 30%);
|
||||
font-size: 22px;
|
||||
transition: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-style="2"] {
|
||||
.circle-progress-value {
|
||||
animation: .4s dots both;
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
@keyframes dots {
|
||||
from {
|
||||
stroke-dasharray: 14 2;
|
||||
stroke: hsl(300, 80%, 64%);
|
||||
}
|
||||
to {
|
||||
stroke-dasharray: 0 17.7;
|
||||
stroke: hsl(333, 100%, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.circle-progress-circle {
|
||||
transition: .4s .4s;
|
||||
stroke-width: 0;
|
||||
stroke: hsl(0, 0%, 85%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(0, 0%, 30%);
|
||||
font-size: 22px;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-style="3"] {
|
||||
.circle-progress-value {
|
||||
animation: grow-value .5s both;
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
stroke: hsl(333, 100%, 50%);
|
||||
@keyframes grow-value {
|
||||
0% {
|
||||
stroke-dasharray: 0 17.7;
|
||||
}
|
||||
99.99% {
|
||||
stroke-dasharray: 14 2;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.circle-progress-circle {
|
||||
stroke-width: 0;
|
||||
stroke: hsl(0, 0%, 85%);
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(333, 100%, 50%);
|
||||
font-size: 16px;
|
||||
transition: transform .4s;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-style="4"] {
|
||||
.circle-progress-value {
|
||||
animation: value-4 .5s both;
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
stroke: hsl(333, 100%, 50%);
|
||||
@keyframes value-4 {
|
||||
30% {
|
||||
stroke-width: 12;
|
||||
}
|
||||
80% {
|
||||
stroke-width: 2;
|
||||
}
|
||||
100% {
|
||||
stroke: white;
|
||||
stroke-width: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.circle-progress-circle {
|
||||
animation: grow-circle .5s both;
|
||||
stroke-width: 0;
|
||||
stroke: hsl(0, 0%, 85%);
|
||||
@keyframes grow-circle {
|
||||
0% {
|
||||
stroke-width: 0;
|
||||
}
|
||||
37% {
|
||||
stroke-width: 6;
|
||||
}
|
||||
100% {
|
||||
stroke-width: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(0, 0%, 85%);
|
||||
font-size: 16px;
|
||||
transition: transform .4s;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-style="5"] {
|
||||
.circle-progress-value {
|
||||
animation: .4s grow-xxl-value both;
|
||||
}
|
||||
.circle-progress-circle {
|
||||
animation: .4s grow-xxl-circle both;
|
||||
stroke: hsl(0, 0%, 85%);
|
||||
}
|
||||
@keyframes grow-xxl-value {
|
||||
from {
|
||||
stroke: white;
|
||||
}
|
||||
to {
|
||||
stroke-width: 50;
|
||||
stroke: hsl(210, 100%, 60%);
|
||||
stroke-linecap: butt;
|
||||
}
|
||||
}
|
||||
@keyframes grow-xxl-circle {
|
||||
from {
|
||||
stroke-width: 6;
|
||||
}
|
||||
to {
|
||||
stroke-width: 50;
|
||||
}
|
||||
}
|
||||
.circle-progress-text {
|
||||
fill: hsl(0, 0%, 100%);
|
||||
transition: .4s;
|
||||
transform: translate(23.7px, 7.7px);
|
||||
}
|
||||
.circle-progress-text-max {
|
||||
display: none;
|
||||
}
|
||||
.circle-progress-text-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([data-demo]) {
|
||||
.progress {
|
||||
animation: check .2s .6s backwards;
|
||||
}
|
||||
.quality {
|
||||
visibility: hidden;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
&[data-demo=responsive] {
|
||||
.progress {
|
||||
animation: demo-responsive 1.6s .7s;
|
||||
// @keyframes demo-responsive {
|
||||
// 0% {
|
||||
// width: 300px;
|
||||
// }
|
||||
// 15% {
|
||||
// width: 100px;
|
||||
// }
|
||||
// 30% {
|
||||
// width: 100px;
|
||||
// }
|
||||
// 45% {
|
||||
// width: 450px;
|
||||
// }
|
||||
// 85% {
|
||||
// width: 450px;
|
||||
// }
|
||||
// 100% {
|
||||
// width: 300px;
|
||||
// }
|
||||
// }
|
||||
@keyframes demo-responsive {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
12% {
|
||||
transform: scale(.3);
|
||||
}
|
||||
40% {
|
||||
transform: scale(.3);
|
||||
}
|
||||
55% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
92% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.quality.responsive ~ .quality {
|
||||
visibility: hidden;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
&[data-demo=animated] {
|
||||
.quality.animated ~ .quality {
|
||||
visibility: hidden;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
&[data-demo=stylable] {
|
||||
.quality.stylable ~ .quality {
|
||||
visibility: hidden;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
&[data-demo=finished] {
|
||||
.quality-last,
|
||||
.quality-lastest,
|
||||
.intro-footer {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.intro-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.intro-text-body {
|
||||
flex: auto;
|
||||
}
|
||||
.qualities {
|
||||
list-style: none;
|
||||
}
|
||||
.quality {
|
||||
opacity: 0;
|
||||
font-weight: bold;
|
||||
animation: pop-in .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
|
||||
transform-origin: left;
|
||||
|
||||
&.last {
|
||||
visibility: hidden;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
.quality-inner {
|
||||
animation: skidding .4s cubic-bezier(0.74, 0.92, 0.71, 1) forwards;
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
@keyframes pop-in {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 1;
|
||||
}
|
||||
92% {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes skidding {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
80% {
|
||||
transform: skewX(30deg) scaleX(.9);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
92% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quality-last,
|
||||
.quality-lastest,
|
||||
.intro-footer {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
.intro-footer,
|
||||
.quality-lastest {
|
||||
transition: 3s 1.5s ease-out;
|
||||
}
|
||||
// @for $i from 1 through 5 {
|
||||
// .popin-#{$i} {
|
||||
// animation-delay: $i * 3s;
|
||||
// }
|
||||
// }
|
||||
|
||||
.intro-footer {
|
||||
font-size: .9rem;
|
||||
}
|
||||
45
node_modules/js-circle-progress/docs/sass/style.scss
generated
vendored
Normal file
45
node_modules/js-circle-progress/docs/sass/style.scss
generated
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
background: hsl(0, 0%, 90%);
|
||||
margin: 0;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: hsl(210, 100%, 40%);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: .25s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: hsl(250, 100%, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
%clearfix {
|
||||
&::before,
|
||||
&::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 60rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@import "index";
|
||||
@import "examples";
|
||||
Loading…
Add table
Add a link
Reference in a new issue