mithril-materialized 1.4.2 → 2.0.0-beta.10

package/sass/components/_wizard.scss

@@ -0,0 +1,416 @@
+// Wizard/Stepper Component Styles
+
+.wizard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  
+  &.horizontal {
+    .wizard-steps {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      position: relative;
+    }
+    
+    .wizard-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      flex: 1;
+      position: relative;
+      
+      &:not(:last-child) {
+        margin-right: 2rem;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0.75rem;
+      max-width: 200px;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 20px;
+      left: calc(50% + 20px);
+      width: calc(100% - 40px);
+      height: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+  
+  &.vertical {
+    .wizard-steps {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .wizard-step {
+      display: flex;
+      align-items: flex-start;
+      text-align: left;
+      position: relative;
+      padding-bottom: 2rem;
+      
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-left: 1rem;
+      flex: 1;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 40px;
+      left: 19px;
+      bottom: -2rem;
+      width: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+}
+
+.wizard-header {
+  margin-bottom: 2rem;
+}
+
+.wizard-step {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  &:hover:not(.disabled) {
+    .wizard-step-indicator {
+      box-shadow: 0 0 0 8px var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    }
+  }
+}
+
+.wizard-step-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 2;
+  
+  .material-icons {
+    font-size: 1.25rem;
+  }
+  
+  .wizard-step-number {
+    font-weight: 600;
+  }
+}
+
+.wizard-step.active {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-title {
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    font-weight: 600;
+  }
+}
+
+.wizard-step.completed {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-connector {
+    background: var(--mm-primary-color, #26a69a);
+  }
+}
+
+.wizard-step.error {
+  .wizard-step-indicator {
+    background: #f44336;
+    color: #ffffff;
+  }
+  
+  .wizard-step-title {
+    color: #f44336;
+  }
+}
+
+.wizard-step-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+
+.wizard-step-subtitle {
+  font-size: 0.75rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.wizard-step-optional {
+  font-size: 0.625rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wizard-body {
+  flex: 1;
+  margin-bottom: 2rem;
+  
+  // Ensure form elements have proper responsive layout
+  .input-field {
+    margin-bottom: 1.5rem;
+    
+    input, textarea {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    
+    label {
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+      transition: all 0.3s ease;
+      
+      &.active {
+        color: var(--mm-primary-color, #26a69a);
+        transform: translateY(-14px) scale(0.8);
+      }
+    }
+  }
+  
+  .row {
+    margin-bottom: 0;
+    
+    .col {
+      padding: 0 0.75rem;
+      
+      &:first-child {
+        padding-left: 0;
+      }
+      
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.wizard-step-panel {
+  animation: wizard-slide-in 0.3s ease;
+}
+
+@keyframes wizard-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.wizard-footer {
+  border-top: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  padding-top: 1.5rem;
+}
+
+.wizard-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  
+  .wizard-btn-previous,
+  .wizard-btn-skip {
+    margin-right: auto;
+  }
+  
+  .wizard-btn-next,
+  .wizard-btn-complete {
+    margin-left: auto;
+    
+    .material-icons {
+      margin-right: 0.5rem;
+      animation: wizard-loading 1s infinite linear;
+    }
+  }
+}
+
+@keyframes wizard-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Compact variant
+.wizard.compact {
+  .wizard-step-indicator {
+    width: 32px;
+    height: 32px;
+    font-size: 0.75rem;
+    
+    .material-icons {
+      font-size: 1rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 0.75rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.625rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 1.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 16px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 32px;
+      left: 15px;
+    }
+  }
+}
+
+// Large variant
+.wizard.large {
+  .wizard-step-indicator {
+    width: 48px;
+    height: 48px;
+    font-size: 1rem;
+    
+    .material-icons {
+      font-size: 1.5rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 1rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.875rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 2.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 24px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 48px;
+      left: 23px;
+    }
+  }
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  .wizard.horizontal {
+    .wizard-steps {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    
+    .wizard-step {
+      flex-direction: row;
+      align-items: center;
+      text-align: left;
+      margin-right: 0;
+      margin-bottom: 1rem;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0;
+      margin-left: 1rem;
+      max-width: none;
+    }
+    
+    .wizard-step-connector {
+      display: none;
+    }
+  }
+}
+
+// Dark theme adjustments
+[data-theme="dark"] {
+  .wizard-step.error {
+    .wizard-step-title {
+      color: #f48fb1;
+    }
+    
+    .wizard-step-indicator {
+      background: #f48fb1;
+      color: #000000;
+    }
+  }
+  
+  .wizard-footer {
+    border-color: var(--mm-border-color, rgba(255, 255, 255, 0.12));
+  }
+}
+
+// Accessibility improvements
+.wizard-step {
+  &:focus {
+    outline: 2px solid var(--mm-primary-color, #26a69a);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  
+  &[aria-disabled="true"] {
+    pointer-events: none;
+  }
+}
+
+.wizard-step-indicator {
+  &[aria-current="step"] {
+    box-shadow: 0 0 0 4px var(--mm-primary-color-light, rgba(38, 166, 154, 0.2));
+  }
+}

package/sass/components/forms/_checkboxes.scss

@@ -0,0 +1,203 @@
+@use "../variables";
+
+/* Checkboxes
+   ========================================================================== */
+
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// Checkbox Styles
+[type="checkbox"] {
+  // Text Label Style
+  + span:not(.lever) {
+    position: relative;
+    padding-left: 35px;
+    cursor: pointer;
+    display: inline-block;
+    height: 25px;
+    line-height: 25px;
+    font-size: 1rem;
+    user-select: none;
+  }
+
+  /* checkbox aspect */
+  + span:not(.lever):before,
+  &:not(.filled-in) + span:not(.lever):after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 18px;
+    z-index: 0;
+    border: 2px solid variables.$radio-empty-color;
+    border-radius: 1px;
+    margin-top: 3px;
+    transition: .2s;
+  }
+
+  &:not(.filled-in) + span:not(.lever):after {
+    border: 0;
+    transform: scale(0);
+  }
+
+  &:not(:checked):disabled + span:not(.lever):before {
+    border: none;
+    background-color: variables.$input-disabled-color;
+  }
+
+  // Focused styles
+  &.tabbed:focus + span:not(.lever):after {
+    transform: scale(1);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 10px rgba(0,0,0,.1);
+    background-color: rgba(0,0,0,.1);
+  }
+}
+
+[type="checkbox"]:checked {
+  + span:not(.lever):before {
+    top: -4px;
+    left: -5px;
+    width: 12px;
+    height: 22px;
+    border-top: 2px solid transparent;
+    border-left: 2px solid transparent;
+    border-right: variables.$radio-border;
+    border-bottom: variables.$radio-border;
+    transform: rotate(40deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
+  }
+
+  &:disabled + span:before {
+    border-right: 2px solid variables.$input-disabled-color;
+    border-bottom: 2px solid variables.$input-disabled-color;
+  }
+}
+
+/* Indeterminate checkbox */
+[type="checkbox"]:indeterminate {
+  + span:not(.lever):before {
+    top: -11px;
+    left: -12px;
+    width: 10px;
+    height: 22px;
+    border-top: none;
+    border-left: none;
+    border-right: variables.$radio-border;
+    border-bottom: none;
+    transform: rotate(90deg);
+    backface-visibility: hidden;
+    transform-origin: 100% 100%;
+  }
+
+  // Disabled indeterminate
+  &:disabled + span:not(.lever):before {
+    border-right: 2px solid variables.$input-disabled-color;
+    background-color: transparent;
+  }
+}
+
+// Filled in Style
+[type="checkbox"].filled-in {
+  // General
+  + span:not(.lever):after {
+    border-radius: 2px;
+  }
+
+  + span:not(.lever):before,
+  + span:not(.lever):after {
+    content: '';
+    left: 0;
+    position: absolute;
+    /* .1s delay is for check animation */
+    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
+    z-index: 1;
+  }
+
+  // Unchecked style
+  &:not(:checked) + span:not(.lever):before {
+    width: 0;
+    height: 0;
+    border: 3px solid transparent;
+    left: 6px;
+    top: 10px;
+    transform: rotateZ(37deg);
+    transform-origin: 100% 100%;
+  }
+
+  &:not(:checked) + span:not(.lever):after {
+    height: 20px;
+    width: 20px;
+    background-color: transparent;
+    border: 2px solid variables.$radio-empty-color;
+    top: 0px;
+    z-index: 0;
+  }
+
+  // Checked style
+  &:checked {
+    + span:not(.lever):before {
+      top: 0;
+      left: 1px;
+      width: 8px;
+      height: 13px;
+      border-top: 2px solid transparent;
+      border-left: 2px solid transparent;
+      border-right: 2px solid variables.$input-background;
+      border-bottom: 2px solid variables.$input-background;
+      transform: rotateZ(37deg);
+      transform-origin: 100% 100%;
+    }
+
+    + span:not(.lever):after {
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border: 2px solid variables.$secondary-color;
+      background-color: variables.$secondary-color;
+      z-index: 0;
+    }
+  }
+
+  // Focused styles
+  &.tabbed:focus + span:not(.lever):after {
+    border-radius: 2px;
+    border-color: variables.$radio-empty-color;
+    background-color: rgba(0,0,0,.1);
+  }
+
+  &.tabbed:checked:focus + span:not(.lever):after {
+    border-radius: 2px;
+    background-color: variables.$secondary-color;
+    border-color: variables.$secondary-color;
+  }
+
+  // Disabled style
+  &:disabled:not(:checked) + span:not(.lever):before {
+    background-color: transparent;
+    border: 2px solid transparent;
+  }
+
+  &:disabled:not(:checked) + span:not(.lever):after {
+    border-color: transparent;
+    background-color: variables.$input-disabled-solid-color;
+  }
+
+  &:disabled:checked + span:not(.lever):before {
+    background-color: transparent;
+  }
+
+  &:disabled:checked + span:not(.lever):after {
+    background-color: variables.$input-disabled-solid-color;
+    border-color: variables.$input-disabled-solid-color;
+  }
+}
+

package/sass/components/forms/_file-input.scss

@@ -0,0 +1,50 @@
+@use "../variables";
+
+/* File Input
+   ========================================================================== */
+
+.file-field {
+  position: relative;
+
+  .file-path-wrapper {
+    overflow: hidden;
+    padding-left: 10px;
+  }
+
+  input.file-path { width: 100%; }
+
+  .btn {
+    float: left;
+    height: variables.$input-height;
+    line-height: variables.$input-height;
+  }
+
+  span {
+    cursor: pointer;
+  }
+
+  input[type=file] {
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+  }
+
+  & .close {
+    height: 20px;
+  }
+}

package/sass/components/forms/_form-groups.scss

@@ -0,0 +1,28 @@
+@use "../variables";
+
+/* Shared styles for form groups (Options and RadioButtons components) */
+
+/* New grid-based style for horizontal and consistent alignment */
+.grid-container {
+  display: grid;
+  /* 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;
+  padding-top: 10px;
+  padding-bottom: 20px;
+}
+
+/* The paragraph elements don't need margin anymore as gap handles it */
+.grid-container p {
+  margin: 0;
+}
+
+.form-group-label {
+  font-size: variables.$label-font-size;
+  color: variables.$input-border-color;
+  margin-bottom: 15px;
+  display: block;
+  cursor: text;
+  text-align: initial;
+}

package/sass/components/forms/_forms.scss

@@ -0,0 +1,24 @@
+@use "../variables";
+@use "input-fields";
+@use "radio-buttons";
+@use "checkboxes";
+@use "switches";
+@use "select";
+@use "file-input";
+@use "range";
+@use "form-groups";
+
+// Remove Focus Boxes
+select:focus {
+  outline: variables.$select-focus;
+}
+
+button:focus {
+  outline: none;
+  background-color: variables.$button-background-focus;
+}
+
+label {
+  font-size: variables.$label-font-size;
+  color: variables.$input-border-color;
+}