Skip to content

Commit ffd65e6

Browse files
medevodmedevod
medevod
and
medevod
authored
Features/v1.4.4 (#84)
* 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 * update documentation * chore * feat: retablish gutter and add custom css variable for customization --------- Co-authored-by: medevod <medevod@github.com>
1 parent 2e793f1 commit ffd65e6

20 files changed

+269
-155
lines changed

‎demo/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
--mg-color-primary: #475dca;
33
--mg-color-secondary: #34237a;
44
--mg-dark-color-initial: #302f2f;
5-
65
--mg-control-radius: 1.5rem;
76
--mg-input-radius: 1.5rem;
87
--mg-control-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);

‎demo/sections/alert-section.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<section id="alert">
22
<h2>Alert</h2>
33
<code>mg-alert</code>
4-
<p>Alerts are used to display important information to the user. They are used to display important information to the
5-
user. They are used to display important information to the user.</p>
4+
<p>
5+
Combine the <code>mg-alert</code> class with other classes to create different types of alerts.
6+
You can use the <code>mg-alert</code> class to create a basic alert box, and then add additional classes
7+
to change its appearance. The following classes are available:
8+
<code>mg-alert danger</code>, <code>mg-alert success</code>, <code>mg-alert warning</code>.
9+
10+
You can also add an icon to the alert box by using the <code>mg-icon</code> class.
11+
The icon can be closed by using the <code>icon-close</code> class.
12+
</p>
613
<div data-toggle="htmlpreview">
714
<div class="mg-alert">
815
<i class="mg-icon icon-close mg-icon--action mg-right"></i>

‎demo/sections/badge-section.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<section id="badges">
22
<h2>Badges</h2>
3-
<code>mg-badge</code>
3+
<p>
4+
Combine the <code>mg-badge</code> class with other classes to create
5+
different types of badges. You can use the <code>mg-badge</code> class to
6+
create a basic badge, and then add additional classes to change its
7+
appearance. The following classes are available:
8+
<code>mg-badge danger</code>, <code>mg-badge success</code>,
9+
<code>mg-badge warning</code>. You can also use the <code>mg-text-s</code>,
10+
<code>mg-text-m</code>, <code>mg-text-l</code>, and
11+
<code>mg-text-xl</code> classes to change the text size.
12+
</p>
413
<h3>Default appearance</h3>
514
<div id="badges-example" data-toggle="htmlpreview">
615
<span class="mg-badge">default</span>

‎demo/sections/check-section.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<section id="check">
22
<h2>Check</h2>
33
<code>mg-check</code>
4-
<p>You will find examples of
5-
checkboxes in their default, checked, and disabled states.</p>
4+
<p>
5+
You will find examples of checkboxes in their default, checked, and disabled
6+
states.
7+
</p>
68
<div class="mg-row" id="check-example" data-toggle="htmlpreview">
7-
89
<label class="mg-check">
910
on
1011
<input type="checkbox" checked />
@@ -21,4 +22,4 @@ <h2>Check</h2>
2122
<span class="mg-check--icon"></span>
2223
</label>
2324
</div>
24-
</section>
25+
</section>

‎demo/sections/collapse-section.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ <h2>Collapse</h2>
55
collapsible elements in their default state, as well as examples of how to trigger the collapse and expand
66
functionality.</p>
77
<p>Place <code>mg-collapse</code> class to a clickable element</p>
8-
<p>Place <code>mg-collapse--content</code> class to a sibling content element</p>
9-
<p><code>opened</code> class will toggle visibility of the collapsible content inside
8+
<p>Place <code>mg-collapse--content</code> just after the clickable element</p>
9+
<p>Adding <code>opened</code> class to <code>mg-collapse</code> will toggle visibility of the collapsible content inside
1010
<code>mg-collapse--content</code>
1111
</p>
1212
<p>Place special inline icon <code>mg-icon-collapse</code> to reflect state of collapsible content</p>

‎demo/sections/colors-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<section id="colors">
22
<h2>Colors</h2>
33
<p>
4-
Mgplus provides a set of predefined colors that you can use throughout your
4+
MgPlus provides a set of predefined colors that you can use throughout your
55
application. These colors can be customized for both light and dark modes
66
</p>
77
<h3>Light Mode Colors</h3>

‎demo/sections/form-section.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ <h2>Forms</h2>
44
Below, you will find examples of form elements in their default state, as
55
well as examples of how to trigger the form functionality.
66
</p>
7+
<p>You can use grid system classes to create responsive form layouts.</p>
8+
<p>
9+
Place <code>mg-col</code> class to a fieldset element to create a form
10+
section.
11+
</p>
12+
<p>
13+
Place <code>mg-inline-flex</code> class to a div element to create inline
14+
inputs.
15+
</p>
16+
<p>
17+
Place <code>mg-row</code> class to a div element to create a row of form
18+
elements.
19+
</p>
20+
721
<form id="forms-example" data-toggle="htmlpreview">
822
<fieldset class="mg-col">
923
<label>2 cols input</label>

‎demo/sections/group-section.html‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<section id="group">
22
<h2>Group</h2>
3-
<p><code>mg-group</code> is used to group buttons or input in a same frame</p>
3+
<p>
4+
Place <code>mg-group</code> class to a div element to create a group of
5+
buttons or inputs.
6+
</p>
7+
<code>mg-group</code> preserves the visual coherence of grouped elements whatever the size or rounding of the elements.
8+
</p>
49

510
<div class="mg-group" id="group-example" data-toggle="htmlpreview">
611
<div class="mg-dropdown" data-value="bmw" id="car-dropdown">
@@ -18,11 +23,17 @@ <h2>Group</h2>
1823
</div>
1924
</div>
2025
<input class="mg-x6" type="text" title="test" value="search" />
21-
<a class="mg-button" href="#group"><i class="mg-icon svg-icon-search"></i></a>
26+
<a class="mg-button" href="#group"
27+
><i class="mg-icon svg-icon-search"></i
28+
></a>
2229
</div>
2330
<div class="mg-group" id="group-example4" data-toggle="htmlpreview">
2431
<div class="mg-dropdown" data-value="bmw" id="car-dropdown2">
25-
<button title="dropdown" data-toggle="dropdown" class="mg-icon-dropdown mg-button--small">
32+
<button
33+
title="dropdown"
34+
data-toggle="dropdown"
35+
class="mg-icon-dropdown mg-button--small"
36+
>
2637
<i class="mg-icon svg-icon-gears"></i>
2738
</button>
2839
<div class="mg-dropdown--content mg-dropdown--content-left">
@@ -39,11 +50,21 @@ <h2>Group</h2>
3950
</ul>
4051
</div>
4152
</div>
42-
<a class="mg-button mg-button--small" href="#group"><span class="mg-icon svg-icon-search"></span></a>
53+
<a class="mg-button mg-button--small" href="#group"
54+
><span class="mg-icon svg-icon-search"></span
55+
></a>
4356
</div>
4457
<div class="mg-group" id="group-example5" data-toggle="htmlpreview">
45-
<input class="mg-x2 mg-button--small" type="number" min="1" max="31" maxlength="2" title="day" value="01" />
46-
<div class="mg-select mg-x6">
58+
<input
59+
class="mg-x2 mg-pad0 mg-button--small"
60+
type="number"
61+
min="1"
62+
max="31"
63+
maxlength="2"
64+
title="day"
65+
value="01"
66+
/>
67+
<div class="mg-select mg-x6 mg-pad0">
4768
<select aria-label="Month" title="Month" data-value="0">
4869
<option value="0" disabled="">Month</option>
4970
<option value="1">January</option>
@@ -60,6 +81,14 @@ <h2>Group</h2>
6081
<option value="12">December</option>
6182
</select>
6283
</div>
63-
<input class="mg-x4 mg-button--small" type="number" min="1900" max="2025" maxlength="4" title="year" value="2025" />
84+
<input
85+
class="mg-x4 mg-button--small"
86+
type="number"
87+
min="1900"
88+
max="2025"
89+
maxlength="4"
90+
title="year"
91+
value="2025"
92+
/>
6493
</div>
65-
</section>
94+
</section>

‎demo/sections/icons-section.html‎

Lines changed: 88 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,94 @@
11
<section id="icons">
2-
<h2>Icons</h2>
3-
<div class="mg-col">
4-
<h3>Included icons (pure css)</h3>
5-
<h4>Navigation</h4>
6-
<p>The icons are categorized into
7-
different groups based on their usage. Below, you will find examples of navigation icons and action icons,
8-
all implemented using pure CSS.</p>
9-
<p>Additionally, we demonstrate the different sizes available for these icons, ranging from small (s) to 5
10-
extra-large (5xl). This ensures that the icons can be used in a variety of contexts and maintain visual
11-
consistency across the application.</p>
12-
<div data-toggle="htmlpreview">
13-
<i class="mg-icon icon-arrow-down"></i>
14-
<i class="mg-icon icon-arrow-up"></i>
15-
<i class="mg-icon icon-arrow-left"></i>
16-
<i class="mg-icon icon-arrow-right"></i>
17-
<i class="mg-icon icon-back"></i>
18-
<i class="mg-icon icon-forward"></i>
19-
<i class="mg-icon icon-upward"></i>
20-
<i class="mg-icon icon-downward"></i>
21-
<i class="mg-icon icon-caret"></i>
22-
<i class="mg-icon icon-menu"></i>
23-
<i class="mg-icon icon-apps"></i>
24-
<i class="mg-icon icon-more"></i>
25-
<i class="mg-icon icon-more-inline"></i>
26-
</div>
27-
<h4>Actions</h4>
28-
<p>The icons are categorized into
29-
different groups based on their usage. Below, you will find examples of navigation icons and action icons,
30-
all implemented using pure CSS.</p>
31-
<p>Additionally, we demonstrate the different sizes available for these icons, ranging from small (s) to 5
32-
extra-large (5xl). This ensures that the icons can be used in a variety of contexts and maintain visual
33-
consistency across the application.</p>
34-
<div data-toggle="htmlpreview">
35-
<i class="mg-icon icon-plus"></i>
36-
<i class="mg-icon icon-minus"></i>
37-
<i class="mg-icon icon-close mg-icon--action"></i>
38-
<i class="mg-icon icon-check"></i>
39-
<i class="mg-icon icon-search"></i>
40-
<i class="mg-icon icon-rounded-check"></i>
41-
<i class="mg-icon icon-stop"></i>
42-
<i class="mg-icon icon-spinner"></i>
43-
</div>
44-
</div>
45-
<h3>Icon sizing (s to 5xl)</h3>
46-
<p>The icons are categorized
47-
into different groups based on their usage. Below, you will find examples of navigation icons and action icons,
48-
all implemented using pure CSS.</p>
49-
<p>Additionally, we demonstrate the different sizes available for these icons, ranging from small (s) to 5
50-
extra-large (5xl). This ensures that the icons can be used in a variety of contexts and maintain visual
51-
consistency across the application.</p>
2+
<h2>Icons</h2>
3+
<div class="mg-col">
4+
<h3>Included icons (pure css)</h3>
5+
<h4>Navigation</h4>
6+
<p>
7+
The icons are categorized into different groups based on their usage.
8+
Below, you will find examples of navigation icons and action icons, all
9+
implemented using pure CSS.
10+
</p>
5211
<div data-toggle="htmlpreview">
53-
<div>
54-
<i class="mg-icon mg-icon--s icon-search"></i>
55-
<i class="mg-icon mg-icon--m icon-search"></i>
56-
<i class="mg-icon mg-icon--l icon-search"></i>
57-
<i class="mg-icon mg-icon--xl icon-search"></i>
58-
<i class="mg-icon mg-icon--2xl icon-search"></i>
59-
<i class="mg-icon mg-icon--3xl icon-search"></i>
60-
<i class="mg-icon mg-icon--4xl icon-search"></i>
61-
<i class="mg-icon mg-icon--5xl icon-search"></i>
62-
</div>
63-
<h4>Sizing with external icons (svg)</h4>
64-
<div>
65-
<i class="mg-icon mg-icon--s svg-icon-gears"></i>
66-
<i class="mg-icon mg-icon--m svg-icon-gears"></i>
67-
<i class="mg-icon mg-icon--l svg-icon-gears"></i>
68-
<i class="mg-icon mg-icon--xl svg-icon-gears"></i>
69-
<i class="mg-icon mg-icon--2xl svg-icon-gears"></i>
70-
<i class="mg-icon mg-icon--3xl svg-icon-gears"></i>
71-
<i class="mg-icon mg-icon--4xl svg-icon-gears"></i>
72-
<i class="mg-icon mg-icon--5xl svg-icon-gears"></i>
73-
</div>
12+
<i class="mg-icon icon-arrow-down"></i>
13+
<i class="mg-icon icon-arrow-up"></i>
14+
<i class="mg-icon icon-arrow-left"></i>
15+
<i class="mg-icon icon-arrow-right"></i>
16+
<i class="mg-icon icon-back"></i>
17+
<i class="mg-icon icon-forward"></i>
18+
<i class="mg-icon icon-upward"></i>
19+
<i class="mg-icon icon-downward"></i>
20+
<i class="mg-icon icon-caret"></i>
21+
<i class="mg-icon icon-menu"></i>
22+
<i class="mg-icon icon-apps"></i>
23+
<i class="mg-icon icon-more"></i>
24+
<i class="mg-icon icon-more-inline"></i>
7425
</div>
75-
<h3>Icon integration</h3>
76-
<h4>Buttons</h4>
77-
<p>We provide examples of buttons with inline icons,
78-
as well as buttons that use SVG icons. These examples demonstrate how icons can be seamlessly integrated into
79-
button elements to enhance usability and visual appeal.</p>
26+
<h4>Actions</h4>
8027
<div data-toggle="htmlpreview">
81-
<button class="mg-icon-collapse">Inline</button>
82-
<button>CSS<i class="mg-icon icon-search"></i></button>
83-
<button>SVG<i class="mg-icon svg-icon-gears"></i></button>
28+
<i class="mg-icon icon-plus"></i>
29+
<i class="mg-icon icon-minus"></i>
30+
<i class="mg-icon icon-close mg-icon--action"></i>
31+
<i class="mg-icon icon-check"></i>
32+
<i class="mg-icon icon-search"></i>
33+
<i class="mg-icon icon-rounded-check"></i>
34+
<i class="mg-icon icon-stop"></i>
35+
<i class="mg-icon icon-spinner"></i>
8436
</div>
85-
<h4>Badges</h4>
86-
<p>We provide examples of badges with inline icons,
87-
as well as badges that use SVG icons. These examples demonstrate how icons can be seamlessly integrated into
88-
badge elements to enhance usability and visual appeal.</p>
89-
<div data-toggle="htmlpreview">
90-
<span class="mg-badge mg-text-s">filter <i class="mg-icon mg-icon--s icon-close mg-icon--action"></i></span>
91-
<span class="mg-badge warning ">warning <i class="mg-icon icon-stop"></i></span>
37+
</div>
38+
<h3>Icon sizing (s to 5xl)</h3>
39+
<p>
40+
Additionally, we demonstrate the different sizes available for these icons,
41+
ranging from small (s) to 5 extra-large (5xl). This ensures that the icons
42+
can be used in a variety of contexts and maintain visual consistency across
43+
the application.
44+
</p>
45+
<div data-toggle="htmlpreview">
46+
<div>
47+
<i class="mg-icon mg-icon--s icon-search"></i>
48+
<i class="mg-icon mg-icon--m icon-search"></i>
49+
<i class="mg-icon mg-icon--l icon-search"></i>
50+
<i class="mg-icon mg-icon--xl icon-search"></i>
51+
<i class="mg-icon mg-icon--2xl icon-search"></i>
52+
<i class="mg-icon mg-icon--3xl icon-search"></i>
53+
<i class="mg-icon mg-icon--4xl icon-search"></i>
54+
<i class="mg-icon mg-icon--5xl icon-search"></i>
55+
</div>
56+
<h4>Sizing with external icons (svg)</h4>
57+
<div>
58+
<i class="mg-icon mg-icon--s svg-icon-gears"></i>
59+
<i class="mg-icon mg-icon--m svg-icon-gears"></i>
60+
<i class="mg-icon mg-icon--l svg-icon-gears"></i>
61+
<i class="mg-icon mg-icon--xl svg-icon-gears"></i>
62+
<i class="mg-icon mg-icon--2xl svg-icon-gears"></i>
63+
<i class="mg-icon mg-icon--3xl svg-icon-gears"></i>
64+
<i class="mg-icon mg-icon--4xl svg-icon-gears"></i>
65+
<i class="mg-icon mg-icon--5xl svg-icon-gears"></i>
9266
</div>
93-
</section>
67+
</div>
68+
<h3>Icon integration</h3>
69+
<h4>Buttons</h4>
70+
<p>
71+
We provide examples of buttons with inline icons, as well as buttons that
72+
use SVG icons. These examples demonstrate how icons can be seamlessly
73+
integrated into button elements to enhance usability and visual appeal.
74+
</p>
75+
<div data-toggle="htmlpreview">
76+
<button class="mg-icon-collapse">Inline</button>
77+
<button>CSS<i class="mg-icon icon-search"></i></button>
78+
<button>SVG<i class="mg-icon svg-icon-gears"></i></button>
79+
</div>
80+
<h4>Badges</h4>
81+
<p>
82+
We provide examples of badges with inline icons, as well as badges that use
83+
SVG icons. These examples demonstrate how icons can be seamlessly integrated
84+
into badge elements to enhance usability and visual appeal.
85+
</p>
86+
<div data-toggle="htmlpreview">
87+
<span class="mg-badge mg-text-s"
88+
>filter <i class="mg-icon mg-icon--s icon-close mg-icon--action"></i
89+
></span>
90+
<span class="mg-badge warning"
91+
>warning <i class="mg-icon icon-stop"></i
92+
></span>
93+
</div>
94+
</section>

‎demo/sections/input-section.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<section id="inputs">
22
<h2>Inputs</h2>
3+
<p>MgPlus provides a variety of input styles to enhance user experience</p>
4+
<p>Different sizing and icon integration options are available to accommodate various design needs</p>
35
<div id="inputs-example" class="mg-container" data-toggle="htmlpreview">
46
<h3>Input sizing</h3>
57
<input

0 commit comments

Comments
 (0)