From 429c7db580c86e12a342935e8549ac61ef1b2512 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 8 Nov 2017 22:46:02 +0200 Subject: [PATCH] Footer styling Complete and clean. --- docs/v3/DEVLOG.md | 2 ++ docs/v3_dev/src/index.css | 19 ++++++++++++++++++- src/mini/_navigation.scss | 39 ++++++++++++++++++++++++++++++++++++--- 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index cef0fa2..ccac209 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -124,3 +124,5 @@ - Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`. - Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell. - `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*). +- `footer` `display:block` fix removed - IE 9-. +- `footer` rebuilt, pretty similar to the last iteration, except for colors. diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index b4eef1b..862593f 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -778,6 +778,11 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d --nav-hover-back-color: #f0f0f0; --nav-fore-color: #444; --nav-border-color: #ddd; + --nav-link-color: #0277bd; + --footer-fore-color: #444; + --footer-back-color: #f8f8f8; + --footer-border-color: #ddd; + --footer-link-color: #0277bd; --drawer-back-color: #f8f8f8; --drawer-hover-back-color: #f0f0f0; --drawer-border-color: #ddd; @@ -838,7 +843,7 @@ nav * { nav a, nav a:visited { display: block; - color: var(--a-link-color); + color: var(--nav-link-color); border-radius: var(--universal-border-radius); transition: background 0.3s; } @@ -878,6 +883,18 @@ nav .sublink-2:before { border-left: 0; } +footer { + background: var(--footer-back-color); + color: var(--footer-fore-color); + border-top: 0.0625rem solid var(--footer-border-color); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); + font-size: 0.875rem; +} + +footer a, footer a:visited { + color: var(--footer-link-color); +} + header.sticky { position: -webkit-sticky; position: sticky; diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index da47371..65f6f22 100644 --- a/src/mini/_navigation.scss +++ b/src/mini/_navigation.scss @@ -11,6 +11,11 @@ $nav-back-color: #f8f8f8 !default; // Background color for the nav ele $nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover). $nav-fore-color: #444 !default; // Text color for the nav element. $nav-border-color: #ddd !default; // Border color for the nav element. +$nav-link-color: #0277bd !default; // Color for link in the nav element. +$footer-fore-color: #444 !default; // Text color for the footer element. +$footer-back-color: #f8f8f8 !default; // Background color for footer nav element. +$footer-border-color: #ddd !default; // Border color for the footer element. +$footer-link-color: #0277bd !default; // Color for link in the footer element. $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). @@ -20,8 +25,10 @@ $header-logo-name: 'logo' !default; // Class name for the header logo e $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. +$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean) +$footer-font-size: 0.875rem !default; // Font size for text in footer element. $sticky-name: 'sticky' !default; // Class name for sticky headers and footers. -$drawer-name: 'drawer' !default; // Class name for the drawer component. +$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-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? @@ -38,6 +45,11 @@ $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; +$nav-link-color-var: '--nav-link-color' !default; +$footer-fore-color-var: '--footer-fore-color' !default; +$footer-back-color-var: '--footer-back-color' !default; +$footer-border-color-var: '--footer-border-color' !default; +$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; @@ -67,6 +79,11 @@ $drawer-hover-back-color-var: '--drawer-hover-back-color' !default; #{$nav-hover-back-color-var}: $nav-hover-back-color; #{$nav-fore-color-var}: $nav-fore-color; #{$nav-border-color-var}: $nav-border-color; + #{$nav-link-color-var}: $nav-link-color; + #{$footer-fore-color-var}: $footer-fore-color; + #{$footer-back-color-var}: $footer-back-color; + #{$footer-border-color-var}: $footer-border-color; + #{$footer-link-color-var}: $footer-link-color; #{$drawer-back-color-var}: $drawer-back-color; #{$drawer-hover-back-color-var}: $drawer-hover-back-color; #{$drawer-border-color-var}: $drawer-border-color; @@ -134,7 +151,7 @@ nav { } a, a:visited { display: block; - color: var(#{$a-link-color-var}); // Apply regardless to de-stylize visited links. + color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links. border-radius: var(#{$universal-border-radius-var}); transition: background 0.3s; &:hover, &:focus { @@ -159,7 +176,23 @@ nav { } } } -// TODO: Add footer definitions here. +// Footer styling. +footer { + background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through + color: var(#{$footer-fore-color-var}); + @if $_footer-only-top-border { + border-top: $__1px solid var(#{$footer-border-color-var}); + } + @else { + border: $__1px solid var(#{$footer-border-color-var}); + } + // margin: $footer-margin; + padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var}); + font-size: $footer-font-size; + a, a:visited { + color: var(#{$footer-link-color-var}); + } +} // Definitions for sticky headers and footers. header.#{$sticky-name} { position: -webkit-sticky; // One of the rare instances where prefixes are necessary.