Juan
/
lab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[HTML/CSS] pure css pie charts

Browse Source 
adding scss file and linking to external resulting css
master
Juan Massuelles 2 years ago
parent 09f509a444
commit 15c79eed68
4 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File

33
pies/_pie-charts.scss
Unescape View File

@ -0,0 +1,33 @@
:root{
--pie-size:300;
--pie-bg:#3434AF;
--red:#ed3457;
--green:#248991;
--orange:#ed8724;
--line-color:#cecece;
}
.pie,.target {
border-radius: 100%;
position: relative;
}
.pie {
height: calc( var(--pie-size,200) * 1px );
width: calc( var(--pie-size,200) * 1px );
background-color:var(--pie-bg,black);
top:5px;
left:5px;
}
.target {
height: calc( (var(--pie-size,200) + 10) * 1px );
width: calc( (var(--pie-size,200) + 10) * 1px );
background-color:var(--line-color,grey);
}
.references {
position:fixed;
bottom:0;
left:0;
right:0;
background-color:var(--line-color);
}

40
pies/index.html
Unescape View File

@ -4,47 +4,12 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="pie-charts.css">
<title>Input type="list"</title> <title>Input type="list"</title>
<style type="text/css">
:root{
--pie-size:300;
--pie-bg:#3434AF;
--red:#ed3457;
--green:#248991;
--orange:#ed8724;
--line-color:#cecece;
}
.pie,.target {
border-radius: 100%;
position: relative;
}
.pie {
height: calc( var(--pie-size,200) * 1px );
width: calc( var(--pie-size,200) * 1px );
background-color:var(--pie-bg,black);
top:5px;
left:5px;
}
.target {
height: calc( (var(--pie-size,200) + 10) * 1px );
width: calc( (var(--pie-size,200) + 10) * 1px );
background-color:var(--line-color,grey);
}
.references {
position:fixed;
bottom:0;
left:0;
right:0;
background-color:var(--line-color);
}
</style>
</head> </head>
<body> <body>
<div class="target"> <div class="target">
<div class="pie"> <div class="pie pie1">
</div> </div>
</div> </div>
@ -54,6 +19,5 @@
<i>Create customisable pie charts in ~30 lines of CSS</i> <i>Create customisable pie charts in ~30 lines of CSS</i>
</a> </a>
</p> </p>
</body> </body>
</html> </html>

32
pies/pie-charts.css
Unescape View File

@ -0,0 +1,32 @@
:root {
--pie-size:300;
--pie-bg:#3434AF;
--red:#ed3457;
--green:#248991;
--orange:#ed8724;
--line-color:#cecece; }
.pie, .target {
border-radius: 100%;
position: relative; }
.pie {
height: calc( var(--pie-size,200) * 1px );
width: calc( var(--pie-size,200) * 1px );
background-color: var(--pie-bg, black);
top: 5px;
left: 5px; }
.target {
height: calc( (var(--pie-size,200) + 10) * 1px );
width: calc( (var(--pie-size,200) + 10) * 1px );
background-color: var(--line-color, grey); }
.references {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--line-color); }
/*# sourceMappingURL=pie-charts.css.map */

7
pies/pie-charts.css.map
Unescape View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAAA,KAAK;EACH,UAAU,CAAC,GAAG;EACd,QAAQ,CAAC,OAAO;EAChB,KAAK,CAAC,OAAO;EACb,OAAO,CAAC,OAAO;EACf,QAAQ,CAAC,OAAO;EAChB,YAAY,CAAC,OAAO;;AAGtB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAEpB,IAAK;EACH,MAAM,EAAE,iCAAiC;EACzC,KAAK,EAAG,iCAAiC;EACzC,gBAAgB,EAAC,oBAAmB;EACpC,GAAG,EAAC,GAAG;EACP,IAAI,EAAC,GAAG;;AAEV,OAAQ;EACN,MAAM,EAAE,wCAAwC;EAChD,KAAK,EAAG,wCAAwC;EAChD,gBAAgB,EAAC,uBAAsB;;AAGzC,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,CAAC;EACR,IAAI,EAAC,CAAC;EACN,KAAK,EAAC,CAAC;EACP,gBAAgB,EAAC,iBAAiB",
"sources": ["_pie-charts.scss"],
"names": [],
"file": "pie-charts.css"
}
Write Preview
Loading…
Cancel
Save