Skip to content

Fixes/1.4.5 #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
medevod merged 10 commits into from
Jul 22, 2025
Merged

Fixes/1.4.5 #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
51017fe
fix apply control and input radius to range thumb
Jul 22, 2025
158bd2d
fix doc remove custom work styling
Jul 22, 2025
72179c4
fix add more left space for dropdown and navs icons
Jul 22, 2025
9af66ee
doc update modal section
Jul 22, 2025
6514fbc
fix use zindex global variables for modal layers
Jul 22, 2025
57ba543
doc add customization section
Jul 22, 2025
53d242c
add zindex custom variables
Jul 22, 2025
4a015ac
chore doc
Jul 22, 2025
b2d27c3
update pkg
Jul 22, 2025
84aba78
fix linter
Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions demo/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,3 +192,8 @@ pre.prettyprint {
);
z-index: -2;
}

code .kwd,
pre .kwd {
color: #fff !important;
}
17 changes: 2 additions & 15 deletions demo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,25 +149,12 @@ function registerDemoFeatures() {
.forEach(buildHtmlPreview);

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

document.querySelectorAll("code").forEach((el) => {
el.innerHTML = htmlCodeFormatter(el.innerHTML)
el.innerHTML = htmlCodeFormatter(el.innerHTML);
el.classList.add("prettyprint", "mg-overflow-x-auto", "mg-max-w-full");


//const clipboardButton = document.createElement("button");
//const clipboardButtonIcon = document.createElement("i");

// clipboardButton.classList.add("mg-button--link", "mg-button--small", "mg-right");

// clipboardButton.addEventListener("click", (ev) => {
// navigator.clipboard.writeText(el.innerHTML);
// });
// clipboardButtonIcon.classList.add("mg-icon", "svg-icon-clipboard");
// clipboardButton.appendChild(clipboardButtonIcon);
// el.previousElementSibling?.append(clipboardButton);
});
});

Expand Down
2 changes: 1 addition & 1 deletion demo/sections/collapse-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section id="Collapse">
<section id="collapse">
<h2>Collapse</h2>
<code>mg-collapse + opened</code>
<p>Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of
Expand Down
93 changes: 93 additions & 0 deletions demo/sections/customization-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<section id="customization">
<h2>Customization</h2>
<p>
MgPlus provides a set of CSS variables that allow you to customize the look
and feel of your application. Below is a list of all available variables and
their default values.
</p>

<h3>Colors</h3>
<div class="mg-col">
<span><code>--mg-color-dark</code>: <span>hsl(255deg 0% 5%)</span></span>
<span><code>--mg-color-light</code>: <span>hsl(255deg 0% 95%)</span></span>
<span><code>--mg-color-primary</code>: <span>#475dca</span></span>
<span><code>--mg-color-red</code>: <span>#dc3545</span></span>
<span><code>--mg-color-orange</code>: <span>#fd7e14</span></span>
<span><code>--mg-color-blue</code>: <span>#007bff</span></span>
<span><code>--mg-color-green</code>: <span>#28a745</span></span>
<span
><code>--mg-color-initial</code>: <span>var(--mg-color-light)</span></span
>
<span
><code>--mg-color-secondary</code>: <span>hsl(255deg 0% 20%)</span></span
>
<span
><code>--mg-color-tertiary</code>: <span>hsl(255deg 0% 40%)</span></span
>
<span
><code>--mg-color-quaternary</code>: <span>hsl(255deg 0% 60%)</span></span
>
<span
><code>--mg-color-quinary</code>: <span>hsl(255deg 0% 90%)</span></span
>
</div>

<h3>Dark Mode Colors</h3>
<div class="mg-col">
<span
><code>--mg-dark-color-initial</code>:
<span>var(--mg-color-dark)</span></span
>
<span
><code>--mg-dark-color-secondary</code>:
<span>hsl(255deg 0% 80%)</span></span
>
<span
><code>--mg-dark-color-tertiary</code>:
<span>hsl(255deg 0% 70%)</span></span
>
<span
><code>--mg-dark-color-quaternary</code>:
<span>hsl(255deg 0% 50%)</span></span
>
<span
><code>--mg-dark-color-quinary</code>:
<span>hsl(255deg 0% 25%)</span></span
>
</div>

<h3>Typography</h3>
<div class="mg-col">
<span><code>--mg-base-font-size</code>: <span>1.6rem</span></span>
</div>

<h3>Borders and Shadows</h3>
<div class="mg-col">
<span><code>--mg-control-radius</code>: <span>1rem</span></span>
<span><code>--mg-input-radius</code>: <span>1rem</span></span>
<span
><code>--mg-control-shadow</code>:
<span>0 0 2px rgb(0 0 0 / 20%), 0 3px 4px rgb(0 0 0 / 15%)</span></span
>
<span
><code>--mg-control-active-shadow</code>:
<span>inset 0 0 100px 100px rgb(0 0 0 / 10%)</span></span
>
</div>

<h3>Grid</h3>
<div class="mg-col">
<span><code>--mg-grid-gutter</code>: <span>0.5rem</span></span>
</div>

<h3>Z-Index</h3>
<div class="mg-col">
<span><code>--mg-zindex-0</code>: <span>1</span></span>
<span><code>--mg-zindex-1</code>: <span>100</span></span>
<span><code>--mg-zindex-2</code>: <span>200</span></span>
<span><code>--mg-zindex-3</code>: <span>300</span></span>
<span><code>--mg-zindex-4</code>: <span>400</span></span>
<span><code>--mg-zindex-5</code>: <span>500</span></span>
<span><code>--mg-zindex-max</code>: <span>999</span></span>
</div>
</section>
2 changes: 1 addition & 1 deletion demo/sections/intro-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h3>Library size comparison</h3>
<progress max="256" value="8"></progress>
<div class="mg-badge mg-m-l5 mg-text-s">8 KB</div>
</div>
<b>Mg+ v1.4.4</b>
<b>Mg+ v1.4.5</b>
<div class="mg-row">
<progress max="256" value="68"></progress>
<div class="mg-badge mg-m-l5 mg-text-s">68 KB</div>
Expand Down
40 changes: 29 additions & 11 deletions demo/sections/modal-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h2>Modal</h2>
trigger button to open the modal:

<code>data-toggle="modal"</code> and
<code>data-target="any-modal-content-id"</code>
<code>data-target="id-of-modal-content"</code>
</p>
<p>
Otherwise to toggle visibility of the modal, you need to add dynamically
Expand Down Expand Up @@ -69,6 +69,30 @@ <h3>
></i>
</h3>
<div class="mg-modal--body">
<div class="mg-dropdown" role="menu">
<button
title="choose a car"
class="mg-icon-dropdown"
data-toggle="dropdown"
>
a dropdown inside a modal
</button>
<div class="mg-dropdown--content">
<ul class="mg-nav">
<li data-value="audi">Audi</li>
<li data-value="bmw">BMW</li>
<li data-value="citroen">Citroen</li>
<li data-value="ford">Ford</li>
<li data-value="honda">Honda</li>
<li data-value="jaguar">Jaguar</li>
<li data-value="land-rover">Land Rover</li>
<li data-value="mini">Mini</li>
<li data-value="nissan">Nissan</li>
<li data-value="toyota">Toyota</li>
<li data-value="volvo">Volvo</li>
</ul>
</div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
Expand Down Expand Up @@ -200,32 +224,31 @@ <h3>

<p>
Combine following classes with mg-modal to define orientation:
<code>mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left</code>
<code
>mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left</code
>
</p>
<div class="mg-container">
<div class="mg-row mg-gap1">
<div class="mg-row mg-gap1" data-toggle="htmlpreview">
<div class="mg-col mg-x2">
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-tl"
data-orientation="top-left"
>
<i class="mg-icon svg-icon-popup-tl"></i>
</button>
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-l"
data-orientation="left"
>
<i class="mg-icon svg-icon-popup-ml"></i>
</button>
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-bl"
data-orientation="bottom-left"
>
<i class="mg-icon svg-icon-popup-bl"></i>
</button>
Expand All @@ -235,23 +258,20 @@ <h3>
title="scrollable modal"
data-toggle="modal"
data-target="modal-tc"
data-orientation="top"
>
<i class="mg-icon svg-icon-popup-tc"></i>
</button>
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-default"
data-orientation="default"
>
<i class="mg-icon svg-icon-popup-mc"></i>
</button>
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-b"
data-orientation="bottom"
>
<i class="mg-icon svg-icon-popup-bc"></i>
</button>
Expand All @@ -269,15 +289,13 @@ <h3>
title="scrollable modal"
data-toggle="modal"
data-target="modal-r"
data-orientation="right"
>
<i class="mg-icon svg-icon-popup-mr"></i>
</button>
<button
title="scrollable modal"
data-toggle="modal"
data-target="modal-br"
data-orientation="bottom-right"
>
<i class="mg-icon svg-icon-popup-br"></i>
</button>
Expand Down
66 changes: 50 additions & 16 deletions demo/sections/responsive-display-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<section id="responsive-display">
<h2>Responsive display</h2>
<p> Responsive display classes allow you to show or hide elements based on the screen size. This is useful for
creating a responsive layout that adapts to different screen sizes.</p>
<p>
Responsive display classes allow you to show or hide elements based on the
screen size. This is useful for creating a responsive layout that adapts to
different screen sizes.
</p>
<i>no JS required, following rules works only with CSS</i>
<i>Resize your browser or switch to virutal mobile mode to check changes</i>
<h5>Hidden effect (s,m,l,xl)</h5>
Expand All @@ -20,25 +23,56 @@ <h5>Display effect (s,m,l,xl)</h5>
</div>
<div>
<h5>Progressive display example</h5>
<div class="mg-row mg-gap1" id="responsive-example2" data-toggle="htmlpreview">
<div class="mg-badge success"><i class="mg-icon svg-icon-screen-s"></i></div>
<div class="mg-badge success mg-s-hidden"><i class="mg-icon svg-icon-screen-m"></i></div>
<div class="mg-badge success mg-m-hidden"><i class="mg-icon svg-icon-screen-l"></i></div>
<div class="mg-badge success mg-l-hidden"><i class="mg-icon svg-icon-screen-xl"></i></div>
<p>
This example demonstrates how elements can be progressively revealed based
on the screen size.
</p>
<i>Resize your browser or switch to virtual mobile mode to check changes</i>

<div
class="mg-row mg-gap1"
id="responsive-example2"
data-toggle="htmlpreview"
>
<div class="mg-badge success">
<i class="mg-icon svg-icon-screen-s"></i>
</div>
<div class="mg-badge success mg-s-hidden">
<i class="mg-icon svg-icon-screen-m"></i>
</div>
<div class="mg-badge success mg-m-hidden">
<i class="mg-icon svg-icon-screen-l"></i>
</div>
<div class="mg-badge success mg-l-hidden">
<i class="mg-icon svg-icon-screen-xl"></i>
</div>

<div class="mg-badge danger mg-s-display"><i class="mg-icon svg-icon-screen-m"></i></div>
<div class="mg-badge danger mg-m-display"><i class="mg-icon svg-icon-screen-l"></i></div>
<div class="mg-badge danger mg-l-display"><i class="mg-icon svg-icon-screen-xl"></i></div>

<div class="mg-badge danger mg-s-display">
<i class="mg-icon svg-icon-screen-m"></i>
</div>
<div class="mg-badge danger mg-m-display">
<i class="mg-icon svg-icon-screen-l"></i>
</div>
<div class="mg-badge danger mg-l-display">
<i class="mg-icon svg-icon-screen-xl"></i>
</div>
</div>
<h5>Exclusive display example</h5>
<p>It shows only icon with current screen size</p>
<i>Resize your browser or switch to virtual mobile mode to check changes</i>
<div class="mg-row" id="responsive-example21" data-toggle="htmlpreview">
<div class="mg-badge success mg-s-display"><i class="mg-icon svg-icon-screen-s"></i> </div>
<div class="mg-badge success mg-s-hidden mg-m-display"><i class="mg-icon svg-icon-screen-m"></i></div>
<div class="mg-badge success mg-m-hidden mg-l-display"><i class="mg-icon svg-icon-screen-l"></i></div>
<div class="mg-badge success mg-l-hidden"><i class="mg-icon svg-icon-screen-xl"></i></div>
<div class="mg-badge success mg-s-display">
<i class="mg-icon svg-icon-screen-s"></i>
</div>
<div class="mg-badge success mg-s-hidden mg-m-display">
<i class="mg-icon svg-icon-screen-m"></i>
</div>
<div class="mg-badge success mg-m-hidden mg-l-display">
<i class="mg-icon svg-icon-screen-l"></i>
</div>
<div class="mg-badge success mg-l-hidden">
<i class="mg-icon svg-icon-screen-xl"></i>
</div>
</div>
</div>
</section>
</section>
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/skins/sunburst.css"
/>
</head>

<body>
<header class="grid-bg">
<nav class="mg-fixed-top mg-w-full mg-pad-t1">
Expand Down Expand Up @@ -176,7 +175,8 @@ <h2>A micro CSS library</h2>
<main class="mg-container">
<include src="demo/sections/intro-section.html"></include>
<include src="demo/sections/getting-started.html"></include>
<h2>Examples</h2>
<include src="demo/sections/customization-section.html"></include>
<hr />
<p>
Explore the various examples provided in the documentation to see how
you can use Mg+ to build your web interface. Each example demonstrates
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "mgplus",
"private": false,
"version": "1.4.4",
"version": "1.4.5",
"description": "mgplus a micro CSS library",
"homepage": "https://evodim.github.io/mgplus",
"repository": "https://github.com/Evodim/mgplus",
Expand Down
7 changes: 3 additions & 4 deletions src/scss/core/_Range.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,19 @@ input[type="range"] {
box-shadow: $control-shadow;
cursor: pointer;
height: 2.5rem;
width: 2.7rem;
width: 2.5rem;
}

&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: $color-primary;
border-radius: 100%;
;
border: none;
box-shadow: $control-shadow;
cursor: pointer;
height: 2.5rem;
width: 2.7rem;
width: 2.5rem;
border-radius: var(--mg-control-radius);
}

&:disabled {
Expand Down
Loading