mithril-materialized 3.4.5 → 3.5.1

package/dist/advanced.css

@@ -844,6 +844,10 @@ td, th {
   flex-direction: column;
 }
 
+ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
+  margin: 0;
+}
+
 .sidenav {
   position: fixed;
   width: 300px;
@@ -907,7 +911,7 @@ td, th {
   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));
+  color: var(--mm-nav-active-text, #fff);
   display: block;
   font-size: 14px;
   font-weight: 500;
@@ -922,6 +926,7 @@ td, th {
   margin: 0 32px 0 0;
   width: 24px;
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  user-select: none;
 }
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
@@ -1028,7 +1033,7 @@ td, th {
 }
 .sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
 .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
-  color: #fff;
+  color: var(--mm-nav-active-text, #fff);
 }
 
 .sidenav .collapsible-body {
@@ -1054,6 +1059,140 @@ td, th {
   pointer-events: auto;
 }
 
+.sidenav-hamburger {
+  background: var(--mm-surface-color, #fff);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+.sidenav-hamburger:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.sidenav-hamburger svg {
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+
+.sidenav-hamburger-item {
+  list-style: none;
+}
+.sidenav-hamburger-item:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-hamburger-item svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidenav.sidenav-collapsed {
+  width: 60px !important;
+}
+.sidenav.sidenav-collapsed .sidenav-item-text {
+  display: none;
+}
+.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  padding: 0 18px;
+  justify-content: center;
+}
+.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  margin: 0;
+  float: none;
+}
+.sidenav.sidenav-collapsed .subheader {
+  display: none;
+}
+.sidenav.sidenav-collapsed .sidenav-subitem {
+  padding: 8px 16px !important;
+  justify-content: center;
+}
+.sidenav.sidenav-collapsed .sidenav-subitem span {
+  display: none;
+}
+
+.sidenav-expand-toggle:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-expand-toggle svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  transition: transform 0.2s ease;
+}
+
+.sidenav-subitem {
+  list-style: none;
+  transition: background-color 0.2s ease;
+}
+.sidenav-subitem:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-subitem.selected svg {
+  fill: var(--mm-primary-color, #26a69a);
+}
+.sidenav-subitem svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  transition: fill 0.2s ease;
+}
+.sidenav-subitem i.material-icons {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidenav li.has-submenu.active > a {
+  background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+  color: var(--mm-primary-color, #26a69a);
+}
+
+[data-theme=dark] .sidenav-hamburger {
+  background: var(--mm-surface-color, #1e1e1e);
+}
+[data-theme=dark] .sidenav-hamburger svg {
+  fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav {
+  background-color: var(--mm-surface-color, #1e1e1e);
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
+  background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav li.active {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .subheader {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-expand-toggle svg {
+  fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-subitem:hover {
+  background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+}
+[data-theme=dark] .sidenav-subitem svg {
+  fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-subitem i.material-icons {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.sidenav {
+  transition: transform 0.3s ease, width 0.3s ease;
+}
+
 nav.nav-extended {
   height: auto;
 }

package/dist/components.css

@@ -1597,6 +1597,10 @@ body.keyboard-focused .dropdown-content li:focus {
   flex-direction: column;
 }
 
+ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
+  margin: 0;
+}
+
 .sidenav {
   position: fixed;
   width: 300px;
@@ -1660,7 +1664,7 @@ body.keyboard-focused .dropdown-content li:focus {
   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));
+  color: var(--mm-nav-active-text, #fff);
   display: block;
   font-size: 14px;
   font-weight: 500;
@@ -1675,6 +1679,7 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 0 32px 0 0;
   width: 24px;
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  user-select: none;
 }
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
@@ -1781,7 +1786,7 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 .sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
 .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
-  color: #fff;
+  color: var(--mm-nav-active-text, #fff);
 }
 
 .sidenav .collapsible-body {
@@ -1807,6 +1812,140 @@ body.keyboard-focused .dropdown-content li:focus {
   pointer-events: auto;
 }
 
+.sidenav-hamburger {
+  background: var(--mm-surface-color, #fff);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+.sidenav-hamburger:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.sidenav-hamburger svg {
+  fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
+
+.sidenav-hamburger-item {
+  list-style: none;
+}
+.sidenav-hamburger-item:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-hamburger-item svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidenav.sidenav-collapsed {
+  width: 60px !important;
+}
+.sidenav.sidenav-collapsed .sidenav-item-text {
+  display: none;
+}
+.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  padding: 0 18px;
+  justify-content: center;
+}
+.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  margin: 0;
+  float: none;
+}
+.sidenav.sidenav-collapsed .subheader {
+  display: none;
+}
+.sidenav.sidenav-collapsed .sidenav-subitem {
+  padding: 8px 16px !important;
+  justify-content: center;
+}
+.sidenav.sidenav-collapsed .sidenav-subitem span {
+  display: none;
+}
+
+.sidenav-expand-toggle:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-expand-toggle svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  transition: transform 0.2s ease;
+}
+
+.sidenav-subitem {
+  list-style: none;
+  transition: background-color 0.2s ease;
+}
+.sidenav-subitem:hover {
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
+.sidenav-subitem.selected svg {
+  fill: var(--mm-primary-color, #26a69a);
+}
+.sidenav-subitem svg {
+  fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  transition: fill 0.2s ease;
+}
+.sidenav-subitem i.material-icons {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidenav li.has-submenu.active > a {
+  background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+  color: var(--mm-primary-color, #26a69a);
+}
+
+[data-theme=dark] .sidenav-hamburger {
+  background: var(--mm-surface-color, #1e1e1e);
+}
+[data-theme=dark] .sidenav-hamburger svg {
+  fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav {
+  background-color: var(--mm-surface-color, #1e1e1e);
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
+  background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+}
+[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav li.active {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
+[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
+[data-theme=dark] .sidenav .subheader {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-expand-toggle svg {
+  fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-subitem:hover {
+  background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+}
+[data-theme=dark] .sidenav-subitem svg {
+  fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+[data-theme=dark] .sidenav-subitem i.material-icons {
+  color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.sidenav {
+  transition: transform 0.3s ease, width 0.3s ease;
+}
+
 .breadcrumb {
   padding: 1rem 0;
   margin-bottom: 1rem;

package/dist/core.css

@@ -2182,34 +2182,34 @@ input[type=search]:not(.browser-default):focus:not([readonly]) + label,
 textarea.materialize-textarea:focus:not([readonly]) + label {
   color: var(--mm-input-border-focus, #26a69a);
 }
-input:not([type]):not(.browser-default):focus.valid ~ label,
-input[type=text]:not(.browser-default):focus.valid ~ label,
-input[type=password]:not(.browser-default):focus.valid ~ label,
-input[type=email]:not(.browser-default):focus.valid ~ label,
-input[type=url]:not(.browser-default):focus.valid ~ label,
-input[type=time]:not(.browser-default):focus.valid ~ label,
-input[type=date]:not(.browser-default):focus.valid ~ label,
-input[type=datetime]:not(.browser-default):focus.valid ~ label,
-input[type=datetime-local]:not(.browser-default):focus.valid ~ label,
-input[type=tel]:not(.browser-default):focus.valid ~ label,
-input[type=number]:not(.browser-default):focus.valid ~ label,
-input[type=search]:not(.browser-default):focus.valid ~ label,
-textarea.materialize-textarea:focus.valid ~ label {
+input:not([type]):not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=text]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=password]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=email]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=url]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=time]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=date]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=datetime]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=datetime-local]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=tel]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=number]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+input[type=search]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ label,
+textarea.materialize-textarea:focus.valid:not([readonly]):not([disabled]) ~ label {
   color: #4CAF50;
 }
-input:not([type]):not(.browser-default):focus.invalid ~ label,
-input[type=text]:not(.browser-default):focus.invalid ~ label,
-input[type=password]:not(.browser-default):focus.invalid ~ label,
-input[type=email]:not(.browser-default):focus.invalid ~ label,
-input[type=url]:not(.browser-default):focus.invalid ~ label,
-input[type=time]:not(.browser-default):focus.invalid ~ label,
-input[type=date]:not(.browser-default):focus.invalid ~ label,
-input[type=datetime]:not(.browser-default):focus.invalid ~ label,
-input[type=datetime-local]:not(.browser-default):focus.invalid ~ label,
-input[type=tel]:not(.browser-default):focus.invalid ~ label,
-input[type=number]:not(.browser-default):focus.invalid ~ label,
-input[type=search]:not(.browser-default):focus.invalid ~ label,
-textarea.materialize-textarea:focus.invalid ~ label {
+input:not([type]):not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=text]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=password]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=email]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=url]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=time]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=date]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=datetime]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=datetime-local]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=tel]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=number]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+input[type=search]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ label,
+textarea.materialize-textarea:focus.invalid:not([readonly]):not([disabled]) ~ label {
   color: #F44336;
 }
 input:not([type]):not(.browser-default).validate + label,
@@ -2314,60 +2314,60 @@ textarea.materialize-textarea::-ms-input-placeholder {
 }
 
 /* Validation Sass Placeholders */
-.select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid, input:not([type]):not(.browser-default):focus.valid,
-input[type=text]:not(.browser-default).valid,
-input[type=text]:not(.browser-default):focus.valid,
-input[type=password]:not(.browser-default).valid,
-input[type=password]:not(.browser-default):focus.valid,
-input[type=email]:not(.browser-default).valid,
-input[type=email]:not(.browser-default):focus.valid,
-input[type=url]:not(.browser-default).valid,
-input[type=url]:not(.browser-default):focus.valid,
-input[type=time]:not(.browser-default).valid,
-input[type=time]:not(.browser-default):focus.valid,
-input[type=date]:not(.browser-default).valid,
-input[type=date]:not(.browser-default):focus.valid,
-input[type=datetime]:not(.browser-default).valid,
-input[type=datetime]:not(.browser-default):focus.valid,
-input[type=datetime-local]:not(.browser-default).valid,
-input[type=datetime-local]:not(.browser-default):focus.valid,
-input[type=tel]:not(.browser-default).valid,
-input[type=tel]:not(.browser-default):focus.valid,
-input[type=number]:not(.browser-default).valid,
-input[type=number]:not(.browser-default):focus.valid,
-input[type=search]:not(.browser-default).valid,
-input[type=search]:not(.browser-default):focus.valid,
-textarea.materialize-textarea.valid,
-textarea.materialize-textarea:focus.valid {
+.select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid:not([readonly]):not([disabled]), input:not([type]):not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=text]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=text]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=password]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=password]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=email]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=email]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=url]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=url]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=time]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=time]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=date]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=date]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=datetime]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=datetime]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=datetime-local]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=datetime-local]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=tel]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=tel]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=number]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=number]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+input[type=search]:not(.browser-default).valid:not([readonly]):not([disabled]),
+input[type=search]:not(.browser-default):focus.valid:not([readonly]):not([disabled]),
+textarea.materialize-textarea.valid:not([readonly]):not([disabled]),
+textarea.materialize-textarea:focus.valid:not([readonly]):not([disabled]) {
   border-bottom: 1px solid #4CAF50;
   box-shadow: 0 1px 0 0 #4CAF50;
 }
 
-.select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus, input:not([type]):not(.browser-default).invalid, input:not([type]):not(.browser-default):focus.invalid,
-input[type=text]:not(.browser-default).invalid,
-input[type=text]:not(.browser-default):focus.invalid,
-input[type=password]:not(.browser-default).invalid,
-input[type=password]:not(.browser-default):focus.invalid,
-input[type=email]:not(.browser-default).invalid,
-input[type=email]:not(.browser-default):focus.invalid,
-input[type=url]:not(.browser-default).invalid,
-input[type=url]:not(.browser-default):focus.invalid,
-input[type=time]:not(.browser-default).invalid,
-input[type=time]:not(.browser-default):focus.invalid,
-input[type=date]:not(.browser-default).invalid,
-input[type=date]:not(.browser-default):focus.invalid,
-input[type=datetime]:not(.browser-default).invalid,
-input[type=datetime]:not(.browser-default):focus.invalid,
-input[type=datetime-local]:not(.browser-default).invalid,
-input[type=datetime-local]:not(.browser-default):focus.invalid,
-input[type=tel]:not(.browser-default).invalid,
-input[type=tel]:not(.browser-default):focus.invalid,
-input[type=number]:not(.browser-default).invalid,
-input[type=number]:not(.browser-default):focus.invalid,
-input[type=search]:not(.browser-default).invalid,
-input[type=search]:not(.browser-default):focus.invalid,
-textarea.materialize-textarea.invalid,
-textarea.materialize-textarea:focus.invalid {
+.select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus, input:not([type]):not(.browser-default).invalid:not([readonly]):not([disabled]), input:not([type]):not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=text]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=text]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=password]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=password]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=email]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=email]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=url]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=url]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=time]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=time]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=date]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=date]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=datetime]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=datetime]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=datetime-local]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=datetime-local]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=tel]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=tel]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=number]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=number]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+input[type=search]:not(.browser-default).invalid:not([readonly]):not([disabled]),
+input[type=search]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]),
+textarea.materialize-textarea.invalid:not([readonly]):not([disabled]),
+textarea.materialize-textarea:focus.invalid:not([readonly]):not([disabled]) {
   border-bottom: 1px solid #F44336;
   box-shadow: 0 1px 0 0 #F44336;
 }
@@ -2426,60 +2426,60 @@ textarea.materialize-textarea:focus.invalid ~ .helper-text[data-error] {
   pointer-events: none;
 }
 
-.select-wrapper.valid ~ .helper-text:after, input:not([type]):not(.browser-default).valid ~ .helper-text:after, input:not([type]):not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=text]:not(.browser-default).valid ~ .helper-text:after,
-input[type=text]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=password]:not(.browser-default).valid ~ .helper-text:after,
-input[type=password]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=email]:not(.browser-default).valid ~ .helper-text:after,
-input[type=email]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=url]:not(.browser-default).valid ~ .helper-text:after,
-input[type=url]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=time]:not(.browser-default).valid ~ .helper-text:after,
-input[type=time]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=date]:not(.browser-default).valid ~ .helper-text:after,
-input[type=date]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=datetime]:not(.browser-default).valid ~ .helper-text:after,
-input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=datetime-local]:not(.browser-default).valid ~ .helper-text:after,
-input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=tel]:not(.browser-default).valid ~ .helper-text:after,
-input[type=tel]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=number]:not(.browser-default).valid ~ .helper-text:after,
-input[type=number]:not(.browser-default):focus.valid ~ .helper-text:after,
-input[type=search]:not(.browser-default).valid ~ .helper-text:after,
-input[type=search]:not(.browser-default):focus.valid ~ .helper-text:after,
-textarea.materialize-textarea.valid ~ .helper-text:after,
-textarea.materialize-textarea:focus.valid ~ .helper-text:after {
+.select-wrapper.valid ~ .helper-text:after, input:not([type]):not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after, input:not([type]):not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=text]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=text]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=password]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=password]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=email]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=email]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=url]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=url]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=time]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=time]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=date]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=date]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime-local]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime-local]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=tel]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=tel]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=number]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=number]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=search]:not(.browser-default).valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=search]:not(.browser-default):focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+textarea.materialize-textarea.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+textarea.materialize-textarea:focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after {
   content: attr(data-success);
   color: #4CAF50;
 }
 
-.select-wrapper.invalid ~ .helper-text:after, input:not([type]):not(.browser-default).invalid ~ .helper-text:after, input:not([type]):not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=text]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=text]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=password]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=password]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=email]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=email]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=url]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=url]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=time]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=time]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=date]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=date]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=datetime]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=tel]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=number]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=number]:not(.browser-default):focus.invalid ~ .helper-text:after,
-input[type=search]:not(.browser-default).invalid ~ .helper-text:after,
-input[type=search]:not(.browser-default):focus.invalid ~ .helper-text:after,
-textarea.materialize-textarea.invalid ~ .helper-text:after,
-textarea.materialize-textarea:focus.invalid ~ .helper-text:after {
+.select-wrapper.invalid ~ .helper-text:after, input:not([type]):not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after, input:not([type]):not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=text]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=text]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=password]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=password]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=email]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=email]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=url]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=url]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=time]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=time]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=date]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=date]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime-local]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=datetime-local]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=tel]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=tel]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=number]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=number]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=search]:not(.browser-default).invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+input[type=search]:not(.browser-default):focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+textarea.materialize-textarea.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+textarea.materialize-textarea:focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after {
   content: attr(data-error);
   color: #F44336;
 }