beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Footer styling

Browse source 
Complete and clean.
This commit is contained in:
Angelos Chalaris 2017-11-08 22:46:02 +02:00
parent 50a50908ef
commit 429c7db580
3 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v3/DEVLOG.md
View file

@ -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.

19
docs/v3_dev/src/index.css
View file

@ -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;

39
src/mini/_navigation.scss
View file

@ -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.