Skip to content

Commit 4891ee4

Browse files
medevodmedevod
medevod
and
medevod
authored
Fixes/1.4.5 (#85)
* fix apply control and input radius to range thumb * fix doc remove custom work styling * fix add more left space for dropdown and navs icons * doc update modal section * fix use zindex global variables for modal layers * doc add customization section * add zindex custom variables * chore doc * update pkg * fix linter --------- Co-authored-by: medevod <medevod@github.com>
1 parent 3ea695a commit 4891ee4

File tree

13 files changed

+210
-62
lines changed

13 files changed

+210
-62
lines changed

‎demo/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,8 @@ pre.prettyprint {
192192
);
193193
z-index: -2;
194194
}
195+
196+
code .kwd,
197+
pre .kwd {
198+
color: #fff !important;
199+
}

‎demo/index.ts‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -149,25 +149,12 @@ function registerDemoFeatures() {
149149
.forEach(buildHtmlPreview);
150150

151151
document.querySelectorAll("pre").forEach((el) => {
152-
el.innerHTML = htmlCodeFormatter(el.innerHTML)
152+
el.innerHTML = htmlCodeFormatter(el.innerHTML);
153153
el.classList.add("prettyprint", "mg-overflow-x-auto", "mg-max-w-full");
154154

155155
document.querySelectorAll("code").forEach((el) => {
156-
el.innerHTML = htmlCodeFormatter(el.innerHTML)
156+
el.innerHTML = htmlCodeFormatter(el.innerHTML);
157157
el.classList.add("prettyprint", "mg-overflow-x-auto", "mg-max-w-full");
158-
159-
160-
//const clipboardButton = document.createElement("button");
161-
//const clipboardButtonIcon = document.createElement("i");
162-
163-
// clipboardButton.classList.add("mg-button--link", "mg-button--small", "mg-right");
164-
165-
// clipboardButton.addEventListener("click", (ev) => {
166-
// navigator.clipboard.writeText(el.innerHTML);
167-
// });
168-
// clipboardButtonIcon.classList.add("mg-icon", "svg-icon-clipboard");
169-
// clipboardButton.appendChild(clipboardButtonIcon);
170-
// el.previousElementSibling?.append(clipboardButton);
171158
});
172159
});
173160

‎demo/sections/collapse-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section id="Collapse">
1+
<section id="collapse">
22
<h2>Collapse</h2>
33
<code>mg-collapse + opened</code>
44
<p>Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of

‎demo/sections/customization-section.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<section id="customization">
2+
<h2>Customization</h2>
3+
<p>
4+
MgPlus provides a set of CSS variables that allow you to customize the look
5+
and feel of your application. Below is a list of all available variables and
6+
their default values.
7+
</p>
8+
9+
<h3>Colors</h3>
10+
<div class="mg-col">
11+
<span><code>--mg-color-dark</code>: <span>hsl(255deg 0% 5%)</span></span>
12+
<span><code>--mg-color-light</code>: <span>hsl(255deg 0% 95%)</span></span>
13+
<span><code>--mg-color-primary</code>: <span>#475dca</span></span>
14+
<span><code>--mg-color-red</code>: <span>#dc3545</span></span>
15+
<span><code>--mg-color-orange</code>: <span>#fd7e14</span></span>
16+
<span><code>--mg-color-blue</code>: <span>#007bff</span></span>
17+
<span><code>--mg-color-green</code>: <span>#28a745</span></span>
18+
<span
19+
><code>--mg-color-initial</code>: <span>var(--mg-color-light)</span></span
20+
>
21+
<span
22+
><code>--mg-color-secondary</code>: <span>hsl(255deg 0% 20%)</span></span
23+
>
24+
<span
25+
><code>--mg-color-tertiary</code>: <span>hsl(255deg 0% 40%)</span></span
26+
>
27+
<span
28+
><code>--mg-color-quaternary</code>: <span>hsl(255deg 0% 60%)</span></span
29+
>
30+
<span
31+
><code>--mg-color-quinary</code>: <span>hsl(255deg 0% 90%)</span></span
32+
>
33+
</div>
34+
35+
<h3>Dark Mode Colors</h3>
36+
<div class="mg-col">
37+
<span
38+
><code>--mg-dark-color-initial</code>:
39+
<span>var(--mg-color-dark)</span></span
40+
>
41+
<span
42+
><code>--mg-dark-color-secondary</code>:
43+
<span>hsl(255deg 0% 80%)</span></span
44+
>
45+
<span
46+
><code>--mg-dark-color-tertiary</code>:
47+
<span>hsl(255deg 0% 70%)</span></span
48+
>
49+
<span
50+
><code>--mg-dark-color-quaternary</code>:
51+
<span>hsl(255deg 0% 50%)</span></span
52+
>
53+
<span
54+
><code>--mg-dark-color-quinary</code>:
55+
<span>hsl(255deg 0% 25%)</span></span
56+
>
57+
</div>
58+
59+
<h3>Typography</h3>
60+
<div class="mg-col">
61+
<span><code>--mg-base-font-size</code>: <span>1.6rem</span></span>
62+
</div>
63+
64+
<h3>Borders and Shadows</h3>
65+
<div class="mg-col">
66+
<span><code>--mg-control-radius</code>: <span>1rem</span></span>
67+
<span><code>--mg-input-radius</code>: <span>1rem</span></span>
68+
<span
69+
><code>--mg-control-shadow</code>:
70+
<span>0 0 2px rgb(0 0 0 / 20%), 0 3px 4px rgb(0 0 0 / 15%)</span></span
71+
>
72+
<span
73+
><code>--mg-control-active-shadow</code>:
74+
<span>inset 0 0 100px 100px rgb(0 0 0 / 10%)</span></span
75+
>
76+
</div>
77+
78+
<h3>Grid</h3>
79+
<div class="mg-col">
80+
<span><code>--mg-grid-gutter</code>: <span>0.5rem</span></span>
81+
</div>
82+
83+
<h3>Z-Index</h3>
84+
<div class="mg-col">
85+
<span><code>--mg-zindex-0</code>: <span>1</span></span>
86+
<span><code>--mg-zindex-1</code>: <span>100</span></span>
87+
<span><code>--mg-zindex-2</code>: <span>200</span></span>
88+
<span><code>--mg-zindex-3</code>: <span>300</span></span>
89+
<span><code>--mg-zindex-4</code>: <span>400</span></span>
90+
<span><code>--mg-zindex-5</code>: <span>500</span></span>
91+
<span><code>--mg-zindex-max</code>: <span>999</span></span>
92+
</div>
93+
</section>

‎demo/sections/intro-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h3>Library size comparison</h3>
3838
<progress max="256" value="8"></progress>
3939
<div class="mg-badge mg-m-l5 mg-text-s">8 KB</div>
4040
</div>
41-
<b>Mg+ v1.4.4</b>
41+
<b>Mg+ v1.4.5</b>
4242
<div class="mg-row">
4343
<progress max="256" value="68"></progress>
4444
<div class="mg-badge mg-m-l5 mg-text-s">68 KB</div>

‎demo/sections/modal-section.html‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h2>Modal</h2>
1616
trigger button to open the modal:
1717

1818
<code>data-toggle="modal"</code> and
19-
<code>data-target="any-modal-content-id"</code>
19+
<code>data-target="id-of-modal-content"</code>
2020
</p>
2121
<p>
2222
Otherwise to toggle visibility of the modal, you need to add dynamically
@@ -69,6 +69,30 @@ <h3>
6969
></i>
7070
</h3>
7171
<div class="mg-modal--body">
72+
<div class="mg-dropdown" role="menu">
73+
<button
74+
title="choose a car"
75+
class="mg-icon-dropdown"
76+
data-toggle="dropdown"
77+
>
78+
a dropdown inside a modal
79+
</button>
80+
<div class="mg-dropdown--content">
81+
<ul class="mg-nav">
82+
<li data-value="audi">Audi</li>
83+
<li data-value="bmw">BMW</li>
84+
<li data-value="citroen">Citroen</li>
85+
<li data-value="ford">Ford</li>
86+
<li data-value="honda">Honda</li>
87+
<li data-value="jaguar">Jaguar</li>
88+
<li data-value="land-rover">Land Rover</li>
89+
<li data-value="mini">Mini</li>
90+
<li data-value="nissan">Nissan</li>
91+
<li data-value="toyota">Toyota</li>
92+
<li data-value="volvo">Volvo</li>
93+
</ul>
94+
</div>
95+
</div>
7296
<div id="lipsum">
7397
<p>
7498
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
@@ -200,32 +224,31 @@ <h3>
200224

201225
<p>
202226
Combine following classes with mg-modal to define orientation:
203-
<code>mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left</code>
227+
<code
228+
>mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left</code
229+
>
204230
</p>
205231
<div class="mg-container">
206-
<div class="mg-row mg-gap1">
232+
<div class="mg-row mg-gap1" data-toggle="htmlpreview">
207233
<div class="mg-col mg-x2">
208234
<button
209235
title="scrollable modal"
210236
data-toggle="modal"
211237
data-target="modal-tl"
212-
data-orientation="top-left"
213238
>
214239
<i class="mg-icon svg-icon-popup-tl"></i>
215240
</button>
216241
<button
217242
title="scrollable modal"
218243
data-toggle="modal"
219244
data-target="modal-l"
220-
data-orientation="left"
221245
>
222246
<i class="mg-icon svg-icon-popup-ml"></i>
223247
</button>
224248
<button
225249
title="scrollable modal"
226250
data-toggle="modal"
227251
data-target="modal-bl"
228-
data-orientation="bottom-left"
229252
>
230253
<i class="mg-icon svg-icon-popup-bl"></i>
231254
</button>
@@ -235,23 +258,20 @@ <h3>
235258
title="scrollable modal"
236259
data-toggle="modal"
237260
data-target="modal-tc"
238-
data-orientation="top"
239261
>
240262
<i class="mg-icon svg-icon-popup-tc"></i>
241263
</button>
242264
<button
243265
title="scrollable modal"
244266
data-toggle="modal"
245267
data-target="modal-default"
246-
data-orientation="default"
247268
>
248269
<i class="mg-icon svg-icon-popup-mc"></i>
249270
</button>
250271
<button
251272
title="scrollable modal"
252273
data-toggle="modal"
253274
data-target="modal-b"
254-
data-orientation="bottom"
255275
>
256276
<i class="mg-icon svg-icon-popup-bc"></i>
257277
</button>
@@ -269,15 +289,13 @@ <h3>
269289
title="scrollable modal"
270290
data-toggle="modal"
271291
data-target="modal-r"
272-
data-orientation="right"
273292
>
274293
<i class="mg-icon svg-icon-popup-mr"></i>
275294
</button>
276295
<button
277296
title="scrollable modal"
278297
data-toggle="modal"
279298
data-target="modal-br"
280-
data-orientation="bottom-right"
281299
>
282300
<i class="mg-icon svg-icon-popup-br"></i>
283301
</button>

‎demo/sections/responsive-display-section.html‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<section id="responsive-display">
22
<h2>Responsive display</h2>
3-
<p> Responsive display classes allow you to show or hide elements based on the screen size. This is useful for
4-
creating a responsive layout that adapts to different screen sizes.</p>
3+
<p>
4+
Responsive display classes allow you to show or hide elements based on the
5+
screen size. This is useful for creating a responsive layout that adapts to
6+
different screen sizes.
7+
</p>
58
<i>no JS required, following rules works only with CSS</i>
69
<i>Resize your browser or switch to virutal mobile mode to check changes</i>
710
<h5>Hidden effect (s,m,l,xl)</h5>
@@ -20,25 +23,56 @@ <h5>Display effect (s,m,l,xl)</h5>
2023
</div>
2124
<div>
2225
<h5>Progressive display example</h5>
23-
<div class="mg-row mg-gap1" id="responsive-example2" data-toggle="htmlpreview">
24-
<div class="mg-badge success"><i class="mg-icon svg-icon-screen-s"></i></div>
25-
<div class="mg-badge success mg-s-hidden"><i class="mg-icon svg-icon-screen-m"></i></div>
26-
<div class="mg-badge success mg-m-hidden"><i class="mg-icon svg-icon-screen-l"></i></div>
27-
<div class="mg-badge success mg-l-hidden"><i class="mg-icon svg-icon-screen-xl"></i></div>
26+
<p>
27+
This example demonstrates how elements can be progressively revealed based
28+
on the screen size.
29+
</p>
30+
<i>Resize your browser or switch to virtual mobile mode to check changes</i>
2831

32+
<div
33+
class="mg-row mg-gap1"
34+
id="responsive-example2"
35+
data-toggle="htmlpreview"
36+
>
37+
<div class="mg-badge success">
38+
<i class="mg-icon svg-icon-screen-s"></i>
39+
</div>
40+
<div class="mg-badge success mg-s-hidden">
41+
<i class="mg-icon svg-icon-screen-m"></i>
42+
</div>
43+
<div class="mg-badge success mg-m-hidden">
44+
<i class="mg-icon svg-icon-screen-l"></i>
45+
</div>
46+
<div class="mg-badge success mg-l-hidden">
47+
<i class="mg-icon svg-icon-screen-xl"></i>
48+
</div>
2949

30-
<div class="mg-badge danger mg-s-display"><i class="mg-icon svg-icon-screen-m"></i></div>
31-
<div class="mg-badge danger mg-m-display"><i class="mg-icon svg-icon-screen-l"></i></div>
32-
<div class="mg-badge danger mg-l-display"><i class="mg-icon svg-icon-screen-xl"></i></div>
33-
50+
<div class="mg-badge danger mg-s-display">
51+
<i class="mg-icon svg-icon-screen-m"></i>
52+
</div>
53+
<div class="mg-badge danger mg-m-display">
54+
<i class="mg-icon svg-icon-screen-l"></i>
55+
</div>
56+
<div class="mg-badge danger mg-l-display">
57+
<i class="mg-icon svg-icon-screen-xl"></i>
58+
</div>
3459
</div>
3560
<h5>Exclusive display example</h5>
3661
<p>It shows only icon with current screen size</p>
62+
<i>Resize your browser or switch to virtual mobile mode to check changes</i>
3763
<div class="mg-row" id="responsive-example21" data-toggle="htmlpreview">
38-
<div class="mg-badge success mg-s-display"><i class="mg-icon svg-icon-screen-s"></i> </div>
39-
<div class="mg-badge success mg-s-hidden mg-m-display"><i class="mg-icon svg-icon-screen-m"></i></div>
40-
<div class="mg-badge success mg-m-hidden mg-l-display"><i class="mg-icon svg-icon-screen-l"></i></div>
41-
<div class="mg-badge success mg-l-hidden"><i class="mg-icon svg-icon-screen-xl"></i></div>
64+
<div class="mg-badge success mg-s-display">
65+
<i class="mg-icon svg-icon-screen-s"></i>
66+
</div>
67+
<div class="mg-badge success mg-s-hidden mg-m-display">
68+
<i class="mg-icon svg-icon-screen-m"></i>
69+
</div>
70+
<div class="mg-badge success mg-m-hidden mg-l-display">
71+
<i class="mg-icon svg-icon-screen-l"></i>
72+
</div>
73+
<div class="mg-badge success mg-l-hidden">
74+
<i class="mg-icon svg-icon-screen-xl"></i>
75+
</div>
4276
</div>
4377
</div>
44-
</section>
78+
</section>

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/skins/sunburst.css"
2424
/>
2525
</head>
26-
2726
<body>
2827
<header class="grid-bg">
2928
<nav class="mg-fixed-top mg-w-full mg-pad-t1">
@@ -176,7 +175,8 @@ <h2>A micro CSS library</h2>
176175
<main class="mg-container">
177176
<include src="demo/sections/intro-section.html"></include>
178177
<include src="demo/sections/getting-started.html"></include>
179-
<h2>Examples</h2>
178+
<include src="demo/sections/customization-section.html"></include>
179+
<hr />
180180
<p>
181181
Explore the various examples provided in the documentation to see how
182182
you can use Mg+ to build your web interface. Each example demonstrates

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mgplus",
33
"private": false,
4-
"version": "1.4.4",
4+
"version": "1.4.5",
55
"description": "mgplus a micro CSS library",
66
"homepage": "https://evodim.github.io/mgplus",
77
"repository": "https://github.com/Evodim/mgplus",

‎src/scss/core/_Range.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,19 @@ input[type="range"] {
2727
box-shadow: $control-shadow;
2828
cursor: pointer;
2929
height: 2.5rem;
30-
width: 2.7rem;
30+
width: 2.5rem;
3131
}
3232

3333
&::-webkit-slider-thumb {
3434
-webkit-appearance: none;
3535
appearance: none;
3636
background: $color-primary;
37-
border-radius: 100%;
38-
;
3937
border: none;
4038
box-shadow: $control-shadow;
4139
cursor: pointer;
4240
height: 2.5rem;
43-
width: 2.7rem;
41+
width: 2.5rem;
42+
border-radius: var(--mg-control-radius);
4443
}
4544

4645
&:disabled {

0 commit comments

Comments
 (0)