[HTML/CSS] pure css pie charts

adding scss file and linking to external resulting css
2 years ago · 15c79eed68
parent 09f509a444
commit 15c79eed68
4 changed files with 74 additions and 38 deletions
--- a/pies/_pie-charts.scss
+++ 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);
+}
--- a/pies/index.html
+++ b/pies/index.html
@ -4,47 +4,12 @@
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="pie-charts.css">
    <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>
  <body>
    <div class="target">
-      <div class="pie">
+      <div class="pie pie1">

      </div>
    </div>
@ -54,6 +19,5 @@
        <i>Create customisable pie charts in ~30 lines of CSS</i>
      </a>
    </p>
-  
  </body>
 </html>
--- a/pies/pie-charts.css
+++ 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 */
--- a/pies/pie-charts.css.map
+++ 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"
+}