mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Updated navigation
Replaced background SVGs with Unicode symbols, allowing for a lot more customization options.
This commit is contained in:
Angelos Chalaris
parent
aee9008fa7
commit
b64baa83e5
@ -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.
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -19,6 +19,7 @@ $footer-link-color: #0277bd !default; // Color for link in the footer ele
|
||||
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
|
||||
$drawer-border-color: #ddd !default; // Border color for the drawer component.
|
||||
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
|
||||
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
|
||||
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
|
||||
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
|
||||
$header-logo-name: 'logo' !default; // Class name for the header logo element.
|
||||
@ -30,11 +31,13 @@ $footer-font-size: 0.875rem !default; // Font size for text in footer ele
|
||||
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
|
||||
$drawer-name: 'drawer' !default; // Class name for the drawer component.
|
||||
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
|
||||
$drawer-toggle-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
|
||||
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
|
||||
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
|
||||
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
|
||||
$drawer-width: 320px !default; // Width of the drawer component.
|
||||
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
|
||||
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
|
||||
$drawer-icons-color: #212121 !default; // Color for the icons used in the drawer component.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$header-fore-color-var: '--header-fore-color' !default;
|
||||
@ -53,22 +56,7 @@ $footer-link-color-var: '--footer-link-color' !default;
|
||||
$drawer-back-color-var: '--drawer-back-color' !default;
|
||||
$drawer-border-color-var: '--drawer-border-color' !default;
|
||||
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
|
||||
// Necessary functions for certain elements (mainly the icons used for the drawer)
|
||||
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
|
||||
/// -----------------------------------------------------------------------
|
||||
/// Replace `$search` with `$replace` in `$string`
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
@return $string;
|
||||
}
|
||||
$drawer-close-color-var: '--drawer-close-color' !default;
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
@ -87,6 +75,7 @@ $drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
|
||||
#{$drawer-back-color-var}: $drawer-back-color;
|
||||
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
|
||||
#{$drawer-border-color-var}: $drawer-border-color;
|
||||
#{$drawer-close-color-var}: $drawer-close-color;
|
||||
}
|
||||
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
|
||||
header {
|
||||
@ -207,16 +196,14 @@ footer.#{$sticky-name} {
|
||||
bottom: 0;
|
||||
}
|
||||
// Responsive drawer component.
|
||||
|
||||
.#{$drawer-toggle-name} {
|
||||
&:before {
|
||||
&:before { // No color specified, should use the color of its surroundings!
|
||||
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="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" 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'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
&:not(.#{$drawer-persistent-name}) {
|
||||
@ -262,18 +249,22 @@ footer.#{$sticky-name} {
|
||||
top: var(#{$universal-margin-var});
|
||||
right: var(#{$universal-margin-var});
|
||||
z-index: 1111;
|
||||
width: $drawer-close-size;
|
||||
height: $drawer-close-size;
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
padding: var(#{$universal-padding-var});
|
||||
margin: 0; // Fixes the offset from label
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
&:before {
|
||||
&:before { // Transparent background unless hovered over. Does not block text behind it.
|
||||
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="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" 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-var});
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-close-size;
|
||||
line-height: 1; // Setting to 1 seems to center the 'X' properly.
|
||||
text-align: center;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: var(#{$drawer-hover-back-color-var});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user