mtrl 0.3.8 → 0.4.0

package/src/styles/components/_timepicker.scss

@@ -1,451 +0,0 @@
-// 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/_tooltip.scss

@@ -1,241 +0,0 @@
-// src/components/tooltip/_styles.scss
-@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}-tooltip';
-$arrow-size: 8px;
-
-.#{$component} {
-  // Base styles
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  max-width: 200px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background-color: t.color('inverse-surface');
-  color: t.color('inverse-on-surface');
-  font-size: 12px;
-  line-height: 16px;
-  text-align: center;
-  pointer-events: none;
-  opacity: 0;
-  transform: scale(0.9);
-  transform-origin: center;
-  box-sizing: border-box;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  
-  // Typography
-  @include m.typography('body-small');
-  font-weight: 500;
-  
-  // Transition
-  transition:
-    opacity 150ms cubic-bezier(0, 0, 0.2, 1),
-    transform 150ms cubic-bezier(0, 0, 0.2, 1);
-  
-  // States
-  &--visible {
-    opacity: 0.9;
-    transform: scale(1);
-  }
-  
-  // Variants
-  
-  // Default variant
-  &--default {
-    // Default styles already applied in base
-  }
-  
-  // Rich variant (for rich content)
-  &--rich {
-    text-align: left;
-    padding: 8px 12px;
-  }
-  
-  // Plain variant (flat, no shadow)
-  &--plain {
-    background-color: t.color('surface-container-high');
-    color: t.color('on-surface');
-    box-shadow: none;
-    border: 1px solid t.color('outline');
-  }
-  
-  // Arrow styles
-  &__arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: $arrow-size solid transparent;
-    pointer-events: none;
-    
-    // Top position (arrow points up)
-    &--top {
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-bottom-color: t.color('inverse-surface');
-      border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Top-start position
-    &--top-start {
-      bottom: 100%;
-      left: $arrow-size;
-      border-bottom-color: t.color('inverse-surface');
-      border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Top-end position
-    &--top-end {
-      bottom: 100%;
-      right: $arrow-size;
-      border-bottom-color: t.color('inverse-surface');
-      border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Bottom position (arrow points down)
-    &--bottom {
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-top-color: t.color('inverse-surface');
-      border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Bottom-start position
-    &--bottom-start {
-      top: 100%;
-      left: $arrow-size;
-      border-top-color: t.color('inverse-surface');
-      border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Bottom-end position
-    &--bottom-end {
-      top: 100%;
-      right: $arrow-size;
-      border-top-color: t.color('inverse-surface');
-      border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Left position (arrow points left)
-    &--left {
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-right-color: t.color('inverse-surface');
-      border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Left-start position
-    &--left-start {
-      right: 100%;
-      top: $arrow-size;
-      border-right-color: t.color('inverse-surface');
-      border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Left-end position
-    &--left-end {
-      right: 100%;
-      bottom: $arrow-size;
-      border-right-color: t.color('inverse-surface');
-      border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Right position (arrow points right)
-    &--right {
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-left-color: t.color('inverse-surface');
-      border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Right-start position
-    &--right-start {
-      left: 100%;
-      top: $arrow-size;
-      border-left-color: t.color('inverse-surface');
-      border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
-    }
-    
-    // Right-end position
-    &--right-end {
-      left: 100%;
-      bottom: $arrow-size;
-      border-left-color: t.color('inverse-surface');
-      border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
-    }
-  }
-  
-  // Positioning classes
-  &--top {
-    margin-bottom: $arrow-size;
-  }
-  
-  &--bottom {
-    margin-top: $arrow-size;
-  }
-  
-  &--left {
-    margin-right: $arrow-size;
-  }
-  
-  &--right {
-    margin-left: $arrow-size;
-  }
-}