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

Navigation module updates

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-22 11:55:32 +02:00
parent dc16eadae8
commit e3ce4b3490
6 changed files with 102 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
dist/mini-default.css vendored
View file

@ -553,12 +553,13 @@ header {
nav {
display: block;
background: #eceff1;
border-radius: 1px;
border: 1px solid #bdbdbd;
margin: 2px;
padding: 4px 4px 4px 16px; }
padding: 8px 8px 16px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
nav a, nav a:visited {
display: block;
color: #0277bd; }
color: #1565c0; }
nav .sublink-1 {
padding-left: 12px; }
nav .sublink-2 {

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -518,3 +518,7 @@
- Created `navigation.html`.
- Added basic info for `navigation` doc page.
- Added basic structure for `navigation` doc page.
- Added samples for `header`, `nav` and `footer` in the `navigation` doc page.
- Added `box-shadow` to the `nav` element to be in line with the rest of the design. Added a `border`, too.
- Tweaked colors and values of other things in the `navigation` module's variables in the flavor file.
- Updated `navigation` module with optimization and borders.

41
docs/v2/navigation.html
View file

@ -122,8 +122,18 @@
<h2>Header</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div>
<br>
<header>
<a href="#" class="logo">Logo</a>
<button>Home</button>
<a href="#" class="button">News</a>
<button>About</button>
<button>Contact</button>
</header>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
@ -160,7 +170,22 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div>
<br>
<nav>
<a href="#">Home</a>
<span>News</span>
<a href="#" class="sublink-1">New Courses</a>
<a href="#" class="sublink-1">Certifications</a>
<span class="sublink-1">Events</span>
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
<a href="#" class="sublink-1">Policy Update</a>
<a href="#">About</a>
<a href="#" >Contact</a>
</nav>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
@ -196,8 +221,14 @@
<h2>Footer</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div>
<br>
<footer>
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
</footer>
<br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>

58
src/flavors/mini-default.scss
View file

@ -134,36 +134,40 @@ $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-back-color: #263238; // Background color for header
$header-fore-color: $back-color; // Text color for header
$header-margin: 0; // Margin for header
$header-padding: 2px 8px; // Padding for header
$header-box-shadow: // Box shadow for header
$header-height: 36px; // 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>
$header-margin: 0; // Margin for <header>
$header-padding: 2px 8px; // Padding for <header>
$header-box-shadow: // Box shadow for <header>
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$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-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
$nav-fore-color: $fore-color; // Text color for nav
$nav-border-style: 0; // Border style for nav
$nav-border-radius: 1px; // Border radius for nav
$nav-padding: 4px 4px 4px 16px; // Padding for nav
$nav-margin: 2px; // Margin for nav
$nav-link-fore-color: $link-fore-color; // Text color for links in nav
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav
$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-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>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #bdbdbd; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$nav-link-fore-color: #1565c0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$footer-back-color: #263238; // Background color for footer
$footer-fore-color: $back-color; // Text color for footer
$footer-font-size: 85%; // Font size for footer
$footer-margin: 18px 0 0; // Margin for footer
$footer-padding: 22px 10px 12px; // Padding for footer
$footer-link-fore-color: #039be5; // Text color for links in footer
$footer-back-color: #263238; // Background color for <footer>
$footer-fore-color: $back-color; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #039be5; // Text color for links in <footer>
// Variables for forms and inputs
$form-back-color: #eceff1; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms

24
src/mini/_navigation.scss
View file

@ -4,8 +4,15 @@
header {
display: block; // Correct display for older versions of IE.
height: $header-height;
@if $header-back-color != $back-color {
background: $header-back-color;
}
@if $header-fore-color != $fore-color {
color: $header-fore-color;
}
@if $header-border-style != 0 {
border: $header-border-style;
}
@if $header-margin != 0 {
margin: $header-margin;
}
@ -35,10 +42,11 @@ header {
padding: $header-logo-padding;
}
}
// Link styling.
button, [type="button"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
background: $header-back-color;
background: $header-back-color; // Apply color regardless to override styling from other things.
color: $header-fore-color;
vertical-align: top;
vertical-align: top; // Alignemt, really important to make this work well.
@if $header-link-margin != 0 {
margin: $header-link-margin;
}
@ -79,9 +87,12 @@ nav {
@if $nav-padding != 0 {
padding: $nav-padding;
}
@if $nav-box-shadow != 0 {
box-shadow: $nav-box-shadow;
}
a, a:visited {
display: block;
color: $nav-link-fore-color;
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
}
// Subcategories in navigation.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
@ -96,8 +107,15 @@ nav {
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.
@if $footer-back-color != $back-color {
background: $footer-back-color;
}
@if $footer-fore-color != $fore-color {
color: $footer-fore-color;
}
@if $footer-border-style != 0 {
border: $footer-border-style;
}
@if $footer-margin != 0 {
margin: $footer-margin;
}