[HTML/CSS] exemple de message d'erreur css pur pour input radio

- adding README

invalid-radio-message/README.md

@@ -1,3 +1,14 @@
 # Test d'invalidité pour choix radio 
 
 test permettant de valider l'affichage d'un message d'erreur, css uniquement, si une selection par radio est invalide (sur un required).
+
+
+## css build : 
+
+```
+sass invalid-radio.scss:invalid-radio.css
+```
+
+```
+sass --watch invalid-radio.scss:invalid-radio.css
+```

pies/README.md

@@ -0,0 +1,13 @@
+# CSS pie charts
+
+pour faire des graphs camemberts en CSS pur
+
+## css build / watch : 
+
+```
+sass style.scss:pie-charts.css
+```
+
+```
+sass --watch style.scss:pie-charts.css
+```

pies/_global.scss

@@ -0,0 +1,13 @@
+.references {
+  position:fixed;
+  bottom:5px;
+  right:5px;
+  border-radius:5px;
+  padding:10px;
+  background-color:lightblue;
+  a {
+    &[href],&:link,&:hover,&:focus,&:active {
+      color:darkblue;
+    }
+  }
+}

pies/_pie-charts-multipart.scss

@@ -35,18 +35,3 @@ $segment-border-width:1px;
   width:  ($pie-size + $border-width * 2);
   background-color:$line-color;
 }
-
-.references {
-  position:fixed;
-  bottom:5px;
-  right:5px;
-  border-radius:5px;
-  padding:10px;
-  background-color:lightblue;
-  a {
-    &[href],&:link,&:hover,&:focus,&:active {
-      color:darkblue;
-    }
-  }
-}
-

pies/index.html

@@ -21,6 +21,10 @@
         <strong>HOW TO: Pure CSS pie charts w/ CSS variables</strong>
         <br/><span>Create customisable pie charts in ~30 lines of CSS</span>
       </a>
+      <a href="https://www.freecodecamp.org/news/css-only-pie-chart/">
+        <strong>How to Create a Pie Chart Using Only CSS</strong>
+        <br/><span>only one slice ;)</span>
+      </a>
     </p>
   </body>
 </html>

pies/pie-charts.css

@@ -1,3 +1,13 @@
+.references {
+  position: fixed;
+  bottom: 5px;
+  right: 5px;
+  border-radius: 5px;
+  padding: 10px;
+  background-color: lightblue; }
+  .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
+    color: darkblue; }
+
 :root {
   font-family: sans-serif; }
 
@@ -22,14 +32,4 @@
   width: 310px;
   background-color: #cecece; }
 
-.references {
-  position: fixed;
-  bottom: 5px;
-  right: 5px;
-  border-radius: 5px;
-  padding: 10px;
-  background-color: lightblue; }
-  .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
-    color: darkblue; }
-
 /*# sourceMappingURL=pie-charts.css.map */

pies/pie-charts.css.map

@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "AASA,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO;;AAiCnB,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ",
-"sources": ["_pie-charts.scss"],
+"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ;;ACApB,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
+"sources": ["_global.scss","_pie-charts-multipart.scss"],
 "names": [],
 "file": "pie-charts.css"
 }

pies/style.scss

@@ -0,0 +1,2 @@
+@import "global";
+@import "pie-charts-multipart";