From 51017fedff68cef5fe3255b17b645017c564b53c Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 20:08:00 +0200 Subject: [PATCH 01/10] fix apply control and input radius to range thumb --- src/scss/core/_Range.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scss/core/_Range.scss b/src/scss/core/_Range.scss index 687a393..b4cf1cd 100644 --- a/src/scss/core/_Range.scss +++ b/src/scss/core/_Range.scss @@ -27,7 +27,7 @@ input[type="range"] { box-shadow: $control-shadow; cursor: pointer; height: 2.5rem; - width: 2.7rem; + width: 2.5rem; } &::-webkit-slider-thumb { @@ -40,7 +40,8 @@ input[type="range"] { box-shadow: $control-shadow; cursor: pointer; height: 2.5rem; - width: 2.7rem; + width: 2.5rem; + border-radius: var(--mg-control-radius); } &:disabled { From 158bd2dc5bb3693b6bac173032d3dc86fa859c37 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 20:08:24 +0200 Subject: [PATCH 02/10] fix doc remove custom work styling --- demo/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/demo/index.css b/demo/index.css index 93a8d69..6dfa6b1 100644 --- a/demo/index.css +++ b/demo/index.css @@ -192,3 +192,8 @@ pre.prettyprint { ); z-index: -2; } + +code .kwd, +pre .kwd { + color: #fff !important; +} From 72179c4a5eabc1604fc6d706d475663eb9bbc3dc Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:32:11 +0200 Subject: [PATCH 03/10] fix add more left space for dropdown and navs icons --- src/scss/extensions/mg-icon.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/extensions/mg-icon.scss b/src/scss/extensions/mg-icon.scss index 92f246e..f6a783d 100644 --- a/src/scss/extensions/mg-icon.scss +++ b/src/scss/extensions/mg-icon.scss @@ -25,7 +25,7 @@ .mg-icon-dropdown, .mg-icon-collapse { // force padding to container element to reserve space for arrow - padding-right: 2.5rem !important; + padding-right: 3rem !important; position: relative; &::after { @@ -41,7 +41,7 @@ .mg-icon-nav { // force padding to container element to reserve space for arrow - padding-right: 2.5rem !important; + padding-right: 3rem !important; position: relative; &::after { From 9af66ee0a304f36e321501c4a413afe4f4f619c5 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:32:25 +0200 Subject: [PATCH 04/10] doc update modal section --- demo/sections/modal-section.html | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/demo/sections/modal-section.html b/demo/sections/modal-section.html index 5162ccc..ee92628 100644 --- a/demo/sections/modal-section.html +++ b/demo/sections/modal-section.html @@ -16,7 +16,7 @@

Modal

trigger button to open the modal: data-toggle="modal" and - data-target="any-modal-content-id" + data-target="id-of-modal-content"

Otherwise to toggle visibility of the modal, you need to add dynamically @@ -200,16 +200,17 @@

Combine following classes with mg-modal to define orientation: - mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left + mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left

-
+
@@ -217,7 +218,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-l" - data-orientation="left" > @@ -225,7 +225,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-bl" - data-orientation="bottom-left" > @@ -235,7 +234,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-tc" - data-orientation="top" > @@ -243,7 +241,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-default" - data-orientation="default" > @@ -251,7 +248,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-b" - data-orientation="bottom" > @@ -269,7 +265,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-r" - data-orientation="right" > @@ -277,7 +272,6 @@

title="scrollable modal" data-toggle="modal" data-target="modal-br" - data-orientation="bottom-right" > From 6514fbc531ffc578f7f880d50fe697a3309b7365 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:16:15 +0200 Subject: [PATCH 05/10] fix use zindex global variables for modal layers --- src/scss/extensions/mg-modal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/extensions/mg-modal.scss b/src/scss/extensions/mg-modal.scss index 5d8a528..ec2661c 100644 --- a/src/scss/extensions/mg-modal.scss +++ b/src/scss/extensions/mg-modal.scss @@ -16,7 +16,7 @@ height: 100%; visibility: hidden; backface-visibility: hidden; - z-index: 1000; + z-index: calc($zindex-max + 1); opacity: 0; background: rgb(0 0 0 / 70%); transition: opacity 0.3s; @@ -32,7 +32,7 @@ color: $color-secondary; padding: 2rem 1.5rem; margin-top: 0; - z-index: 2000; + z-index: calc($zindex-max + 2); box-shadow: $control-shadow; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } From 57ba543cf058e0096634f427b621897203744430 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:16:33 +0200 Subject: [PATCH 06/10] doc add customization section --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4cbf6ed..dda162b 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,6 @@ href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/skins/sunburst.css" /> -

- Mg+ v1.4.4 + Mg+ v1.4.5
68 KB
diff --git a/demo/sections/modal-section.html b/demo/sections/modal-section.html index ee92628..5a1462c 100644 --- a/demo/sections/modal-section.html +++ b/demo/sections/modal-section.html @@ -69,6 +69,30 @@

>

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur diff --git a/demo/sections/responsive-display-section.html b/demo/sections/responsive-display-section.html index c66e642..f9556df 100644 --- a/demo/sections/responsive-display-section.html +++ b/demo/sections/responsive-display-section.html @@ -1,7 +1,10 @@

Responsive display

-

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.

+

+ 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. +

no JS required, following rules works only with CSS Resize your browser or switch to virutal mobile mode to check changes
Hidden effect (s,m,l,xl)
@@ -20,25 +23,56 @@
Display effect (s,m,l,xl)
Progressive display example
-
-
-
-
-
+

+ This example demonstrates how elements can be progressively revealed based + on the screen size. +

+ Resize your browser or switch to virtual mobile mode to check changes +
+
+ +
+
+ +
+
+ +
+
+ +
-
-
-
- +
+ +
+
+ +
+
+ +
Exclusive display example

It shows only icon with current screen size

+ Resize your browser or switch to virtual mobile mode to check changes
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
- \ No newline at end of file + From b2d27c3ecb0d6177d269f7dd943728b66bfcb1b6 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:17:48 +0200 Subject: [PATCH 09/10] update pkg --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 623e1fb..1122185 100644 --- a/package.json +++ b/package.json @@ -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", From 84aba789ef0739b1bd855757869c8508973c6b80 Mon Sep 17 00:00:00 2001 From: medevod Date: Tue, 22 Jul 2025 21:38:20 +0200 Subject: [PATCH 10/10] fix linter --- src/scss/core/_Range.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/scss/core/_Range.scss b/src/scss/core/_Range.scss index b4cf1cd..a930599 100644 --- a/src/scss/core/_Range.scss +++ b/src/scss/core/_Range.scss @@ -34,8 +34,6 @@ input[type="range"] { -webkit-appearance: none; appearance: none; background: $color-primary; - border-radius: 100%; - ; border: none; box-shadow: $control-shadow; cursor: pointer;