Skip to content

Commit 1c2d052

Browse files
author
medevod
committed
demo update modal page
1 parent f7da2fd commit 1c2d052

File tree

6 files changed

+432
-315
lines changed

6 files changed

+432
-315
lines changed

‎demo/icons.css‎

Lines changed: 70 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,122 @@
11
.svg-icon-darkmode {
2-
background-image: url("./images/darkmode.svg");
2+
background-image: url("./images/darkmode.svg");
33
}
44

55
.svg-icon-colors {
6-
background-image: url("./images/colors.svg");
6+
background-image: url("./images/colors.svg");
77
}
88

99
.svg-icon-gears {
10-
background-image: url("./images/gears.svg");
10+
background-image: url("./images/gears.svg");
1111
}
1212

1313
.svg-icon-fr {
14-
background-image: url("./images/fr.svg");
14+
background-image: url("./images/fr.svg");
1515
}
1616

1717
.svg-icon-sp {
18-
background-image: url("./images/sp.svg");
18+
background-image: url("./images/sp.svg");
1919
}
2020

2121
.svg-icon-de {
22-
background-image: url("./images/de.svg");
22+
background-image: url("./images/de.svg");
2323
}
2424

2525
.svg-icon-search {
26-
background-image: url("./images/search.svg");
26+
background-image: url("./images/search.svg");
2727
}
2828

2929
.svg-icon-clipboard {
30-
background-image: url("./images/clipboard.svg");
30+
background-image: url("./images/clipboard.svg");
3131
}
3232

3333
.svg-icon-github {
34-
background-image: url("./images/github.svg");
34+
background-image: url("./images/github.svg");
3535
}
3636

3737
.svg-icon-night {
38-
background-image: url("./images/night-fog.svg");
38+
background-image: url("./images/night-fog.svg");
3939
}
4040

4141
.svg-icon-sun {
42-
background-image: url("./images/sun-fog.svg");
42+
background-image: url("./images/sun-fog.svg");
4343
}
4444

4545
.svg-icon-screen-s {
46-
background-image: url("./images/screen-s.svg");
46+
background-image: url("./images/screen-s.svg");
4747
}
4848

4949
.svg-icon-screen-m {
50-
background-image: url("./images/screen-m.svg");
50+
background-image: url("./images/screen-m.svg");
5151
}
5252

5353
.svg-icon-screen-l {
54-
background-image: url("./images/screen-l.svg");
54+
background-image: url("./images/screen-l.svg");
5555
}
5656

5757
.svg-icon-screen-xl {
58-
background-image: url("./images/screen-xl.svg");
58+
background-image: url("./images/screen-xl.svg");
5959
}
6060

6161
.svg-icon-vite {
62-
background-image: url("./images/vite.svg");
62+
background-image: url("./images/vite.svg");
6363
}
6464

6565
.svg-icon-github-dark {
66-
background-image: url("./images/github-black.svg");
66+
background-image: url("./images/github-black.svg");
6767
}
6868

6969
.svg-icon-evo {
70-
background-image: url("./images/evodim-icon.svg");
71-
}
70+
background-image: url("./images/evodim-icon.svg");
71+
}
72+
.svg-icon-popup {
73+
background-image: url("./images/popup-icon.svg");
74+
}
75+
76+
.svg-icon-popup-tl {
77+
background-image: url("./images/popup-icon.svg");
78+
transform: rotate(-90deg);
79+
}
80+
.svg-icon-popup-ml {
81+
background-image: url("./images/popup-icon.svg");
82+
transform: rotate(-135deg);
83+
}
84+
.svg-icon-popup-bl {
85+
background-image: url("./images/popup-icon.svg");
86+
transform: rotate(-180deg);
87+
}
88+
.svg-icon-popup-tc {
89+
background-image: url("./images/popup-icon.svg");
90+
transform: rotate(-45deg);
91+
}
92+
.svg-icon-popup-mc {
93+
background-image: url("./images/popup-icon.svg");
94+
}
95+
.svg-icon-popup-bc {
96+
background-image: url("./images/popup-icon.svg");
97+
transform: rotate(135deg);
98+
}
99+
100+
.svg-icon-popup-tr {
101+
background-image: url("./images/popup-icon.svg");
102+
}
103+
.svg-icon-popup-mr {
104+
background-image: url("./images/popup-icon.svg");
105+
transform: rotate(45deg);
106+
}
107+
.svg-icon-popup-tc {
108+
background-image: url("./images/popup-icon.svg");
109+
transform: rotate(-45deg);
110+
}
111+
.svg-icon-popup-mc {
112+
background-image: url("./images/popup-default-icon.svg");
113+
}
114+
.svg-icon-popup-bc {
115+
background-image: url("./images/popup-icon.svg");
116+
transform: rotate(135deg);
117+
}
118+
119+
.svg-icon-popup-br {
120+
background-image: url("./images/popup-icon.svg");
121+
transform: rotate(90deg);
122+
}

‎demo/images/popup-default-icon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎demo/images/popup-icon.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎demo/sections/form-section.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,11 @@ <h2>Forms</h2>
55
well as examples of how to trigger the form functionality.
66
</p>
77
<form id="forms-example" data-toggle="htmlpreview">
8-
<fieldset>
8+
<fieldset class="mg-col">
99
<label>2 cols input</label>
10-
<div class="mg-row">
11-
<div class="mg-col mg-x6">
12-
<input title="input" type="text" />
13-
</div>
14-
<div class="mg-col mg-x6">
15-
<input title="input" type="text" />
16-
</div>
10+
<div class="mg-inline-flex mg-gap1">
11+
<input title="input" type="text" />
12+
<input title="input" type="text" />
1713
</div>
1814
<label>Toggle inline</label>
1915
<div class="mg-row">

‎demo/sections/input-section.html‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<section id="inputs">
22
<h2>Inputs</h2>
3-
<div id="inputs-example" data-toggle="htmlpreview">
4-
<h3>Input sizing</h3>
5-
<div class="mg-row">
6-
<div class="mg-col mg-x6">
7-
<input class="mg-input--small" title="input" type="text" />
8-
</div>
9-
<div class="mg-col mg-x6">
10-
<input class="mg-input--large" title="input" type="text" />
11-
</div>
12-
</div>
13-
<div class="mg-row">
14-
<div class="mg-col mg-x6">
3+
<div id="inputs-example" class="mg-container" data-toggle="htmlpreview">
4+
<h3>Input sizing</h3>
5+
<input
6+
class="mg-input--small"
7+
title="input"
8+
type="text"
9+
placeholder="mg-input--small"
10+
/>
11+
<input
12+
class="mg-input--large"
13+
title="input"
14+
type="text"
15+
placeholder="mg-input--large"
16+
/>
1517
<div class="mg-select">
16-
<select id="ageRangeField" class="mg-input--small">
18+
<select id="ageRangeField" class="mg-input--small" >
19+
<option value="0-13">0-13</option>
1720
<option value="0-13">0-13</option>
1821
<option value="14-17">14-17</option>
1922
<option value="18-23">18-23</option>
2023
<option value="24+">24+</option>
2124
</select>
22-
</div>
23-
</div>
24-
<div class="mg-col mg-x6">
25+
</div>
2526
<div class="mg-select">
2627
<select id="ageRangeField" class="mg-input--large">
2728
<option value="0-13">0-13</option>
@@ -31,7 +32,7 @@ <h3>Input sizing</h3>
3132
</select>
3233
</div>
3334
</div>
34-
</div>
35+
3536
<h3>Styled inputs</h3>
3637
<div class="mg-input mg-input--small">
3738
<i class="mg-icon icon-search"></i>

0 commit comments

Comments
 (0)