mtrl 0.5.2 → 0.5.4

package/src/styles/components/_checkbox.scss

@@ -0,0 +1,231 @@
+// src/components/checkbox/_checkbox.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}-checkbox';
+
+.#{$component} {
+  // Base styles
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  min-height: 40px;
+  padding: 4px 0;
+  user-select: none;
+
+  // Input (visually hidden but accessible)
+  &-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // Focus indicator
+    &:focus-visible ~ .#{$component}-icon {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+  }
+
+  // Checkbox visual element
+  &-icon {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    border-radius: f.get-shape('tiny');
+    background-color: t.color('surface-container-highest');
+    border: 2px solid t.color('outline');
+    @include m.motion-transition(background-color, border-color);
+
+    // Check mark icon
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 18px;
+      height: 18px;
+      transform: translate(-50%, -50%) scale(0);
+      fill: currentColor;
+      color: t.color('on-primary');
+      transition: transform v.motion('duration-short4') v.motion('easing-emphasized');
+    }
+  }
+
+  // Label styling
+  &-label {
+    @include m.typography('body-large');
+    margin-left: 12px;
+    color: t.color('on-surface');
+  }
+
+  // Label position variants
+  &--label-start {
+    .#{$component}-label {
+      margin-left: 0;
+      margin-right: 12px;
+    }
+  }
+
+  &--label-end {
+    flex-direction: row;
+
+    .#{$component}-label {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+  }
+
+  // RTL support
+  @include m.rtl {
+    &--label-start {
+      .#{$component}-label {
+        margin-left: 12px;
+        margin-right: 0;
+      }
+    }
+
+    &--label-end {
+      .#{$component}-label {
+        margin-left: 0;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  // Checked state
+  .#{$component}-input:checked ~ .#{$component}-icon {
+    background-color: t.color('primary');
+    border-color: t.color('primary');
+
+    svg {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  // Indeterminate state
+  &--indeterminate {
+    .#{$component}-icon {
+      background-color: t.color('primary');
+      border-color: t.color('primary');
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 10px;
+        height: 2px;
+        background-color: t.color('on-primary');
+      }
+
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    opacity: 0.38;
+    
+    .#{$component}-input {
+      cursor: not-allowed;
+    }
+  }
+
+  // Outlined variant
+  &--outlined {
+    .#{$component}-icon {
+      background-color: transparent;
+    }
+
+    .#{$component}-input:checked ~ .#{$component}-icon {
+      background-color: transparent;
+      border-color: t.color('primary');
+
+      svg {
+        color: t.color('primary');
+      }
+    }
+
+    &.#{$component}--indeterminate {
+      .#{$component}-icon::after {
+        background-color: t.color('primary');
+      }
+    }
+  }
+
+  // State layer effects
+  &:not(&--disabled) {
+    // Common state layer structure
+    .#{$component}-input:hover ~ .#{$component}-icon::before,
+    .#{$component}-input:active ~ .#{$component}-icon::before {
+      content: '';
+      position: absolute;
+      top: -12px;
+      left: -12px;
+      right: -12px;
+      bottom: -12px;
+      border-radius: 50%;
+      background-color: t.color('on-surface');
+    }
+    
+    // Hover state
+    .#{$component}-input:hover ~ .#{$component}-icon::before {
+      opacity: v.state('hover-state-layer-opacity');
+
+    }
+
+    // Hover checked state
+    .#{$component}-input:checked:hover ~ .#{$component}-icon::before {
+      opacity: v.state('pressed-state-layer-opacity');
+      background-color: t.color('primary');
+    }
+    // Active/pressed state
+    .#{$component}-input:active ~ .#{$component}-icon::before {
+      opacity: v.state('pressed-state-layer-opacity');
+      background-color: t.color('on-surface');
+    }
+  }
+
+  // Accessibility
+  @include m.reduced-motion {
+    .#{$component}-icon,
+    .#{$component}-icon svg {
+      transition: none;
+    }
+  }
+
+  @include m.high-contrast {
+    .#{$component}-icon {
+      border-width: 2px;
+    }
+  }
+  
+  // Touch target
+  // @include m.touch-target;
+}
+
+// Checkbox group layout
+.#{$component}-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  
+  &--horizontal {
+    flex-direction: row;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+}