mithril-materialized 3.3.3 → 3.3.5

package/README.md

@@ -2,7 +2,7 @@
 
 A Mithril.js component library inspired by [materialize-css](https://materializecss.com) design principles, [available on npm](https://www.npmjs.com/package/mithril-materialized). This library provides you with ready-to-use Mithril components that follow Material Design guidelines, with **no external JavaScript dependencies**.
 
-## 🚀 v3.3.0 - Latest Release
+## 🚀 v3.3 - Latest Release
 
 The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.
 
@@ -99,6 +99,8 @@ Components marked with an * are not included in the original materialize-css lib
 
 ## 📖 Usage Instructions
 
+Online [flems](flems.io) examples: [FlatButton](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6AnAJgDQgGd4EBjAF3imRHTIJHwDMIF6kBtUAOwEMxEkNABZkwsBiBIB7LhVnUAPLAhcA1gAIATsQC8AHUJkAnqyHx4ZA+qHbG+kCLIAHAkgD0bgK5cnqgObo0mBukGQ2LAC0YDwUmhA8ygBelG5QEARkbipQ8AAegQQEBgB8elwSRKRkEDJsIACMSAAMIAC+uNx8AjR0EtKy8PKC-RnqwOoAYrAxAEKeZGQy6q3qOuoA7tlS6+wA5KHhsFEx8HEJEMlQuwC6ANxlZSNk6jIkyiQaawAUAJSrxeoEqcyF9dqoAFZCCG7H4PLhgdDaLg5TRfKBSEiefiydAAIykUCMuHUYC+U1m80WXGJ42muOISHUBgAskZJtNnrjKTIDMTXu8NK0fj97lwyhViPByDUuHUAGzNNodEC8fjUAr0fD9ORkahta74ZRqNicFVdagHOLifCeTTiQSOFzuLw+fyBKTBS0sAAC2HQAGZ0AB2EIQMJW9CQLjocGakDGJzdAgkOJOXXtTpqwReo7RWLxJKUCS2+0OBZOjzeXwBIKh8ORPOnAsXSjewOBgAsqXSmWyeXQWKgMbjCaTKYgaf1rSAA) and [Select](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6AnAJgDQgGd4EBjAF3imRHTIJHwDMIF6kBtUAOwEMxEkNABZkwsBiBIB7LhVnUAPLAhcA1gAIATsQC8AHUJkAnqyHx4ZA+qHbG+kCLIAHAkgD0bgK5cnqgObo0mBukGQ2LAC0YDwUmhA8ygBelG5QEARkbipQ8AAegQQEBgB8elwSRKRkEDJsIACMSAAMIAC+uNx8AjR0EtKy8PKC-RnqwOoAysTw5Oqt6jrqAO7ZUkvsAOSh4bBRMfBxCRDJUBsAugDcZWUjZOokZiSqlACSUAvqG9gbV1xlYOhtFwcpoABRQKQkTz8WToABGUigRlw6jK6nUYFBG0Baw2KPGGRM8CQYwxPE0fhUABUpE4SRt6k0nLkNnM5ii0eiMaCplV8epYDw4cR6byZnd+HjUVwuVynIKSPAhFJYCD6QBhZRPdQyeB4zmyh4zZ5QN64A1c2nVWok9gW2XjaD0+pSwXC2D0gDyTmtMpd7PtXMdUHp3xRbpFn29vvU3wDMtlQfUTs+AGZXULIxtozUZen44n1GdzQnZTIHjwuH5iepQQA3ACUC2K6gSBzI9YbJdlrQbnL7XAbvzKFWm5FzdXqAA5mm0OiBePxqAV6Ph+nIyNQ2sWQMo1GxOAuutRtnFxPhPJpxIJHC53F4fP5AlJgqeWAABbDoVPoADsIQgMIz3QSAuHQAArVcQGMJxugIEg4h9OdOiXQQ312aJYniJJKAkS9rwcMhnFcDxvF8AIggAoDIkwg5sOOSh3x-H8ABZUnSTJsjydBoSgCCoJguCEIgJDWjOVogA).
+
 ### Quick Start
 
 1. **Install the package**:

package/dist/advanced.css

@@ -1,17 +1,11 @@
 @charset "UTF-8";
-.carousel {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: 400px;
-  perspective: 500px;
-  transform-style: preserve-3d;
-  transform-origin: 0% 50%;
-}
 .carousel.carousel-slider {
   top: 0;
   left: 0;
 }
+.carousel.carousel-slider .carousel-fixed-item.with-indicators {
+  bottom: 68px;
+}
 .carousel.carousel-slider .carousel-fixed-item {
   position: absolute;
   left: 0;
@@ -19,9 +13,6 @@
   bottom: 20px;
   z-index: 1;
 }
-.carousel.carousel-slider .carousel-fixed-item.with-indicators {
-  bottom: 68px;
-}
 .carousel.carousel-slider .carousel-item {
   width: 100%;
   height: 100%;
@@ -38,6 +29,15 @@
 .carousel.carousel-slider .carousel-item p {
   font-size: 15px;
 }
+.carousel {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 400px;
+  perspective: 500px;
+  transform-style: preserve-3d;
+  transform-origin: 0% 50%;
+}
 .carousel .carousel-item {
   visibility: hidden;
   width: 200px;
@@ -57,6 +57,9 @@
   bottom: 0;
   margin: 0;
 }
+.carousel .indicators .indicator-item.active {
+  background-color: #fff;
+}
 .carousel .indicators .indicator-item {
   display: inline-block;
   position: relative;
@@ -68,9 +71,6 @@
   transition: background-color 0.3s;
   border-radius: 50%;
 }
-.carousel .indicators .indicator-item.active {
-  background-color: #fff;
-}
 .carousel.scrolling .carousel-item .materialboxed,
 .carousel .carousel-item:not(.active) .materialboxed {
   pointer-events: none;
@@ -464,7 +464,6 @@ td, th {
     border-spacing: 0;
     display: block;
     position: relative;
-    /* sort out borders */
   }
   table.responsive-table td:empty:before {
     content: " ";
@@ -512,6 +511,9 @@ td, th {
     border-bottom: none;
     padding: 0 10px;
   }
+  table.responsive-table {
+    /* sort out borders */
+  }
   table.responsive-table thead {
     border: 0;
     border-right: 1px solid rgba(0, 0, 0, 0.12);
@@ -901,6 +903,9 @@ td, th {
 .sidenav li.active {
   background-color: rgba(0, 0, 0, 0.05);
 }
+.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
   color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
@@ -910,9 +915,6 @@ td, th {
   line-height: 48px;
   padding: 0 32px;
 }
-.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
-  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
-}
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
   height: 48px;
@@ -927,6 +929,9 @@ td, th {
 .sidenav .divider {
   margin: 8px 0 0 0;
 }
+.sidenav .subheader:hover {
+  background-color: transparent;
+}
 .sidenav .subheader {
   cursor: initial;
   pointer-events: none;
@@ -939,21 +944,18 @@ td, th {
   display: flex;
   align-items: center;
 }
-.sidenav .subheader:hover {
-  background-color: transparent;
-}
 .sidenav .user-view {
   position: relative;
   padding: 32px 32px 0;
   margin-bottom: 8px;
 }
+.sidenav .user-view > a:hover {
+  background-color: transparent;
+}
 .sidenav .user-view > a {
   height: auto;
   padding: 0;
 }
-.sidenav .user-view > a:hover {
-  background-color: transparent;
-}
 .sidenav .user-view .background {
   overflow: hidden;
   position: absolute;
@@ -984,6 +986,9 @@ td, th {
   font-weight: 400;
 }
 
+.drag-target.right-aligned {
+  right: 0;
+}
 .drag-target {
   height: 100%;
   width: 10px;
@@ -992,19 +997,16 @@ td, th {
   left: 0;
   z-index: 998;
 }
-.drag-target.right-aligned {
+
+.sidenav.sidenav-fixed.right-aligned {
   right: 0;
+  left: auto;
 }
-
 .sidenav.sidenav-fixed {
   left: 0;
   transform: translateX(0);
   position: fixed;
 }
-.sidenav.sidenav-fixed.right-aligned {
-  right: 0;
-  left: auto;
-}
 
 @media only screen and (max-width : 992px) {
   .sidenav.sidenav-fixed {
@@ -1052,13 +1054,6 @@ td, th {
   pointer-events: auto;
 }
 
-nav {
-  color: var(--mm-nav-text, #fff);
-  background-color: var(--mm-nav-background, #ee6e73);
-  width: 100%;
-  height: 56px;
-  line-height: 56px;
-}
 nav.nav-extended {
   height: auto;
 }
@@ -1070,6 +1065,13 @@ nav.nav-extended .nav-content {
   position: relative;
   line-height: normal;
 }
+nav {
+  color: var(--mm-nav-text, #fff);
+  background-color: var(--mm-nav-background, #ee6e73);
+  width: 100%;
+  height: 56px;
+  line-height: 56px;
+}
 nav a {
   color: var(--mm-nav-text, #fff);
 }
@@ -1816,11 +1818,6 @@ nav .input-field label.active i {
   display: table-cell;
 }
 
-.tap-target-wave {
-  position: absolute;
-  border-radius: 50%;
-  z-index: 10001;
-}
 .tap-target-wave::before, .tap-target-wave::after {
   content: "";
   display: block;
@@ -1839,7 +1836,15 @@ nav .input-field label.active i {
   transition: opacity 0.3s, transform 0.3s, visibility 0s;
   z-index: -1;
 }
+.tap-target-wave {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+}
 
+.tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
+  background: none;
+}
 .tap-target-origin {
   top: 50%;
   left: 50%;
@@ -1847,9 +1852,6 @@ nav .input-field label.active i {
   z-index: 10002;
   position: absolute !important;
 }
-.tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
-  background: none;
-}
 
 @media only screen and (max-width: 600px) {
   .tap-target, .tap-target-wrapper {