From 9ea6a689887c9d925e0b4b830d4c4f82ed57dea9 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 8 Nov 2017 19:51:18 +0200 Subject: [PATCH] Nav styling Styling for sidebar navigation --- docs/v3/DEVLOG.md | 2 + docs/v3_dev/src/App.js | 15 ++++-- docs/v3_dev/src/index.css | 103 ++++++++++++++++++++++---------------- src/flavors/mini-doc.scss | 68 ------------------------- src/mini/_navigation.scss | 55 ++++++++++++++++++++ 5 files changed, 128 insertions(+), 115 deletions(-) diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 890550c..92202a6 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -120,3 +120,5 @@ - Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**. - Figured out the `line-height` thing for the afforementioned elements. - Styled `.logo` in `header`. The styling is now far simpler and easier to use. +- Removed `display:block` fix from `nav` as it was targeting IE 9-. +- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`. diff --git a/docs/v3_dev/src/App.js b/docs/v3_dev/src/App.js index d67afb0..67fafbc 100644 --- a/docs/v3_dev/src/App.js +++ b/docs/v3_dev/src/App.js @@ -13,9 +13,18 @@ class App extends Component {
- +
News
diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index 1d129dd..de9b45f 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -774,6 +774,10 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d --header-hover-back-color: #f0f0f0; --header-fore-color: #444; --header-border-color: #ddd; + --nav-back-color: #f8f8f8; + --nav-hover-back-color: #f0f0f0; + --nav-fore-color: #444; + --nav-border-color: #ddd; } header { @@ -817,6 +821,61 @@ header button:hover, header button:focus, header [type="button"]:hover, header [ background: var(--header-hover-back-color); } +nav { + background: var(--nav-back-color); + color: var(--nav-fore-color); + border: 0.0625rem solid var(--nav-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + padding: 0; +} + +nav * { + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +nav a, nav a:visited { + display: block; + color: var(--a-link-color); + border-radius: var(--universal-border-radius); + transition: background 0.3s; +} + +nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { + text-decoration: none; + background: var(--nav-hover-back-color); +} + +nav .sublink-1 { + position: relative; + margin-left: calc(2 * var(--universal-padding)); +} + +nav .sublink-1:before { + position: absolute; + left: calc(var(--universal-padding) - 1 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +nav .sublink-2 { + position: relative; + margin-left: calc(4 * var(--universal-padding)); +} + +nav .sublink-2:before { + position: absolute; + left: calc(var(--universal-padding) - 3 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + header.sticky { position: -webkit-sticky; position: sticky; @@ -970,50 +1029,6 @@ p.splash { clip-path: inset(100%); } -nav { - display: block; - background: #eceff1; - border: 0.0625rem solid #c9c9c9; - margin: 0.5rem; - padding: 0.75rem 1rem; -} - -nav a, nav a:visited { - display: block; - color: #145caf; - text-decoration: none; -} - -nav .sublink-1 { - padding-left: 1rem; - position: relative; -} - -nav .sublink-1:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #bdbdbd; - border-left: 0; -} - -nav .sublink-2 { - padding-left: 2rem; - position: relative; -} - -nav .sublink-2:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #bdbdbd; - border-left: 0; -} - .drawer-toggle:before { position: relative; top: 0.4375rem; diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index 48d7e79..bc673ea 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -126,31 +126,6 @@ p.splash { } } -// TODO: Replace with actual header when ready -// header { -// display: block; -// height: 3.25rem; -// background: #f8f8f8; -// color: #444; -// padding: 0.125rem 0.5rem; -// white-space: nowrap; -// overflow-x: auto; -// overflow-y: hidden; -// position: sticky; -// border-bottom: 1px solid #ddd; -// top: 0; -// text-transform: uppercase; -// // Rough testing draft, not for production use -// line-height: 3.5rem; -// font-weight: 500; -// cursor: pointer; -// &:hover { -// color: #111; -// } -// } - -// TODO: Use module, copied from v2 - [type="checkbox"], [type="radio"] { height: 1px; width: 1px; @@ -162,49 +137,6 @@ p.splash { clip-path: inset(100%); } -nav { - display: block; - background: #eceff1; - border: 0.0625rem solid #c9c9c9; - margin: 0.5rem; - padding: 0.75rem 1rem; -} - -nav a, nav a:visited { - display: block; - color: #145caf; - text-decoration: none; -} - -nav .sublink-1 { - padding-left: 1rem; - position: relative; -} - -nav .sublink-1:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #bdbdbd; - border-left: 0; -} - -nav .sublink-2 { - padding-left: 2rem; - position: relative; -} - -nav .sublink-2:before { - position: absolute; - left: 0.1875rem; - top: -0.0625rem; - content: ''; - height: 100%; - border: 0.0625rem solid #bdbdbd; - border-left: 0; -} .drawer-toggle:before { position: relative; diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index 359ada0..17b4aaf 100644 --- a/src/mini/_navigation.scss +++ b/src/mini/_navigation.scss @@ -7,22 +7,36 @@ $header-back-color: #f8f8f8 !default; // Background color for the header $header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover). $header-fore-color: #444 !default; // Text color for the header element. $header-border-color: #ddd !default; // Border color for the header element. +$nav-back-color: #f8f8f8 !default; // Background color for the header element. +$nav-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover). +$nav-fore-color: #444 !default; // Text color for the header element. +$nav-border-color: #ddd !default; // Border color for the header element. $_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. $header-logo-font-size: 1.75rem !default; // Font ize for the header logo element. +$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav. +$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add. $sticky-name: 'sticky' !default; // Class name for sticky headers and footers. // CSS variable name definitions [exercise caution if modifying these] $header-fore-color-var: '--header-fore-color' !default; $header-back-color-var: '--header-back-color' !default; $header-hover-back-color-var: '--header-hover-back-color' !default; $header-border-color-var: '--header-border-color' !default; +$nav-fore-color-var: '--nav-fore-color' !default; +$nav-back-color-var: '--nav-back-color' !default; +$nav-hover-back-color-var: '--nav-hover-back-color' !default; +$nav-border-color-var: '--nav-border-color' !default; /* Navigation module CSS variable definitions */ :root { #{$header-back-color-var}: $header-back-color; #{$header-hover-back-color-var}: $header-hover-back-color; #{$header-fore-color-var}: $header-fore-color; #{$header-border-color-var}: $header-border-color; + #{$nav-back-color-var}: $nav-back-color; + #{$nav-hover-back-color-var}: $nav-hover-back-color; + #{$nav-fore-color-var}: $nav-fore-color; + #{$nav-border-color-var}: $nav-border-color; } // Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any. header { @@ -72,6 +86,47 @@ header { } } } +// Navigation sidebar styling. +nav { + background: var(#{$nav-back-color-var}); + color: var(#{$nav-fore-color-var}); + border: $__1px solid var(#{$nav-border-color-var}); + border-radius: var(#{$universal-border-radius-var}); + margin: var(#{$universal-margin-var}); + padding: 0; + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + * { + padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); + } + a, a:visited { + display: block; + color: var(#{$a-link-color-var}); // Apply regardless to de-stylize visited links. + border-radius: var(#{$universal-border-radius-var}); + transition: background 0.3s; + &:hover, &:focus { + text-decoration: none; + background: var(#{$a-hover-back-color-var}); + } + } + // Subcategories in navigation. + @for $i from 1 through $nav-sublink-depth { + .#{$nav-sublink-prefix}-#{$i} { + position: relative; + margin-left: calc(#{$i * 2} * var(#{$universal-padding-var})); + &:before { + position: absolute; + left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var})); + top: -#{$__1px}; + content: ''; + height: 100%; + border: $__1px solid var(#{$nav-border-color-var}); + border-left: 0; + } + } + } +} // TODO: Add footer definitions here. // Definitions for sticky headers and footers. header.#{$sticky-name} {