Skip to content

Commit 063deab

Browse files
medevodmedevod
medevod
and
medevod
authored
Fixes/1.3.6 (#77)
* chore doc and mg-dropdown * fix webkit autofill styling * lint fix * fix remove shadow from autofilled inputs * update dist and demo page --------- Co-authored-by: medevod <medevod@github.com>
1 parent 1189bbd commit 063deab

10 files changed

Lines changed: 98 additions & 76 deletions

File tree

‎demo/index.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,51 +19,53 @@
1919
<body>
2020
<header>
2121

22-
<nav class="mg-fixed-top mg-w-full mg-pad1 ">
23-
<div class="mg-group mg-pad-l1">
24-
<div class="mg-dropdown">
25-
<button title="theme-switcher" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
26-
<i class="mg-icon svg-icon-darkmode"></i>
27-
</button>
28-
<div class="mg-dropdown--content">
29-
<ul class="mg-nav">
30-
<li data-toggle="theme" data-value="light">Light</li>
31-
<li data-toggle="theme" data-value="dark">Dark</li>
32-
<li data-toggle="theme" data-value="auto">Auto</li>
33-
</ul>
22+
<nav class="mg-fixed-top mg-w-full mg-pad1">
23+
<div class="mg-container">
24+
<div class="mg-group mg-pad-l1 mg-left">
25+
<div class="mg-dropdown">
26+
<button title="theme-switcher" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
27+
<i class="mg-icon svg-icon-darkmode"></i>
28+
</button>
29+
<div class="mg-dropdown--content">
30+
<ul class="mg-nav">
31+
<li data-toggle="theme" data-value="light">Light</li>
32+
<li data-toggle="theme" data-value="dark">Dark</li>
33+
<li data-toggle="theme" data-value="auto">Auto</li>
34+
</ul>
35+
</div>
3436
</div>
35-
</div>
36-
<div class="mg-dropdown">
37-
<button title="controls" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
38-
<i class="mg-icon svg-icon-gears"></i>
39-
</button>
40-
<div class="mg-dropdown--content mg-pad-r3 mg-pad-l1">
41-
<div class="mg-col mg-x--start">
42-
<label for="range2">Control radius</label>
43-
<input type="range" min="0" max="20" value="2" id="control-radius-selector" />
44-
<label for="range1">Input radius</label>
45-
<input type="range" min="0" max="20" value="2" id="input-radius-selector" />
37+
<div class="mg-dropdown">
38+
<button title="controls" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
39+
<i class="mg-icon svg-icon-gears"></i>
40+
</button>
41+
<div class="mg-dropdown--content mg-pad-r3 mg-pad-l1">
42+
<div class="mg-col mg-x--start">
43+
<label for="range2">Control radius</label>
44+
<input type="range" min="0" max="20" value="2" id="control-radius-selector" />
45+
<label for="range1">Input radius</label>
46+
<input type="range" min="0" max="20" value="2" id="input-radius-selector" />
47+
</div>
4648
</div>
4749
</div>
48-
</div>
49-
<div class="mg-dropdown">
50-
<button title="color-picker" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
51-
<i class="mg-icon svg-icon-colors"></i>
52-
</button>
53-
<div class="mg-dropdown--content">
54-
<div class="mg-row">
55-
<div id="picker"></div>
50+
<div class="mg-dropdown">
51+
<button title="color-picker" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
52+
<i class="mg-icon svg-icon-colors"></i>
53+
</button>
54+
<div class="mg-dropdown--content">
55+
<div class="mg-row">
56+
<div id="picker"></div>
57+
</div>
5658
</div>
5759
</div>
5860
</div>
59-
</div>
60-
<div class="mg-right mg-dropdown mg-xl-display">
61-
<button title="menu" data-toggle="dropdown" class="mg-rounded-full mg-h5 mg-w5">
62-
<i class="mg-icon mg-icon--3xl icon-menu"></i>
63-
</button>
64-
<div class="mg-dropdown--content mg-right">
65-
<ul data-toggle="navlinks" class="mg-nav mg-text-bold">
66-
</ul>
61+
<div class="mg-right mg-dropdown mg-xl-display">
62+
<button title="menu" data-toggle="dropdown" class="mg-rounded-full mg-h5 mg-w5">
63+
<i class="mg-icon mg-icon--3xl icon-menu"></i>
64+
</button>
65+
<div class="mg-dropdown--content mg-right">
66+
<ul data-toggle="navlinks" class="mg-nav mg-text-bold">
67+
</ul>
68+
</div>
6769
</div>
6870
</div>
6971

‎demo/sections/grid-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section id="Grids">
2-
<h2>Responsive Grids</h2>
2+
<h2>Responsive grids</h2>
33
<p>Grids are used to create a
44
responsive layout for the application. Below, you will find examples of how to use the grid system to create a
55
variety of layouts.</p>

‎demo/sections/intro-section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h3>Library size comparison</h3>
3838
<progress max="256" value="8"></progress>
3939
<div class="mg-badge mg-m-l5 mg-text-s">8 KB</div>
4040
</div>
41-
<b>Mg+ v1.3.5</b>
41+
<b>Mg+ v1.3.6</b>
4242
<div class="mg-row">
4343
<progress max="256" value="70"></progress>
4444
<div class="mg-badge mg-m-l5 mg-text-s">70 KB</div>

‎demo/sections/nav-section.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ <h2>Navs</h2>
33
<p>Navs are used to navigate through
44
the application. Below, you will find examples of how to use the nav system to create a variety of nav states.</p>
55
<div data-toggle="htmlpreview">
6-
<h3>Nav vertical (default) <code>mg-nav</code></h3>
6+
<h3>Nav vertical (default)</h3>
7+
<code>mg-nav</code>
78
<ul class="mg-nav" data-toggle="nav">
89
<li class="active"><a href="#home">Home</a></li>
910
<li><a href="#news">News</a></li>
@@ -13,7 +14,8 @@ <h3>Nav vertical (default) <code>mg-nav</code></h3>
1314

1415
</div>
1516
<div data-toggle="htmlpreview">
16-
<h3>Nav inline <code>mg-nav mg-nav--inline</code></h3>
17+
<h3>Nav inline </h3>
18+
<code>mg-nav mg-nav--inline</code>
1719
<ul class="mg-nav mg-nav--inline" data-toggle="nav">
1820
<li class="active"><a href="#home">Home</a></li>
1921
<li><a href="#news">News</a></li>
@@ -23,7 +25,8 @@ <h3>Nav inline <code>mg-nav mg-nav--inline</code></h3>
2325
</div>
2426

2527
<div data-toggle="htmlpreview">
26-
<h3>Nav buttons <code>mg-nav mg-nav--buttons </code></h3>
28+
<h3>Nav buttons</h3>
29+
<code>mg-nav mg-nav--buttons </code>
2730
<ul class="mg-nav mg-nav--buttons" data-toggle="nav">
2831
<li class="active"><a class="mg-button" href="#home">Home</a></li>
2932
<li><a class="mg-button" href="#news">News</a></li>
@@ -33,14 +36,15 @@ <h3>Nav buttons <code>mg-nav mg-nav--buttons </code></h3>
3336
</div>
3437
<div data-toggle="htmlpreview">
3538
<h3>Nav buttons (wrapped)</h3>
36-
<h4><code>mg-nav mg-nav--buttons mg-wrap</code></h4>
39+
<code>mg-nav mg-nav--buttons mg-wrap</code>
3740
<ul class="mg-nav mg-nav--buttons mg-wrap" data-toggle="nav">
3841
<li class="active"><a class="mg-button" href="#home">Home</a></li>
3942
<li><a class="mg-button" href="#news">News</a></li>
4043
<li><a class="mg-button" href="#contact">Contact</a></li>
4144
<li><a class="mg-button" href="#about">About</a></li>
4245
</ul>
43-
<h4><code>mg-nav mg-nav--buttons mg-col</code></h4>
46+
<h3>Nav buttons (vertical)</h3>
47+
<code>mg-nav mg-nav--buttons mg-col</code>
4448
<ul class="mg-nav mg-nav--buttons mg-col mg-x12 mg-m2" data-toggle="nav">
4549
<li class="active"><a class="mg-button" href="#home">Home</a></li>
4650
<li><a class="mg-button" href="#news">News</a></li>

‎demo/sections/toggle-section.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<section id="toggle-section" class="section">
2-
<h2>Toggle <code>mg-toggle</code></h2>
2+
<h2>Toggle</h2>
3+
<code>mg-toggle</code>
34
<p>Toggles are used to switch
45
between two states. Below, you will find examples of how to use the toggle system to create a variety of toggle
56
states.</p>

‎dist/css/mgplus.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"type": "module",
33
"name": "mgplus",
4-
"version": "1.3.5",
4+
"version": "1.3.6",
55
"description": "mgplus a micro CSS library",
66
"homepage": "https://evodim.github.io/mgplus",
77
"repository": "https://github.com/Evodim/mgplus",

‎readme.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
![](/demo/images/logo.svg)
44

55
## A micro css library based on Milligram
6+
67
### Build pretty websites with just a few drops of css
78

89
**[doc and demo](https://www.mgpluscss.com)**
910

1011
![Latest release on NPM](https://img.shields.io/npm/v/mgplus)
1112

12-
[CDN direct link](https://cdn.mgpluscss.com/v1.3.5/css/mgplus.css)
13+
[CDN direct link](https://cdn.mgpluscss.com/v1.3.6/css/mgplus.css)
1314

1415
Striking the perfect balance between features and simplicity
1516

‎src/scss/core/_Form.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,24 @@ select {
8080
padding: 0;
8181
}
8282

83+
/* Change Autocomplete styles in Chrome */
8384
input:-webkit-autofill,
84-
input:-webkit-autofill:focus {
85-
transition: background-color 0s 600000s, color 0s 600000s !important;
85+
input:-webkit-autofill:hover,
86+
input:-webkit-autofill:focus,
87+
textarea:-webkit-autofill,
88+
textarea:-webkit-autofill:hover,
89+
textarea:-webkit-autofill:focus,
90+
select:-webkit-autofill,
91+
select:-webkit-autofill:hover,
92+
select:-webkit-autofill:focus {
93+
appearance: none;
94+
border: 0;
95+
margin-top: 0;
96+
margin-bottom: 0;
97+
padding: 0;
98+
-webkit-text-fill-color: $color-secondary;
99+
-webkit-box-shadow: none;
100+
transition: background-color 5000s ease-in-out 0s;
86101
}
87102

88103
// Hide spin to input numbers

‎src/scss/extensions/mg-dropdown.scss‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,32 @@
33
position: relative;
44
margin-bottom: 1rem;
55
display: inline-block;
6-
}
76

8-
.mg-dropdown--content {
9-
width: 100%;
10-
min-width: max-content;
11-
box-shadow: $control-shadow;
12-
margin-left: auto;
13-
margin-right: auto;
14-
border: 0.15rem solid;
15-
padding-top: 1rem;
16-
padding-bottom: 1rem;
17-
display: none;
18-
opacity: 0;
19-
visibility: hidden;
20-
position: absolute;
21-
background-color: $color-initial;
22-
top: 100%;
23-
border-color: $color-quaternary;
24-
border-radius: $control-radius;
25-
max-width: 90vw;
26-
z-index: $zindex-max;
277

28-
}
8+
&>.mg-dropdown--content {
9+
-webkit-overflow-scrolling: touch;
10+
width: 100%;
11+
min-width: max-content;
12+
box-shadow: $control-shadow;
13+
margin-left: auto;
14+
margin-right: auto;
15+
border: 0.15rem solid;
16+
padding-top: 0.5rem;
17+
padding-bottom: 0.5rem;
18+
display: none;
19+
opacity: 0;
20+
visibility: hidden;
21+
position: absolute;
22+
background-color: $color-initial;
23+
top: 100%;
24+
border-color: $color-quaternary;
25+
border-radius: $control-radius;
26+
max-width: 90vw;
27+
z-index: $zindex-max;
28+
overflow: hidden auto;
29+
max-height: 60vh;
30+
}
2931

30-
.mg-dropdown--content>* {
31-
overflow: hidden auto;
32-
max-height: 50vh;
3332
}
3433

3534
.opened+.mg-dropdown--content {

0 commit comments

Comments
 (0)