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%);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue