mtrl 0.5.2 → 0.5.3

package/src/styles/utilities/_layout.scss

@@ -0,0 +1,665 @@
+// src/styles/utilities/_layout.scss
+@use '../abstract/base' as base;
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+
+$prefix: base.$prefix;
+$layout: '#{$prefix}-layout';
+
+// Common gap sizes for layout components
+$gap-sizes: (
+  '0': 0,
+  '1': 4px,
+  '2': 8px,
+  '3': 12px,
+  '4': 16px,
+  '5': 20px,
+  '6': 24px,
+  '8': 32px,
+  '10': 40px,
+  '12': 48px
+);
+
+// Default layout properties
+$defaults: (
+  'gap': 16px,
+  'stack-gap': 16px,
+  'row-gap': 16px,
+  'grid-gap': 16px,
+  'grid-min': 200px,
+  'grid-columns': 12,
+  'breakpoints': (
+    'xs': 0,
+    'sm': 600px,
+    'md': 960px,
+    'lg': 1280px,
+    'xl': 1920px
+  )
+);
+
+// ----------------------------------------
+// Base layout styles
+// ----------------------------------------
+
+// Container - centers content with max-width
+.#{$layout} {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: map.get($defaults, 'gap');
+  padding-right: map.get($defaults, 'gap');
+  box-sizing: border-box;
+  
+  // Different container sizes
+  &--sm {
+    max-width: 600px;
+  }
+  
+  &--md {
+    max-width: 960px;
+  }
+  
+  &--lg {
+    max-width: 1280px;
+  }
+  
+  &--xl {
+    max-width: 1920px;
+  }
+  
+  &--fluid {
+    max-width: 100%;
+  }
+  
+  // Mobile padding adjustments
+  @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  
+  // Mobile width options
+  &--mobile-narrow {
+    @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+      max-width: 90%;
+    }
+  }
+  
+  &--mobile-full {
+    @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+// ----------------------------------------
+// Stack Layout (Vertical)
+// ----------------------------------------
+
+.#{$layout}--stack {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: map.get($defaults, 'stack-gap');
+  
+  // Stack alignment
+  &-start {
+    align-items: flex-start;
+  }
+  
+  &-center {
+    align-items: center;
+  }
+  
+  &-end {
+    align-items: flex-end;
+  }
+  
+  &-stretch {
+    align-items: stretch;
+  }
+  
+  // Stack distribution (for multi-item stacks)
+  &-justify-start {
+    justify-content: flex-start;
+  }
+  
+  &-justify-center {
+    justify-content: center;
+  }
+  
+  &-justify-end {
+    justify-content: flex-end;
+  }
+  
+  &-justify-between {
+    justify-content: space-between;
+  }
+  
+  &-justify-around {
+    justify-content: space-around;
+  }
+  
+  // Stack spacing
+  @each $name, $size in $gap-sizes {
+    &-gap-#{$name} {
+      gap: $size;
+    }
+  }
+}
+
+// ----------------------------------------
+// Row Layout (Horizontal)
+// ----------------------------------------
+
+.#{$layout}--row {
+  display: flex;
+  width: 100%;
+  gap: map.get($defaults, 'row-gap');
+  
+  // Auto-stack on mobile by default
+  flex-direction: column;
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  // Row alignment
+  &-start {
+    align-items: flex-start;
+  }
+  
+  &-center {
+    align-items: center;
+  }
+  
+  &-end {
+    align-items: flex-end;
+  }
+  
+  &-stretch {
+    align-items: stretch;
+  }
+  
+  // Row distribution
+  &-justify-start {
+    justify-content: flex-start;
+  }
+  
+  &-justify-center {
+    justify-content: center;
+  }
+  
+  &-justify-end {
+    justify-content: flex-end;
+  }
+  
+  &-justify-between {
+    justify-content: space-between;
+  }
+  
+  &-justify-around {
+    justify-content: space-around;
+  }
+  
+  &-justify-evenly {
+    justify-content: space-evenly;
+  }
+  
+  // Row wrapping
+  &-nowrap {
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+  }
+  
+  &-wrap-reverse {
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+      flex-wrap: wrap-reverse;
+    }
+  }
+  
+  // Add option to override auto-stacking for specific cases
+  &-no-stack {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  // Row spacing
+  @each $name, $size in $gap-sizes {
+    &-gap-#{$name} {
+      gap: $size;
+    }
+  }
+  
+  // Row items - full width on mobile, equal width on larger screens
+  > * {
+    width: 100%; // Full width on mobile
+    
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+      flex: 1 1 0%; // Equal width on larger screens
+    }
+  }
+  
+  // Auto width items
+  > .#{$layout}__item--auto {
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  }
+  
+  // Fixed width items - full width on mobile
+  @for $i from 1 through 12 {
+    > .#{$layout}__item--#{$i} {
+      @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+        flex: 0 0 auto;
+        width: calc(#{math.div($i, 12) * 100%} - (#{map.get($defaults, 'row-gap')} * #{math.div(12 - $i, 12)}));
+      }
+    }
+  }
+  
+  // Responsive width items
+  @each $bp, $width in map.get($defaults, 'breakpoints') {
+    @if $bp != 'xs' {
+      @for $i from 1 through 12 {
+        > .#{$layout}__item--#{$bp}-#{$i} {
+          @media (min-width: $width) {
+            flex: 0 0 auto;
+            width: calc(#{math.div($i, 12) * 100%} - (#{map.get($defaults, 'row-gap')} * #{math.div(12 - $i, 12)}));
+          }
+        }
+      }
+    }
+  }
+  
+  // Row items in a no-stack row
+  &-no-stack {
+    > * {
+      flex: 1 1 0%;
+    }
+    
+    @for $i from 1 through 12 {
+      > .#{$layout}__item--#{$i} {
+        flex: 0 0 auto;
+        width: calc(#{math.div($i, 12) * 100%} - (#{map.get($defaults, 'row-gap')} * #{math.div(12 - $i, 12)}));
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Grid Layout
+// ----------------------------------------
+
+.#{$layout}--grid {
+  display: grid;
+  gap: map.get($defaults, 'grid-gap');
+  width: 100%;
+  
+  // Auto-stack on mobile by default
+  grid-template-columns: 1fr;
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+    // Default to auto-fit for non-mobile screens
+    grid-template-columns: repeat(auto-fit, minmax(map.get($defaults, 'grid-min'), 1fr));
+  }
+  
+  // Grid modes: auto-fit (default), auto-fill
+  &-fill {
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+      grid-template-columns: repeat(auto-fill, minmax(map.get($defaults, 'grid-min'), 1fr));
+    }
+  }
+  
+  // Fixed column counts - stack on mobile by default
+  @for $i from 1 through 12 {
+    &-cols-#{$i} {
+      @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+  }
+  
+  // Responsive column counts
+  @each $bp, $width in map.get($defaults, 'breakpoints') {
+    @if $bp != 'xs' {
+      @for $i from 1 through 6 {
+        &-#{$bp}-cols-#{$i} {
+          @media (min-width: $width) {
+            grid-template-columns: repeat($i, 1fr);
+          }
+        }
+      }
+    }
+  }
+  
+  // Add option to override auto-stacking for specific cases
+  &-no-stack {
+    grid-template-columns: repeat(auto-fit, minmax(map.get($defaults, 'grid-min'), 1fr));
+    
+    &-cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    
+    &-cols-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+  
+  // Dense auto-placement
+  &-dense {
+    grid-auto-flow: dense;
+  }
+  
+  // Grid alignment
+  &-align-start {
+    align-items: start;
+  }
+  
+  &-align-center {
+    align-items: center;
+  }
+  
+  &-align-end {
+    align-items: end;
+  }
+  
+  &-justify-start {
+    justify-content: start;
+  }
+  
+  &-justify-center {
+    justify-content: center;
+  }
+  
+  &-justify-end {
+    justify-content: end;
+  }
+  
+  &-auto-height {
+    align-items: start; // Prevent stretching items vertically
+    
+    > * {
+      height: auto; // Ensure children only take the height they need
+    }
+  }
+  
+  // Grid minimum sizes
+  @each $name, $size in (
+    'xs': 120px,
+    'sm': 180px,
+    'md': 240px,
+    'lg': 300px,
+    'xl': 360px
+  ) {
+    &-min-#{$name} {
+      grid-template-columns: repeat(auto-fit, minmax($size, 1fr));
+      
+      &.#{$layout}--grid-fill {
+        grid-template-columns: repeat(auto-fill, minmax($size, 1fr));
+      }
+    }
+  }
+  
+  // Grid gap sizes
+  @each $name, $size in $gap-sizes {
+    &-gap-#{$name} {
+      gap: $size;
+    }
+  }
+  
+  // Grid item span
+  @for $i from 1 through 12 {
+    > .#{$layout}__item--span-#{$i} {
+      grid-column: span $i;
+    }
+    
+    > .#{$layout}__item--row-span-#{$i} {
+      grid-row: span $i;
+    }
+  }
+  
+  // Responsive item spans
+  @each $bp, $width in map.get($defaults, 'breakpoints') {
+    @if $bp != 'xs' {
+      @for $i from 1 through 12 {
+        > .#{$layout}__item--#{$bp}-span-#{$i} {
+          @media (min-width: $width) {
+            grid-column: span $i;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Item placement and alignment
+// ----------------------------------------
+
+// Self alignment utilities for both flex and grid children
+.#{$layout}__item--self-start {
+  align-self: flex-start;
+}
+
+.#{$layout}__item--self-center {
+  align-self: center;
+}
+
+.#{$layout}__item--self-end {
+  align-self: flex-end;
+}
+
+.#{$layout}__item--self-stretch {
+  align-self: stretch;
+}
+
+// Order utilities 
+.#{$layout}__item--order-first {
+  order: -9999;
+}
+
+.#{$layout}__item--order-last {
+  order: 9999;
+}
+
+@for $i from 1 through 12 {
+  .#{$layout}__item--order-#{$i} {
+    order: $i;
+  }
+}
+
+// ----------------------------------------
+// Responsive display utilities
+// ----------------------------------------
+
+// Hide on specific breakpoints
+@each $bp, $width in map.get($defaults, 'breakpoints') {
+  @if $bp != 'xs' {
+    .#{$layout}--hide-#{$bp}-up {
+      @media (min-width: $width) {
+        display: none !important;
+      }
+    }
+    
+    .#{$layout}--hide-#{$bp}-down {
+      @media (max-width: $width - 1px) {
+        display: none !important;
+      }
+    }
+  }
+}
+
+// Mobile-specific layouts - now redundant as stacking is default behavior
+// These are kept for backward compatibility
+.#{$layout}--stack-mobile {
+  @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+// Still useful for layouts that specifically need to override
+.#{$layout}--force-stack {
+  flex-direction: column !important;
+  
+  > * {
+    width: 100% !important;
+  }
+}
+
+.#{$layout}--row-mobile-scroll {
+  @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+    
+    > * {
+      scroll-snap-align: start;
+      flex: 0 0 auto;
+      width: 80%; // Default mobile scroll item width
+      max-width: 300px;
+    }
+    
+    // Optionally override the width
+    &-small > * {
+      width: 60%;
+      max-width: 200px;
+    }
+    
+    &-large > * {
+      width: 90%;
+      max-width: 400px;
+    }
+  }
+}
+
+// Mobile-first responsive grid with specified minimum sizes
+.#{$layout}--grid-mobile-first {
+  grid-template-columns: 1fr;
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'sm')) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'md')) {
+    grid-template-columns: repeat(auto-fit, minmax(map.get($defaults, 'grid-min'), 1fr));
+  }
+}
+
+// ----------------------------------------
+// Mobile-specific utilities
+// ----------------------------------------
+
+// Mobile safe area insets (for notches and home indicators)
+.#{$layout}--safe-area {
+  padding-top: env(safe-area-inset-top, 0);
+  padding-right: env(safe-area-inset-right, 0);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  padding-left: env(safe-area-inset-left, 0);
+}
+
+// Touch-friendly spacing
+.#{$layout}--touch-friendly {
+  @media (max-width: map.get(map.get($defaults, 'breakpoints'), 'sm') - 1px) {
+    > * {
+      min-height: 44px; // Minimum recommended touch target size
+      margin-bottom: 12px; // Ensure adequate spacing between touch targets
+    }
+  }
+}
+
+// Prevent overscroll bounce on iOS
+.#{$layout}--prevent-overscroll {
+  height: 100%;
+  overflow: hidden;
+  
+  > div {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+// Mobile viewport height fix (for address bar issues)
+.#{$layout}--full-height {
+  height: 100vh; /* Fallback */
+  height: -webkit-fill-available;
+  height: stretch; /* Future standard */
+  
+  @supports (-webkit-touch-callout: none) {
+    /* iOS specific fix */
+    min-height: -webkit-fill-available;
+  }
+}
+
+// Mobile navigation bar spacing
+.#{$layout}--nav-spacing {
+  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
+}
+
+// ----------------------------------------
+// Spacing utilities
+// ----------------------------------------
+
+// Utility for consistent spacing in a section
+.#{$layout}--section {
+  padding-top: 32px;
+  padding-bottom: 32px;
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'md')) {
+    padding-top: 48px;
+    padding-bottom: 48px;
+  }
+  
+  @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'lg')) {
+    padding-top: 64px;
+    padding-bottom: 64px;
+  }
+  
+  &-sm {
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'md')) {
+      padding-top: 24px;
+      padding-bottom: 24px;
+    }
+  }
+  
+  &-lg {
+    padding-top: 48px;
+    padding-bottom: 48px;
+    
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'md')) {
+      padding-top: 64px;
+      padding-bottom: 64px;
+    }
+    
+    @media (min-width: map.get(map.get($defaults, 'breakpoints'), 'lg')) {
+      padding-top: 96px;
+      padding-bottom: 96px;
+    }
+  }
+}
+
+// ----------------------------------------
+// Hero layout
+// ----------------------------------------
+
+// Hero layout
+.#{$layout}--hero {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  width: 100%;
+}