Merge pull request #121 from animadio/dev

Release 4.1.7
philippebeck · Apr 1, 2021 · 0fb4e97 · 0fb4e97
2 parents 24b0810 + 4ff6e45
commit 0fb4e97
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 101 deletions.
diff --git a/README.md b/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.1.6/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.css) + [https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.js](https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.js)  
--   Production : [https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.min.css) + [https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.min.js](https://cdn.jsdelivr.net/npm/animadio@4.1.6/dist/animadio.min.js)  
+-   Development : [https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.css) + [https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.js](https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.js)  
+-   Production : [https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.min.css) + [https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.min.js](https://cdn.jsdelivr.net/npm/animadio@4.1.7/dist/animadio.min.js)  
 
 ---
 

diff --git a/dist/animadio.css b/dist/animadio.css
@@ -1,4 +1,4 @@
-/*! animadio v4.1.6 | https://animadio.org | MIT License */
+/*! animadio v4.1.7 | https://animadio.org | MIT License */
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
@@ -501,22 +501,22 @@ h1,
 h2,
 h3 {
   --title-color: var(--blue);
-  --title-text-shadow: 1px 1px 1px;
 }
 
 h4,
 h5,
 h6 {
   --title-color: var(--cyan);
-  --title-text-shadow: 0 0 1px;
 }
 
 h1 {
   --title-font-size: 5rem;
+  --title-text-shadow: 1px 1px 1px;
 }
 
 h2 {
   --title-font-size: 4.5rem;
+  --title-text-shadow: 0 0 1px;
 }
 
 h3 {
@@ -805,6 +805,7 @@ pre {
   --btn-hover-transition: background-color 1s;
   --btn-hover-animation: none;
   --btn-checked-transform: scale(0.9);
+  --btn-child-margin: auto;
   --btn-tn-padding: 3px 6px;
   --btn-tn-font-size: 60%;
   --btn-sm-padding: 4px 8px;
@@ -939,20 +940,22 @@ pre {
 .foot {
   --foot-text-align: center;
   --foot-title-margin: 10px;
-  --foot-title-color: var(--yellow);
   --foot-title-font-size: 2rem;
-  --foot-label-cursor: pointer;
+  --foot-title-color: var(--yellow);
+  --foot-title-hover-color: var(--orange);
   --foot-list-flex-direction: column;
   --foot-list-place-content: space-evenly;
   --foot-list-margin: 0;
   --foot-list-background-color: var(--violet);
   --foot-list-cursor: pointer;
-  --foot-list-link-font-color: var(--white);
-  --foot-list-link-hover-font-color: var(--yellow);
+  --foot-list-color: var(--white);
+  --foot-list-hover-color: var(--yellow);
   --foot-target-margin-left: 2px;
-  --foot-hover-transform: scale(1.2);
-  --foot-hover-transition: transorm 1s;
-  --foot-hover-color: var(--yellow);
+  --foot-label-cursor: pointer;
+  --foot-label-color: var(--orange);
+  --foot-label-hover-color: var(--orange);
+  --foot-label-hover-transform: scale(1.2);
+  --foot-label-hover-transition: transform 1s;
   --foot-visual-place-content: center;
   --foot-visual-margin: 0;
   --foot-visual-padding: 10px 0;
@@ -998,6 +1001,7 @@ pre {
   --navbar-brand-link-left: 0;
   --navbar-brand-link-img-height: 40px;
   --navbar-label-right: 10px;
+  --navbar-label-hover-color: var(--orange);
   --navbar-first-list-span-font-size: 2rem;
 }
 
@@ -1250,28 +1254,29 @@ footer {
 /***** Variables : Table *****/
 .table {
   --table-border-spacing: 10px;
-  --table-margin-bottom: 50px;
+  --table-margin: 50px auto;
   --table-width: auto;
   --table-max-width: 100%;
   --table-font-size: calc(var(--body-font-size) * 110 / 100);
   --table-box-shadow: 5px 5px 10px 5px var(--grey);
   --table-caption-side: top;
-  --table-caption-margin-bottom: 10px;
+  --table-caption-margin: 10px;
   --table-caption-font-size: 3rem;
   --table-caption-font-weight: bold;
   --table-caption-color: var(--black);
   --table-caption-text-shadow: 1px 1px 2px;
-  --table-title-font-size: 3rem;
+  --table-title-font-size: calc(var(--body-font-size) * 120 / 100);
   --table-title-font-style: italic;
   --table-title-background-color: var(--gray);
   --table-title-color: var(--white);
   --table-cell-border-style: solid;
   --table-cell-border-width: thin;
   --table-cell-border-radius: 0;
   --table-cell-border-color: var(--black);
-  --table-cell-padding: 5px;
+  --table-cell-padding: 2px;
   --table-cell-text-align: center;
   --table-cell-vertical-align: middle;
+  --table-cell-word-break: break-all;
   --table-cell-cursor: cell;
   --table-row-hover-box-shadow: inset 0 0 10px 10px;
   --table-even-background-color: var(--grey);
@@ -3346,9 +3351,10 @@ pre > *::selection {
   font-weight: var(--btn-font-weight);
   text-align: var(--btn-text-align);
 }
-[class*=btn] > i,
-[class*=button] > i {
+[class*=btn] > *,
+[class*=button] > * {
   display: block;
+  margin: var(--btn-child-margin);
 }
 
 [class*=btn] {
@@ -3966,11 +3972,11 @@ pre > *::selection {
   background-color: var(--foot-list-background-color);
 }
 .foot-list:first-child a {
-  color: var(--foot-list-link-font-color);
+  color: var(--foot-list-color);
   cursor: var(--foot-list-cursor);
 }
 .foot-list:first-child a:hover, .foot-list:first-child a:focus {
-  color: var(--foot-list-link-hover-font-color);
+  color: var(--foot-list-hover-color);
 }
 
 [class*=foot-target] [class*=up],
@@ -3979,13 +3985,16 @@ pre > *::selection {
 }
 
 [for*=foot]:hover [class*=up],
-[for*=foot]:hover [class*=down] {
-  transform: var(--foot-hover-transform);
-  transition: var(--foot-hover-transition);
-  color: var(--foot-hover-color);
+[for*=foot]:focus [class*=up],
+[for*=foot]:hover [class*=down],
+[for*=foot]:focus [class*=down] {
+  transform: var(--foot-label-hover-transform);
+  transition: var(--foot-label-hover-transition);
+  color: var(--foot-label-hover-color);
 }
 
 .foot-visual {
+  display: flex;
   place-content: var(--foot-visual-place-content);
   margin: var(--foot-visual-margin);
   padding: var(--foot-visual-padding);
@@ -4030,10 +4039,6 @@ pre > *::selection {
 [class*=foot-target] [class*=down] {
     display: none;
   }
-
-  .foot label {
-    cursor: default;
-  }
 }
 /***** Classes : Navbar *****/
 .navbar {
@@ -4106,6 +4111,9 @@ pre > *::selection {
   position: absolute;
   right: var(--navbar-label-right);
 }
+.navbar > [for*=navbar]:hover, .navbar > [for*=navbar]:focus {
+  color: var(--navbar-label-hover-color);
+}
 
 .navbar-close:checked ~ ul:first-of-type, .navbar-open:checked ~ ul:last-of-type {
   display: flex;
@@ -4473,7 +4481,7 @@ pre > *::selection {
   display: table;
   border-collapse: var(--table-border-collapse);
   border-spacing: var(--table-border-spacing);
-  margin-bottom: var(--table-margin-bottom);
+  margin: var(--table-margin);
   width: var(--table-width);
   max-width: var(--table-max-width);
   font-size: var(--table-font-size);
@@ -4502,7 +4510,7 @@ pre > *::selection {
 }
 .table > caption {
   caption-side: var(--table-caption-side);
-  margin-bottom: var(--table-caption-margin-bottom);
+  margin: var(--table-caption-margin);
   font-size: var(--table-caption-font-size);
   font-weight: var(--table-caption-font-weight);
   color: var(--table-caption-color);
@@ -4523,6 +4531,9 @@ pre > *::selection {
   padding: var(--table-cell-padding);
   text-align: var(--table-cell-text-align);
   vertical-align: var(--table-cell-vertical-align);
+}
+.table td {
+  word-break: var(--table-cell-word-break);
   cursor: var(--table-cell-cursor);
 }
 .table tbody tr:nth-child(even) {
@@ -7657,4 +7668,4 @@ pre > *::selection {
 }
 
 /*! Author: Philippe Beck <philippe@philippebeck.net>
- Updated: 31st Mar 2021 @ 9:55:12 AM */
+ Updated: 1st Apr 2021 @ 7:55:04 PM */
diff --git a/dist/animadio.js b/dist/animadio.js
@@ -1,4 +1,4 @@
-/*! animadio v4.1.6 | https://animadio.org | MIT License */
+/*! animadio v4.1.7 | https://animadio.org | MIT License */
 
 "use strict";
 
@@ -462,4 +462,4 @@ class Ajax {
 }
 
 /*! Author: Philippe Beck <philippe@philippebeck.net>
- Updated: 31st Mar 2021 @ 9:55:12 AM */
+ Updated: 1st Apr 2021 @ 7:55:04 PM */
diff --git a/dist/animadio.min.css b/dist/animadio.min.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animadio",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "description": "Animadio Framework - Grid & Flexbox Layouts - Reusable & Customizable Elements - Perform Complex Animations - Controls by Radio Buttons",
   "keywords": [
     "css framework",

diff --git a/src/classes/_btn.scss b/src/classes/_btn.scss
@@ -9,8 +9,9 @@
   font-weight: var(--btn-font-weight);
   text-align: var(--btn-text-align);
 
-  & > i {
+  & > * {
     display: block;
+    margin: var(--btn-child-margin);
   }
 }
 

diff --git a/src/classes/_foot.scss b/src/classes/_foot.scss
@@ -27,12 +27,12 @@
     background-color: var(--foot-list-background-color);
 
     a {
-      color: var(--foot-list-link-font-color);
+      color: var(--foot-list-color);
       cursor: var(--foot-list-cursor);
 
       &:hover,
       &:focus {
-        color: var(--foot-list-link-hover-font-color);
+        color: var(--foot-list-hover-color);
       }
     }
   }
@@ -44,13 +44,16 @@
 }
 
 [for*="foot"]:hover [class*="up"],
-[for*="foot"]:hover [class*="down"] {
-  transform: var(--foot-hover-transform);
-  transition: var(--foot-hover-transition);
-  color: var(--foot-hover-color);
+[for*="foot"]:focus [class*="up"],
+[for*="foot"]:hover [class*="down"],
+[for*="foot"]:focus [class*="down"] {
+  transform: var(--foot-label-hover-transform);
+  transition: var(--foot-label-hover-transition);
+  color: var(--foot-label-hover-color);
 }
 
 .foot-visual {
+  display: flex;
   place-content: var(--foot-visual-place-content);
   margin: var(--foot-visual-margin);
   padding: var(--foot-visual-padding);
@@ -96,10 +99,4 @@
   [class*="foot-target"] [class*="down"] {
     display: none;
   }
-
-  .foot {
-    label {
-      cursor: default;
-    }
-  }
 }
diff --git a/src/classes/_navbar.scss b/src/classes/_navbar.scss
@@ -92,6 +92,11 @@
   & > [for*="navbar"] {
     position: absolute;
     right: var(--navbar-label-right);
+
+    &:hover,
+    &:focus {
+      color: var(--navbar-label-hover-color);
+    }
   }
 }
 

diff --git a/src/classes/_table.scss b/src/classes/_table.scss
@@ -4,7 +4,7 @@
   display: table;
   border-collapse: var(--table-border-collapse);
   border-spacing: var(--table-border-spacing);
-  margin-bottom: var(--table-margin-bottom);
+  margin: var(--table-margin);
   width: var(--table-width);
   max-width: var(--table-max-width);
   font-size: var(--table-font-size);
@@ -40,7 +40,7 @@
 
   & > caption {
     caption-side: var(--table-caption-side);
-    margin-bottom: var(--table-caption-margin-bottom);
+    margin: var(--table-caption-margin);
     font-size: var(--table-caption-font-size);
     font-weight: var(--table-caption-font-weight);
     color: var(--table-caption-color);
@@ -63,6 +63,10 @@
     padding: var(--table-cell-padding);
     text-align: var(--table-cell-text-align);
     vertical-align: var(--table-cell-vertical-align);
+  }
+
+  td {
+    word-break: var(--table-cell-word-break);
     cursor: var(--table-cell-cursor);
   }