Skip to content

Commit 2e793f1

Browse files
medevodmedevod
medevod
and
medevod
authored
PR - mgplus - Features/v1.4.3 (#82)
* update helpers * dark mode : add light colors mixin for hybrid theme layouts * apply light theme only in local variable scope * BREAKING CHANGE theme helper naming * feat mg-modal add sliding effects * fix mg-modal demo * fix linter * BREAKING CHANGE mg modal use opened class to toggle visibility like mg dropdown * BREAKING CHANGE mgmodal changed position class name --------- Co-authored-by: medevod <medevod@github.com>
1 parent 1c2d052 commit 2e793f1

File tree

10 files changed

+318
-198
lines changed

10 files changed

+318
-198
lines changed

‎demo/sections/grid-section.html‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,21 +77,31 @@ <h4>Row alignment</h4>
7777
</div>
7878
<h3>Vertical alignment <code>mg-col</code></h3>
7979
<div class="mg-container" id="grid-example4" data-toggle="htmlpreview">
80-
<div class="mg-row mg-h30vh">
81-
<div class="mg-col mg-x4 mg-x--top">
80+
<div class="mg-row mg-h30vh" >
81+
<div class="mg-col mg-x2 mg-x--top">
8282
top
83-
<div class="grid-cel mg-block mg-row">x4</div>
84-
<div class="grid-cel mg-row">x4</div>
83+
<div class="grid-cel mg-block mg-row">x2</div>
84+
<div class="grid-cel mg-row">x2</div>
8585
</div>
86-
<div class="mg-col mg-x4 mg-x--middle">
86+
<div class="mg-col mg-x2 mg-x--middle">
8787
middle
88-
<div class="grid-cel mg-row">x4</div>
89-
<div class="grid-cel mg-row">x4</div>
88+
<div class="grid-cel mg-row">x2</div>
89+
<div class="grid-cel mg-row">x2</div>
9090
</div>
91-
<div class="mg-col mg-x4 mg-x--bottom">
91+
<div class="mg-col mg-x2 mg-x--bottom">
9292
bottom
93-
<div class="grid-cel mg-row">x4</div>
94-
<div class="grid-cel mg-row">x4</div>
93+
<div class="grid-cel mg-row">x2</div>
94+
<div class="grid-cel mg-row">x2</div>
95+
</div>
96+
<div class="mg-col mg-x2 mg-x--between">
97+
between
98+
<div class="grid-cel mg-row">x2</div>
99+
<div class="grid-cel mg-row">x2</div>
100+
</div>
101+
<div class="mg-col mg-x2 mg-x--around">
102+
arround
103+
<div class="grid-cel mg-row">x2</div>
104+
<div class="grid-cel mg-row">x2</div>
95105
</div>
96106
</div>
97107
</div>

‎demo/sections/helpers-section.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,25 @@ <h3>Visibility</h3>
8787

8888
<span><code>.mg-visible</code> { visibility: visible; }</span>
8989
<span><code>.mg-hidden</code> { visibility: hidden;}</span>
90-
90+
91+
<h4>Borders</h4>
9192
<span><code>.mg-rounded[0-10]</code> { border-radius: [0-10]rem;}</span>
9293
<span><code>.mg-rounded-tl[0-10]</code> { border-top-left-radius: [0-10]rem;}</span>
9394
<span><code>.mg-rounded-tr[0-10]</code> { border-top-right-radius: [0-10]rem;}</span>
9495
<span><code>.mg-rounded-br[0-10]</code> { border-bottom-right-radius: [0-10]rem;}</span>
9596
<span><code>.mg-rounded-bl[0-10]</code> { border-bottom-left-radius: [0-10]rem;}</span>
9697
<span><code>.mg-rounded-none</code> { border-radius: 0;}</span>
9798
<span><code>.mg-rounded-full</code> { border-radius: 100%;}</span>
99+
<span><code>.mg-border</code> { border: 0.07rem solid $color-quaternary; }</span>
100+
<span><code>.mg-border-none</code> { border: none; }</span>
101+
<span><code>.mg-border-t</code> { border-top: 0.07rem solid $color-quaternary; }</span>
102+
<span><code>.mg-border-r</code> { border-right: 0.07rem solid $color-quaternary; }</span>
103+
<span><code>.mg-border-b</code> { border-bottom: 0.07rem solid $color-quaternary; }</span>
104+
<span><code>.mg-border-l</code> { border-left: 0.07rem solid $color-quaternary; }</span>
98105
<h4>z-index (0 to 500 step 100)</h4>
99106
<span><code>.mg-z[0-5]</code> { z-index: [0-500];}</span>
100107
<span><code>.mg-z-full</code> { z-index: 999;}</span>
101-
108+
102109
</div>
103110

104111
<h3>Text</h3>

‎demo/sections/modal-section.html‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,9 @@ <h3>
182182

183183
<p>
184184
Combine following classes with mg-modal to define orientation:
185-
<code>mg-top | mg-bottom | mg-right | mg-left </code>
185+
<code
186+
>mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left
187+
</code>
186188
</p>
187189
<div class="mg-container">
188190
<div class="mg-row mg-gap1">
@@ -266,11 +268,11 @@ <h3>
266268
</div>
267269
</div>
268270
</div>
269-
<div class="mg-modal mg-top mg-right" id="modal-tr">
270-
<div class="mg-modal--content mg-container">
271+
<div class="mg-modal mg-modal--right" id="modal-tr">
272+
<div class="mg-modal--content mg-top mg-container">
271273
<h3>
272274
<i
273-
class="mg-icon icon-close mg-icon--action mg-top mg-right"
275+
class="mg-icon icon-close mg-icon--action mg-right"
274276
data-action="close"
275277
></i>
276278
</h3>
@@ -279,7 +281,7 @@ <h3>
279281
</div>
280282
</div>
281283
</div>
282-
<div class="mg-modal mg-right" id="modal-r">
284+
<div class="mg-modal mg-modal--right" id="modal-r">
283285
<div class="mg-modal--content mg-container">
284286
<h3>
285287
<i
@@ -292,8 +294,8 @@ <h3>
292294
</div>
293295
</div>
294296
</div>
295-
<div class="mg-modal mg-bottom mg-bottom mg-right" id="modal-br">
296-
<div class="mg-modal--content mg-container">
297+
<div class="mg-modal mg-modal--right" id="modal-br">
298+
<div class="mg-modal--content mg-bottom mg-container">
297299
<h3>
298300
<i
299301
class="mg-icon icon-close mg-icon--action mg-right"
@@ -305,8 +307,8 @@ <h3>
305307
</div>
306308
</div>
307309
</div>
308-
<div class="mg-modal mg-top mg-left" id="modal-tl">
309-
<div class="mg-modal--content mg-container">
310+
<div class="mg-modal mg-modal--left" id="modal-tl">
311+
<div class="mg-modal--content mg-top mg-container">
310312
<h3>
311313
<i
312314
class="mg-icon icon-close mg-icon--action mg-right"
@@ -318,8 +320,8 @@ <h3>
318320
</div>
319321
</div>
320322
</div>
321-
<div class="mg-modal mg-bottom mg-left" id="modal-bl">
322-
<div class="mg-modal--content mg-container">
323+
<div class="mg-modal mg-modal--left" id="modal-bl">
324+
<div class="mg-modal--content mg-bottom mg-container">
323325
<h3>
324326
<i
325327
class="mg-icon icon-close mg-icon--action mg-right"
@@ -331,7 +333,7 @@ <h3>
331333
</div>
332334
</div>
333335
</div>
334-
<div class="mg-modal mg-left" id="modal-l">
336+
<div class="mg-modal mg-modal--left" id="modal-l">
335337
<div class="mg-modal--content mg-container">
336338
<h3>
337339
<i
@@ -344,7 +346,7 @@ <h3>
344346
</div>
345347
</div>
346348
</div>
347-
<div class="mg-modal mg-top" id="modal-tc">
349+
<div class="mg-modal mg-modal--top" id="modal-tc">
348350
<div class="mg-modal--content mg-container">
349351
<h3>
350352
<i
@@ -358,7 +360,7 @@ <h3>
358360
</div>
359361
</div>
360362

361-
<div class="mg-modal mg-bottom" id="modal-b">
363+
<div class="mg-modal mg-modal--bottom" id="modal-b">
362364
<div class="mg-modal--content mg-container">
363365
<h3>
364366
<i

0 commit comments

Comments
 (0)