Your IP : 216.73.216.85
/**
*------------------------------------------------------------------------------
* @package SIMPLI - Free Template for Joomla!
*------------------------------------------------------------------------------
* @copyright Copyright (C) 2004-2023 JoomlArt.com. All Rights Reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @authors JoomlArt
*------------------------------------------------------------------------------
**/
//
// GENERIC STYLES
// -------------------------------------------------------
// The dropdown menu (ul)
// ----------------------
// The Dropdown
.nav-child {
.dropdown-menu();
}
.dropdown-menu,
.nav .nav-child {
min-width: @dropdownWidth;
padding: 0;
margin: 0;
background-color: @dropdownBackground;
border: 1px solid @dropdownBorder;
font-size: @fontSizeSmall;
.border-radius(0);
.flatBS();
box-shadow: 3px 3px 0 rgba(0,0,0, 0.1);
// Links within the dropdown menu
> li > a {
padding: (@global-padding / 4) (@global-padding / 2);
color: @dropdownLinkColor;
// Icons
span {
margin-right: (@global-padding / 2);
position: relative;
bottom: -2px;
}
}
}
// Copatible for j4
.list-unstyled {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
border: 1px solid #ccc;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
text-align: left;
min-width: 160px;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #303030;
font-size: 14px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-image: none;
text-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-webkit-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 24px;
color: #303030;
white-space: nowrap;
position: relative;
}
}
.nav .list-unstyled {
min-width: @dropdownWidth;
padding: 0;
margin: 0;
background-color: @dropdownBackground;
border: 1px solid @dropdownBorder;
font-size: @fontSizeSmall;
.border-radius(0);
.flatBS();
box-shadow: 3px 3px 0 rgba(0,0,0, 0.1);
// Links within the dropdown menu
> li > a {
padding: (@global-padding / 4) (@global-padding / 2);
color: @dropdownLinkColor;
// Icons
span {
margin-right: (@global-padding / 2);
position: relative;
bottom: -2px;
}
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.nav .list-unstyled > li:hover > a,
.nav .list-unstyled > li:focus > a,
.nav .nav-child > li:hover > a,
.nav .nav-child > li:focus > a {
background: @dropdownLinkBackgroundHover;
color: @dropdownLinkColorHover;
text-decoration: none;
.flatBS();
}
// Active state
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav .list-unstyled > .active > a,
.nav .list-unstyled > .active:hover > a,
.nav .list-unstyled > .active:focus > a,
.nav .nav-child > .active > a,
.nav .nav-child > .active:hover > a,
.nav .nav-child > .active:focus > a {
background: @dropdownLinkBackgroundActive;
color: @dropdownLinkColorActive;
text-decoration: none;
.flatBS();
}
//
// MAIN NAVIGATION
// -------------------------------------------------------
#mainnav {
background: @navbarBackground;
color: contrast(@navbarBackground);
// Reset default BS Styles
border: 0;
border-bottom: 1px solid @border-color;
margin: 0;
padding: 0;
// Styles on Breakpoint
@media only screen and (max-width: @grid-float-breakpoint) {
background: @grayDark;
// Compatible for j4
.j4 & {
[class*="span"] {
width: 100%;
}
}
}
.navbar-inner {
position: relative;
background: transparent;
// Reset default BS Styles
border: 0;
min-height: 0;
margin: 0;
padding: 0;
width: 100%;
.flatBS();
}
// Toggle Menu in Breakpoint
.btn-navbar {
background: @grayDark;
border: 0;
color: @white;
float: left;
margin: 0;
text-transform: uppercase;
padding: @paddingLarge;
height: @navbarHeight;
.fa {
margin-right: 5px;
}
span {
// Styles on Breakpoint
@media only screen and (max-width: @screen-xs) {
display: none;
}
}
// Link States
&:hover, &:active, &:focus {
background: @linkColor;
color: contrast(@linkColor);
outline: none;
box-shadow: none;
}
}
// Compatible j4
.nav-collapse {
display: block;
}
// The Nav
// -----------------
.nav {
> li {
// Styles on Desktop
@media only screen and (min-width: @grid-float-breakpoint) {
padding-right: @global-padding;
display: inline-block;
}
}
> li > a,
> li > .separator {
text-transform: uppercase;
font-weight: 700;
padding: 0 2px;
line-height: @navbarHeight;
position: relative;
display: block;
text-shadow: none;
&:after {
content: '';
border-bottom: 0px solid @grayDark;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
transition: ease .2s all;
}
}
// Link States
> li > a:hover,
> li > a:active,
> li > a:focus,
> li:hover > a,
> li:hover > .separator {
background: transparent;
&:after {
border-bottom-width: 5px;
}
}
// Active
> .active > a,
> .active > .separator {
.flatBS();
&:after {
border-bottom-width: 2px;
}
}
.badge {
background: transparent;
border-radius: 0;
}
.badge-hot:before {
background-color: @red;
border-radius: 2px;
color: @white;
content: "Hot";
display: inline-block;
height: 10px;
font-size: 9px;
font-weight: normal;
line-height: 10px;
letter-spacing: 1px;
padding: 2px 5px;
position: absolute;
top: 2px;
right: -20px;
text-transform: uppercase;
width: 18px;
}
}
// The Nav Dropdown
// -----------------
.nav {
// <li> which contains the Dropdown
.parent {
position: relative;
> a,
> .separator {
padding-right: 20px;
&:before {
.icon("\f107");
display: none;
position: absolute;
right: 3px;
top: 1px;
@media (min-width: 992px) {
display: inline-block;
}
}
}
// Deeper Menus
.parent > a,
.parent > .separator {
&:before {
content: "\f105";
right: 12px;
top: 6px;
}
}
&.parent .subnav-toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 24px;
top: 0;
height: 48px;
width: 24px;
@media (min-width: 992px) {
display: none;
}
&:hover {
cursor: pointer;
}
}
}
// Add Divider
.nav-child > li {
border-bottom: 1px dotted @border-color;
&:last-child {
border-bottom: 0;
}
}
// Trigger Dropdown
> li:hover > .nav-child {
display: block;
left: auto;
}
.nav-child > li:hover > .nav-child {
display: block;
left: @dropdownWidth - 5px;
top: 5px;
}
// Compatible j4
.list-unstyled {
display: none;
@media (max-width: @screen-md) {
display: none !important;
&.show {
display: block !important;
}
}
> li {
border-bottom: 1px dotted @border-color;
&:last-child {
border-bottom: 0;
}
&:hover > .list-unstyled {
display: block;
left: @dropdownWidth - 5px;
top: 5px;
}
}
}
> li:hover > .list-unstyled {
display: block;
left: auto;
}
}
// Navbar in Small Screen
// ---------------------
// Styles on Breakpoint
@media only screen and (max-width: @grid-float-breakpoint) {
.nav-collapse {
background: @white;
&.show,
&.in {
padding-bottom: @global-padding;
}
.nav > li {
padding-left: @global-padding;
padding-right: @global-padding;
clear: both;
}
// No Dropdown Menu in Small Screen
.list-unstyled,
.nav-child {
position: relative;
top: 0 !important;
left: 0 !important;
height: auto;
display: block;
width: 100%;
.box-sizing(border-box);
box-shadow: none;
border: 1px solid @border-color;
> li > a {
padding: @paddingLarge;
}
// Deepper Menu
.list-unstyled,
.nav-child {
background: @grayLightest;
border: 0;
}
// Deeper Menus Indicator
.parent > a,
.parent > .separator {
position: relative;
&:before {
content: "\f107";
}
}
}
}
}
}
//
// BREADCRUMS
// -------------------------------------------------------
.breadcrumb {
margin: 0 0 (@global-padding / 4);
padding: 0;
border-radius: 0;
line-height: normal;
background: none;
font-size: @fontSizeSmall;
// Hide Breadcrumb on Frontpage
.page-featured & {
display: none;
}
// Active
> .active {
color: @gray;
}
// Path
.pathway {
color: @textColor;
font-weight: bold;
}
// Divider
.divider {
img {
.vertical-align();
margin-top: 2px;
}
}
}
//
// PAGINATION (MULTIPLE PAGES)
// --------------------------------------------------
.pagination {
margin: @global-padding 0 0;
ul {
margin: 0;
padding: 0;
.flatBS();
}
ul > li {
display: inline-block;
margin-right: 2px;
> a,
> span {
border: 1px solid @grayDark;
padding: @paddingSmall;
text-transform: uppercase;
display: block;
color: @textColor;
}
> span {
border-color: @border-color;
background: @border-color;
opacity: .5;
}
> a {
}
}
// Hover state
ul > li > a {
&:hover,
&:focus {
background: @grayDark;
color: @white;
}
}
}
// Fix for Joomla! Pagination
.pagination {
.clearfix();
display: block;
// re-defined nested class - joomla structure
.pagination {
display: inline-block;
}
}
// Counter
// -------
.counter {
display: inline-block;
padding: @paddingSmall !important;
background-color: @grayDark;
color: #fff;
border: 1px solid @grayDark;
border-radius: @baseBorderRadius;
}
// Compatible j4
ul.pagination > li.page-item {
display: inline-block;
margin-right: 2px;
> a.page-link,
> span.page-link {
border: 1px solid @grayDark;
padding: @paddingSmall;
text-transform: uppercase;
display: block;
color: @textColor;
border-radius: 0;
}
> span.page-link {
border-color: @border-color;
background: @border-color;
opacity: .5;
}
}
// Hover state
ul.pagination > li.page-item > a.page-link {
&:hover,
&:focus {
background: @grayDark;
color: @white;
}
}
//
// PAGER PAGINATION
// --------------------------------------------------
.pager {
margin: @baseLineHeight 0;
list-style: none;
text-align: center;
.clearfix();
li {
display: inline;
}
li > a,
li > span {
display: inline-block;
padding: @paddingSmall;
background-color: @white;
border: 1px solid @grayDark;
color: @textColor;
.border-radius(0);
}
li > a:hover,
li > a:focus {
text-decoration: none;
background-color: @grayDark;
color: @white;
}
.next > a,
.next > span {
float: right;
}
.previous > a,
.previous > span {
float: left;
}
.disabled > a,
.disabled > a:hover,
.disabled > a:focus,
.disabled > span {
color: @grayLight;
background-color: @white;
cursor: default;
}
.icon-chevron-left,
.icon-chevron-right {
font-size: 10px;
}
}
/* Fix for toggle menu */
#mainnav .nav .nav-item .subnav-toggle {
display: none;
}
#mainnav .nav .nav-item a::before {
display: none;
}
@media (min-width: 1200px) {
#mainnav .nav .nav-item a::before {
display: block;
}
}
#mainnav .nav .nav-item .subnav-toggle {
display: flex;
align-items: center;;
justify-content: center;
position: absolute;
right: 24px;
top: 0px;
height: 32px;
width: 32px;
}
#mainnav .nav .nav-item ul li .subnav-toggle {
right: 0;
}
@media (min-width: 1200px) {
#mainnav .nav .nav-item .subnav-toggle {
display: none;
}
}