mithril-materialized 3.16.0 → 3.17.1

package/dist/forms.css

@@ -3,6 +3,31 @@ html {
   box-sizing: border-box;
 }
 
+/* Default themed scrollbar styling for all scroll containers */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35)) var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  border: 2px solid var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
+}
+
 *, *:before, *:after {
   box-sizing: inherit;
 }
@@ -495,7 +520,7 @@ td, th {
 }
 .collection .collection-item.active {
   background-color: #26a69a;
-  color: rgb(234.25, 250.25, 248.75);
+  color: rgb(91.862745098%, 98.137254902%, 97.5490196078%);
 }
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
@@ -624,6 +649,72 @@ td, th {
 /*******************
   Utility Classes
 *******************/
+.mm-layout-row {
+  display: flex;
+}
+
+.mm-layout-row--center {
+  align-items: center;
+}
+
+.mm-layout-row--align-end {
+  align-items: flex-end;
+}
+
+.mm-layout-row--wrap {
+  flex-wrap: wrap;
+}
+
+.mm-layout-row--justify-start {
+  justify-content: flex-start;
+}
+
+.mm-layout-row--justify-end {
+  justify-content: flex-end;
+}
+
+.mm-layout-row--justify-between {
+  justify-content: space-between;
+}
+
+.mm-layout-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mm-layout-gap, 0);
+}
+
+.mm-layout-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-layout-gap, 8px);
+}
+
+.mm-layout-grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mm-layout-ml-auto {
+  margin-left: auto;
+}
+
+.mm-layout-ml-8 {
+  margin-left: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-mr-8 {
+  margin-right: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-item-icon {
+  margin-right: var(--mm-layout-icon-gap, 32px);
+}
+
+.mm-layout-gap-sm {
+  gap: var(--mm-layout-gap-sm, 8px);
+}
+
 .hide {
   display: none !important;
 }
@@ -927,6 +1018,51 @@ textarea.materialize-textarea::-ms-input-placeholder {
   color: var(--mm-text-hint, #d1d1d1) !important;
 }
 
+.input-field input.number-input:not(.browser-default) {
+  -moz-appearance: textfield;
+  padding-right: 2rem;
+}
+.input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input-field .number-input-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 3rem;
+}
+.input-field .number-input-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--mm-button-flat-text, #ee6e73);
+  cursor: pointer;
+  line-height: 1;
+}
+.input-field .number-input-control:hover {
+  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+}
+.input-field .number-input-control:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: -2px;
+}
+.input-field .number-input-control svg {
+  font-size: 1.25rem;
+  line-height: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 /* Validation Sass Placeholders */
 .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]),
@@ -1403,6 +1539,63 @@ select:disabled {
   user-select: none;
 }
 
+.input-field.select-space.select-appearance-outlined {
+  position: relative;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons {
+  position: absolute;
+  left: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons + .select-wrapper {
+  padding-left: 54px;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix ~ .select-wrapper {
+  margin-left: 0;
+  width: 100%;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper {
+  border: 1px solid var(--mm-input-border, #9e9e9e);
+  border-radius: 8px;
+  background-color: var(--mm-surface-color, transparent);
+  padding: 0 12px;
+  min-height: var(--mm-input-height, 3rem);
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper:focus-within {
+  border-color: var(--mm-primary-color, #2196f3);
+  box-shadow: 0 0 0 1px var(--mm-primary-color, #2196f3);
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper input.select-dropdown {
+  border-bottom: none;
+  margin: 0;
+  width: auto;
+  flex: 1 1 auto;
+  height: var(--mm-input-height, 3rem);
+  line-height: var(--mm-input-height, 3rem);
+  padding-right: 24px;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .select-inline-label {
+  color: var(--mm-text-hint, #9e9e9e);
+  font-size: 16px;
+  margin-right: 8px;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .caret {
+  right: 10px;
+  z-index: 2;
+  pointer-events: none;
+}
+
 .select-wrapper i {
   color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
@@ -1518,6 +1711,24 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   cursor: default;
 }
 
+.search-select-loading-info,
+.search-select-error-info {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+}
+.search-select-loading-info:hover,
+.search-select-error-info:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.dropdown-content li.search-select-error-info {
+  color: var(--mm-error-color, #f44336) !important;
+}
+
 .search-select-option-label {
   display: flex;
   align-items: center;
@@ -1891,7 +2102,7 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: var(--mm-switch-checked-track, rgb(132.0625, 199.4375, 193.12109375));
+  background-color: var(--mm-switch-checked-track, rgb(51.7892156863%, 78.2107843137%, 75.7337622549%));
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
   left: 18px;
@@ -2215,7 +2426,7 @@ input[type=range]::-ms-thumb {
 .single-range-slider .thumb .value-tooltip {
   position: absolute;
   background: var(--mm-primary-color, #26a69a);
-  color: white;
+  color: var(--mm-range-value-text, #000);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
@@ -2370,7 +2581,7 @@ input[type=range]::-ms-thumb {
 .double-range-slider .thumb .value {
   position: absolute;
   background: var(--mm-primary-color, #26a69a);
-  color: white;
+  color: var(--mm-range-value-text, #000);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 12px;
@@ -2480,7 +2691,7 @@ input[type=range]::-ms-thumb {
   /* Create columns that are at least 150px wide and fill the available space */
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   /* Add space between grid items */
-  gap: 15px;
+  gap: var(--mm-layout-gap-form, 15px);
   padding-top: 10px;
   padding-bottom: 20px;
 }
@@ -2499,6 +2710,70 @@ input[type=range]::-ms-thumb {
   text-align: initial;
 }
 
+.mm-fieldset {
+  border: 1px solid var(--mm-border-color);
+  border-radius: 4px;
+  margin: 0 0 1.5rem;
+  padding: 1rem;
+}
+
+.mm-fieldset__legend {
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0 0.35rem;
+}
+
+.mm-fieldset__required,
+.mm-fieldset__error,
+.mm-validation-summary {
+  color: var(--mm-error-color);
+}
+
+.mm-fieldset__description,
+.mm-form-section__description {
+  color: var(--mm-text-secondary);
+  margin: 0 0 1rem;
+}
+
+.mm-fieldset__error {
+  margin: 0.75rem 0 0;
+}
+
+.mm-form-section {
+  margin-bottom: 2rem;
+}
+
+.mm-form-section__header {
+  margin-bottom: 1rem;
+}
+
+.mm-form-section__title {
+  font-size: 1.3rem;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary {
+  background: color-mix(in srgb, var(--mm-error-color) 10%, transparent);
+  border-left: 4px solid var(--mm-error-color);
+  margin: 0 0 1.25rem;
+  padding: 0.8rem 1rem;
+}
+
+.mm-validation-summary__title {
+  font-weight: 600;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary__list {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+.mm-validation-summary a {
+  color: inherit;
+  text-decoration: underline;
+}
+
 .file-upload-container {
   margin-bottom: 1rem;
 }