@magmonium/one 0.0.4 → 0.0.5

package/sass/utilities/_popup.sass

@@ -0,0 +1,73 @@
+// Popup / tooltip positioning utility
+// Use [mPosition] directive on the trigger and .m-pos-popup on the content element.
+// The directive auto-detects the direction with the most available viewport space
+// and adds one of: .m-pos--below, .m-pos--above, .m-pos--right, .m-pos--left
+
+.m-pos-popup
+  position: absolute
+  pointer-events: none
+  z-index: 1001
+
+.m-pos--below > .m-pos-popup
+  top: calc(100% + 8px)
+  bottom: unset
+  left: 50%
+  right: unset
+  transform: translateX(-50%)
+  animation: pos-below 0.15s ease forwards
+
+.m-pos--above > .m-pos-popup
+  bottom: calc(100% + 8px)
+  top: unset
+  left: 50%
+  right: unset
+  transform: translateX(-50%)
+  animation: pos-above 0.15s ease forwards
+
+.m-pos--right > .m-pos-popup
+  left: calc(100% + 8px)
+  right: unset
+  top: 50%
+  bottom: unset
+  transform: translateY(-50%)
+  animation: pos-right 0.15s ease forwards
+
+.m-pos--left > .m-pos-popup
+  right: calc(100% + 8px)
+  left: unset
+  top: 50%
+  bottom: unset
+  transform: translateY(-50%)
+  animation: pos-left 0.15s ease forwards
+
+@keyframes pos-below
+  from
+    opacity: 0
+    transform: translateX(-50%) translateY(-4px)
+  to
+    opacity: 1
+    transform: translateX(-50%) translateY(0)
+
+@keyframes pos-above
+  from
+    opacity: 0
+    transform: translateX(-50%) translateY(4px)
+  to
+    opacity: 1
+    transform: translateX(-50%) translateY(0)
+
+@keyframes pos-right
+  from
+    opacity: 0
+    transform: translateY(-50%) translateX(-4px)
+  to
+    opacity: 1
+    transform: translateY(-50%) translateX(0)
+
+@keyframes pos-left
+  from
+    opacity: 0
+    transform: translateY(-50%) translateX(4px)
+  to
+    opacity: 1
+    transform: translateY(-50%) translateX(0)

package/sass/utilities/_position.sass

@@ -0,0 +1,88 @@
+// Position utility classes derived from mixins
+@use '../mixins/position' as position
+
+// Position type classes
+.position-static
+  @include position.position-static
+
+.position-relative
+  @include position.position-relative
+
+.position-absolute
+  @include position.position-absolute
+
+.position-fixed
+  @include position.position-fixed
+
+.position-sticky
+  @include position.position-sticky
+
+// Common positioning pattern classes
+.absolute-center
+  @include position.absolute-center
+
+.absolute-center-x
+  @include position.absolute-center-x
+
+.absolute-center-y
+  @include position.absolute-center-y
+
+.absolute-fill
+  @include position.absolute-fill
+
+.fixed-fill
+  @include position.fixed-fill
+
+// Corner positioning classes
+.absolute-top-left
+  @include position.absolute-top-left
+
+.absolute-top-right
+  @include position.absolute-top-right
+
+.absolute-bottom-left
+  @include position.absolute-bottom-left
+
+.absolute-bottom-right
+  @include position.absolute-bottom-right
+
+// Z-index utility classes
+.z-behind
+  @include position.z-behind
+
+.z-normal
+  @include position.z-normal
+
+.z-dropdown
+  @include position.z-dropdown
+
+.z-sticky
+  @include position.z-sticky
+
+.z-fixed
+  @include position.z-fixed
+
+.z-modal
+  @include position.z-modal
+
+.z-popover
+  @include position.z-popover
+
+.z-tooltip
+  @include position.z-tooltip
+
+.z-top
+  @include position.z-top
+
+// Utility combinations
+.overlay
+  @include position.fixed-fill
+  @include position.z-modal
+
+.backdrop
+  @include position.fixed-fill
+  @include position.z-behind
+
+.floating-action
+  @include position.position-fixed
+  @include position.z-dropdown

package/sass/utilities/_sizing.sass

@@ -0,0 +1,277 @@
+// Sizing utility classes derived from mixins
+@use '../mixins/sizing' as sizing
+
+// Width percentage classes
+.w-full
+  @include sizing.width-full
+
+.w-half
+  @include sizing.width-half
+
+.w-quarter
+  @include sizing.width-quarter
+
+.w-three-quarters
+  @include sizing.width-three-quarters
+
+.w-auto
+  @include sizing.width-auto
+
+.w-fit
+  @include sizing.width-fit
+
+.w-min
+  @include sizing.width-min
+
+.w-max
+  @include sizing.width-max
+
+// Width viewport classes
+.w-100vw
+  @include sizing.width-100vw
+
+.w-75vw
+  @include sizing.width-75vw
+
+.w-66vw
+  @include sizing.width-66vw
+
+.w-50vw
+  @include sizing.width-50vw
+
+.w-33vw
+  @include sizing.width-33vw
+
+.w-25vw
+  @include sizing.width-25vw
+
+// Height percentage classes
+.h-full
+  @include sizing.height-full
+
+.h-half
+  @include sizing.height-half
+
+.h-quarter
+  @include sizing.height-quarter
+
+.h-three-quarters
+  @include sizing.height-three-quarters
+
+.h-auto
+  @include sizing.height-auto
+
+.h-fit
+  @include sizing.height-fit
+
+.h-min
+  @include sizing.height-min
+
+.h-max
+  @include sizing.height-max
+
+// Height viewport classes
+.h-100vh
+  @include sizing.height-100vh
+
+.h-75vh
+  @include sizing.height-75vh
+
+.h-66vh
+  @include sizing.height-66vh
+
+.h-50vh
+  @include sizing.height-50vh
+
+.h-33vh
+  @include sizing.height-33vh
+
+.h-25vh
+  @include sizing.height-25vh
+
+// Dynamic viewport height classes
+.h-100dvh
+  @include sizing.height-100dvh
+
+.h-100lvh
+  @include sizing.height-100lvh
+
+.h-100svh
+  @include sizing.height-100svh
+
+// Combined size classes
+.size-full
+  @include sizing.size-full
+
+.size-viewport
+  @include sizing.size-viewport
+
+.full-screen
+  @include sizing.full-screen
+
+.full-container
+  @include sizing.full-container
+
+// Note: Aspect ratio classes are available from layout utilities
+
+// Container query classes
+.w-100cqw
+  @include sizing.width-100cqw
+
+.h-100cqh
+  @include sizing.height-100cqh
+
+// Common specific sizes (pixels)
+.w-10
+  width: 10px
+
+.w-20
+  width: 20px
+
+.w-40
+  width: 40px
+
+.w-60
+  width: 60px
+
+.w-80
+  width: 80px
+
+.w-100
+  width: 100px
+
+.w-120
+  width: 120px
+
+.w-140
+  width: 140px
+
+.w-160
+  width: 160px
+
+.w-200
+  width: 200px
+
+.w-240
+  width: 240px
+
+.w-280
+  width: 280px
+
+.w-320
+  width: 320px
+
+.w-400
+  width: 400px
+
+.w-480
+  width: 480px
+
+.w-560
+  width: 560px
+
+.w-640
+  width: 640px
+
+.h-10
+  height: 10px
+
+.h-20
+  height: 20px
+
+.h-40
+  height: 40px
+
+.h-60
+  height: 60px
+
+.h-80
+  height: 80px
+
+.h-100
+  height: 100px
+
+.h-120
+  height: 120px
+
+.h-140
+  height: 140px
+
+.h-160
+  height: 160px
+
+.h-200
+  height: 200px
+
+.h-240
+  height: 240px
+
+.h-280
+  height: 280px
+
+.h-320
+  height: 320px
+
+.h-400
+  height: 400px
+
+.h-480
+  height: 480px
+
+.h-560
+  height: 560px
+
+.h-640
+  height: 640px
+
+// Responsive sizing classes
+@media (max-width: 768px)
+  .w-full-mobile
+    @include sizing.width-full
+
+  .h-auto-mobile
+    @include sizing.height-auto
+
+  .h-50vh-mobile
+    @include sizing.height-50vh
+
+@media (min-width: 769px)
+  .w-auto-desktop
+    @include sizing.width-auto
+
+  .h-full-desktop
+    @include sizing.height-full
+
+  .size-viewport-desktop
+    @include sizing.size-viewport
+
+// Min and max width/height utilities
+.min-w-0
+  min-width: 0
+
+.min-w-full
+  min-width: 100%
+
+.max-w-none
+  max-width: none
+
+.max-w-full
+  max-width: 100%
+
+.max-w-screen
+  max-width: 100vw
+
+.min-h-0
+  min-height: 0
+
+.min-h-full
+  min-height: 100%
+
+.min-h-screen
+  min-height: 100vh
+
+.max-h-full
+  max-height: 100%
+
+.max-h-screen
+  max-height: 100vh

package/sass/utilities/_spacing.sass

@@ -0,0 +1,121 @@
+// Spacing Utility Classes
+@use '../mixins/spacing' as *
+@use '../variables/spacing' as *
+
+// Generate utility classes for all spacer sizes
+@each $key, $value in $spacers
+  // Padding utilities
+  .pad-#{$key}
+    @include padding-all($key)
+  
+  .pad-x-#{$key}
+    @include padding-x($key)
+  
+  .pad-y-#{$key}
+    @include padding-y($key)
+  
+  .pad-t-#{$key}
+    @include spacing(padding-top, $key)
+  
+  .pad-r-#{$key}
+    @include spacing(padding-right, $key)
+  
+  .pad-b-#{$key}
+    @include spacing(padding-bottom, $key)
+  
+  .pad-l-#{$key}
+    @include spacing(padding-left, $key)
+
+  // Margin utilities
+  .mar-#{$key}
+    @include margin-all($key)
+  
+  .mar-x-#{$key}
+    @include margin-x($key)
+  
+  .mar-y-#{$key}
+    @include margin-y($key)
+  
+  .mar-t-#{$key}
+    @include spacing(margin-top, $key)
+  
+  .mar-r-#{$key}
+    @include spacing(margin-right, $key)
+  
+  .mar-b-#{$key}
+    @include spacing(margin-bottom, $key)
+  
+  .mar-l-#{$key}
+    @include spacing(margin-left, $key)
+
+// Size aliases for better readability
+@each $key, $value in $spacers
+  // xs = 0, sm = 1, md = 2, lg = 3, xl = 4, xxl = 5
+  $size-name: null
+  @if $key == 0
+    $size-name: 'xs'
+  @else if $key == 1
+    $size-name: 'sm'
+  @else if $key == 2
+    $size-name: 'md'
+  @else if $key == 3
+    $size-name: 'lg'
+  @else if $key == 4
+    $size-name: 'xl'
+  @else if $key == 5
+    $size-name: 'xxl'
+
+  @if $size-name
+    // Padding aliases
+    .pad-#{$size-name}
+      @include padding-all($key)
+    
+    .pad-x-#{$size-name}
+      @include padding-x($key)
+    
+    .pad-y-#{$size-name}
+      @include padding-y($key)
+    
+    .pad-t-#{$size-name}
+      @include spacing(padding-top, $key)
+    
+    .pad-r-#{$size-name}
+      @include spacing(padding-right, $key)
+    
+    .pad-b-#{$size-name}
+      @include spacing(padding-bottom, $key)
+    
+    .pad-l-#{$size-name}
+      @include spacing(padding-left, $key)
+
+    // Margin aliases
+    .mar-#{$size-name}
+      @include margin-all($key)
+    
+    .mar-x-#{$size-name}
+      @include margin-x($key)
+    
+    .mar-y-#{$size-name}
+      @include margin-y($key)
+    
+    .mar-t-#{$size-name}
+      @include spacing(margin-top, $key)
+    
+    .mar-r-#{$size-name}
+      @include spacing(margin-right, $key)
+    
+    .mar-b-#{$size-name}
+      @include spacing(margin-bottom, $key)
+    
+    .mar-l-#{$size-name}
+      @include spacing(margin-left, $key)
+
+// Special utility classes
+.mar-auto
+  @include margin-auto
+
+.no-spacing
+  @include no-spacing
+
+.spacing-reset
+  @include spacing-reset