shadow-design 0.5.0

Modular, high-performance UI component library for Dioxus 0.7 applications
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// ==============================================================================
// Shadow Design — Stack Component SCSS
// ==============================================================================
@use '../layers' as *;
@use '../variables' as *;

@layer sd-components {
  // ----------------------------------------------------------------------------
  // Stack Container (Flex Column Layout)
  // ----------------------------------------------------------------------------
  .sd-stack {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;

    // Gaps
    &--gap-none { gap: 0px; }
    &--gap-xs   { gap: 4px; }
    &--gap-sm   { gap: 8px; }
    &--gap-md   { gap: 16px; }
    &--gap-lg   { gap: 24px; }
    &--gap-xl   { gap: 32px; }

    // Align Items (Cross-Axis)
    &--align-start    { align-items: flex-start; }
    &--align-center   { align-items: center; }
    &--align-end      { align-items: flex-end; }
    &--align-stretch  { align-items: stretch; }
    &--align-baseline { align-items: baseline; }

    // Justify Content (Main-Axis)
    &--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; }
  }
}