mtrl 0.2.2 → 0.2.4

package/src/components/slider/_styles.scss

@@ -0,0 +1,518 @@
+// src/components/slider/_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}-slider';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  
+  &-track {
+    position: relative;
+    width: 100%;
+    padding: 0 4px;
+    height: 16px;
+    background-color: transparent;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    
+    // Disabled state
+    .#{$component}--disabled & {
+      opacity: 0.38;
+      cursor: not-allowed;
+    }
+  }
+  
+  // Start track (new element for range slider - beginning to first thumb)
+  &-start-track {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: t.color('primary');
+    transform-origin: left center;
+    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
+    border-radius: 5px;
+    opacity: 0.24;
+    z-index: 1;
+    
+    .#{$component}--secondary & {
+      background-color: t.color('secondary');
+    }
+    
+    .#{$component}--tertiary & {
+      background-color: t.color('tertiary');
+    }
+    
+    .#{$component}--error & {
+      background-color: t.color('error');
+    }
+    
+    .#{$component}--disabled & {
+      opacity: 0.12;
+    }
+  }
+  
+  // Active track (filled part)
+  &-active-track {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: t.color('primary');
+    transform-origin: left center;
+    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
+    border-radius: 5px;
+    z-index: 1;
+
+    .#{$component}--secondary & {
+      background-color: t.color('secondary');
+    }
+    
+    .#{$component}--tertiary & {
+      background-color: t.color('tertiary');
+    }
+    
+    .#{$component}--error & {
+      background-color: t.color('error');
+    }
+  }
+  
+  // Remaining track (unfilled part) - new for MD3
+  &-remaining-track {
+    opacity: .24;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: t.color('primary');
+    transform-origin: left center;
+    // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
+    border-radius: 5px;
+    width: 100%;
+    z-index: 0;
+    
+    .#{$component}--secondary & {
+      background-color: t.color('secondary');
+    }
+    
+    .#{$component}--tertiary & {
+      background-color: t.color('tertiary');
+    }
+    
+    .#{$component}--error & {
+      background-color: t.color('error');
+    }
+    
+    .#{$component}--disabled & {
+      opacity: 0.12;
+    }
+  }
+  
+  // Dot elements for track ends (separate from thumbs)
+  &-dot {
+    pointer-events: none;
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: t.color('primary');
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    
+    // Start dot
+    &--start {
+      left: 4px;
+    }
+    
+    // End dot
+    &--end {
+      right: 4px;
+    }
+    
+    // Color variants
+    .#{$component}--secondary & {
+      background-color: t.color('secondary');
+    }
+    
+    .#{$component}--tertiary & {
+      background-color: t.color('tertiary');
+    }
+    
+    .#{$component}--error & {
+      background-color: t.color('error');
+    }
+    
+    // Disabled state
+    .#{$component}--disabled & {
+      opacity: 0.38;
+    }
+  }
+  
+  // Thumb - updated to MD3 style with T-shape
+  &-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 2;
+    // transition: left 0.1s ease, bottom 0.1s ease;
+    width: 16px;
+    height: 100%;
+
+    // Create a T-shaped thumb using pseudo-elements
+    &::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 40px;
+      background-color: t.color('primary');
+      border-radius: 2px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: background-color 0.15s ease;
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Enable pointer events on the pseudo-elements
+    &::before, &::after {
+      pointer-events: auto;
+    }
+    
+    // Hover state
+    &:hover::before, &:hover::after {
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Focus state
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus::before, &:focus::after {
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+    }
+    
+    // Active state
+    &:active::before, &:active::after {
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+    }
+    
+    // Disabled state
+    .#{$component}--disabled & {
+      cursor: not-allowed;
+      
+      &::before, &::after {
+        opacity: 0.38;
+        background-color: t.color('on-surface');
+      }
+    }
+  }
+  
+  // Tick marks
+  &-tick {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background-color: t.color('outline');
+    border-radius: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    opacity: 0.6;
+    
+    &:last-child, &:first-child {
+      display: none
+    }
+
+    // Active tick (filled)
+    &--active {
+      background-color: t.alpha('on-primary', 0.38);
+      
+      .#{$component}--secondary & {
+        background-color: t.alpha('on-secondary', 0.38);
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.alpha('on-tertiary', 0.38);
+      }
+      
+      .#{$component}--error & {
+        background-color: t.alpha('on-error', 0.38);
+      }
+    }
+  }
+  
+  // Labels for tick marks
+  &-label {
+    position: absolute;
+    font-size: 12px;
+    color: t.color('on-surface-variant');
+    top: 45px;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    pointer-events: none;
+    font-weight: 500;
+  }
+  
+  // Range slider styles (for two thumbs)
+  &--range {
+    .#{$component}-thumb {
+      &:nth-of-type(1) {
+        z-index: 3;
+      }
+    }
+    
+    // In range mode, both dots should be visible
+    .#{$component}-dot {
+      z-index: 2;
+    }
+  }
+  
+  // Value bubble (shows current value when dragging)
+  &-value {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background-color: t.color('on-surface');
+    color: t.color('surface-container-highest');
+    padding: 6px 10px;
+    border-radius: 21px;
+    font-size: 12px;
+    font-weight: 500;
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+    pointer-events: none;
+    
+    // Show value when dragging
+    &--visible {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.2s ease, visibility 0s;
+    }
+  }
+  
+  // Vertical orientation
+  &--vertical {
+    width: 40px;
+    height: 200px;
+    flex-direction: column;
+    
+    .#{$component}-track {
+      width: 16px;
+      height: 100%;
+      padding: 0;
+    }
+    
+    .#{$component}-active-track {
+      width: 100%;
+      height: auto;
+      transform-origin: bottom center;
+    }
+    
+    .#{$component}-start-track {
+      width: 100%;
+      height: auto;
+      transform-origin: bottom center;
+    }
+    
+    .#{$component}-remaining-track {
+      width: 100%;
+      bottom: auto;
+      top: 0;
+      transform-origin: bottom center;
+    }
+    
+    // Reorient thumb for vertical slider
+    .#{$component}-thumb {
+      &::before {
+        width: 40px;
+        height: 4px;
+      }
+      
+      &::after {
+        width: 16px;
+        height: 16px;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+      }
+      
+      transform: translate(-50%, 50%);
+    }
+    
+    // Dots for vertical orientation
+    .#{$component}-dot {
+      left: 50%;
+      top: auto;
+      transform: translateX(-50%);
+      
+      &--start {
+        bottom: 0;
+      }
+      
+      &--end {
+        top: 0;
+      }
+    }
+    
+    .#{$component}-tick {
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+    
+    .#{$component}-label {
+      top: auto;
+      left: 35px;
+      transform: translateY(50%);
+    }
+    
+    .#{$component}-value {
+      top: auto;
+      left: -55px;
+      transform: translateY(50%);
+    }
+  }
+  
+  // Discrete slider with steps
+  &--discrete {
+    .#{$component}-tick {
+      width: 4px;
+      height: 4px;
+    }
+  }
+  
+  // Sizes
+  &--small {
+    height: 32px;
+    
+    .#{$component}-thumb {
+      &::before {
+        height: 34px;
+      }
+      
+      &::after {
+        width: 14px;
+        height: 14px;
+      }
+    }
+    
+    &.#{$component}--vertical {
+      width: 32px;
+      
+      .#{$component}-thumb {
+        &::before {
+          width: 34px;
+          height: 3px;
+        }
+        
+        &::after {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+  }
+  
+  &--large {
+    height: 48px;
+    
+    .#{$component}-thumb {
+      &::before {
+        height: 48px;
+      }
+      
+      &::after {
+        width: 18px;
+        height: 18px;
+      }
+    }
+    
+    &.#{$component}--vertical {
+      width: 48px;
+      
+      .#{$component}-thumb {
+        &::before {
+          width: 48px;
+          height: 4px;
+        }
+        
+        &::after {
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+  }
+}