Navigation completed!
This commit is contained in:
Angelos Chalaris
parent
9edfb97b2d
commit
ffc21074a3
6 changed files with 105 additions and 20 deletions
|
|
@ -7,7 +7,7 @@ A minimal, responsive pure CSS framework to get you started.
|
|||
- **button**: button styles `GZIPPED SIZE`: 427 bytes
|
||||
- **form**: form styles `GZIPPED SIZE`: 517 bytes
|
||||
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
|
||||
- **nav**: navigation bar `GZIPPED SIZE`: 517 bytes
|
||||
- **nav**: navigation bar `GZIPPED SIZE`: 535 bytes
|
||||
- **table**: table styles `GZIPPED SIZE`: 243 bytes
|
||||
- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
|
||||
|
||||
|
|
|
|||
|
|
@ -918,6 +918,50 @@ img.thumb {
|
|||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
/*
|
||||
Mixin for navigation bar and complementary styles.
|
||||
Parameters:
|
||||
- $nav-name : The class name for the navigation bar.
|
||||
- $nav-vertical-name : The class name for the vertical style of the navigation bar.
|
||||
- $nav-fixed-name : The class name for the fixed style of the navigation bar.
|
||||
- $nav-logo-name : The class name for the logo item of the navigation bar.
|
||||
- $nav-logo-size : The font-size of the logo item of the navigation bar.
|
||||
- $nav-link-name : The class name for the navigation links of the navigation bar.
|
||||
- $nav-padding : The padding of the elements of the navigation bar. [1]
|
||||
- $nav-color : The text color of the navigation elements.
|
||||
- $nav-bg-color : The background color of the navigation bar.
|
||||
- $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
|
||||
- $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
|
||||
- $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
|
||||
- $nav-disabled-opacity : The opacity of the navigation elements when disabled.
|
||||
- $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
|
||||
- $grid-columns-total : Total amount fo columns in the used grid. [5]
|
||||
- $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
|
||||
- $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
|
||||
- $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
|
||||
- $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
|
||||
- $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.
|
||||
Notes:
|
||||
- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed).
|
||||
For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse
|
||||
label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to
|
||||
avoid CSS errors and ultimately the style not being applied to some elements.
|
||||
- [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only
|
||||
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||
- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
|
||||
are provided, due to the inside condition only checking for `left`, `right` will be used as the
|
||||
default value.
|
||||
- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
|
||||
should not be affected as they are 100% width, meaning that anchoring to left or right should have
|
||||
the same result.
|
||||
- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have
|
||||
to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
|
||||
a small gap just before the third column in the grid. If no grid is specified, you can use percentage
|
||||
values like 100 and 15 to get a 15% width for example.
|
||||
- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
|
||||
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
|
||||
used as a default if no valid value is specified.
|
||||
*/
|
||||
.nav {
|
||||
box-sizing: border-box;
|
||||
background-color: #ddd; }
|
||||
|
|
@ -937,9 +981,9 @@ img.thumb {
|
|||
padding: 8px;
|
||||
color: #272727;
|
||||
margin: 0; }
|
||||
.nav ul li a:hover, .nav ul li a:active, .nav ul li a:focus {
|
||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||
background: #cacaca; }
|
||||
.nav ul li a.disabled, .nav ul li a[disabled] {
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
.nav.vertical ul {
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -37,4 +37,4 @@
|
|||
@include make-hidden(hidden);
|
||||
@import 'mini/nav';
|
||||
// Use nav mixin to create nav with default specs.
|
||||
@include make-nav(nav, vertical, fixed, logo, 135%, 8px, #272727, #ddd, darken, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
||||
@include make-nav(nav, vertical, fixed, logo, 135%, link, 8px, #272727, #ddd, darken, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
||||
|
|
@ -1,10 +1,51 @@
|
|||
|
||||
|
||||
|
||||
/*
|
||||
Mixin for navigation bar and complementary styles.
|
||||
Parameters:
|
||||
- $nav-name : The class name for the navigation bar.
|
||||
- $nav-vertical-name : The class name for the vertical style of the navigation bar.
|
||||
- $nav-fixed-name : The class name for the fixed style of the navigation bar.
|
||||
- $nav-logo-name : The class name for the logo item of the navigation bar.
|
||||
- $nav-logo-size : The font-size of the logo item of the navigation bar.
|
||||
- $nav-link-name : The class name for the navigation links of the navigation bar.
|
||||
- $nav-padding : The padding of the elements of the navigation bar. [1]
|
||||
- $nav-color : The text color of the navigation elements.
|
||||
- $nav-bg-color : The background color of the navigation bar.
|
||||
- $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
|
||||
- $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
|
||||
- $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
|
||||
- $nav-disabled-opacity : The opacity of the navigation elements when disabled.
|
||||
- $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
|
||||
- $grid-columns-total : Total amount fo columns in the used grid. [5]
|
||||
- $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
|
||||
- $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
|
||||
- $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
|
||||
- $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
|
||||
- $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.
|
||||
Notes:
|
||||
- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed).
|
||||
For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse
|
||||
label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to
|
||||
avoid CSS errors and ultimately the style not being applied to some elements.
|
||||
- [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only
|
||||
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||
- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
|
||||
are provided, due to the inside condition only checking for `left`, `right` will be used as the
|
||||
default value.
|
||||
- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
|
||||
should not be affected as they are 100% width, meaning that anchoring to left or right should have
|
||||
the same result.
|
||||
- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have
|
||||
to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
|
||||
a small gap just before the third column in the grid. If no grid is specified, you can use percentage
|
||||
values like 100 and 15 to get a 15% width for example.
|
||||
- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
|
||||
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
|
||||
used as a default if no valid value is specified.
|
||||
*/
|
||||
@mixin make-nav( $nav-name, $nav-vertical-name, $nav-fixed-name, $nav-logo-name,
|
||||
$nav-logo-size, $nav-padding, $nav-color, $nav-bg-color, $nav-hover-style,
|
||||
$nav-hover-style-percentage, $nav-disabled-cursor, $nav-disabled-opacity,
|
||||
$nav-fixed-left-right, $grid-columns-total,
|
||||
$nav-logo-size, $nav-link-name, $nav-padding, $nav-color, $nav-bg-color,
|
||||
$nav-hover-style, $nav-hover-style-percentage, $nav-disabled-cursor,
|
||||
$nav-disabled-opacity, $nav-fixed-left-right, $grid-columns-total,
|
||||
$grid-columns-count-for-nav-fixed-vertical, $nav-fixed-collapse-breakpoint,
|
||||
$nav-fixed-collapse-label-location, $nav-fixed-collapse-label-margin,
|
||||
$nav-fixed-collapse-label-font-size ){
|
||||
|
|
@ -29,7 +70,7 @@
|
|||
color: #{$nav-color};
|
||||
margin: 0;
|
||||
}
|
||||
& a{
|
||||
& .#{$nav-link-name}{
|
||||
&:hover, &:active, &:focus{
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
<input type="checkbox" class="hidden" id="nav-toggle"><div class="nav">
|
||||
<span class="logo">mini.css</span>
|
||||
<ul class="pure-menu-list">
|
||||
<li><a href="#" class="nav-link">link 1</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link" disabled>d link</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">other</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">thing</a></li>
|
||||
<li class="nav-link">Separator</li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test2</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test3!</a></li>
|
||||
<li><a href="#" class="link">link 1</a></li>
|
||||
<li class="link"><a href="#" class="link" disabled>d link</a></li>
|
||||
<li class="link"><a href="#" class="link">other</a></li>
|
||||
<li class="link"><a href="#" class="link">thing</a></li>
|
||||
<li class="link">Separator</li>
|
||||
<li class="link"><a href="#" class="link">test</a></li>
|
||||
<li class="link"><a href="#" class="link">test2</a></li>
|
||||
<li class="link"><a href="#" class="link">test3!</a></li>
|
||||
</ul>
|
||||
</div><label for="nav-toggle"></label><br>
|
||||
<h2>Heading 2 <small>smaller</small></h2><br>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue