FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added sm and xs variants of the soft skill round indicator

Browse source
This commit is contained in:
Fabio Fenoglio 2021-12-11 11:22:36 +01:00
parent f1a748aa6c
commit 3592db2880
1 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/css/sections/about.css
View file

@ -23,6 +23,16 @@
box-shadow: none; box-shadow: none;
position: relative; position: relative;
} }
.circular-progress-sm {
width: 75px;
height: 75px;
line-height: 75px;
}
.circular-progress-xs {
width: 25px;
height: 25px;
line-height: 25px;
}
.circular-progress:after { .circular-progress:after {
content: ""; content: "";
@ -34,6 +44,12 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.circular-progress-sm:after {
border: 6px solid #f9fafc;
}
.circular-progress-xs:after {
border: 4px solid #f9fafc;
}
.circular-progress > span { .circular-progress > span {
width: 50%; width: 50%;
@ -57,6 +73,12 @@
position: absolute; position: absolute;
top: 0; top: 0;
} }
.circular-progress-sm .circular-progress-bar {
border-width: 6px;
}
.circular-progress-xs .circular-progress-bar {
border-width: 4px;
}
.circular-progress .circular-progress-left .circular-progress-bar { .circular-progress .circular-progress-left .circular-progress-bar {
left: 100%; left: 100%;
@ -65,6 +87,14 @@
border-left: 0; border-left: 0;
transform-origin: center left; transform-origin: center left;
} }
.circular-progress-sm .circular-progress-left .circular-progress-bar {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.circular-progress-xs .circular-progress-left .circular-progress-bar {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.circular-progress .circular-progress-right { .circular-progress .circular-progress-right {
right: 0; right: 0;
@ -79,6 +109,14 @@
-webkit-animation: circular-loading-1 1.8s linear forwards; -webkit-animation: circular-loading-1 1.8s linear forwards;
animation: circular-loading-1 1.8s linear forwards; animation: circular-loading-1 1.8s linear forwards;
} }
.circular-progress-sm .circular-progress-right .circular-progress-bar {
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
}
.circular-progress-xs .circular-progress-right .circular-progress-bar {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.circular-progress .circular-progress-value { .circular-progress .circular-progress-value {
width: 90%; width: 90%;