Updated navigation module to better work with the button changes
This commit is contained in:
parent
9dc0cdf486
commit
d2ab873d4c
15 changed files with 28 additions and 30 deletions
7
dist/mini-default.css
vendored
7
dist/mini-default.css
vendored
|
@ -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; }
|
||||
|
||||
|
|
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue