mtrl 0.2.6 → 0.2.8

package/src/styles/components/_timepicker.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;
+  }
+}

package/src/styles/components/_top-app-bar.scss

@@ -0,0 +1,225 @@
+// src/components/top-app-bar/_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}-top-app-bar';
+
+.#{$component} {
+  // Core Properties
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: t.color('surface');
+  
+  // Default type (small) - 64dp height as per specs
+  height: 64px;
+  padding: 0 16px;
+  
+  // Apply transition for scroll behavior
+  transition: 
+    box-shadow 0.3s ease-in-out,
+    background-color 0.3s ease-in-out,
+    height 0.3s ease-in-out;
+  
+  // Container for the headline
+  &-headline {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    @include m.typography('title-large');
+    color: t.color('on-surface');
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: 
+      font-size 0.3s ease-in-out,
+      margin 0.3s ease-in-out,
+      padding 0.3s ease-in-out;
+  }
+  
+  // Leading section (usually navigation icon)
+  &-leading {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+  }
+  
+  // Trailing section (usually action icons)
+  &-trailing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+  
+  // Center-aligned top app bar
+  &--center {
+    .#{$component}-headline {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      flex: 0;
+    }
+  }
+  
+  // Medium top app bar - 112dp height
+  &--medium {
+    height: 112px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0;
+    
+    .#{$component}-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px;
+      
+      &:first-child {
+        margin-top: 20px;
+      }
+    }
+    
+    .#{$component}-headline {
+      margin-bottom: 24px;
+      margin-left: 16px;
+      @include m.typography('headline-small');
+    }
+  }
+  
+  // Large top app bar - 152dp height
+  &--large {
+    height: 152px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0;
+    
+    .#{$component}-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px;
+      
+      &:first-child {
+        margin-top: 20px;
+      }
+    }
+    
+    .#{$component}-headline {
+      margin-bottom: 28px;
+      margin-left: 16px;
+      @include m.typography('headline-medium');
+    }
+  }
+  
+  // States for on-scroll behavior
+  &--scrolled {
+    background-color: t.color('surface-container');
+    @include m.elevation(1);
+    
+    // Compress medium and large variants to small on scroll if compressible
+    &.#{$component}--medium.#{$component}--compressible,
+    &.#{$component}--large.#{$component}--compressible {
+      height: 64px;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 16px;
+      
+      .#{$component}-row {
+        display: none;
+      }
+      
+      .#{$component}-headline {
+        margin: 0;
+        @include m.typography('title-large');
+      }
+      
+      // Fix for headline that is inside row in medium/large
+      .#{$component}-row:nth-child(2) {
+        display: flex;
+        flex: 1;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+  
+  // RTL Support
+  [dir="rtl"] & {
+    .#{$component}-leading {
+      margin-right: 0;
+      margin-left: 24px;
+    }
+    
+    .#{$component}-trailing {
+      margin-left: 0;
+      margin-right: auto;
+    }
+    
+    &--medium,
+    &--large {
+      .#{$component}-headline {
+        margin-left: 0;
+        margin-right: 16px;
+      }
+    }
+    
+    &--center {
+      .#{$component}-headline {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%);
+      }
+    }
+  }
+  
+  // Mobile screen adjustments
+  @media (max-width: map.get(v.$breakpoints, 'sm')) {
+    // Reduce side padding slightly on small screens
+    padding: 0 12px;
+    
+    .#{$component}-leading {
+      margin-right: 16px;
+    }
+    
+    .#{$component}-trailing {
+      gap: 4px;
+    }
+    
+    // Make icon buttons slightly smaller
+    .#{$component}-leading,
+    .#{$component}-trailing {
+      button {
+        padding: 8px;
+      }
+    }
+  }
+  
+  // Reduced motion support
+  @include m.reduced-motion {
+    transition-duration: 0.01ms;
+    
+    .#{$component}-headline {
+      transition-duration: 0.01ms;
+    }
+  }
+  
+  // High contrast mode support
+  @include m.high-contrast {
+    border-bottom: 1px solid currentColor;
+  }
+}