Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history 
* better LESS and SCSS sources, now the variables are separate files, also allow for further customization
* build script for SCSS Fixed
* minor improvement for the JS
  • Loading branch information
@thednp
thednp committed Oct 29, 2016
1 parent be8838d commit c783d4b
Show file tree
Hide file tree
Showing 20 changed files with 445 additions and 214 deletions.
177 changes: 80 additions & 97 deletions LESS/navbar.less
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,16 @@
// navbar.js | LESS
// VARIABLES

// BRAND COLOR
@brand_color: #069;

// THE MAIN LAYOUT
@nav_layout: 'main-menu'; // left-side | right-side

// root items
@root_item_padding: 10px 20px;

@root_item_color: #888;
@root_item_background: #f6f6f6;

@root_item_hover_color: @brand_color;
@root_item_hover_background: #fff;

@root_item_active_color: #fff;
@root_item_active_background: @brand_color;

// submenu items
@submenu_background: #e6e6e6;
@submenu_width: 200px;

@submenu_item_padding: 10px 20px;
@submenu_item_background: #fff;
@submenu_item_color: #888;

@submenu_item_hover_background: #333;
@submenu_item_hover_color: #eee;

@submenu_item_active_background: @brand_color;
@submenu_item_active_color: #fff;
// navbar.js | LESS

// MIXINS
.mixin (@nav_layout) when (@nav_layout = 'main-menu'){
.setLayout (@nav_layout) when (@nav_layout = 'main-menu'){
.main-menu();
}
.mixin (@nav_layout) when (@nav_layout = 'left-side'){
.setLayout (@nav_layout) when (@nav_layout = 'left-side'){
.left-side();
}
.mixin (@nav_layout) when (@nav_layout = 'right-side'){
.setLayout (@nav_layout) when (@nav_layout = 'right-side'){
.right-side();
}

// STYLE
.nav {
list-style: none;
li {
position: relative;
> ul {
background: @submenu_background;
width: @submenu_width;
opacity: 0;
position: absolute;
}
a { // general item styling
text-decoration: none;
display: block;
}
> a { // root item
padding: @root_item_padding;
color: @root_item_color;
background: @root_item_background;
}
li {
a { // submenu item
padding: @submenu_item_padding;
color: @submenu_item_color;
background: @submenu_item_background;
}
&.open, &:hover { // hover
> a {
color: @submenu_item_hover_color;
background: @submenu_item_hover_background;
}
}
&.active { // active
> a {
color: @submenu_item_active_color;
background: @submenu_item_active_background;
}
}
}
&.open {
> ul {
opacity: 1;
}
}
}
> li.open { // root hover
> a {
background: @root_item_hover_background;
color: @root_item_hover_color;
}
}
> li.active { // root active
> a {
color: @root_item_active_color;
background: @root_item_active_background;
}
}
.mixin(@nav_layout);
}

// LAYOUT & ANIMATION
.main-menu() { // horizontal
> li {
Expand Down Expand Up @@ -170,6 +77,8 @@

.right-side() { // vertical right-side
li {
// text-align: right; // useful for RTL
a .parent-icon { float: left; }
>ul {
top: -999em;
right: 85%;
Expand All @@ -187,4 +96,78 @@
top: 0;
}
}
}


// STYLE
.nav {
list-style: none;
li {
position: relative;
> ul {
background: @submenu_background;
width: @submenu_width;
opacity: 0;
position: absolute;
}
a { // general item styling
text-decoration: none;
display: block;
font-size: @item_font_size;
line-height: @item_line_height;
.parent-icon {
@icon_height: ceil(@item_line_height * 75 / 100);
float: right; width: @icon_height; height: @icon_height;
margin-top: ceil((@item_line_height - @icon_height)/2); // to be decided by dev
}
}
> a { // root item
padding: @root_item_padding;
color: @root_item_color;
background: @root_item_background;
.parent-icon > * { fill: @root_item_color; }
}
li {
a { // submenu item
padding: @submenu_item_padding;
color: @submenu_item_color;
background: @submenu_item_background;
.parent-icon > * { fill: @submenu_item_color; }
}
&.open, &:hover { // hover
> a {
color: @submenu_item_hover_color;
background: @submenu_item_hover_background;
.parent-icon > * { fill: @submenu_item_hover_color; }
}
}
&.active { // active
> a {
color: @submenu_item_active_color;
background: @submenu_item_active_background;
.parent-icon > * { fill: @submenu_item_active_color; }
}
}
}
&.open {
> ul {
opacity: 1;
}
}
}
> li.open { // root hover
> a {
background: @root_item_hover_background;
color: @root_item_hover_color;
.parent-icon > * { fill: @root_item_hover_color; }
}
}
> li.active { // root active
> a {
color: @root_item_active_color;
background: @root_item_active_background;
.parent-icon > * { fill: @root_item_active_color; }
}
}
.setLayout(@nav_layout);
}
39 changes: 39 additions & 0 deletions LESS/variables.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// VARIABLES

// BRAND COLOR
@brand_color: #069;

// THE MAIN LAYOUT
@nav_layout: 'main-menu'; // left-side | right-side

// some dimensions
@item_font_size: 14px;
@item_line_height: 32px;
@item_vertical_spacing: 10px;
@item_horizontal_spacing: 20px;

// root items
@root_item_padding: @item_vertical_spacing @item_horizontal_spacing;

@root_item_color: #888;
@root_item_background: transparent;

@root_item_hover_color: @brand_color;
@root_item_hover_background: #fff;

@root_item_active_color: #fff;
@root_item_active_background: @brand_color;

// submenu items
@submenu_background: #e6e6e6;
@submenu_width: 200px;

@submenu_item_padding: @item_vertical_spacing @item_horizontal_spacing;
@submenu_item_background: #fff;
@submenu_item_color: #888;

@submenu_item_hover_background: #333;
@submenu_item_hover_color: #eee;

@submenu_item_active_background: @brand_color;
@submenu_item_active_color: #fff;
52 changes: 16 additions & 36 deletions SCSS/navbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,6 @@
// navbar.js | SCSS

// VARIABLES

// BRAND COLOR
$brand_color: #069;

// THE MAIN LAYOUT
$nav_layout: 'main-menu'; // left-side | right-side

// root items
$root_item_padding: 10px 20px;

$root_item_color: #888;
$root_item_background: #f6f6f6;

$root_item_hover_color: $brand_color;
$root_item_hover_background: #fff;

$root_item_active_color: #fff;
$root_item_active_background: $brand_color;

// submenu items
$submenu_background: #e6e6e6;
$submenu_width: 200px;

$submenu_item_padding: 10px 20px;
$submenu_item_background: #fff;
$submenu_item_color: #888;

$submenu_item_hover_background: #333;
$submenu_item_hover_color: #eee;

$submenu_item_active_background: $brand_color;
$submenu_item_active_color: #fff;

// MIXINS
// LAYOUT & ANIMATION
// MIXINS - LAYOUT & ANIMATION
@mixin main-menu() { // horizontal
> li {
float: left;
Expand Down Expand Up @@ -101,6 +66,8 @@ $submenu_item_active_color: #fff;

@mixin right-side() { // vertical right-side
li {
// text-align: right; // useful for RTL
a .parent-icon { float: left; }
>ul {
top: -999em;
right: 85%;
Expand Down Expand Up @@ -144,28 +111,39 @@ $submenu_item_active_color: #fff;
a { // general item styling
text-decoration: none;
display: block;
font-size: $item_font_size;
line-height: $item_line_height;
.parent-icon {
$icon_height: ceil($item_line_height * 75 / 100);
float: right; width: $icon_height; height: $icon_height;
margin-top: ceil(($item_line_height - $icon_height)/2); // to be decided by dev
}
}
> a { // root item
padding: $root_item_padding;
color: $root_item_color;
background: $root_item_background;
.parent-icon > * { fill: $root_item_color; }
}
li {
a { // submenu item
padding: $submenu_item_padding;
color: $submenu_item_color;
background: $submenu_item_background;
.parent-icon > * { fill: $submenu_item_color; }
}
&.open, &:hover { // hover
> a {
color: $submenu_item_hover_color;
background: $submenu_item_hover_background;
.parent-icon > * { fill: $submenu_item_hover_color; }
}
}
&.active { // active
> a {
color: $submenu_item_active_color;
background: $submenu_item_active_background;
.parent-icon > * { fill: $submenu_item_active_color; }
}
}
}
Expand All @@ -179,12 +157,14 @@ $submenu_item_active_color: #fff;
> a {
background: $root_item_hover_background;
color: $root_item_hover_color;
.parent-icon > * { fill: $root_item_hover_color; }
}
}
> li.active { // root active
> a {
color: $root_item_active_color;
background: $root_item_active_background;
.parent-icon > * { fill: $root_item_active_color; }
}
}
@include setLayout();
Expand Down
39 changes: 39 additions & 0 deletions SCSS/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// VARIABLES

// BRAND COLOR
$brand_color: #006699 !default;

// THE MAIN LAYOUT
$nav_layout: 'main-menu' !default; // left-side | right-side

// some dimensions
$item_font_size: 14px !default;
$item_line_height: 32px !default;
$item_vertical_spacing: 10px !default;
$item_horizontal_spacing: 20px !default;

// root items
$root_item_padding: $item_vertical_spacing $item_horizontal_spacing !default;

$root_item_color: #888 !default;
$root_item_background: transparent !default;

$root_item_hover_color: $brand_color !default;
$root_item_hover_background: #fff !default;

$root_item_active_color: #fff !default;
$root_item_active_background: $brand_color !default;

// submenu items
$submenu_background: #e6e6e6 !default;
$submenu_width: 200px !default;

$submenu_item_padding: $item_vertical_spacing $item_horizontal_spacing !default;
$submenu_item_background: #fff !default;
$submenu_item_color: #888 !default;

$submenu_item_hover_background: #333 !default;
$submenu_item_hover_color: #eee !default;

$submenu_item_active_background: $brand_color !default;
$submenu_item_active_color: #fff !default;
Loading

1 comment on commit c783d4b

@thednp
Copy link
Owner Author

@thednp thednp commented on c783d4b Oct 29, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also added support for icons, the icons must have the class="parent-icon" to get proper layout.

Please sign in to comment.