diff options
author | Volpeon <git@volpeon.ink> | 2024-10-17 16:45:00 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-17 16:45:00 +0200 |
commit | 50f6acc739f24bfa2ca080d08e90d82f8fa83543 (patch) | |
tree | 404dbe97d34b7e4fc3293c8e6a8c92d9941ac51e /src/.old/objects/_dialog.scss | |
parent | Colors (diff) | |
download | iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.gz iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.bz2 iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.zip |
Revamped variable management
Diffstat (limited to 'src/.old/objects/_dialog.scss')
-rw-r--r-- | src/.old/objects/_dialog.scss | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss deleted file mode 100644 index 9333ce6..0000000 --- a/src/.old/objects/_dialog.scss +++ /dev/null | |||
@@ -1,152 +0,0 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('dialog') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --width-sm: iro.fn-px-to-rem(500px), | ||
8 | --width-md: iro.fn-px-to-rem(800px), | ||
9 | --width-lg: iro.fn-px-to-rem(1100px), | ||
10 | --rounding: 4px, | ||
11 | --border: 1px, | ||
12 | |||
13 | --header: ( | ||
14 | --pad-x: fn.global-dim(--size --75), | ||
15 | --pad-y: fn.global-dim(--size --75), | ||
16 | ), | ||
17 | |||
18 | --sidebar: ( | ||
19 | --pad-x: fn.global-dim(--size --75), | ||
20 | --pad-y: fn.global-dim(--size --75), | ||
21 | ), | ||
22 | |||
23 | --body: ( | ||
24 | --pad-x: fn.global-dim(--size --200), | ||
25 | --pad-y: fn.global-dim(--size --200), | ||
26 | ) | ||
27 | ), | ||
28 | ), 'dims'); | ||
29 | |||
30 | @include iro.props-store(( | ||
31 | --dims: ( | ||
32 | --pad-x: fn.global-dim(--size --300), | ||
33 | --pad-y: fn.global-dim(--size --300), | ||
34 | ), | ||
35 | ), 'md'); | ||
36 | |||
37 | @include iro.props-store(( | ||
38 | --colors: ( | ||
39 | --border: fn.global-color(--border --stable), | ||
40 | ), | ||
41 | ), 'colors'); | ||
42 | |||
43 | @include iro.bem-object(iro.props-namespace()) { | ||
44 | display: grid; | ||
45 | grid-template-rows: auto auto 1fr auto auto; | ||
46 | grid-template-columns: auto 1fr; | ||
47 | grid-template-areas: | ||
48 | 'sidebar-header header' | ||
49 | 'sidebar top' | ||
50 | 'sidebar body' | ||
51 | 'sidebar bottom' | ||
52 | 'sidebar footer'; | ||
53 | position: relative; | ||
54 | box-sizing: border-box; | ||
55 | flex: 0 0 auto; | ||
56 | width: 100%; | ||
57 | max-width: fn.dim(--width-md); | ||
58 | margin: 0 auto; | ||
59 | overflow: hidden; | ||
60 | border-radius: fn.dim(--rounding); | ||
61 | background-clip: padding-box; | ||
62 | background-color: fn.global-color(--bg); | ||
63 | color: fn.global-color(--fg); | ||
64 | |||
65 | @include iro.bem-modifier('sm') { | ||
66 | max-width: fn.dim(--width-sm); | ||
67 | } | ||
68 | |||
69 | @include iro.bem-modifier('lg') { | ||
70 | max-width: fn.dim(--width-lg); | ||
71 | } | ||
72 | |||
73 | @include iro.bem-elem('header') { | ||
74 | grid-area: sidebar-header / sidebar-header / header / header; | ||
75 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); | ||
76 | |||
77 | @include iro.bem-modifier('sidebar') { | ||
78 | grid-area: sidebar-header; | ||
79 | border-right: 1px solid fn.color(--border); | ||
80 | |||
81 | @include iro.bem-sibling-elem('header') { | ||
82 | grid-area: header; | ||
83 | } | ||
84 | } | ||
85 | } | ||
86 | |||
87 | @include iro.bem-elem('title') { | ||
88 | margin-top: 0; | ||
89 | padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
90 | padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
91 | } | ||
92 | |||
93 | @include iro.bem-elem('close-btn') { | ||
94 | margin-left: auto; | ||
95 | } | ||
96 | |||
97 | @include iro.bem-elem('sidebar') { | ||
98 | grid-area: sidebar; | ||
99 | padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); | ||
100 | overflow: auto; | ||
101 | border-right: 1px solid fn.color(--border); | ||
102 | } | ||
103 | |||
104 | @include iro.bem-elem('top') { | ||
105 | grid-area: top; | ||
106 | min-width: 0; | ||
107 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
108 | |||
109 | @include iro.bem-sibling-elem('body') { | ||
110 | padding-top: 0; | ||
111 | } | ||
112 | } | ||
113 | |||
114 | @include iro.bem-elem('bottom') { | ||
115 | grid-area: bottom; | ||
116 | min-width: 0; | ||
117 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
118 | |||
119 | @include iro.bem-sibling-elem('body') { | ||
120 | padding-bottom: 0; | ||
121 | } | ||
122 | } | ||
123 | |||
124 | @include iro.bem-elem('body') { | ||
125 | grid-area: body; | ||
126 | min-width: 0; | ||
127 | min-height: 0; | ||
128 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
129 | } | ||
130 | |||
131 | @include iro.bem-elem('footer') { | ||
132 | grid-area: footer; | ||
133 | justify-content: flex-end; | ||
134 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
135 | } | ||
136 | |||
137 | @include iro.bem-modifier('scrollable') { | ||
138 | flex-shrink: 1; | ||
139 | |||
140 | @include iro.bem-elem('body') { | ||
141 | overflow: auto; | ||
142 | scrollbar-color: fn.global-color(--obj-lo) transparent; | ||
143 | } | ||
144 | } | ||
145 | |||
146 | @include iro.bem-modifier('flat') { | ||
147 | @include iro.bem-elem('body') { | ||
148 | padding-top: 0; | ||
149 | } | ||
150 | } | ||
151 | } | ||
152 | } | ||