mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 07:16:29 +02:00
Code Issues Releases Wiki Activity

Updated navigation

Browse Source 
Replaced background SVGs with Unicode symbols, allowing for a lot more customization options.
This commit is contained in:
Angelos Chalaris
2017-11-12 14:51:14 +02:00
parent bd06ab32d5
commit 37a1625219
3 changed files with 76 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v3/DEVLOG.md
View File

@@ -133,3 +133,7 @@
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
- *TODO* Add variables to customize `input_control` further, except buttons. Add all missing values much like I have done in `layout` module.
## 20171112
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.

63
docs/v3_dev/src/index.css
View File

@@ -731,7 +731,7 @@ label {
}
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
background: var(--back-color);
color: var(--fore-color);
@@ -764,6 +764,45 @@ option {
text-overflow: ellipsis;
}
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(1rem + var(--universal-padding) / 2);
width: calc(1rem + var(--universal-padding) / 2);
vertical-align: text-bottom;
padding: 0;
flex-basis: 1.25rem !important;
flex-grow: 0 !important;
}
[type="checkbox"]:checked:before, [type="radio"]:checked:before {
position: absolute;
}
[type="checkbox"]:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(1rem + var(--universal-padding) / 2);
top: calc(0rem - var(--universal-padding));
left: calc(var(--universal-padding) / 4);
}
[type="radio"] {
border-radius: 100%;
}
[type="radio"]:checked:before {
border-radius: 100%;
content: '';
top: calc(0.0625rem + var(--universal-padding) / 2);
left: calc(0.0625rem + var(--universal-padding) / 2);
background: #111;
width: 0.5rem;
height: 0.5rem;
}
:placeholder-shown {
color: var(--fore-color);
}
@@ -837,6 +876,7 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
--drawer-back-color: #f8f8f8;
--drawer-hover-back-color: #f0f0f0;
--drawer-border-color: #ddd;
--drawer-close-color: #444;
}
header {
@@ -963,11 +1003,10 @@ footer.sticky {
.drawer-toggle:before {
display: inline-block;
position: relative;
width: 24px;
height: 24px;
vertical-align: text-top;
content: '';
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
vertical-align: bottom;
content: '\00a0\2261\00a0';
font-family: sans-serif;
font-size: 1.5em;
}
@media screen and (min-width: 768px) {
@@ -1009,6 +1048,8 @@ footer.sticky {
top: var(--universal-margin);
right: var(--universal-margin);
z-index: 1111;
width: 2rem;
height: 2rem;
border-radius: var(--universal-border-radius);
padding: var(--universal-padding);
margin: 0;
@@ -1018,11 +1059,13 @@ footer.sticky {
[type="checkbox"].drawer + * .drawer-close:before {
display: block;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
content: '';
content: '\00D7';
color: var(--drawer-close-color);
position: relative;
width: 24px;
height: 24px;
font-family: sans-serif;
font-size: 2rem;
line-height: 1;
text-align: center;
}
[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {