mtrl 0.5.2 → 0.5.4

package/src/styles/components/_card.scss

@@ -0,0 +1,401 @@
+// src/components/card/_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}-card';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-radius: f.get-shape('medium'); // Use function for MD3 standard shape
+  background-color: t.color('surface');
+  color: t.color('on-surface');
+  overflow: hidden;
+  width: v.card('width'); // Use card width variable
+  --card-elevation: 0;
+  
+  // Typography - use mixin
+  @include m.typography('body-medium');
+  
+  // Transition for elevation and hover states - use motion-transition mixin
+  @include m.motion-transition(
+    box-shadow,
+    background-color,
+    border-color
+  );
+
+  // Focus outline for accessibility - use focus-ring mixin
+  &:focus-visible {
+    @include m.focus-ring(t.color('secondary'));
+  }
+
+  // Focus state class
+  &--focused {
+    @include m.focus-ring(t.color('secondary'));
+  }
+
+  // Ripple styles for clickable cards
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    pointer-events: none;
+    background-color: currentColor;
+    opacity: f.get-state-opacity('hover'); // Use function for standard opacity
+  }
+  
+  // Ensure proper stacking for inner components
+  > :not(:last-child) {
+    margin-bottom: 0;
+  }
+  
+  // === Variants - use proper theme colors ===
+  
+  // Elevated variant
+  &--elevated {
+    background-color: t.color('surface-container-low');
+    @include m.elevation(1); // Use elevation mixin
+    
+    &:hover.#{$component}--interactive {
+      @include m.elevation(2); // Use elevation mixin for hover state
+    }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed'); // Use state-layer mixin
+    }
+  }
+  
+  // Filled variant
+  &--filled {
+    background-color: t.color('surface-container-highest');
+    @include m.elevation(0); // No elevation
+    
+    &:hover.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+  }
+  
+  // Outlined variant
+  &--outlined {
+    border: 1px solid t.color('outline');
+    background-color: t.color('surface');
+    @include m.elevation(0); // No elevation
+    
+    &:hover.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+      border-color: t.color('outline-variant');
+    }
+
+    &:active.#{$component}--interactive {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+  }
+  
+  // === Modifiers ===
+  
+  // Interactive cards
+  &--interactive {
+    cursor: pointer;
+    user-select: none;
+  }
+  
+  // Full-width cards
+  &--full-width {
+    width: 100%;
+  }
+  
+  // === Sub-components ===
+  
+  // Card Header
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: v.card('padding');
+    padding-bottom: 0;
+
+    &-avatar {
+      margin-right: v.card('padding');
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+    }
+    
+    &-text {
+      flex: 1;
+      overflow: hidden;
+    }
+    
+    &-title {
+      margin: 0;
+      @include m.typography('title-large');
+      @include m.truncate;
+      color: t.color('on-surface');
+    }
+    
+    &-subtitle {
+      margin: 0;
+      @include m.typography('body-medium');
+      @include m.truncate;
+      color: t.color('on-surface-variant');
+    }
+    
+    &-action {
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+  }
+  
+  // Card Media
+  &-media {
+    position: relative;
+    overflow: hidden;
+    border-radius: f.get-shape('medium');
+    &-img {
+      display: block;
+      width: 100%;
+      object-fit: cover;
+    }
+    
+    // Aspect ratios
+    &--16-9 {
+      aspect-ratio: 16 / 9;
+      
+      img {
+        height: 100%;
+      }
+    }
+    
+    &--4-3 {
+      aspect-ratio: 4 / 3;
+      
+      img {
+        height: 100%;
+      }
+    }
+    
+    &--1-1 {
+      aspect-ratio: 1 / 1;
+      
+      img {
+        height: 100%;
+      }
+    }
+    
+    &--contain {
+      img {
+        object-fit: contain;
+      }
+    }
+  }
+  
+  // Card Content
+  &-content {
+    padding: v.card('padding');
+    flex: 1 1 auto;
+    
+    > *:first-child {
+      margin-top: 0;
+    }
+    
+    > *:last-child {
+      margin-bottom: 0;
+    }
+    
+    // When content follows media without padding
+    .#{$component}-media + &:not(.#{$component}-content--no-padding) {
+      padding-top: v.card('padding');
+    }
+    
+    // No padding modifier
+    &--no-padding {
+      padding: 0;
+    }
+  }
+  
+  // Card Actions
+  &-actions {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 8px;
+    align-items: center;
+    
+    > * {
+      margin: 0 4px;
+      
+      &:first-child {
+        margin-left: 8px;
+      }
+      
+      &:last-child {
+        margin-right: 8px;
+      }
+    }
+    
+    // Full-bleed actions
+    &--full-bleed {
+      padding: 0;
+      
+      > * {
+        margin: 0;
+        border-radius: 0;
+        flex: 1 1 auto;
+        
+        &:first-child {
+          margin-left: 0;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    
+    // Vertical actions
+    &--vertical {
+      flex-direction: column;
+      
+      > * {
+        width: 100%;
+        margin: 4px 0;
+        
+        &:first-child {
+          margin-top: 8px;
+        }
+        
+        &:last-child {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    
+    // Alignment variations
+    &--center {
+      justify-content: center;
+    }
+    
+    &--end {
+      justify-content: flex-end;
+    }
+    
+    &--space-between {
+      justify-content: space-between;
+    }
+  }
+  
+  // State classes
+  &--state-disabled {
+    opacity: 0.38; // Use mtrl standard opacity
+    pointer-events: none;
+  }
+  
+  &--state-loading {
+    pointer-events: none;
+  }
+  
+  &--dragging {
+    @include m.elevation(4); // Use elevation mixin
+    opacity: 0.9;
+  }
+  
+  // Loading overlay
+  &-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: t.alpha('surface', 0.7);
+    z-index: f.get-z-index('default');
+  }
+  
+  &-loading-spinner {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 3px solid t.alpha('primary', 0.2);
+    border-top-color: t.color('primary');
+    animation: card-spinner 1s infinite linear;
+  }
+  
+  // Expandable content
+  &-expandable-content {
+    overflow: hidden;
+    transition: max-height f.get-motion-duration('medium1') f.get-motion-easing('standard');
+  }
+  
+  &-expand-button {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: t.color('primary');
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: rotate(45deg);
+      transition: transform f.get-motion-duration('short2') f.get-motion-easing('standard');
+    }
+    
+    &[aria-expanded="true"]::before {
+      transform: rotate(-135deg);
+    }
+  }
+  
+  // Swipeable card
+  &--swipeable {
+    touch-action: pan-y;
+    transition: transform f.get-motion-duration('medium1') f.get-motion-easing('standard');
+  }
+  
+  // Hidden buttons for accessibility
+  &-swipe-left-action,
+  &-swipe-right-action {
+    @include m.visually-hidden; // Use visually-hidden mixin
+  }
+}
+
+// Spinner animation
+@keyframes card-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Media query for responsive adjustments
+@include m.breakpoint-down('sm') {
+  .#{$component} {
+    width: 100%; // Full width on small screens
+  }
+}