Skip to content
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

Jump to bottom

Fixes/adjust default colors #53

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Fixes/adjust default colors #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c0de9ae
Update mg-variables.scss
medevod Apr 15, 2024
0787347
Update mg-variables.scss
medevod Apr 15, 2024
9865924
Update package.json
medevod Apr 15, 2024
5f87f1b
update demo
May 8, 2024
890104a
Ads missing top helpers
medevod May 12, 2024
127ec42
fix display helper
May 20, 2024
f263d07
update doc
May 20, 2024
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
1 change: 1 addition & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ <h2> Micro css library <span class="mg-text-m mg-badge"> $PACKAGE_VERSION</span>
<include src="demo/sections/timeline-section.html"> </include>
<include src="demo/sections/icons-section.html"></include>
<include src="demo/sections/colors-section.html"></include>
<include src="demo/sections/helpers-section.html"></include>
</main>
<footer>
<div class="mg-center-block">
Expand Down
69 changes: 69 additions & 0 deletions demo/sections/helpers-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<section id="helpers">
<h2>Css helpers</h2>
<h3>Positioning</h3>
<h4>Padding</h4>
<div class="mg-col">
<span><b>.mg-pad</b>[0-10] <code>{ padding: [0-10]rem; }</code></span>
<span><b>.mg-pad-l</b>[0-10] <code>{ padding-left: [0-10]rem; }</code></span>
<span><b>.mg-pad-r</b>[0-10] <code>{ padding-right: [0-10]rem; }</code></span>
<span><b>.mg-pad-b</b>[0-10] <code>{ padding-bottom: [0-10]rem; }</code></span>
<span><b>.mg-pad-t</b>[0-10] <code>{ padding-top: [0-10]rem; }</code></span>
</div>
<h4>Marging</h4>
<div class="mg-col">
<span><b>.mg-space</b>[0-10] <code>{ margin: [0-10]rem; }</code></span>
<span><b>.mg-space-l</b>[0-10] <code>{ margin-left: [0-10]rem; }</code></span>
<span><b>.mg-space-r</b>[0-10] <code>{ margin-right: [0-10]rem; }</code></span>
<span><b>.mg-space-b</b>[0-10] <code>{ margin-bottom: [0-10]rem; }</code></span>
<span><b>.mg-space-t</b>[0-10] <code>{ margin-top: [0-10]rem; }</code></span>
</div>
<h3>Sizing</h3>
<h4>width and height</h4>
<div class="mg-col">
<span><b>.mg-w</b>[0-10] <code>{ width: [0-10]rem; }</code></span>
<span><b>.mg-h</b>[0-10] <code>{ height: [0-10]rem; }</code></span>
<span><b>.mg-min-w</b>[0-10] <code>{ min-witdh: [0-10]rem; }</code></span>
<span><b>.mg-min-h</b>[0-10] <code>{ min-height: [0-10]rem; }</code></span>
<span><b>.mg-max-w</b>[0-10] <code>{ max-width: [0-10]rem; }</code></span>
<span><b>.mg-max-h</b>[0-10] <code>{ max-height: [0-10]rem; }</code></span>
</div>
<div class="mg-col">
<span><b>.mg-w</b>[0-10]vh <code>{ width: [0-10]vh; }</code></span>
<span><b>.mg-h</b>[0-10]vh <code>{ height: [0-10]vh; }</code></span>
<span><b>.mg-min-w</b>[0-10]vh <code>{ min-witdh: [0-10]vh; }</code></span>
<span><b>.mg-min-h</b>[0-10]vh <code>{ min-height: [0-10]vh; }</code></span>
<span><b>.mg-max-w</b>[0-10]vh <code>{ max-width: [0-10]vh; }</code></span>
<span><b>.mg-max-h</b>[0-10]vh <code>{ max-height: [0-10]vh; }</code></span>
</div>
<p></p>
<h3>Visibility</h3>
<div class="mg-col">
<span><b>.mg-block</b> <code>{ display: block; }</code></span>
<span><b>.mg-inline-block</b> <code>{ display: inline-block; }</code></span>
<span><b>.mg-inline</b> <code>{ display: inline; }</code></span>
<span><b>.mg-none</b> <code>{ display: none; }</code></span>

<span><b>.mg-show</b> <code>{ visibility: visible; opacity:1; }</code></span>
<span><b>.mg-clearfix</b> <code>{ transform: scale(1); }</code></span>
<span><b>.mg-shadow</b> <code>{ box-shadow: $control-shadow; }</code></span>

<span><b>.mg-overflow-auto</b> <code>{ overflow: auto; }</code></span>
<span><b>.mg-overflow-x-auto</b> <code>{ overflow-x: auto; }</code></span>
<span><b>.mg-overflow-y-auto</b> <code>{ overflow-y: auto; }</code></span>
<span><b>.mg-overflow-x-hidden</b> <code>{ overflow-x: hidden; }</code></span>
<span><b>.mg-overflow-y-hidden</b> <code>{ overflow-y: hidden; }</code></span>

<span><b>.mg-visible</b> <code>{ visibility: visible; }</code></span>
<span><b>.mg-hidden</b> <code>{ visibility: hidden;}</code></span>

<span><b>.mg-rounded[0-10]</b> <code>{ border-radius: [0-10]rem;}</code></span>
<span><b>.mg-rounded-tl[0-10]</b> <code>{ border-top-left-radius: [0-10]rem;}</code></span>
<span><b>.mg-rounded-tr[0-10]</b> <code>{ border-top-right-radius: [0-10]rem;}</code></span>
<span><b>.mg-rounded-br[0-10]</b> <code>{ border-bottom-right-radius: [0-10]rem;}</code></span>
<span><b>.mg-rounded-bl[0-10]</b> <code>{ border-bottom-left-radius: [0-10]rem;}</code></span>

<span><b>.mg-rounded-none</b> <code>{ border-radius: 0;}</code></span>
<span><b>.mg-rounded-full</b> <code>{ border-radius: 100%;}</code></span>

</div>
</section>
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 @@
{
"type": "module",
"name": "mgplus",
"version": "1.2.5",
"version": "1.2.6",
"description": "Micro CSS library",
"homepage": "https://evodim.github.io/mgplus",
"repository": "https://github.com/Evodim/mgplus",
Expand Down
6 changes: 3 additions & 3 deletions src/scss/extensions/mg-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
display: inline;
}

.mg-hidden {
.mg-none {
display: none;
}

Expand Down Expand Up @@ -67,7 +67,7 @@

.mg-hidden {
visibility: hidden;
}
}

@each $key, $value in $rem-map {

Expand All @@ -92,7 +92,7 @@
}
}

.mg-rounder-none {
.mg-rounded-none {
border-radius: 0;
}

Expand Down
7 changes: 5 additions & 2 deletions src/scss/extensions/mg-positioning.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

//.mg-pad[0-10] { padding: [0-10]rem; }
@each $key, $value in $rem-map {

.mg-pad#{$key} {
Expand All @@ -12,9 +12,11 @@
.mg-pad-r#{$key} {
padding-right: $value;
}

.mg-pad-t#{$key} {
padding-top: $value;
}

.mg-pad-b#{$key} {
padding-bottom: $value;
}
Expand All @@ -38,7 +40,7 @@
.mg-space-b#{$key} {
margin-bottom: $value;
}

}

.mg-space-auto {
Expand All @@ -52,6 +54,7 @@
.mg-left {
float: left;
}

.mg-fit {
min-width: 100%;
}
Expand Down
8 changes: 4 additions & 4 deletions src/scss/mg-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
$version: "1.2.1";
$version: "1.2.6";
/*! mgplus.css v#{$version} | MIT License | github.com/evodim/mgplus */
//
// exposed variables
// _____________________________________________

:root {
--mg-color-dark: hsl(255, 0%, 10%);
--mg-color-light: hsl(255, 0%, 90%);
--mg-color-dark: hsl(255, 0%, 5%);
--mg-color-light: hsl(255, 0%, 95%);
--mg-color-primary: #475dca;
--mg-control-radius: 0.4rem;
--mg-input-radius: 0.1rem;
Expand Down Expand Up @@ -123,4 +123,4 @@ $sizing-map: (
80:80%,
90:90%,
100:100%
);
);
Loading