Merge pull request #133 from animadio/dev

Release 4.2.8

README.md

@@ -46,8 +46,8 @@ Yarn : `yarn add animadio`
 [![jsDelivr Montly Downloads](https://img.shields.io/jsdelivr/npm/hm/animadio.svg?label=jsDelivr+Montly+Downloads)](https://www.jsdelivr.com/package/npm/animadio)
 [![jsDelivr Yearly Downloads](https://img.shields.io/jsdelivr/npm/hy/animadio.svg?label=jsDelivr+Yearly+Downloads)](https://www.jsdelivr.com/package/npm/animadio)
 
--   Development : [https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.css) + [https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.js](https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.js)  
--   Production : [https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.min.css) + [https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.min.js](https://cdn.jsdelivr.net/npm/animadio@4.2.7/dist/animadio.min.js)  
+-   Development : [https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.css) + [https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.js](https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.js)  
+-   Production : [https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.min.css) + [https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.min.js](https://cdn.jsdelivr.net/npm/animadio@4.2.8/dist/animadio.min.js)  
 
 ---
 

dist/animadio.css

@@ -1,4 +1,4 @@
-/*! animadio v4.2.7 | https://animadio.org | MIT License */
+/*! animadio v4.2.8 | https://animadio.org | MIT License */
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
@@ -517,7 +517,7 @@ h1 {
 }
 
 h2 {
-  --title-font-size: calc(var(--body-font-size) * 2) ;
+  --title-font-size: calc(var(--body-font-size) * 2);
 }
 
 h3 {
@@ -1306,7 +1306,9 @@ footer {
 .slider {
   --slider-margin: var(--slider-figcaption-height) auto -20px;
   --slider-width: 100%;
+  --slider-relay-text-align: center;
   --slider-figcaption-top: -45%;
+  --slider-figcaption-left: 0;
   --slider-figcaption-padding: 5px 20px;
   --slider-figcaption-width: 100%;
   --slider-figcaption-height: 20%;
@@ -1410,29 +1412,32 @@ footer {
   }
 }
 /***** Variables : Canvas *****/
-.canvas {
+[class*=canvas] {
+  --canvas-margin: 20px auto;
   --canvas-border: medium dashed var(--secondary);
   --canvas-border-radius: 20px;
+  --canvas-background-color: var(--white);
   --canvas-cursor: crosshair;
-  --canvas-hover-controls-opacity: 1;
-  --canvas-hover-controls-transition: opacity 2s;
   --canvas-controls-margin: auto;
   --canvas-controls-border: thin solid var(--primary);
   --canvas-controls-border-radius: 10px;
   --canvas-controls-width: 300px;
   --canvas-controls-background-color: var(--primary-dark);
   --canvas-controls-opacity: 1;
   --canvas-controls-transition: opacity 1s;
-  --canvas-controls-list-flex-direction: column;
-  --canvas-controls-list-place-items: center;
-  --canvas-controls-list-margin: 5px;
-  --canvas-controls-label-padding: 5px;
-  --canvas-controls-label-color: var(--white);
+  --canvas-controls-hover-opacity: 1;
+  --canvas-controls-hover-transition: opacity 2s;
+  --canvas-child-flex-direction: column;
+  --canvas-child-place-items: center;
+  --canvas-child-margin: 5px;
+  --canvas-label-padding: 5px;
+  --canvas-label-color: var(--white);
+  --canvas-options-cursor: pointer;
 }
 
 @media (min-width: 1200px) {
-  .canvas {
-    --canvas-controls-opacity: 0;
+  .canvas-controls {
+    --canvas-controls-opacity: 0.1;
   }
 }
 /***** Base : Keyframes *****/
@@ -4549,12 +4554,16 @@ pre > *::selection {
   margin: var(--slider-margin);
   width: var(--slider-width);
 }
+.slider > .slider-relay {
+  text-align: var(--slider-relay-text-align);
+}
 .slider [class*=target] {
   display: none;
 }
 .slider figcaption {
   position: absolute;
   top: var(--slider-figcaption-top);
+  left: var(--slider-figcaption-left);
   padding: var(--slider-figcaption-padding);
   width: var(--slider-figcaption-width);
   height: var(--slider-figcaption-height);
@@ -4630,15 +4639,17 @@ pre > *::selection {
 }
 
 /***** Classes : Canvas *****/
-.canvas > canvas {
+[class*=canvas] {
+  display: block;
+}
+
+.canvas {
+  margin: var(--canvas-margin);
   border: var(--canvas-border);
   border-radius: var(--canvas-border-radius);
+  background-color: var(--canvas-background-color);
   cursor: var(--canvas-cursor);
 }
-.canvas:hover > .canvas-controls, .canvas:focus > .canvas-controls {
-  opacity: var(--canvas-hover-controls-opacity);
-  transition: var(--canvas-hover-controls-transition);
-}
 
 .canvas-controls {
   margin: var(--canvas-controls-margin);
@@ -4649,15 +4660,22 @@ pre > *::selection {
   opacity: var(--canvas-controls-opacity);
   transition: var(--canvas-controls-transition);
 }
-.canvas-controls li {
+.canvas-controls:hover, .canvas-controls:focus {
+  opacity: var(--canvas-controls-hover-opacity);
+  transition: var(--canvas-controls-hover-transition);
+}
+.canvas-controls > * {
   display: flex;
-  flex-direction: var(--canvas-controls-list-flex-direction);
-  place-items: var(--canvas-controls-list-place-items);
-  margin: var(--canvas-controls-list-margin);
+  flex-direction: var(--canvas-child-flex-direction);
+  place-items: var(--canvas-child-place-items);
+  margin: var(--canvas-child-margin);
 }
 .canvas-controls label {
-  padding: var(--canvas-controls-label-padding);
-  color: var(--canvas-controls-label-color);
+  padding: var(--canvas-label-padding);
+  color: var(--canvas-label-color);
+}
+.canvas-controls input, .canvas-controls button {
+  cursor: var(--canvas-options-cursor);
 }
 
 /***** Classes : Box *****/
@@ -7556,4 +7574,4 @@ pre > *::selection {
 }
 
 /*! Author: Philippe Beck <philippe@philippebeck.net>
- Updated: 11th Apr 2021 @ 12:38:36 AM */
+ Updated: 11th Apr 2021 @ 12:58:23 PM */