mithril-materialized 3.3.3 → 3.3.5

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);
@@ -4217,3 +4223,102 @@ body {
     transform: none;
   }
 }
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.theme-switcher .theme-switcher-label {
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+}
+.theme-switcher .theme-switcher-buttons {
+  display: flex;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 0.875rem;
+  border-radius: 0;
+  min-width: auto;
+  height: auto;
+  line-height: 1;
+  text-transform: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat.active:hover {
+  background: var(--mm-primary-color-dark, #00695c);
+}
+.theme-switcher .theme-switcher-buttons .btn-flat .material-icons {
+  font-size: 1rem;
+}
+.theme-switcher .theme-switcher-buttons .btn-flat span {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.theme-toggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-surface-color, #ffffff);
+  border: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.theme-toggle:hover {
+  background: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #ffffff);
+  border-color: var(--mm-primary-color, #26a69a);
+}
+.theme-toggle .material-icons {
+  font-size: 1.25rem;
+}
+
+nav .theme-toggle {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: 64px;
+  height: 64px;
+}
+nav .theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+}
+nav .theme-toggle:focus {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 600px) {
+  .theme-switcher .theme-switcher-buttons .btn-flat {
+    padding: 0.5rem;
+  }
+  .theme-switcher .theme-switcher-buttons .btn-flat span {
+    display: none;
+  }
+}

package/dist/core.css

@@ -784,7 +784,6 @@ td, th {
     border-spacing: 0;
     display: block;
     position: relative;
-    /* sort out borders */
   }
   table.responsive-table td:empty:before {
     content: " ";
@@ -832,6 +831,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);
@@ -2047,9 +2049,6 @@ small {
   }
 }
 
-.scale-transition {
-  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
-}
 .scale-transition.scale-out {
   transform: scale(0);
   transition: transform 0.2s !important;
@@ -2057,6 +2056,9 @@ small {
 .scale-transition.scale-in {
   transform: scale(1);
 }
+.scale-transition {
+  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+}
 
 /* Text Inputs + Textarea
    ========================================================================== */
@@ -2504,11 +2506,6 @@ textarea.materialize-textarea + label:after {
   transition: 0.2s opacity ease-out, 0.2s color ease-out;
 }
 
-.input-field {
-  position: relative;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .input-field.inline {
   display: inline-block;
   vertical-align: middle;
@@ -2525,6 +2522,11 @@ textarea.materialize-textarea + label:after {
 .input-field.col .prefix ~ .validate ~ label {
   width: calc(100% - 3rem - 1.5rem);
 }
+.input-field {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .input-field > label {
   color: #9e9e9e;
   position: absolute;
@@ -2545,6 +2547,12 @@ textarea.materialize-textarea + label:after {
   transform: translateY(-14px) scale(0.8);
   transform-origin: 0 0;
 }
+.input-field .helper-text::after {
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .input-field .helper-text {
   position: relative;
   min-height: 18px;
@@ -2552,12 +2560,6 @@ textarea.materialize-textarea + label:after {
   font-size: 12px;
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
-.input-field .helper-text::after {
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 .input-field .prefix {
   position: absolute;
   width: 3rem;
@@ -2824,9 +2826,6 @@ textarea.materialize-textarea {
   color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
-[type=checkbox] {
-  /* checkbox aspect */
-}
 [type=checkbox] + span:not(.lever) {
   position: relative;
   padding-left: 35px;
@@ -2837,6 +2836,9 @@ textarea.materialize-textarea {
   font-size: 1rem;
   user-select: none;
 }
+[type=checkbox] {
+  /* checkbox aspect */
+}
 [type=checkbox] + span:not(.lever):before, [type=checkbox]:not(.filled-in) + span:not(.lever):after {
   content: "";
   position: absolute;
@@ -3080,13 +3082,16 @@ select {
   position: absolute;
 }
 
-.select-wrapper {
-  position: relative;
-}
 .select-wrapper.valid + label, .select-wrapper.invalid + label {
   width: 100%;
   pointer-events: none;
 }
+.select-wrapper {
+  position: relative;
+}
+.select-wrapper input.select-dropdown:focus {
+  border-bottom: 1px solid #26a69a;
+}
 .select-wrapper input.select-dropdown {
   position: relative;
   cursor: pointer;
@@ -3104,9 +3109,6 @@ select {
   user-select: none;
   z-index: 1;
 }
-.select-wrapper input.select-dropdown:focus {
-  border-bottom: 1px solid #26a69a;
-}
 .select-wrapper .caret {
   position: absolute;
   right: 0;
@@ -3350,6 +3352,9 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .file-field span {
   cursor: pointer;
 }
+.file-field input[type=file]::-webkit-file-upload-button {
+  display: none;
+}
 .file-field input[type=file] {
   position: absolute;
   top: 0;
@@ -3364,9 +3369,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   opacity: 0;
   filter: alpha(opacity=0);
 }
-.file-field input[type=file]::-webkit-file-upload-button {
-  display: none;
-}
 .file-field .close {
   height: 20px;
 }