mtrl 0.2.5 → 0.2.7

package/src/components/timepicker/_styles.scss

@@ -0,0 +1,451 @@
+// src/components/timepicker/_styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-time-picker';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-block;
+  
+  &-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: map.get(v.$z-index, 'modal');
+    opacity: 0;
+    transition: opacity 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
+    
+    &.active {
+      opacity: 1;
+    }
+  }
+  
+  &-dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 280px;
+    max-width: 328px;
+    max-height: 520px;
+    background-color: t.color('surface-container-high');
+    color: t.color('on-surface');
+    border-radius: f.get-shape('extra-large');
+    @include m.elevation(3);
+    transform: translateY(20px) scale(0.9);
+    opacity: 0;
+    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
+    
+    &.active {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+    
+    // State layer for elevations
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      background-color: t.color('surface-tint');
+      opacity: 0.05;
+      pointer-events: none;
+    }
+    
+    // Orientations
+    &--vertical {
+      // min-height: 460px;
+      
+      .#{$component}-input-container {
+        flex-direction: row;
+      }
+      
+      .#{$component}-period {
+        flex-direction: column;
+        width: 52px;
+        height: 80px;
+        margin-left: 12px;
+      }
+    }
+    
+    &--horizontal {
+      min-width: 520px;
+      min-height: 360px;
+      
+      .#{$component}-content {
+        flex-direction: row;
+        align-items: center;
+      }
+      
+      .#{$component}-input-container {
+        flex-direction: row;
+      }
+      
+      .#{$component}-period {
+        flex-direction: column;
+        width: 52px;
+        height: 80px;
+        margin-left: 12px;
+      }
+      
+      .#{$component}-dial {
+        margin-left: 24px;
+      }
+    }
+    
+    // Time formats
+    &--24h {
+      .#{$component}-period {
+        display: none;
+      }
+    }
+  }
+  
+  // Title
+  &-title {
+    padding: 24px 24px 16px;
+    @include m.typography('title-small');
+    color: t.color('on-surface-variant');
+  }
+  
+  // Content container
+  &-content {
+    flex: 1;
+    padding: 0 24px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  // Input container for both modes
+  &-input-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0 24px 0;
+  }
+  
+  // Input field containers
+  &-time-input-field {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  // Time input styles - shared for both modes
+  &-hours,
+  &-minutes,
+  &-seconds {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 96px;
+    height: 80px;
+    font-size: 3.5rem;
+    font-weight: 400;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    
+    &[data-active="true"] {
+      color: t.color('primary');
+    }
+    
+    // Style for HTML input elements
+    &[type="number"] {
+      font-size: 3.5rem;
+      font-weight: 400;
+      width: 96px;
+      height: 76px;
+      text-align: center;
+      border: none;
+      background-color: t.color('surface-container-highest');
+      border-radius: f.get-shape('small');
+      padding: 0;
+      margin: 0;
+      color: t.color('on-surface');
+      
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px t.color('primary');
+      }
+      
+      // Remove spinner arrows
+      -moz-appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+    
+    // When in dial mode, add highlighting for active element
+    &:not([type="number"]) {
+      &[data-active="true"] {
+        color: t.color('primary');
+        background-color: t.alpha('primary', 0.1);
+        border-radius: f.get-shape('small');
+      }
+      
+      &:hover {
+        background-color: t.alpha('on-surface', 0.04);
+        border-radius: f.get-shape('small');
+      }
+    }
+  }
+  
+  // Separator between hours, minutes, seconds
+  &-separator {
+    font-size: 3.5rem;
+    font-weight: 400;
+    margin: 0 4px;
+    color: t.color('on-surface-variant');
+  }
+  
+  // Period selector (AM/PM)
+  &-period {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: t.color('surface-container-highest');
+    border-radius: f.get-shape('small');
+    overflow: hidden;
+    border: 1px solid t.color('outline-variant');
+    margin-left: 16px;
+    
+    &-am,
+    &-pm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 50%;
+      padding: 8px;
+      cursor: pointer;
+      @include m.typography('title-medium');
+      
+      // Improve touch target sizes on mobile
+      @media (max-width: 599px) {
+        min-height: 48px;
+      }
+      
+      // Improve focus styles for keyboard navigation
+      &:focus-visible {
+        outline: 2px solid t.color('primary');
+        outline-offset: 2px;
+      }
+      
+      &:hover {
+        background-color: t.alpha('on-surface', 0.08);
+      }
+      
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    &--selected {
+      background-color: t.color('primary-container');
+      color: t.color('on-primary-container');
+      
+      &:hover {
+        background-color: t.color('primary-container');
+      }
+    }
+  }
+  
+  // Clock dial
+  &-dial {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 0 auto 24px;
+    width: 256px;
+    height: 256px;
+    
+    &-canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      cursor: pointer;
+      touch-action: none; // Prevent scrolling when touching the canvas
+      -webkit-tap-highlight-color: transparent; // Remove highlight on tap (mobile)
+      
+      // Add transition for smooth animations
+      transition: transform 0.2s ease;
+      
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px t.color('primary');
+      }
+    }
+  }
+  
+  // Actions footer
+  &-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px 24px;
+  }
+  
+  &-toggle-type {
+    background: transparent;
+    border: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    color: t.color('on-surface-variant');
+    
+    // Improve touch target sizes on mobile
+    @media (max-width: 599px) {
+      min-height: 48px;
+      min-width: 48px;
+    }
+    
+    // Improve focus styles for keyboard navigation
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:active {
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+  }
+  
+  &-action-buttons {
+    display: flex;
+    gap: 8px;
+  }
+  
+  &-cancel,
+  &-confirm {
+    padding: 10px 12px;
+    border: none;
+    background: transparent;
+    border-radius: f.get-shape('small');
+    cursor: pointer;
+    @include m.typography('label-large');
+    color: t.color('primary');
+    
+    // Improve touch target sizes on mobile
+    @media (max-width: 599px) {
+      min-height: 48px;
+      padding: 12px 16px;
+    }
+    
+    // Improve focus styles for keyboard navigation
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+    
+    &:hover {
+      background-color: t.alpha('primary', 0.08);
+    }
+    
+    &:active {
+      background-color: t.alpha('primary', 0.12);
+    }
+  }
+  
+  // Responsive adjustments
+  @media (max-width: 599px) {
+    &-dialog {
+      width: 100%;
+      max-width: 100%;
+      min-height: 460px;
+      border-radius: 0;
+      margin: 0;
+      
+      &--horizontal {
+        flex-direction: column;
+        
+        .#{$component}-content {
+          flex-direction: column;
+        }
+        
+        .#{$component}-dial {
+          margin-left: 0;
+        }
+      }
+    }
+    
+    &-input-container {
+      margin: 16px 0;
+    }
+    
+    // Smaller inputs on mobile
+    &-hours,
+    &-minutes,
+    &-seconds {
+      width: 80px;
+      height: 76px;
+      font-size: 3rem;
+      
+      &[type="number"] {
+        width: 80px;
+        height: 76px;
+        font-size: 3rem;
+      }
+    }
+  }
+  
+  // Dark mode adjustments
+  @media (prefers-color-scheme: dark) {
+    &-dialog {
+      &::before {
+        opacity: 0.08;
+      }
+    }
+    
+    &-hours,
+    &-minutes,
+    &-seconds {
+      &[type="number"] {
+        background-color: t.alpha('on-surface', 0.05);
+      }
+    }
+  }
+  
+  // Accessibility
+  &-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}