mithril-materialized 3.3.2 → 3.3.4

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 {

package/dist/components.css

@@ -387,7 +387,6 @@ td, th {
     border-spacing: 0;
     display: block;
     position: relative;
-    /* sort out borders */
   }
   table.responsive-table td:empty:before {
     content: " ";
@@ -435,6 +434,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);
@@ -754,57 +756,57 @@ td, th {
   background-color: rgb(42.75, 186.75, 173.25);
 }
 
-.btn-floating {
-  display: inline-block;
-  color: #fff;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-  padding: 0;
-  background-color: #26a69a;
-  border-radius: 50%;
-  transition: background-color 0.3s;
-  cursor: pointer;
-  vertical-align: middle;
-}
 .btn-floating:hover {
   background-color: #26a69a;
 }
 .btn-floating:before {
   border-radius: 0;
 }
+.btn-floating.btn-large.halfway-fab {
+  bottom: -28px;
+}
 .btn-floating.btn-large {
   width: 56px;
   height: 56px;
   padding: 0;
 }
-.btn-floating.btn-large.halfway-fab {
-  bottom: -28px;
-}
 .btn-floating.btn-large i {
   line-height: 56px;
 }
+.btn-floating.btn-small.halfway-fab {
+  bottom: -16.2px;
+}
 .btn-floating.btn-small {
   width: 32.4px;
   height: 32.4px;
 }
-.btn-floating.btn-small.halfway-fab {
-  bottom: -16.2px;
-}
 .btn-floating.btn-small i {
   line-height: 32.4px;
 }
+.btn-floating.halfway-fab.left {
+  right: auto;
+  left: 24px;
+}
 .btn-floating.halfway-fab {
   position: absolute;
   right: 24px;
   bottom: -20px;
 }
-.btn-floating.halfway-fab.left {
-  right: auto;
-  left: 24px;
+.btn-floating {
+  display: inline-block;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  padding: 0;
+  background-color: #26a69a;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  vertical-align: middle;
 }
 .btn-floating i {
   width: inherit;
@@ -819,14 +821,6 @@ button.btn-floating {
   border: none;
 }
 
-.fixed-action-btn {
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-}
 .fixed-action-btn.active ul {
   visibility: visible;
 }
@@ -871,13 +865,13 @@ button.btn-floating {
 .fixed-action-btn.direction-bottom ul li {
   margin: 15px 0 0 0;
 }
+.fixed-action-btn.toolbar.active > a i {
+  opacity: 0;
+}
 .fixed-action-btn.toolbar {
   padding: 0;
   height: 56px;
 }
-.fixed-action-btn.toolbar.active > a i {
-  opacity: 0;
-}
 .fixed-action-btn.toolbar ul {
   display: flex;
   top: 0;
@@ -906,6 +900,14 @@ button.btn-floating {
 .fixed-action-btn.toolbar ul li a i {
   line-height: inherit;
 }
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+}
 .fixed-action-btn ul {
   left: 0;
   right: 0;
@@ -975,6 +977,9 @@ button.btn-floating {
   display: block;
 }
 
+.modal:focus {
+  outline: none;
+}
 .modal {
   display: none;
   position: fixed;
@@ -990,9 +995,6 @@ button.btn-floating {
   border-radius: 2px;
   will-change: top, opacity;
 }
-.modal:focus {
-  outline: none;
-}
 @media only screen and (max-width : 992px) {
   .modal {
     width: 80%;
@@ -1062,6 +1064,9 @@ button.btn-floating {
   will-change: bottom, opacity;
 }
 
+.dropdown-content:focus {
+  outline: 0;
+}
 .dropdown-content {
   background-color: var(--mm-surface-color, #fff);
   margin: 0;
@@ -1075,18 +1080,6 @@ button.btn-floating {
   z-index: 9999;
   transform-origin: 0 0;
 }
-.dropdown-content:focus {
-  outline: 0;
-}
-.dropdown-content li {
-  clear: both;
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
-  cursor: pointer;
-  min-height: 50px;
-  line-height: 1.5rem;
-  width: 100%;
-  text-align: left;
-}
 .dropdown-content li:hover, .dropdown-content li.active {
   background-color: var(--mm-dropdown-hover, #eee);
 }
@@ -1119,6 +1112,15 @@ button.btn-floating {
 .dropdown-content li.disabled {
   cursor: not-allowed;
 }
+.dropdown-content li {
+  clear: both;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  cursor: pointer;
+  min-height: 50px;
+  line-height: 1.5rem;
+  width: 100%;
+  text-align: left;
+}
 
 body.keyboard-focused .dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
@@ -1135,17 +1137,6 @@ body.keyboard-focused .dropdown-content li:focus {
   cursor: pointer;
 }
 
-.tabs {
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: 48px;
-  width: 100%;
-  background-color: var(--mm-background-color, #fff);
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
-  margin: 0 auto;
-  white-space: nowrap;
-}
 .tabs.tabs-transparent {
   background-color: transparent;
 }
@@ -1167,6 +1158,17 @@ body.keyboard-focused .dropdown-content li:focus {
 .tabs.tabs-fixed-width .tab {
   flex-grow: 1;
 }
+.tabs {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 48px;
+  width: 100%;
+  background-color: var(--mm-background-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin: 0 auto;
+  white-space: nowrap;
+}
 .tabs .tab {
   display: inline-block;
   text-align: center;
@@ -1176,6 +1178,14 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 0;
   text-transform: uppercase;
 }
+.tabs .tab a:focus, .tabs .tab a:focus.active {
+  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
+  outline: none;
+}
+.tabs .tab a:hover, .tabs .tab a.active {
+  background-color: transparent;
+  color: var(--mm-primary-color, #ee6e73);
+}
 .tabs .tab a {
   color: var(--mm-text-secondary, rgba(238, 110, 115, 0.7));
   display: block;
@@ -1187,14 +1197,6 @@ body.keyboard-focused .dropdown-content li:focus {
   overflow: hidden;
   transition: color 0.28s ease, background-color 0.28s ease;
 }
-.tabs .tab a:focus, .tabs .tab a:focus.active {
-  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
-  outline: none;
-}
-.tabs .tab a:hover, .tabs .tab a.active {
-  background-color: transparent;
-  color: var(--mm-primary-color, #ee6e73);
-}
 .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
   color: var(--mm-text-disabled, rgba(238, 110, 115, 0.4));
   cursor: default;
@@ -1258,6 +1260,9 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 0.5rem 0 1rem 0;
 }
 
+.collapsible-header:focus {
+  outline: 0;
+}
 .collapsible-header {
   display: flex;
   cursor: pointer;
@@ -1266,9 +1271,6 @@ body.keyboard-focused .dropdown-content li:focus {
   padding: 1rem;
   border-bottom: 1px solid var(--mm-border-color, #ddd);
 }
-.collapsible-header:focus {
-  outline: 0;
-}
 .collapsible-header i {
   width: 2rem;
   font-size: 1.6rem;
@@ -1338,6 +1340,9 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 16px 0;
 }
 
+.materialboxed:hover:not(.active) {
+  opacity: 0.8;
+}
 .materialboxed {
   display: block;
   cursor: zoom-in;
@@ -1345,9 +1350,6 @@ body.keyboard-focused .dropdown-content li:focus {
   transition: opacity 0.4s;
   -webkit-backface-visibility: hidden;
 }
-.materialboxed:hover:not(.active) {
-  opacity: 0.8;
-}
 .materialboxed.active {
   cursor: zoom-out;
 }
@@ -1640,6 +1642,9 @@ body.keyboard-focused .dropdown-content li:focus {
 .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;
@@ -1649,9 +1654,6 @@ body.keyboard-focused .dropdown-content li:focus {
   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;
@@ -1666,6 +1668,9 @@ body.keyboard-focused .dropdown-content li:focus {
 .sidenav .divider {
   margin: 8px 0 0 0;
 }
+.sidenav .subheader:hover {
+  background-color: transparent;
+}
 .sidenav .subheader {
   cursor: initial;
   pointer-events: none;
@@ -1678,21 +1683,18 @@ body.keyboard-focused .dropdown-content li:focus {
   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;
@@ -1723,6 +1725,9 @@ body.keyboard-focused .dropdown-content li:focus {
   font-weight: 400;
 }
 
+.drag-target.right-aligned {
+  right: 0;
+}
 .drag-target {
   height: 100%;
   width: 10px;
@@ -1731,19 +1736,16 @@ body.keyboard-focused .dropdown-content li:focus {
   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 {
@@ -2385,7 +2387,6 @@ body.keyboard-focused .dropdown-content li:focus {
   user-select: none;
   position: relative;
   transition: background-color 0.2s ease;
-  padding-right: 32px;
 }
 .datatable thead th.sortable:hover {
   background-color: var(--mm-dropdown-hover);
@@ -2413,6 +2414,9 @@ body.keyboard-focused .dropdown-content li:focus {
 .datatable thead th.sortable .sort-indicators .sort-desc {
   margin-top: 0px;
 }
+.datatable thead th.sortable {
+  padding-right: 32px;
+}
 .datatable .align-left {
   text-align: left;
 }
@@ -3842,8 +3846,6 @@ body {
   align-items: center;
   justify-content: center;
   z-index: 3;
-  opacity: 0;
-  transform: scale(0.8);
 }
 [data-theme=dark] .image-list-item-action {
   background: rgba(0, 0, 0, 0.7);
@@ -3881,6 +3883,10 @@ body {
   bottom: 8px;
   right: 8px;
 }
+.image-list-item-action {
+  opacity: 0;
+  transform: scale(0.8);
+}
 .image-list-with-actions .image-list-item-action {
   opacity: 1;
   transform: scale(1);