@magmonium/one 0.0.4 → 0.0.7

package/sass/mixins/_lists.sass

@@ -0,0 +1,377 @@
+// List Mixins - Reusable list styling
+@use 'sass:map'
+@use '../variables/spacing' as *
+@use '../variables/colors' as *
+@use '../variables/typography' as *
+
+// Base list reset mixin
+@mixin list-reset
+  margin: 0
+  padding: 0
+  list-style: none
+
+// List item reset
+@mixin list-item-reset
+  margin: 0
+  padding: 0
+
+// List styling mixin with configurable type and position
+@mixin list-style($type: disc, $position: outside)
+  list-style-type: $type
+  list-style-position: $position
+
+// List spacing management
+@mixin list-spacing($item-spacing: 0.25rem, $nested-indent: 1rem)
+  li
+    padding: $item-spacing 0
+
+  ul, ol
+    margin-left: $nested-indent
+    margin-top: $item-spacing
+
+// Horizontal/inline list conversion
+@mixin list-horizontal($gap: 0.75rem, $separator: null)
+  display: flex
+  flex-wrap: wrap
+  list-style: none
+
+  li
+    margin-right: $gap
+
+    &:last-child
+      margin-right: 0
+
+    @if $separator
+      &:not(:last-child)::after
+        content: $separator
+        margin-left: $gap * 0.5
+        color: $text-tertiary
+
+// Bordered list styling
+@mixin list-bordered($border-color: $border, $radius: 4px)
+  border: 1px solid $border-color
+  border-radius: $radius
+  overflow: hidden
+
+  li
+    padding: map.get($spacers, 2) map.get($spacers, 3)
+    border-bottom: 1px solid $border-color
+
+    &:last-child
+      border-bottom: none
+
+// Striped list styling
+@mixin list-striped($even-bg: $frame, $odd-bg: transparent)
+  li
+    &:nth-child(even)
+      background-color: $even-bg
+
+    &:nth-child(odd)
+      background-color: $odd-bg
+
+// List with custom markers
+@mixin list-custom-marker($marker: '→', $color: $text-secondary, $margin: 0.5rem)
+  list-style: none
+
+  li
+    position: relative
+    padding-left: calc(#{$margin} + 1em)
+
+    &::before
+      content: $marker
+      position: absolute
+      left: 0
+      color: $color
+      font-weight: bold
+
+// Nested list with different markers per level
+@mixin list-nested-markers
+  // First level
+  > li
+    list-style-type: disc
+
+    // Second level
+    ul, ol
+      li
+        list-style-type: circle
+
+        // Third level
+        ul, ol
+          li
+            list-style-type: square
+
+  // For ordered lists
+  &ol
+    > li
+      list-style-type: decimal
+
+      ol
+        li
+          list-style-type: lower-alpha
+
+          ol
+            li
+              list-style-type: lower-roman
+
+// Interactive list items
+@mixin list-interactive($hover-bg: $bg-focus, $active-bg: $highlight)
+  li
+    cursor: pointer
+    transition: background-color 0.2s ease-in-out
+    border-radius: 4px
+
+    &:hover
+      background-color: $hover-bg
+
+    &:active
+      background-color: $active-bg
+
+// List with icons
+@mixin list-with-icons($icon-size: 1rem, $gap: 0.5rem)
+  li
+    display: flex
+    align-items: center
+    gap: $gap
+
+    .list-icon
+      width: $icon-size
+      height: $icon-size
+      flex-shrink: 0
+
+// Navigation list styling
+@mixin list-nav($padding: 0.5rem 1rem)
+  @include list-reset
+
+  li
+    a
+      display: block
+      padding: $padding
+      text-decoration: none
+      border-radius: 4px
+      transition: all 0.2s ease-in-out
+
+      &:hover
+        background-color: $bg-focus
+        color: $text
+
+      &:focus
+        outline: 2px solid $focus
+        outline-offset: 2px
+
+// Breadcrumb list styling
+@mixin list-breadcrumb($separator: '/', $separator-color: $text-tertiary)
+  @include list-horizontal(0.5rem)
+
+  li
+    display: flex
+    align-items: center
+
+    &:not(:last-child)::after
+      content: $separator
+      margin-left: 0.5rem
+      color: $separator-color
+      pointer-events: none
+
+// Definition list styling
+@mixin list-definition($term-weight: $font-weight-semibold, $description-indent: 1.5rem)
+  dt
+    font-weight: $term-weight
+    color: $text
+    margin-bottom: 0.25rem
+
+  dd
+    margin-left: $description-indent
+    margin-bottom: 1rem
+    color: $text-secondary
+
+    &:last-child
+      margin-bottom: 0
+
+// List with checkboxes/status indicators
+@mixin list-checklist($check-size: 1rem, $check-color: $success)
+  @include list-reset
+
+  li
+    display: flex
+    align-items: flex-start
+    gap: 0.75rem
+    padding: 0.25rem 0
+
+    &::before
+      content: '□'
+      width: $check-size
+      height: $check-size
+      flex-shrink: 0
+      font-size: $check-size
+      line-height: 1
+      color: $text-tertiary
+
+    &.checked::before
+      content: '✓'
+      color: $check-color
+
+// App-style vertical navigation list (matches image: icons + labels + rounded backgrounds)
+@mixin list-app-nav($icon-size: 1.25rem, $padding: 0.75rem 1rem, $gap: 0.5rem, $selected-bg: $highlight, $hover-bg: $bg-focus)
+  @include list-reset
+
+  display: flex
+  flex-direction: column
+  gap: $gap
+
+  li
+    display: flex
+    align-items: center
+    gap: $gap
+    padding: $padding
+    border-radius: 8px
+    transition: all 0.2s ease-in-out
+    cursor: pointer
+
+    .list-icon
+      width: $icon-size
+      height: $icon-size
+      flex-shrink: 0
+      display: flex
+      align-items: center
+      justify-content: center
+
+    .list-label
+      flex: 1
+      font-size: $font-size-base
+      color: $text
+
+    &:hover
+      background-color: $hover-bg
+      color: $text
+
+      .list-icon
+        color: $mm
+
+    &.selected,
+    &:active
+      background-color: $selected-bg
+      color: $background
+
+      .list-icon
+        color: $background
+
+    &:focus
+      outline: 2px solid $focus
+      outline-offset: 2px
+
+  li.profile-item
+    border-top: 1px solid $border
+    margin-top: auto
+    padding-top: 1rem
+
+    .list-avatar
+      width: 2rem
+      height: 2rem
+      border-radius: 50%
+
+    .list-label
+      font-weight: $font-weight-medium
+
+// Icon sidebar list (for vertical menus like mail/contacts in image)
+@mixin list-icon-sidebar($width: 3rem, $icon-size: 1.5rem, $bg: $bg, $active-indicator: true)
+  @include list-reset
+
+  display: flex
+  flex-direction: column
+  width: $width
+  background-color: $bg
+  padding: 0.5rem 0
+
+  li
+    position: relative
+    padding: 0.75rem
+    border-radius: 6px
+    cursor: pointer
+    transition: background-color 0.2s ease
+
+    .list-icon
+      width: $icon-size
+      height: $icon-size
+      display: flex
+      align-items: center
+      justify-content: center
+      margin: 0 auto
+      color: $text-secondary
+
+    &:hover
+      background-color: rgba($mm, 0.1)
+
+      .list-icon
+        color: $mm
+
+    @if $active-indicator
+      &.active::before
+        content: ''
+        position: absolute
+        left: 0
+        top: 50%
+        transform: translateY(-50%)
+        width: 3px
+        height: 24px
+        background-color: $mm
+        border-radius: 0 2px 2px 0
+
+    .list-badge
+      position: absolute
+      top: 0.5rem
+      right: 0.5rem
+      width: 0.75rem
+      height: 0.75rem
+      border-radius: 50%
+      background-color: $warning
+      font-size: 0.5rem
+      color: $background
+      display: flex
+      align-items: center
+      justify-content: center
+
+
+// Compact list for mobile (like the image's tight spacing)
+@mixin list-compact($spacing: 0.5rem)
+  @include list-reset
+
+  li
+    padding: $spacing 0.75rem
+    margin-bottom: $spacing
+
+    &:last-child
+      margin-bottom: 0
+
+// List with notification badges
+@mixin list-with-badge($badge-bg: $warning, $badge-size: 1.25rem)
+  li
+    position: relative
+
+    .list-badge
+      position: absolute
+      top: 0.25rem
+      right: 0.25rem
+      min-width: $badge-size
+      height: $badge-size
+      padding: 0 0.35rem
+      border-radius: $badge-size * 0.5
+      background-color: $badge-bg
+      color: $background
+      font-size: 0.75rem
+      font-weight: $font-weight-semibold
+      display: flex
+      align-items: center
+      justify-content: center
+      line-height: 1
+
+// Section headers for grouped lists (like ACCOUNT in image)
+@mixin list-section-header($font-size: 0.75rem, $spacing: 1rem, $color: $text-tertiary)
+  display: block
+  margin-top: $spacing
+  margin-bottom: 0.5rem
+  padding: 0 1rem
+  font-size: $font-size
+  font-weight: $font-weight-semibold
+  color: $color
+  text-transform: uppercase
+  letter-spacing: 0.05em

package/sass/mixins/_overflow.sass

@@ -0,0 +1,121 @@
+@use "sass:math"
+
+// Overflow mixins for handling content overflow behaviors
+
+// Basic overflow utilities
+@mixin overflow($value)
+  overflow: $value
+
+@mixin overflow-x($value)
+  overflow-x: $value
+
+@mixin overflow-y($value)
+  overflow-y: $value
+
+// Common overflow patterns
+@mixin overflow-hidden
+  overflow: hidden
+
+@mixin overflow-visible
+  overflow: visible
+
+@mixin overflow-scroll
+  overflow: scroll
+
+@mixin overflow-auto
+  overflow: auto
+
+// Directional overflow patterns
+@mixin overflow-x-hidden
+  overflow-x: hidden
+
+@mixin overflow-x-visible
+  overflow-x: visible
+
+@mixin overflow-x-scroll
+  overflow-x: scroll
+
+@mixin overflow-x-auto
+  overflow-x: auto
+
+@mixin overflow-y-hidden
+  overflow-y: hidden
+
+@mixin overflow-y-visible
+  overflow-y: visible
+
+@mixin overflow-y-scroll
+  overflow-y: scroll
+
+@mixin overflow-y-auto
+  overflow-y: auto
+
+// Text overflow utilities
+@mixin text-overflow-ellipsis
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: ellipsis
+
+@mixin text-overflow-clip
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: clip
+
+// Multi-line text truncation (webkit only)
+@mixin text-overflow-lines($lines: 3)
+  display: -webkit-box
+  -webkit-line-clamp: $lines
+  -webkit-box-orient: vertical
+  overflow: hidden
+
+// Scrollbar styling utilities
+@mixin custom-scrollbar($width: 8px, $track-color: #f1f1f1, $thumb-color: #888, $thumb-hover-color: #555)
+  &::-webkit-scrollbar
+    width: $width
+    height: $width
+
+  &::-webkit-scrollbar-track
+    background: $track-color
+    border-radius: math.div($width, 2)
+
+  &::-webkit-scrollbar-thumb
+    background: $thumb-color
+    border-radius: math.div($width, 2)
+
+    &:hover
+      background: $thumb-hover-color
+
+// Hide scrollbar while keeping functionality
+@mixin hide-scrollbar
+  scrollbar-width: none // Firefox
+  -ms-overflow-style: none // IE/Edge
+
+  &::-webkit-scrollbar
+    display: none // Chrome, Safari, Opera
+
+// Overlay scrolling (macOS style)
+@mixin overlay-scrolling
+  overflow: overlay
+
+// Scrolling behavior utilities
+@mixin smooth-scrolling
+  scroll-behavior: smooth
+
+@mixin instant-scrolling
+  scroll-behavior: auto
+
+// Container with custom scrollbar
+@mixin scrollable-container($max-height: 300px, $scrollbar-width: 6px)
+  max-height: $max-height
+  overflow-y: auto
+  @include custom-scrollbar($scrollbar-width)
+
+// Horizontal scrolling container
+@mixin horizontal-scroll
+  overflow-x: auto
+  overflow-y: hidden
+  white-space: nowrap
+
+  // Optional: hide scrollbar on mobile
+  @media (max-width: 768px)
+    @include hide-scrollbar

package/sass/mixins/_position.sass

@@ -0,0 +1,181 @@
+// Position utilities and mixins
+@use '../variables/colors' as colors
+
+// Position types
+@mixin position-static
+  position: static
+
+@mixin position-relative
+  position: relative
+
+@mixin position-absolute
+  position: absolute
+
+@mixin position-fixed
+  position: fixed
+
+@mixin position-sticky
+  position: sticky
+
+// Position with coordinates
+@mixin absolute($top: null, $right: null, $bottom: null, $left: null)
+  position: absolute
+  @if $top != null
+    top: $top
+  @if $right != null
+    right: $right
+  @if $bottom != null
+    bottom: $bottom
+  @if $left != null
+    left: $left
+
+@mixin fixed($top: null, $right: null, $bottom: null, $left: null)
+  position: fixed
+  @if $top != null
+    top: $top
+  @if $right != null
+    right: $right
+  @if $bottom != null
+    bottom: $bottom
+  @if $left != null
+    left: $left
+
+@mixin relative($top: null, $right: null, $bottom: null, $left: null)
+  position: relative
+  @if $top != null
+    top: $top
+  @if $right != null
+    right: $right
+  @if $bottom != null
+    bottom: $bottom
+  @if $left != null
+    left: $left
+
+@mixin sticky($top: null, $right: null, $bottom: null, $left: null)
+  position: sticky
+  @if $top != null
+    top: $top
+  @if $right != null
+    right: $right
+  @if $bottom != null
+    bottom: $bottom
+  @if $left != null
+    left: $left
+
+// Common positioning patterns
+@mixin absolute-center
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+@mixin absolute-center-x
+  position: absolute
+  left: 50%
+  transform: translateX(-50%)
+
+@mixin absolute-center-y
+  position: absolute
+  top: 50%
+  transform: translateY(-50%)
+
+@mixin absolute-fill
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+
+@mixin fixed-fill
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+
+// Corner positioning
+@mixin absolute-top-left($offset: 0)
+  position: absolute
+  top: $offset
+  left: $offset
+
+@mixin absolute-top-right($offset: 0)
+  position: absolute
+  top: $offset
+  right: $offset
+
+@mixin absolute-bottom-left($offset: 0)
+  position: absolute
+  bottom: $offset
+  left: $offset
+
+@mixin absolute-bottom-right($offset: 0)
+  position: absolute
+  bottom: $offset
+  right: $offset
+
+// Z-index utilities
+@mixin z-index($value)
+  z-index: $value
+
+// Common z-index layers
+@mixin z-behind
+  z-index: -1
+
+@mixin z-normal
+  z-index: 0
+
+@mixin z-menu-backdrop
+  z-index: 80
+
+@mixin z-frame
+  z-index: 50
+
+@mixin z-menu-details
+  z-index: 90
+
+@mixin z-menu
+  z-index: 100
+
+@mixin z-dropdown
+  z-index: 1000
+
+@mixin z-sticky
+  z-index: 1020
+
+@mixin z-fixed
+  z-index: 1030
+
+@mixin z-modal
+  z-index: 1040
+
+@mixin z-popover
+  z-index: 1060
+
+@mixin z-tooltip
+  z-index: 1070
+
+@mixin z-top
+  z-index: 9999
+
+=generate-float-classes
+  
+  .float-left
+    float: left
+
+  .float-right
+    float: right
+
+  .float-none
+    float: none
+
+// Reusable premium sticky header with glassmorphism, shadows, and smooth transitions
+@mixin premium-sticky-header($top: -1px, $z-index: 100)
+  position: sticky
+  top: $top
+  z-index: $z-index
+  background: rgba(255, 255, 255, 0.9)
+  backdrop-filter: blur(12px)
+  border-bottom: 1px solid colors.$backdrop-border
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04)
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)