From cf8c29b3136316682cbcd83f597dbad78a08aff7 Mon Sep 17 00:00:00 2001 From: medevod Date: Sat, 24 May 2025 23:50:02 +0200 Subject: [PATCH 1/9] update helpers --- demo/sections/grid-section.html | 30 ++- demo/sections/helpers-section.html | 11 +- index.html | 354 +++++++++++++++++----------- package.json | 2 +- src/scss/extensions/mg-display.scss | 27 ++- src/scss/extensions/mg-grid.scss | 4 +- 6 files changed, 258 insertions(+), 170 deletions(-) diff --git a/demo/sections/grid-section.html b/demo/sections/grid-section.html index df8cbcdf..d3c0ac3f 100644 --- a/demo/sections/grid-section.html +++ b/demo/sections/grid-section.html @@ -77,21 +77,31 @@

Row alignment

Vertical alignment mg-col

-
-
+
+
top -
x4
-
x4
+
x2
+
x2
-
+
middle -
x4
-
x4
+
x2
+
x2
-
+
bottom -
x4
-
x4
+
x2
+
x2
+
+
+ between +
x2
+
x2
+
+
+ arround +
x2
+
x2
diff --git a/demo/sections/helpers-section.html b/demo/sections/helpers-section.html index 2cc1cf53..1728837a 100644 --- a/demo/sections/helpers-section.html +++ b/demo/sections/helpers-section.html @@ -87,7 +87,8 @@

Visibility

.mg-visible { visibility: visible; } .mg-hidden { visibility: hidden;} - + +

Borders

.mg-rounded[0-10] { border-radius: [0-10]rem;} .mg-rounded-tl[0-10] { border-top-left-radius: [0-10]rem;} .mg-rounded-tr[0-10] { border-top-right-radius: [0-10]rem;} @@ -95,10 +96,16 @@

Visibility

.mg-rounded-bl[0-10] { border-bottom-left-radius: [0-10]rem;} .mg-rounded-none { border-radius: 0;} .mg-rounded-full { border-radius: 100%;} + .mg-border { border: 0.07rem solid $color-quaternary; } + .mg-border-none { border: none; } + .mg-border-t { border-top: 0.07rem solid $color-quaternary; } + .mg-border-r { border-right: 0.07rem solid $color-quaternary; } + .mg-border-b { border-bottom: 0.07rem solid $color-quaternary; } + .mg-border-l { border-left: 0.07rem solid $color-quaternary; }

z-index (0 to 500 step 100)

.mg-z[0-5] { z-index: [0-500];} .mg-z-full { z-index: 999;} - +

Text

diff --git a/index.html b/index.html index ac01daee..4cbf6edb 100644 --- a/index.html +++ b/index.html @@ -1,160 +1,228 @@ + + + + + + MgPlus | A micro CSS library based on milligram + + + + + + + - - - - - - MgPlus | A micro CSS library based on milligram - - - - - - - - - -
- - logo -
-

Mg+

- $PACKAGE_VERSION -

A micro CSS library

-

Build pretty websites with just a few drops of CSS

- Getting started - Download - Github -
-
CSS variables
-
Dark mode
-
Fully responsive
-
Lightweight
+ + + + + + + + + + + + +
+
+
+
    - - - - - - - - - - - - - - -
    -
    -
      -
    -
    -
    -
    - - -

    Examples

    -

    Explore the various examples provided in the documentation to see how you can use Mg+ to build your web - interface. Each example demonstrates the usage of different components and utilities to help you get started - quickly.

    -

    We hope you find Mg+ useful and easy to work with. Happy coding!

    - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - - - +
    + + +

    Examples

    +

    + Explore the various examples provided in the documentation to see how + you can use Mg+ to build your web interface. Each example demonstrates + the usage of different components and utilities to help you get started + quickly. +

    +

    We hope you find Mg+ useful and easy to work with. Happy coding!

    + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + diff --git a/package.json b/package.json index 503e3e20..dbe5b274 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mgplus", "private": false, - "version": "1.4.2", + "version": "1.4.3", "description": "mgplus a micro CSS library", "homepage": "https://evodim.github.io/mgplus", "repository": "https://github.com/Evodim/mgplus", diff --git a/src/scss/extensions/mg-display.scss b/src/scss/extensions/mg-display.scss index 4d785320..a2f481c3 100644 --- a/src/scss/extensions/mg-display.scss +++ b/src/scss/extensions/mg-display.scss @@ -115,23 +115,28 @@ @include build-none-half-full('mg-rounded', 'border-radius'); .mg-border { - border-width: 0.12rem; - border-style: solid; + border: 0.07rem solid $color-quaternary; } -.mg-border-thin { - border-width: 0.07rem; - border-style: solid; +.mg-border-none { + border: none; } -.mg-border-bold { - border-width: 0.19rem; - border-style: solid; +.mg-border-t { + border-top: 0.07rem solid $color-quaternary; + +} + +.mg-border-r { + border-right: 0.07rem solid $color-quaternary; +} + +.mg-border-b { + border-bottom: 0.07rem solid $color-quaternary; } -.mg-border-bolder { - border-width: 0.31rem; - border-style: solid; +.mg-border-l { + border-left: 0.07rem solid $color-quaternary; } .mg-pointer { diff --git a/src/scss/extensions/mg-grid.scss b/src/scss/extensions/mg-grid.scss index eca42304..6b7beefd 100644 --- a/src/scss/extensions/mg-grid.scss +++ b/src/scss/extensions/mg-grid.scss @@ -8,9 +8,7 @@ height: 100%; } -.mg-col>* { - flex: 0 0 auto; -} + @include create-all-grid-columns; From 7ccf92cb302f34c8981df3b6dc6966e8fbfce32f Mon Sep 17 00:00:00 2001 From: medevod Date: Thu, 29 May 2025 23:57:52 +0200 Subject: [PATCH 2/9] dark mode : add light colors mixin for hybrid theme layouts --- src/scss/extensions/mg-theme.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/scss/extensions/mg-theme.scss b/src/scss/extensions/mg-theme.scss index 07430569..eb4431d7 100644 --- a/src/scss/extensions/mg-theme.scss +++ b/src/scss/extensions/mg-theme.scss @@ -6,6 +6,14 @@ --mg-color-quinary: var(--mg-dark-color-quinary); } + @mixin light-colors { + --mg-color-initial: var(--mg-color-initial); + --mg-color-secondary: var(--mg-color-secondary); + --mg-color-tertiary: var(--mg-color-tertiary); + --mg-color-quaternary: var(--mg-color-quaternary); + --mg-color-quinary: var(--mg-color-quinary); + } + /* stylelint-disable */ :root { color-scheme: light; @@ -24,6 +32,7 @@ .mg-theme--light, :root[data-theme='light'] { + @include light-colors; color-scheme: light; .mg-hidden-light { From 87b593af06ba1f757ae6141a8271988e7a21f1d8 Mon Sep 17 00:00:00 2001 From: medevod Date: Mon, 9 Jun 2025 12:58:04 +0200 Subject: [PATCH 3/9] apply light theme only in local variable scope --- src/scss/extensions/mg-theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/scss/extensions/mg-theme.scss b/src/scss/extensions/mg-theme.scss index eb4431d7..583f5fae 100644 --- a/src/scss/extensions/mg-theme.scss +++ b/src/scss/extensions/mg-theme.scss @@ -30,8 +30,7 @@ } } - .mg-theme--light, - :root[data-theme='light'] { + .mg-theme--light { @include light-colors; color-scheme: light; From 542725ac1d3c38ffb43e637dcbe3203c74ac9327 Mon Sep 17 00:00:00 2001 From: medevod Date: Mon, 9 Jun 2025 13:15:26 +0200 Subject: [PATCH 4/9] BREAKING CHANGE theme helper naming --- src/scss/extensions/mg-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/extensions/mg-theme.scss b/src/scss/extensions/mg-theme.scss index 583f5fae..7b6975ff 100644 --- a/src/scss/extensions/mg-theme.scss +++ b/src/scss/extensions/mg-theme.scss @@ -19,7 +19,7 @@ color-scheme: light; } - .mg-theme--dark, + .mg-theme-dark, :root[data-theme='dark'] { @include dark-colors; @@ -30,7 +30,7 @@ } } - .mg-theme--light { + .mg-theme-light { @include light-colors; color-scheme: light; From d6697c3f98a27cbbb5e55eeb0db3937eb87690f5 Mon Sep 17 00:00:00 2001 From: medevod Date: Fri, 13 Jun 2025 20:39:23 +0200 Subject: [PATCH 5/9] feat mg-modal add sliding effects --- src/scss/extensions/mg-modal.scss | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/scss/extensions/mg-modal.scss b/src/scss/extensions/mg-modal.scss index bef3d8c6..2b0ddfbd 100644 --- a/src/scss/extensions/mg-modal.scss +++ b/src/scss/extensions/mg-modal.scss @@ -21,14 +21,15 @@ background: rgb(0 0 0 / 70%); transition: opacity 0.3s; - &>.mg-modal--content { + &>.mg-modal--content { background-color: $color-initial; border-radius: $control-radius; color: $color-secondary; - padding: 2rem 1.5rem; + padding: 2rem 1.5rem; margin-top: 0; z-index: 2000; box-shadow: $control-shadow; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @@ -38,28 +39,43 @@ } &.mg-bottom>.mg-modal--content { - bottom: 0; + bottom: -100vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } &.mg-top>.mg-modal--content { - top: 0; + top: -100vh; border-top-left-radius: 0; border-top-right-radius: 0; } &.mg-right>.mg-modal--content { - right: 0; + right: -100vw; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1rem; } &.mg-left>.mg-modal--content { - left: 0; + left: -100vw; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1rem; + } + &.mg-show.mg-right>.mg-modal--content { + transform: translateX(-100vw); + } + + &.mg-show.mg-left>.mg-modal--content { + transform: translateX(100vw); + } + + &.mg-show.mg-top>.mg-modal--content { + transform: translateY(100vh); + } + + &.mg-show.mg-bottom>.mg-modal--content { + transform: translateY(-100vh); } } \ No newline at end of file From a66a89c9b5b203731d7e3a34eaa7d3acd40ae447 Mon Sep 17 00:00:00 2001 From: medevod Date: Fri, 13 Jun 2025 22:08:00 +0200 Subject: [PATCH 6/9] fix mg-modal demo --- demo/sections/modal-section.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/demo/sections/modal-section.html b/demo/sections/modal-section.html index 387c24ef..aea0bdf0 100644 --- a/demo/sections/modal-section.html +++ b/demo/sections/modal-section.html @@ -266,11 +266,11 @@

    -