| Current Path : /home/gotzfrokfn/www/templates/gotz-tpl/less/ |
| Current File : /home/gotzfrokfn/www/templates/gotz-tpl/less/menu.less |
.navbar-header i{
color:@colorDarcGray;
font-size: 25px;
}
.navbar-collapse{
.box-shadow(none);
}
.nav > li > a:hover{
background: transparent;
}
.nav.nav-pills > li > a:hover{
background: #2069a8;
color: #fff;
}
.navbar-nav > li {
float: none;
}
.navbar-nav.nav-pills > li {
float: left;
}
.navbar-nav.nav-pills > li > a{
padding: 6px 12px;
border-radius: 0;
}
.navbar {
min-height: 35px;
margin-bottom: 0;
}
//Top Menu-------------------------------------------------
.top_menu{
ul.menu{
float: left;
margin: 0;
@media (max-width: 767px){
margin: 10px 0;
float: none;
}
li{
border-right: 1px solid @colorGray;
float: left;
list-style: none outside none;
position: relative;
@media (max-width: 767px){
list-style: none outside none;
position: relative;
border-right: medium none;
float: none;
}
a{
font-size: 14px;
margin: 0 10px;
padding: 0;
position: relative;
@media (max-width: 767px){
background-color: @colorSuperLigthGray;
border-bottom: 1px solid @colorGray;
.borderRadius(0);
display: block;
font-size: 14px;
margin: 0;
padding: 4px 9px 4px 10px;
position: relative;
color: @colorLigthGray;
.transition;
&:hover{
//color: @colorWhite;
//background: @mainColor;
padding: 4px 9px 4px 20px;
.transition;
.text-shadow(none);
}
}
}
}
li:first-child{
a{
@media (max-width: 767px){
border-top: 1px solid @colorGray;
}
}
}
li:last-child{
border-right: none;
}
}
}
//MainMenu-------------------------------------------------
.main_menu{
.navbar{
margin: 0;
border:0;
}
ul.menu{
float: none;
text-align: center;
margin: 25px 0 0;
@media (max-width: 767px){
margin: 10px 0 0;
}
li{
position: relative;
list-style: none;
display: inline-block;
@media (max-width: 767px){
float: none;
position: relative;
list-style: none;
display: block;
border-top: 1px solid @colorGray;
}
a{
font-size: 17px;
margin: 0 5px;
padding: 0 15px 30px;
background-color: transparent;
border-bottom: 0px;
.box-shadow(none);
.border(0);
.transition;
@media (max-width: 992px){
padding: 0 3px 30px;
}
@media (max-width: 768px){
display: block;
font-size: 16px;
margin: 0;
padding: 7px 20px 7px 0;
position: relative;
white-space: nowrap;
text-align: left;
.transition;
display: block;
width: 100%;
border-bottom: 0px solid transparent;
}
&:hover{
.border(0);
.transition;
@media (max-width: 767px){
border-bottom: 0px solid transparent;
margin: 0;
padding: 7px 10px 7px 10px;
}
}
}
}
li.active{
a{
@media (max-width: 767px){
display: block;
background-color: transparent;
border-bottom: medium none;
.box-shadow(none);
//color: @colorWhite;
text-align: left;
}
&:hover{
@media (max-width: 767px){
background-color: transparent;
border-bottom: medium none;
.box-shadow(none);
}
}
}
}
li.parent{
&:hover{
ul{
display: block;
}
}
a{
@media (max-width: 767px){
display: block;
font-size: 14px;
margin: 0;
padding: 7px 10px 7px 0;
position: relative;
text-transform: uppercase;
// color: @colorSuperLigthGray;
float: left;
text-align: left;
.transition;
&:hover{
padding: 7px 10px 7px 10px;
.transition;
}
}
span.arrow{
right: 2px;
top: 8px;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: @colorLigthGray transparent transparent transparent;
line-height: 0;
filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
@media (max-width: 992px){
right: -8px;
top: 9px;
}
@media (max-width: 768px){
right: 9px;
top: 16px;
}
@media (max-width: 767px){
display: none;
}
}
}
&:last-child {
ul {
left: -100%;
}
}
ul{
display: none;
background: @colorWhite;
border-left: 1px solid @colorGray;
list-style: none;
position: absolute;
float: left;
.box-shadow(1px 1px 1px @rgbaBlack);
min-width: 220px;
z-index: 9999;
@media (max-width: 767px){
display: block;
background-color: transparent;
border-left: medium none;
border-top: medium none;
.box-shadow(none);
float: none;
position: relative;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
}
li{
margin: 0;
padding: 0;
border-bottom: 1px solid @colorGray;
clear: both;
width: 100%;
display: block;
text-align: left;
.box-shadow(1px 1px 1px @rgbaWhite);
@media (max-width: 767px){
float: left;
border-bottom: 0px solid @colorGray;
}
a{
// color: @mainColor;
font-size: 16px;
float: left;
padding: 7px 10px 7px 10px;
margin: 0 15px 0 0;
width: 100%;
.transition;
@media (max-width: 767px){
//color: @colorGray;
display: block;
font-size: 14px;
margin: 0;
padding: 7px 10px;
position: relative;
text-transform: uppercase;
}
&:hover{
//color: @mainColor - #222;
.transition;
@media (max-width: 767px){
//color: #fff;
padding: 7px 10px 7px 20px;
}
}
span.arrow{
right: 6px;
top: 14px;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 6px 4px 0;
border-color: transparent @textColor transparent transparent;
line-height: 0px;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
}
ul.nav-child{
left: -100%;
top: 0px;
min-width: 220px;
display: none;
@media (max-width: 767px){
display: block;
background-color: transparent;
border-left: medium none;
border-top: medium none;
.box-shadow(none);
float: none;
position: relative;
width: 100%;
left: 0 !important;
top: 0 !important;
}
li{
@media (max-width: 767px){
border-bottom: medium none;
.box-shadow(none);
clear: both;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid @colorGray;
}
a{
font-size: 16px;
float: left;
padding: 7px 0px 7px 10px;
margin: 0 0px 0 0;
width: 100%;
.transition;
@media (max-width: 767px){
color:@colorLigthGray;
display: block;
font-size: 14px;
position: relative;
text-transform: uppercase;
float: none;
margin: 0 15px 0 0;
padding: 7px 10px 7px 15px;
text-indent: 10px;
.transition;
width: 100%;
}
&:hover{
@media (max-width: 767px){
color: @colorBlack;
padding: 7px 10px 7px 20px;
.transition;
}
}
}
}
}
&:hover{
ul{
display: block;
}
}
}
li.active{
a{
color:@mainColor;
font-weight: bold;
@media (max-width: 767px){
color:@colorLigthGray;
font-weight: normal;
display: block;
font-size: 14px;
margin: 0;
padding: 7px 10px;
position: relative;
text-transform: uppercase;
.transition;
}
&:hover{
color:@mainColor - #222;
@media (max-width: 767px){
color:@colorBlack;
padding: 7px 10px 7px 20px;
.transition;
}
}
}
ul{
@media (max-width: 767px){
display: block;
background-color: transparent;
border-left: medium none;
border-top: medium none;
.box-shadow(none);
float: none;
position: relative;
width: 100%;
}
li{
a{
font-weight: normal;
@media (max-width: 767px){
display: block;
font-size: 14px;
margin: 0;
padding: 7px 10px;
position: relative;
text-transform: uppercase;
}
}
}
.active{
a{
font-weight: bold;
@media (max-width: 767px){
color:@mainColor;
display: block;
font-size: 14px;
margin: 0;
padding: 7px 10px;
position: relative;
text-transform: uppercase;
}
}
}
}
}
}
}
}
}
//Fooer Menu-------------------------------------------------
.footer_menu{
ul.menu{
float: left;
margin: 0 0 15px 0;
@media (max-width: 767px){
margin: 10px 0;
float: none;
}
li{
border-right: 1px solid @colorBorderMenu;
float: left;
list-style: none outside none;
position: relative;
@media (max-width: 767px){
list-style: none outside none;
position: relative;
border-right: medium none;
float: none;
}
a{
font-size: 14px;
margin: 0 10px;
padding: 0;
position: relative;
@media (max-width: 767px){
background-color: @colorSuperLigthGray;
border-bottom: 1px solid @colorGray;
.borderRadius(0);
display: block;
font-size: 14px;
margin: 0;
padding: 4px 9px 4px 10px;
position: relative;
color: @colorLigthGray;
.transition;
&:hover{
background: transparent;
padding: 4px 9px 4px 20px;
.transition;
.text-shadow(none);
}
}
}
}
li:last-child{
border-right: none;
a{
@media (max-width: 767px){
border-top: 0px solid @colorGray;
&:hover{
.transition;
.text-shadow(none);
}
}
}
}
}
}