197 lines
No EOL
7.1 KiB
SCSS
197 lines
No EOL
7.1 KiB
SCSS
/*
|
|
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-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 ){
|
|
.#{$nav-name}{
|
|
box-sizing: border-box;
|
|
background-color: #{$nav-bg-color};
|
|
.#{$nav-logo-name}{
|
|
font-size: $nav-logo-size;
|
|
color: #{$nav-color};
|
|
}
|
|
ul{
|
|
display: inline-block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
li{
|
|
display: inline-block;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
> * {
|
|
display: inline-block;
|
|
padding: #{$nav-padding};
|
|
color: #{$nav-color};
|
|
margin: 0;
|
|
}
|
|
.#{$nav-link-name}{
|
|
&:hover, &:active, &:focus{
|
|
color: #{$nav-color};
|
|
@if $nav-hover-style == 'lighten'{
|
|
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
|
}
|
|
@else{
|
|
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
|
}
|
|
}
|
|
&.disabled, &[disabled]{
|
|
cursor: $nav-disabled-cursor;
|
|
opacity: $nav-disabled-opacity;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.#{$nav-vertical-name}{
|
|
ul{
|
|
display: block;
|
|
li{
|
|
display: block;
|
|
> * {
|
|
width: 100%;
|
|
padding: #{$nav-padding} 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.#{$nav-fixed-name}{
|
|
position: fixed;
|
|
@if $nav-fixed-left-right == 'left'{
|
|
left: 0;
|
|
}
|
|
@else{
|
|
right: 0;
|
|
}
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
&.#{$nav-vertical-name}{
|
|
height: 100%;
|
|
width: #{($grid-columns-count-for-nav-fixed-vertical * 100%/ $grid-columns-total)};
|
|
ul{
|
|
width: 100%;
|
|
li{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& + label{
|
|
display: none;
|
|
font-weight: 700;
|
|
margin: $nav-fixed-collapse-label-margin;
|
|
font-size: $nav-fixed-collapse-label-font-size;
|
|
padding: #{$nav-padding};
|
|
color: #{$nav-color};
|
|
background-color: $nav-bg-color;
|
|
width: auto;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
@if $nav-fixed-collapse-label-location == 'top-left'{
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
@else if $nav-fixed-collapse-label-location == 'top-right'{
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
@else if $nav-fixed-collapse-label-location == 'bottom-left'{
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
@else{
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
&:before{
|
|
position: relative;
|
|
content: '\2630';
|
|
}
|
|
&:hover, &:active, &:focus{
|
|
@if $nav-hover-style == 'lighten'{
|
|
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
|
}
|
|
@else{
|
|
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: $nav-fixed-collapse-breakpoint){
|
|
.#{$nav-name}{
|
|
overflow: auto;
|
|
&.#{$nav-fixed-name}{
|
|
display: none;
|
|
& + label{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
input[type="checkbox"]:checked + .#{$nav-name}.#{$nav-fixed-name}{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
ul{
|
|
display: block;
|
|
li{
|
|
display: block;
|
|
* {
|
|
width: 100%;
|
|
padding: #{$nav-padding} 0;
|
|
}
|
|
}
|
|
}
|
|
& + label{
|
|
&:before{
|
|
content: '\00d7';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |