Updated navigation module to better work with the button changes

This commit is contained in:
Angelos Chalaris 2016-12-06 11:21:07 +02:00
parent 9dc0cdf486
commit d2ab873d4c
15 changed files with 28 additions and 30 deletions

View file

@ -536,7 +536,7 @@ a {
order: 999; } }
header {
display: block;
height: 36px;
height: 44px;
background: #263238;
color: #f5f5f5;
padding: 2px 8px;
@ -548,7 +548,8 @@ header {
color: #f5f5f5;
font-size: 1.75em;
line-height: 1.2;
margin: 1px 6px 1px 1px; }
margin: 1px 6px 1px 1px;
padding: 3px 0 0; }
header button, header [type="button"], header a.button, header label.button, header .button {
background: #263238;
color: #f5f5f5;
@ -557,8 +558,6 @@ header {
box-shadow: none; }
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus {
background: #37474f; }
header > span:not(.logo) {
vertical-align: super; }
header .logo, header a.button {
text-decoration: none; }

File diff suppressed because one or more lines are too long

View file

@ -605,3 +605,5 @@
## 20161206
- Tweaks to the `checkbox` and `radio` components. Added a lot of customization and recalculated their values from the ground up. This should fix problems with displaying them on different screens.
- Updated the awkward `navigation` `header` component after the `button` changes.
- Logo in `header` changed to reflect the new style.

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -16,8 +16,8 @@
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;

View file

@ -144,7 +144,7 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
// Variables for navigational elements
$header-height: 36px; // Height for <header>
$header-height: 44px; // Height for <header>
$header-back-color: #263238; // Background color for <header>
$header-fore-color: $back-color; // Text color for <header>
$header-border-style: 0; // Border style for <header>
@ -156,7 +156,7 @@ $header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.2; // Line height for <header>'s logo
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding for <header>'s logo
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
$header-link-hover-color: #37474f; // Hover color for <header>'s links
$header-link-margin: 2px 0 0; // Margin for <header>'s links
$nav-back-color: #eceff1; // Background for <nav>

View file

@ -62,9 +62,6 @@ header {
border: 0;
}
}
> span:not(.#{$header-logo-name}) { // Style separators' vertical alignment.
vertical-align: super;
}
@if $apply-link-underline { // Override for links if underline is enabled.
.#{$header-logo-name}, a.#{$button-class-name} {
text-decoration: none;