From 15c79eed684d956f53f4b16e7d3ea4c11adfbccb Mon Sep 17 00:00:00 2001 From: Juan Massuelles Date: Fri, 7 Jul 2023 17:06:43 +0200 Subject: [PATCH] [HTML/CSS] pure css pie charts adding scss file and linking to external resulting css --- pies/_pie-charts.scss | 33 +++++++++++++++++++++++++++++++++ pies/index.html | 40 ++-------------------------------------- pies/pie-charts.css | 32 ++++++++++++++++++++++++++++++++ pies/pie-charts.css.map | 7 +++++++ 4 files changed, 74 insertions(+), 38 deletions(-) create mode 100644 pies/_pie-charts.scss create mode 100644 pies/pie-charts.css create mode 100644 pies/pie-charts.css.map diff --git a/pies/_pie-charts.scss b/pies/_pie-charts.scss new file mode 100644 index 0000000..28d8242 --- /dev/null +++ b/pies/_pie-charts.scss @@ -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); +} diff --git a/pies/index.html b/pies/index.html index a392c15..ddfc939 100644 --- a/pies/index.html +++ b/pies/index.html @@ -4,47 +4,12 @@ + Input type="list" -
-
+
@@ -54,6 +19,5 @@ Create customisable pie charts in ~30 lines of CSS

- diff --git a/pies/pie-charts.css b/pies/pie-charts.css new file mode 100644 index 0000000..dea9315 --- /dev/null +++ b/pies/pie-charts.css @@ -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 */ diff --git a/pies/pie-charts.css.map b/pies/pie-charts.css.map new file mode 100644 index 0000000..80779cf --- /dev/null +++ b/pies/pie-charts.css.map @@ -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" +}