From 37a162521920e89bd11e1872f9736964d9d26b0e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 12 Nov 2017 14:51:14 +0200 Subject: [PATCH] Updated navigation Replaced background SVGs with Unicode symbols, allowing for a lot more customization options. --- docs/v3/DEVLOG.md | 4 +++ docs/v3_dev/src/index.css | 63 ++++++++++++++++++++++++++++++++------- src/mini/_navigation.scss | 47 ++++++++++++----------------- 3 files changed, 76 insertions(+), 38 deletions(-) diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 5c8a2b5..5ecd3cd 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -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. diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index 7bf54ff..8be66a7 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -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, ') 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, ') 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 { diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index 65f6f22..3f25a8f 100644 --- a/src/mini/_navigation.scss +++ b/src/mini/_navigation.scss @@ -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, ') 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, ') 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});