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; +} diff --git a/demo/index.ts b/demo/index.ts index c82e014..e060382 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -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); }); }); diff --git a/demo/sections/collapse-section.html b/demo/sections/collapse-section.html index b731988..55d6b54 100644 --- a/demo/sections/collapse-section.html +++ b/demo/sections/collapse-section.html @@ -1,4 +1,4 @@ -
+

Collapse

mg-collapse + opened

Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of diff --git a/demo/sections/customization-section.html b/demo/sections/customization-section.html new file mode 100644 index 0000000..b98b519 --- /dev/null +++ b/demo/sections/customization-section.html @@ -0,0 +1,93 @@ +

+

Customization

+

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

+ +

Colors

+
+ --mg-color-dark: hsl(255deg 0% 5%) + --mg-color-light: hsl(255deg 0% 95%) + --mg-color-primary: #475dca + --mg-color-red: #dc3545 + --mg-color-orange: #fd7e14 + --mg-color-blue: #007bff + --mg-color-green: #28a745 + --mg-color-initial: var(--mg-color-light) + --mg-color-secondary: hsl(255deg 0% 20%) + --mg-color-tertiary: hsl(255deg 0% 40%) + --mg-color-quaternary: hsl(255deg 0% 60%) + --mg-color-quinary: hsl(255deg 0% 90%) +
+ +

Dark Mode Colors

+
+ --mg-dark-color-initial: + var(--mg-color-dark) + --mg-dark-color-secondary: + hsl(255deg 0% 80%) + --mg-dark-color-tertiary: + hsl(255deg 0% 70%) + --mg-dark-color-quaternary: + hsl(255deg 0% 50%) + --mg-dark-color-quinary: + hsl(255deg 0% 25%) +
+ +

Typography

+
+ --mg-base-font-size: 1.6rem +
+ +

Borders and Shadows

+
+ --mg-control-radius: 1rem + --mg-input-radius: 1rem + --mg-control-shadow: + 0 0 2px rgb(0 0 0 / 20%), 0 3px 4px rgb(0 0 0 / 15%) + --mg-control-active-shadow: + inset 0 0 100px 100px rgb(0 0 0 / 10%) +
+ +

Grid

+
+ --mg-grid-gutter: 0.5rem +
+ +

Z-Index

+
+ --mg-zindex-0: 1 + --mg-zindex-1: 100 + --mg-zindex-2: 200 + --mg-zindex-3: 300 + --mg-zindex-4: 400 + --mg-zindex-5: 500 + --mg-zindex-max: 999 +
+
diff --git a/demo/sections/intro-section.html b/demo/sections/intro-section.html index 2512c84..5bad306 100644 --- a/demo/sections/intro-section.html +++ b/demo/sections/intro-section.html @@ -38,7 +38,7 @@

Library size comparison

8 KB
- 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 5162ccc..5a1462c 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 @@ -69,6 +69,30 @@

>

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur @@ -200,16 +224,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 +242,6 @@

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

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

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

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

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

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

title="scrollable modal" data-toggle="modal" data-target="modal-br" - data-orientation="bottom-right" > 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 +
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" /> -