equality/packages/ui/src/components/sheet/sheet.module.css at e228f64b8a61548d169e64e4a562decb6a44b2b4 · eqtylab/equality · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@reference '../../theme/theme.module.css';

.sheet-overlay {
  @apply overlay-background;
  @apply overlay-content;
  @apply data-[state=open]:animate-in data-[state=open]:fade-in-0;
  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0;
}

.sheet-content {
  @apply bg-background-overlay;
  @apply shadow-shadow-overlay shadow-lg;
  @apply border-border-overlay;
  @apply z-modal fixed;
  @apply flex flex-col;
  @apply transition ease-in-out;
  @apply data-[state=open]:animate-in data-[state=open]:duration-500;
  @apply data-[state=closed]:animate-out data-[state=closed]:duration-300;
}

.sheet-content--side-top {
  @apply border-b;
  @apply inset-x-0 top-0;
  @apply data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top;
}

.sheet-content--side-bottom {
  @apply border-t;
  @apply inset-x-0 bottom-0;
  @apply data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom;
}

.sheet-content--side-left {
  @apply border-r;
  @apply inset-y-0 left-0;
  @apply max-w-3/4 min-w-1/3 h-full w-fit;
  @apply data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left;
}

.sheet-content--side-right {
  @apply border-l;
  @apply inset-y-0 right-0;
  @apply max-w-3/4 min-w-7/8 md:min-w-1/4 md:max-w-screen h-full w-fit;
  @apply data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right;
}

.sheet-close {
  @apply shrink-0;
}

.sheet-header {
  @apply flex w-fit w-full shrink-0 items-center;
  @apply gap-4 p-4;
  @apply text-left;
  @apply from-brand-primary/40 to-background border-b bg-gradient-to-r;
}

.sheet-header-icon {
  @apply shrink-0;
  @apply flex items-center justify-center;
}

.sheet-header-text-content {
  @apply flex min-w-0 flex-1 flex-col;
  @apply space-y-2;
}

.sheet-body {
  @apply min-h-0 flex-1 overflow-auto;
  @apply p-4;
}

.sheet-footer {
  @apply flex w-full min-w-fit shrink-0 flex-col-reverse gap-2 sm:flex-row sm:justify-end;
  @apply border-border border-t p-4;
}

.sheet-title {
  @apply text-text-primary text-lg font-medium;
}

.sheet-description {
  @apply text-text-secondary text-sm;
}