Skip to content
This repository was archived by the owner on Jul 25, 2023. It is now read-only.

Commit 9c4ab28

Browse files
vis97cvis97c
committed
feat: modal component
BREAKING CHANGE: dialog is now modal & does not require modifier
1 parent 8d4098e commit 9c4ab28

File tree

8 files changed

+203
-215
lines changed

8 files changed

+203
-215
lines changed

‎src/base/_initialize.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,15 @@
5858
font-family: utils.family(codeBlocks);
5959
}
6060

61+
dialog {
62+
margin: auto;
63+
background: transparent;
64+
overflow: visible;
65+
&::backdrop {
66+
background: utils.color(dark, 0.3);
67+
}
68+
}
69+
6170
// broken asset fallback styles
6271
img,
6372
iframe {
@@ -147,6 +156,7 @@
147156
}
148157

149158
body {
159+
min-height: 100%;
150160
width: 100%;
151161
font-family: utils.family(default);
152162
font-size: utils.size();

‎src/layouts/_dialog.scss‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/layouts/_modal.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@use "../utils/module" as utils;
2+
3+
// Modal element
4+
//
5+
// @group Layouts
6+
@mixin modal {
7+
.#{utils.$layout__modal} {
8+
overflow-x: hidden;
9+
overflow-y: auto;
10+
background: utils.color(light);
11+
box-shadow: 3px 3px 9px utils.color(dark, 0.3);
12+
box-sizing: border-box;
13+
max-width: 100%;
14+
max-height: 100%;
15+
16+
// size
17+
&.#{utils.$prefix__default}--size-sm {
18+
padding: 1rem 1.333rem;
19+
border-radius: 0.5rem;
20+
}
21+
&:not([class*="--size"]),
22+
&.#{utils.$prefix__default}--size,
23+
&.#{utils.$prefix__default}--size-md {
24+
padding: 0.7rem 1rem;
25+
border-radius: 1.333rem;
26+
}
27+
&.#{utils.$prefix__default}--size-lg {
28+
padding: 1rem 1.333rem;
29+
border-radius: 1.667rem;
30+
}
31+
}
32+
}

‎src/layouts/dropdown/_dropdown.scss‎

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,21 @@
9595

9696
.#{module.$layout__dropdown} {
9797
z-index: 10;
98+
position: absolute;
99+
100+
&:before {
101+
content: "";
102+
position: absolute;
103+
display: block;
104+
width: 100%;
105+
height: 100%;
106+
}
98107

99108
&,
100109
&.#{module.$layout__flexbox},
101110
&.#{module.$layout__grid} {
102111
display: none;
103112
}
104-
105113
&.#{module.$layout__flexbox},
106114
&.#{module.$layout__grid} {
107115
&.#{module.$prefix__default}--display-inline {
@@ -115,6 +123,147 @@
115123
@include module.dropdown-visible-styles;
116124
}
117125

126+
&:not(.#{module.$status__hasItems}),
127+
&-item {
128+
background: module.color(light);
129+
box-shadow: 3px 3px 9px module.color(dark, 0.3);
130+
&:not([class*="--txtSize"]) {
131+
font-size: module.size(sm);
132+
}
133+
&.#{module.$prefix__default}--size-lg {
134+
padding: 1rem 1.333rem;
135+
border-radius: 1.667rem;
136+
}
137+
&:not([class*="--size"]),
138+
&.#{module.$prefix__default}--size,
139+
&.#{module.$prefix__default}--size-md {
140+
padding: 0.7rem 1rem;
141+
border-radius: 1.333rem;
142+
}
143+
&.#{module.$prefix__default}--size-sm {
144+
padding: 0.5rem 0.7rem;
145+
border-radius: 0.5rem;
146+
}
147+
}
148+
149+
// Position
150+
//
151+
// @group Modifiers
152+
// Right
153+
&.#{module.$prefix__default}--position-right {
154+
&,
155+
&-top,
156+
&-center,
157+
&-bottom {
158+
@include module.extend-viewports-classes {
159+
left: calc(100% + 0.5rem);
160+
&:before {
161+
left: -0.5rem;
162+
top: 0;
163+
}
164+
}
165+
}
166+
}
167+
// Left
168+
&.#{module.$prefix__default}--position-left {
169+
&,
170+
&-top,
171+
&-center,
172+
&-bottom {
173+
@include module.extend-viewports-classes {
174+
right: calc(100% + 0.5rem);
175+
&:before {
176+
right: -0.5rem;
177+
top: 0;
178+
}
179+
}
180+
}
181+
}
182+
// Right & Left
183+
&.#{module.$prefix__default}--position-right,
184+
&.#{module.$prefix__default}--position-left {
185+
&-center {
186+
@include module.extend-viewports-classes {
187+
top: 50%;
188+
transform: translateY(-50%);
189+
}
190+
}
191+
&-bottom {
192+
@include module.extend-viewports-classes {
193+
bottom: -1rem;
194+
}
195+
}
196+
// Default right position
197+
&,
198+
&-top {
199+
@include module.extend-viewports-classes {
200+
top: -1rem;
201+
}
202+
}
203+
}
204+
// Top
205+
&.#{module.$prefix__default}--position-top {
206+
&,
207+
&-left,
208+
&-right,
209+
&-center {
210+
@include module.extend-viewports-classes {
211+
bottom: calc(100% + 0.5rem);
212+
&:before {
213+
left: 0;
214+
bottom: -0.5rem;
215+
}
216+
}
217+
}
218+
}
219+
// Bottom
220+
&.#{module.$prefix__default}--position-bottom {
221+
&,
222+
&-left,
223+
&-right,
224+
&-center {
225+
@include module.extend-viewports-classes {
226+
top: calc(100% + 0.5rem);
227+
&:before {
228+
right: 0;
229+
top: -0.5rem;
230+
}
231+
}
232+
}
233+
}
234+
// Top & Bottom
235+
&.#{module.$prefix__default}--position-top,
236+
&.#{module.$prefix__default}--position-bottom {
237+
&-right {
238+
@include module.extend-viewports-classes {
239+
right: -0.7rem;
240+
}
241+
}
242+
&-center {
243+
@include module.extend-viewports-classes {
244+
left: 50%;
245+
transform: translateX(-50%);
246+
}
247+
}
248+
// Default bottom position
249+
&,
250+
&-left {
251+
@include module.extend-viewports-classes {
252+
left: -0.7rem;
253+
}
254+
}
255+
}
256+
// default: bottom-left
257+
&:not([class*="#{module.$prefix__default}--position"]) {
258+
// Position
259+
left: -0.7rem;
260+
top: calc(100% + 0.5rem);
261+
&:before {
262+
right: 0;
263+
top: -0.5rem;
264+
}
265+
}
266+
118267
li {
119268
&:not(:first-child) {
120269
padding-top: 0.2rem;

0 commit comments

Comments
 (0)