mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-05 12:22:44 +00:00
Merge pull request #3292 from Gazook89/Combine-Nav-Styling
Looks good! thanks @Gazook89 !
This commit is contained in:
Víctor Losada Hernández
@@ -1,272 +1,345 @@
|
|||||||
@import "naturalcrit/styles/colors.less";
|
@import 'naturalcrit/styles/colors.less';
|
||||||
@navbarHeight : 28px;
|
|
||||||
@keyframes pinkColoring {
|
|
||||||
0% {color : pink;}
|
|
||||||
50% {color : pink;}
|
|
||||||
75% {color : red;}
|
|
||||||
100% {color : pink;}
|
|
||||||
}
|
|
||||||
.homebrew nav {
|
|
||||||
.homebrewLogo {
|
|
||||||
.animate(color);
|
|
||||||
font-family : CodeBold;
|
|
||||||
font-size : 12px;
|
|
||||||
color : white;
|
|
||||||
div {
|
|
||||||
margin-top : 2px;
|
|
||||||
margin-bottom : -2px;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color : @blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.editTitle.navItem {
|
|
||||||
padding : 2px 12px;
|
|
||||||
input {
|
|
||||||
font-family : "Open Sans", sans-serif;
|
|
||||||
font-size : 12px;
|
|
||||||
font-weight : 800;
|
|
||||||
width : 250px;
|
|
||||||
margin : 0;
|
|
||||||
padding : 2px;
|
|
||||||
text-align : center;
|
|
||||||
color : white;
|
|
||||||
border : 1px solid @blue;
|
|
||||||
outline : none;
|
|
||||||
background-color : transparent;
|
|
||||||
}
|
|
||||||
.charCount {
|
|
||||||
display : inline-block;
|
|
||||||
margin-left : 8px;
|
|
||||||
text-align : right;
|
|
||||||
vertical-align : bottom;
|
|
||||||
color : #666;
|
|
||||||
&.max {
|
|
||||||
color : @red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brewTitle.navItem {
|
|
||||||
font-size : 12px;
|
|
||||||
font-weight : 800;
|
|
||||||
height : 100%;
|
|
||||||
text-align : center;
|
|
||||||
text-transform : initial;
|
|
||||||
color : white;
|
|
||||||
background-color : transparent;
|
|
||||||
flex-grow : 1;
|
|
||||||
}
|
|
||||||
.save-menu {
|
|
||||||
.dropdown {
|
|
||||||
z-index : 1000;
|
|
||||||
}
|
|
||||||
.navItem i.fa-power-off {
|
|
||||||
color : red;
|
|
||||||
&.active {
|
|
||||||
color : rgb(0, 182, 52);
|
|
||||||
filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.patreon.navItem {
|
|
||||||
border-right : 1px solid #666;
|
|
||||||
border-left : 1px solid #666;
|
|
||||||
&:hover i {
|
|
||||||
color : red;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
.animate(color);
|
|
||||||
animation-name : pinkColoring;
|
|
||||||
animation-duration : 2s;
|
|
||||||
color : pink;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.recent.navDropdownContainer {
|
|
||||||
position : relative;
|
|
||||||
.navDropdown .navItem {
|
|
||||||
overflow : hidden auto;
|
|
||||||
max-height : ~"calc(100vh - 28px)";
|
|
||||||
scrollbar-color : #666 #333;
|
|
||||||
scrollbar-width : thin;
|
|
||||||
|
|
||||||
|
|
||||||
#backgroundColorsHover;
|
@navbarHeight : 28px;
|
||||||
.animate(background-color);
|
|
||||||
position : relative;
|
@keyframes pinkColoring {
|
||||||
display : block;
|
0% { color : pink; }
|
||||||
overflow : clip;
|
50% { color : pink; }
|
||||||
box-sizing : border-box;
|
75% { color : red; }
|
||||||
padding : 8px 5px 13px;
|
100% { color : pink; }
|
||||||
text-decoration : none;
|
}
|
||||||
color : white;
|
|
||||||
border-top : 1px solid #888;
|
@keyframes glideDropDown {
|
||||||
background-color : #333;
|
0% {
|
||||||
.clear {
|
background-color : #333333;
|
||||||
position : absolute;
|
opacity : 0;
|
||||||
top : 50%;
|
transform : translate(0px, -100%);
|
||||||
right : 0;
|
|
||||||
display : none;
|
|
||||||
width : 20px;
|
|
||||||
height : 100%;
|
|
||||||
transform : translateY(-50%);
|
|
||||||
opacity : 70%;
|
|
||||||
border-radius : 3px;
|
|
||||||
background-color : #333;
|
|
||||||
&:hover {
|
|
||||||
opacity : 100%;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-size : 10px;
|
|
||||||
width : 100%;
|
|
||||||
height : 100%;
|
|
||||||
margin : 0;
|
|
||||||
text-align : center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color : @blue;
|
|
||||||
.clear {
|
|
||||||
display : grid;
|
|
||||||
place-content : center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
display : inline-block;
|
|
||||||
overflow : hidden;
|
|
||||||
width : 100%;
|
|
||||||
white-space : nowrap;
|
|
||||||
text-overflow : ellipsis;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
font-size : 0.7em;
|
|
||||||
position : absolute;
|
|
||||||
right : 2px;
|
|
||||||
bottom : 2px;
|
|
||||||
color : #888;
|
|
||||||
}
|
|
||||||
&.header {
|
|
||||||
display : block;
|
|
||||||
box-sizing : border-box;
|
|
||||||
padding : 5px 0;
|
|
||||||
text-align : center;
|
|
||||||
color : #BBB;
|
|
||||||
border-top : 1px solid #888;
|
|
||||||
background-color : #333;
|
|
||||||
&:nth-of-type(1) {
|
|
||||||
background-color : darken(@teal, 20%);
|
|
||||||
}
|
|
||||||
&:nth-of-type(2) {
|
|
||||||
background-color : darken(@purple, 30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.metadata.navItem {
|
100% {
|
||||||
position : relative;
|
background-color : #333333;
|
||||||
|
opacity : 1;
|
||||||
|
transform : translate(0px, 0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homebrew nav {
|
||||||
|
background-color : #333333;
|
||||||
|
.navContent {
|
||||||
|
position : relative;
|
||||||
|
z-index : 2;
|
||||||
|
display : flex;
|
||||||
|
justify-content : space-between;
|
||||||
|
}
|
||||||
|
.navSection {
|
||||||
display : flex;
|
display : flex;
|
||||||
align-items : center;
|
align-items : center;
|
||||||
height : 100%;
|
&:last-child .navItem { border-left : 1px solid #666666; }
|
||||||
padding : 0;
|
}
|
||||||
flex-grow : 1;
|
// "NaturalCrit" logo
|
||||||
i {
|
.navLogo {
|
||||||
margin-right : 10px;
|
display : block;
|
||||||
|
margin-top : 0px;
|
||||||
|
margin-right : 8px;
|
||||||
|
margin-left : 8px;
|
||||||
|
color : white;
|
||||||
|
text-decoration : none;
|
||||||
|
&:hover {
|
||||||
|
.name { color : @orange; }
|
||||||
|
svg { fill : @orange; }
|
||||||
}
|
}
|
||||||
.window {
|
svg {
|
||||||
position : absolute;
|
height : 13px;
|
||||||
z-index : -1;
|
margin-right : 0.2em;
|
||||||
bottom : 0;
|
cursor : pointer;
|
||||||
left : 50%;
|
fill : white;
|
||||||
display : flex;
|
}
|
||||||
justify-content : flex-start;
|
span.name {
|
||||||
width : 440px;
|
font-family : 'CodeLight';
|
||||||
max-height : ~"calc(100vh - 28px)";
|
font-size : 15px;
|
||||||
margin : 0 auto;
|
span.crit { font-family : 'CodeBold'; }
|
||||||
padding : 0 10px 5px;
|
small {
|
||||||
transition : transform 0.4s, opacity 0.4s;
|
font-family : 'Open Sans';
|
||||||
border : 3px solid #444;
|
font-size : 0.3em;
|
||||||
border-top : unset;
|
font-weight : 800;
|
||||||
border-radius : 0 0 5px 5px;
|
text-transform : uppercase;
|
||||||
background-color : #333;
|
|
||||||
box-shadow : inset 0 7px 9px -7px #111;
|
|
||||||
flex-flow : row wrap;
|
|
||||||
align-content : baseline;
|
|
||||||
&.active {
|
|
||||||
transform : translateX(-50%) translateY(100%);
|
|
||||||
opacity : 1;
|
|
||||||
}
|
}
|
||||||
&.inactive {
|
}
|
||||||
transform : translateX(-50%) translateY(0%);
|
}
|
||||||
opacity : 0;
|
.navItem {
|
||||||
|
#backgroundColorsHover;
|
||||||
|
.animate(background-color);
|
||||||
|
padding : 8px 12px;
|
||||||
|
font-size : 10px;
|
||||||
|
font-weight : 800;
|
||||||
|
line-height : 13px;
|
||||||
|
color : white;
|
||||||
|
text-decoration : none;
|
||||||
|
text-transform : uppercase;
|
||||||
|
cursor : pointer;
|
||||||
|
background-color : #333333;
|
||||||
|
i {
|
||||||
|
float : right;
|
||||||
|
margin-left : 5px;
|
||||||
|
font-size : 13px;
|
||||||
|
}
|
||||||
|
&.patreon {
|
||||||
|
border-right : 1px solid #666666;
|
||||||
|
border-left : 1px solid #666666;
|
||||||
|
&:hover i { color : red; }
|
||||||
|
i {
|
||||||
|
color : pink;
|
||||||
|
.animate(color);
|
||||||
|
animation-name : pinkColoring;
|
||||||
|
animation-duration : 2s;
|
||||||
}
|
}
|
||||||
.row {
|
}
|
||||||
display : flex;
|
&.editTitle { // this is not needed at all currently - you used to be able to edit the title via the navbar.
|
||||||
width : 100%;
|
padding : 2px 12px;
|
||||||
flex-flow : row wrap;
|
input {
|
||||||
h4 {
|
width : 250px;
|
||||||
display : block;
|
padding : 2px;
|
||||||
box-sizing : border-box;
|
margin : 0;
|
||||||
min-width : 76px;
|
font-family : 'Open Sans', sans-serif;
|
||||||
padding : 5px 0;
|
font-size : 12px;
|
||||||
text-align : center;
|
font-weight : 800;
|
||||||
color : #BBB;
|
color : white;
|
||||||
flex-basis : 20%;
|
text-align : center;
|
||||||
flex-grow : 1;
|
background-color : transparent;
|
||||||
|
border : 1px solid @blue;
|
||||||
|
outline : none;
|
||||||
|
}
|
||||||
|
.charCount {
|
||||||
|
display : inline-block;
|
||||||
|
margin-left : 8px;
|
||||||
|
color : #666666;
|
||||||
|
text-align : right;
|
||||||
|
vertical-align : bottom;
|
||||||
|
&.max { color : @red; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.brewTitle {
|
||||||
|
flex-grow : 1;
|
||||||
|
font-size : 12px;
|
||||||
|
font-weight : 800;
|
||||||
|
color : white;
|
||||||
|
text-align : center;
|
||||||
|
text-transform : initial;
|
||||||
|
background-color : transparent;
|
||||||
|
}
|
||||||
|
// "The Homebrewery" logo
|
||||||
|
&.homebrewLogo {
|
||||||
|
.animate(color);
|
||||||
|
font-family : 'CodeBold';
|
||||||
|
font-size : 12px;
|
||||||
|
color : white;
|
||||||
|
div {
|
||||||
|
margin-top : 2px;
|
||||||
|
margin-bottom : -2px;
|
||||||
|
}
|
||||||
|
&:hover { color : @blue; }
|
||||||
|
}
|
||||||
|
&.metadata {
|
||||||
|
position : relative;
|
||||||
|
display : flex;
|
||||||
|
flex-grow : 1;
|
||||||
|
align-items : center;
|
||||||
|
height : 100%;
|
||||||
|
padding : 0;
|
||||||
|
i { margin-right : 10px;}
|
||||||
|
.window {
|
||||||
|
position : absolute;
|
||||||
|
bottom : 0;
|
||||||
|
left : 50%;
|
||||||
|
z-index : -1;
|
||||||
|
display : flex;
|
||||||
|
flex-flow : row wrap;
|
||||||
|
align-content : baseline;
|
||||||
|
justify-content : flex-start;
|
||||||
|
width : 440px;
|
||||||
|
max-height : ~'calc(100vh - 28px)';
|
||||||
|
padding : 0 10px 5px;
|
||||||
|
margin : 0 auto;
|
||||||
|
background-color : #333333;
|
||||||
|
border : 3px solid #444444;
|
||||||
|
border-top : unset;
|
||||||
|
border-radius : 0 0 5px 5px;
|
||||||
|
box-shadow : inset 0 7px 9px -7px #111111;
|
||||||
|
transition : transform 0.4s, opacity 0.4s;
|
||||||
|
&.active {
|
||||||
|
opacity : 1;
|
||||||
|
transform : translateX(-50%) translateY(100%);
|
||||||
}
|
}
|
||||||
p {
|
&.inactive {
|
||||||
font-family : "Open Sans", sans-serif;
|
opacity : 0;
|
||||||
font-size : 10px;
|
transform : translateX(-50%) translateY(0%);
|
||||||
font-weight : normal;
|
}
|
||||||
padding : 5px 0;
|
.row {
|
||||||
text-transform : initial;
|
display : flex;
|
||||||
flex-basis : 80%;
|
flex-flow : row wrap;
|
||||||
flex-grow : 1;
|
width : 100%;
|
||||||
.tag {
|
h4 {
|
||||||
display : inline-block;
|
box-sizing : border-box;
|
||||||
margin : 2px 2px;
|
display : block;
|
||||||
padding : 2px;
|
flex-basis : 20%;
|
||||||
border : 2px solid grey;
|
flex-grow : 1;
|
||||||
border-radius : 5px;
|
min-width : 76px;
|
||||||
background-color : #444;
|
padding : 5px 0;
|
||||||
|
color : #BBBBBB;
|
||||||
|
text-align : center;
|
||||||
}
|
}
|
||||||
a.userPageLink {
|
p {
|
||||||
text-decoration : none;
|
flex-basis : 80%;
|
||||||
color : white;
|
flex-grow : 1;
|
||||||
&:hover {
|
padding : 5px 0;
|
||||||
text-decoration : underline;
|
font-family : 'Open Sans', sans-serif;
|
||||||
|
font-size : 10px;
|
||||||
|
font-weight : normal;
|
||||||
|
text-transform : initial;
|
||||||
|
.tag {
|
||||||
|
display : inline-block;
|
||||||
|
padding : 2px;
|
||||||
|
margin : 2px 2px;
|
||||||
|
background-color : #444444;
|
||||||
|
border : 2px solid grey;
|
||||||
|
border-radius : 5px;
|
||||||
|
}
|
||||||
|
a.userPageLink {
|
||||||
|
color : white;
|
||||||
|
text-decoration : none;
|
||||||
|
&:hover { text-decoration : underline; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:nth-of-type(even) { background-color : #555555; }
|
||||||
}
|
}
|
||||||
&:nth-of-type(even) {
|
}
|
||||||
background-color : #555;
|
}
|
||||||
|
&.warning {
|
||||||
|
position : relative;
|
||||||
|
color : white;
|
||||||
|
background-color : @orange;
|
||||||
|
&:hover > .dropdown { visibility : visible; }
|
||||||
|
.dropdown {
|
||||||
|
position : absolute;
|
||||||
|
top : 28px;
|
||||||
|
left : 0;
|
||||||
|
z-index : 10000;
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : block;
|
||||||
|
width : 100%;
|
||||||
|
padding : 13px 5px;
|
||||||
|
text-align : center;
|
||||||
|
visibility : hidden;
|
||||||
|
background-color : #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.account {
|
||||||
|
min-width : 100px;
|
||||||
|
&.username { text-transform : none;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navDropdownContainer {
|
||||||
|
position : relative;
|
||||||
|
.navDropdown {
|
||||||
|
position : absolute;
|
||||||
|
top : 28px;
|
||||||
|
left : 0px;
|
||||||
|
z-index : 10000;
|
||||||
|
width : 100%;
|
||||||
|
max-height : calc(100vh - 28px);
|
||||||
|
overflow : hidden auto;
|
||||||
|
.navItem {
|
||||||
|
position : relative;
|
||||||
|
display : block;
|
||||||
|
width : 100%;
|
||||||
|
padding : 8px 5px;
|
||||||
|
border : 1px solid #888888;
|
||||||
|
border-bottom : 0;
|
||||||
|
animation-name : glideDropDown;
|
||||||
|
animation-duration : 0.4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.recent {
|
||||||
|
position : relative;
|
||||||
|
.navDropdown .navItem {
|
||||||
|
#backgroundColorsHover;
|
||||||
|
.animate(background-color);
|
||||||
|
position : relative;
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : block;
|
||||||
|
max-height : ~'calc(100vh - 28px)';
|
||||||
|
padding : 8px 5px 13px;
|
||||||
|
overflow : hidden auto;
|
||||||
|
color : white;
|
||||||
|
text-decoration : none;
|
||||||
|
background-color : #333333;
|
||||||
|
border-top : 1px solid #888888;
|
||||||
|
scrollbar-color : #666666 #333333;
|
||||||
|
scrollbar-width : thin;
|
||||||
|
.clear {
|
||||||
|
position : absolute;
|
||||||
|
top : 50%;
|
||||||
|
right : 0;
|
||||||
|
display : none;
|
||||||
|
width : 20px;
|
||||||
|
height : 100%;
|
||||||
|
background-color : #333333;
|
||||||
|
border-radius : 3px;
|
||||||
|
opacity : 70%;
|
||||||
|
transform : translateY(-50%);
|
||||||
|
&:hover { opacity : 100%; }
|
||||||
|
i {
|
||||||
|
width : 100%;
|
||||||
|
height : 100%;
|
||||||
|
margin : 0;
|
||||||
|
font-size : 10px;
|
||||||
|
text-align : center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color : @blue;
|
||||||
|
.clear {
|
||||||
|
display : grid;
|
||||||
|
place-content : center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display : inline-block;
|
||||||
|
width : 100%;
|
||||||
|
overflow : hidden auto;
|
||||||
|
text-overflow : ellipsis;
|
||||||
|
white-space : nowrap;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
position : absolute;
|
||||||
|
right : 2px;
|
||||||
|
bottom : 2px;
|
||||||
|
font-size : 0.7em;
|
||||||
|
color : #888888;
|
||||||
|
}
|
||||||
|
&.header {
|
||||||
|
box-sizing : border-box;
|
||||||
|
display : block;
|
||||||
|
padding : 5px 0;
|
||||||
|
color : #BBBBBB;
|
||||||
|
text-align : center;
|
||||||
|
background-color : #333333;
|
||||||
|
border-top : 1px solid #888888;
|
||||||
|
&:nth-of-type(1) { background-color : darken(@teal, 20%); }
|
||||||
|
&:nth-of-type(2) { background-color : darken(@purple, 30%); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.warning.navItem {
|
}
|
||||||
position : relative;
|
|
||||||
color : white;
|
// this should likely be refactored into .navDropdownContainer
|
||||||
background-color : @orange;
|
.save-menu {
|
||||||
&:hover > .dropdown {
|
.dropdown { z-index : 1000; }
|
||||||
visibility : visible;
|
.navItem i.fa-power-off {
|
||||||
|
color : red;
|
||||||
|
&.active {
|
||||||
|
color : rgb(0, 182, 52);
|
||||||
|
filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
|
||||||
}
|
}
|
||||||
.dropdown {
|
|
||||||
position : absolute;
|
|
||||||
z-index : 10000;
|
|
||||||
top : 28px;
|
|
||||||
left : 0;
|
|
||||||
display : block;
|
|
||||||
visibility : hidden;
|
|
||||||
box-sizing : border-box;
|
|
||||||
width : 100%;
|
|
||||||
padding : 13px 5px;
|
|
||||||
text-align : center;
|
|
||||||
background-color : #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.account.navItem {
|
|
||||||
min-width : 100px;
|
|
||||||
}
|
|
||||||
.account.username.navItem {
|
|
||||||
text-transform : none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
require('./nav.less');
|
require('client/homebrew/navbar/navbar.less');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const { useState, useRef, useEffect } = React;
|
const { useState, useRef, useEffect } = React;
|
||||||
const createClass = require('create-react-class');
|
const createClass = require('create-react-class');
|
||||||
|
|||||||
@@ -1,97 +0,0 @@
|
|||||||
@import '../styles/colors';
|
|
||||||
@keyframes glideDropDown {
|
|
||||||
0% {transform : translate(0px, -100%);
|
|
||||||
opacity : 0;
|
|
||||||
background-color: #333;}
|
|
||||||
100% {transform : translate(0px, 0px);
|
|
||||||
opacity : 1;
|
|
||||||
background-color: #333;}
|
|
||||||
}
|
|
||||||
nav{
|
|
||||||
background-color : #333;
|
|
||||||
.navContent{
|
|
||||||
position : relative;
|
|
||||||
display : flex;
|
|
||||||
justify-content : space-between;
|
|
||||||
z-index : 2;
|
|
||||||
}
|
|
||||||
.navSection{
|
|
||||||
display : flex;
|
|
||||||
align-items : center;
|
|
||||||
}
|
|
||||||
.navLogo{
|
|
||||||
display : block;
|
|
||||||
margin-top : 0px;
|
|
||||||
margin-right : 8px;
|
|
||||||
margin-left : 8px;
|
|
||||||
color : white;
|
|
||||||
text-decoration : none;
|
|
||||||
&:hover{
|
|
||||||
.name{ color : @orange; }
|
|
||||||
svg{ fill : @orange }
|
|
||||||
}
|
|
||||||
svg{
|
|
||||||
height : 13px;
|
|
||||||
margin-right : 0.2em;
|
|
||||||
cursor : pointer;
|
|
||||||
fill : white;
|
|
||||||
}
|
|
||||||
span.name{
|
|
||||||
font-family : 'CodeLight';
|
|
||||||
font-size : 15px;
|
|
||||||
span.crit{
|
|
||||||
font-family : 'CodeBold';
|
|
||||||
}
|
|
||||||
small{
|
|
||||||
font-family : 'Open Sans';
|
|
||||||
font-size : 0.3em;
|
|
||||||
font-weight : 800;
|
|
||||||
text-transform : uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navItem{
|
|
||||||
#backgroundColorsHover;
|
|
||||||
.animate(background-color);
|
|
||||||
padding : 8px 12px;
|
|
||||||
cursor : pointer;
|
|
||||||
background-color : #333;
|
|
||||||
font-size : 10px;
|
|
||||||
font-weight : 800;
|
|
||||||
color : white;
|
|
||||||
text-decoration : none;
|
|
||||||
text-transform : uppercase;
|
|
||||||
line-height : 13px;
|
|
||||||
i{
|
|
||||||
margin-left : 5px;
|
|
||||||
font-size : 13px;
|
|
||||||
float : right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navSection:last-child .navItem{
|
|
||||||
border-left : 1px solid #666;
|
|
||||||
}
|
|
||||||
.navDropdownContainer{
|
|
||||||
position: relative;
|
|
||||||
.navDropdown {
|
|
||||||
position : absolute;
|
|
||||||
top : 28px;
|
|
||||||
left : 0px;
|
|
||||||
z-index : 10000;
|
|
||||||
width : 100%;
|
|
||||||
overflow : hidden auto;
|
|
||||||
max-height : calc(100vh - 28px);
|
|
||||||
.navItem{
|
|
||||||
animation-name: glideDropDown;
|
|
||||||
animation-duration: 0.4s;
|
|
||||||
position : relative;
|
|
||||||
display : block;
|
|
||||||
width : 100%;
|
|
||||||
vertical-align : middle;
|
|
||||||
padding : 8px 5px;
|
|
||||||
border : 1px solid #888;
|
|
||||||
border-bottom : 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user