805 lines
23 KiB
SCSS
805 lines
23 KiB
SCSS
// Generate rules to round the corners of the last collapsible item
|
|
|
|
@mixin round_corner($amount, $chainable: 'ul > li:last-child > ', $level: 4, $chain_prefix: '> li:last-child > ', $chain: '', $selector: '') {
|
|
$chain: $chain_prefix;
|
|
$selector: $chain + 'a, ' + $chain + '*:not(ul) a, ' + $chain + 'ul';
|
|
@for $i from 1 through $level {
|
|
$chain: $chain + $chainable;
|
|
$selector: $selector + ',
|
|
' + $chain + ' a, ' + $chain + '*:not(ul) a, ' + $chain + ' ul';
|
|
}
|
|
#{$selector} {
|
|
border-radius: 0 0 $amount $amount;
|
|
}
|
|
$chain: $chain_prefix;
|
|
$selector: $chain + 'a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
|
|
@for $i from 1 through $level {
|
|
$chain: $chain + $chainable;
|
|
$selector: $selector + ',
|
|
' + $chain + ' a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
|
|
}
|
|
#{$selector} {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
@mixin sub_items($amount, $chainable: 'ul ', $level: 4, $chain: '') {
|
|
@for $i from 1 through $level {
|
|
$chain: $chain + $chainable;
|
|
}
|
|
}
|
|
%extend_1 {
|
|
display: block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: normal;
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
.mega-menu-header {
|
|
.mobile-sidebar {
|
|
padding-right: 0 !important;
|
|
&.d-none {
|
|
display: block !important;
|
|
}
|
|
}
|
|
.main-header-right {
|
|
.vertical-menu-main {
|
|
nav {
|
|
ul {
|
|
li {
|
|
&:nth-child(2) {
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.vertical{
|
|
.main-header-left{
|
|
display: block !important;
|
|
}
|
|
.page-main-header{
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
height: 95px !important;
|
|
z-index: 99 !important;
|
|
.main-header-right{
|
|
margin: 0;
|
|
box-shadow: 0 0 0px 2px #f6fafd;
|
|
}
|
|
}
|
|
}
|
|
.sm {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 8;
|
|
@extend %extend_1;
|
|
ul {
|
|
@extend %extend_1;
|
|
display: none;
|
|
}
|
|
li {
|
|
@extend %extend_1;
|
|
position: relative;
|
|
}
|
|
> li {
|
|
> h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
> h2 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
> h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
> h4 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
> h5 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
> h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
a {
|
|
position: relative;
|
|
display: block;
|
|
&.disabled {
|
|
cursor: default;
|
|
}
|
|
}
|
|
* {
|
|
box-sizing: inherit;
|
|
}
|
|
*::before {
|
|
box-sizing: inherit;
|
|
}
|
|
*::after {
|
|
box-sizing: inherit;
|
|
}
|
|
}
|
|
.sm::after {
|
|
content: "";
|
|
display: block;
|
|
height: 0;
|
|
font: 0/0 serif;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------------------
|
|
// 1. Theme Quick Settings (Variables)
|
|
// -----------------------------------------------------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.1. Colors
|
|
// ----------------------------------------------------------
|
|
|
|
$theme-default: #158df7 !default;
|
|
$theme-default-dark: darken($theme-default, 0%) !default;
|
|
$theme-default-darker: #158df7 !default;
|
|
$theme-default-light: lighten($theme-default, 5%) !default;
|
|
$theme-deafult__white: #fff !default;
|
|
$theme-deafult__gray: darken($theme-deafult__white, 34%) !default;
|
|
$dark : #333333;
|
|
$theme-deafult__text-shadow: rgba(0, 0, 0, 0.2) !default;
|
|
$theme-deafult__box-shadow: rgba(0, 0, 0, 0.08) !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.2. Breakpoints
|
|
// ----------------------------------------------------------
|
|
$theme-deafult__desktop-vp: 1200px !default; // switch from collapsible to desktop
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.3. Typography
|
|
// ----------------------------------------------------------
|
|
$theme-deafult__font-size-base: 18px !default;
|
|
$theme-deafult__font-size-small: 14px !default;
|
|
$theme-deafult__line-height: 23px !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.4. Borders
|
|
// ----------------------------------------------------------
|
|
$theme-deafult__border-width: 1px !default;
|
|
$theme-deafult__border-radius-base: 8px !default;
|
|
$theme-deafult__border-radius-small: 4px !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.5. Collapsible main menu
|
|
// ----------------------------------------------------------
|
|
// Menu box
|
|
$theme-deafult__collapsible-bg: transparent !default;
|
|
$theme-deafult__collapsible-border-radius: $theme-deafult__border-radius-base !default;
|
|
$theme-deafult__collapsible-box-shadow: 0 1px 4px $theme-deafult__box-shadow !default;
|
|
|
|
// Items
|
|
$theme-deafult__collapsible-item-color: $theme-deafult__white !default;
|
|
$theme-deafult__collapsible-item-bg: $theme-default !default;
|
|
$theme-deafult__collapsible-item-current-color: $theme-deafult__white !default;
|
|
$theme-deafult__collapsible-item-current-bg: $theme-default-darker !default;
|
|
$theme-deafult__collapsible-item-disabled-color: lighten($theme-default, 30%) !default;
|
|
$theme-deafult__collapsible-item-padding-vertical: 15px !default;
|
|
$theme-deafult__collapsible-item-padding-horizontal: 25px !default;
|
|
|
|
// Toggle button (sub menu indicators)
|
|
$theme-deafult__collapsible-toggle-bg: rgba(0, 0, 0, 0.1) !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.6. Collapsible sub menus
|
|
// ----------------------------------------------------------
|
|
|
|
// Menu box
|
|
$theme-deafult__collapsible-sub-bg: $theme-deafult__white !default;
|
|
|
|
// Items
|
|
$theme-deafult__collapsible-sub-item-color: $theme-default-dark !default;
|
|
$theme-deafult__collapsible-sub-item-bg: transparent !default;
|
|
$theme-deafult__collapsible-sub-item-current-color: $theme-deafult__white !default;
|
|
$theme-deafult__collapsible-sub-item-current-bg: $theme-default-darker !default;
|
|
$theme-deafult__collapsible-sub-item-disabled-color: darken($theme-deafult__white, 30%) !default;
|
|
|
|
// Items separators
|
|
$theme-deafult__collapsible-sub-separators-color: rgba(0, 0, 0, 0.05) !default;
|
|
|
|
// Items text indentation for deeper levels
|
|
$theme-deafult__collapsible-sub-item-indentation: 8px !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.7. Desktop main menu
|
|
// ----------------------------------------------------------
|
|
|
|
// Items separators
|
|
$theme-deafult__desktop-separators-size: 1px !default;
|
|
$theme-deafult__desktop-separators-color: darken($theme-default, 5%) !default;
|
|
|
|
// Sub menu indicators
|
|
$theme-deafult__desktop-arrow-size: 5px !default; // border-width
|
|
$theme-deafult__desktop-arrow-color: $theme-default-light !default;
|
|
|
|
// Vertical menu box
|
|
$theme-deafult__desktop-vertical-box-shadow: 0 1px 4px $theme-deafult__box-shadow !default;
|
|
|
|
// Vertical items
|
|
$theme-deafult__desktop-vertical-item-padding-vertical: 9px !default;
|
|
$theme-deafult__desktop-vertical-item-padding-horizontal: 23px !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 1.8. Desktop sub menus
|
|
// ----------------------------------------------------------
|
|
|
|
// Menu box
|
|
$theme-deafult__desktop-sub-bg: $theme-deafult__white !default;
|
|
$theme-deafult__desktop-sub-border-color: $theme-deafult__gray !default;
|
|
$theme-deafult__desktop-sub-border-radius: $theme-deafult__border-radius-small !default;
|
|
$theme-deafult__desktop-sub-box-shadow: 0 5px 12px $theme-deafult__box-shadow !default;
|
|
$theme-deafult__desktop-sub-padding-vertical: 7px !default;
|
|
$theme-deafult__desktop-sub-padding-horizontal: 0 !default;
|
|
|
|
// Items
|
|
$theme-deafult__desktop-sub-item-color: $theme-default-dark !default;
|
|
$theme-deafult__desktop-sub-item-bg: transparent !default;
|
|
$theme-deafult__desktop-sub-item-hover-color: $theme-deafult__white !default;
|
|
$theme-deafult__desktop-sub-item-hover-bg: $theme-default !default;
|
|
$theme-deafult__desktop-sub-item-current-color: $theme-deafult__white !default;
|
|
$theme-deafult__desktop-sub-item-current-bg: $theme-default-darker !default;
|
|
$theme-deafult__desktop-sub-item-disabled-color: darken($theme-deafult__white, 30%) !default;
|
|
$theme-deafult__desktop-sub-item-padding-vertical: 9px !default;
|
|
$theme-deafult__desktop-sub-item-padding-horizontal: 23px !default;
|
|
|
|
// ----------------------------------------------------------
|
|
// :: 2.1. Collapsible mode (mobile first)
|
|
// ----------------------------------------------------------
|
|
|
|
// calc item height and sub menus toggle button size
|
|
$theme-deafult__item-height: $theme-deafult__line-height + $theme-deafult__collapsible-item-padding-vertical * 2;
|
|
// set toggle button size to 80% of item height
|
|
$theme-deafult__toggle-size: floor($theme-deafult__item-height * 0.8);
|
|
$theme-deafult__toggle-spacing: floor($theme-deafult__item-height * 0.1);
|
|
|
|
// Main menu box
|
|
.pixelstrap {
|
|
.mobile-back {
|
|
padding: 20px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid #efefef;
|
|
cursor: pointer;
|
|
}
|
|
a {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
padding: $theme-deafult__collapsible-item-padding-vertical $theme-deafult__collapsible-item-padding-horizontal;
|
|
padding-right: $theme-deafult__collapsible-item-padding-horizontal;
|
|
color: $dark;
|
|
line-height: $theme-deafult__line-height;
|
|
text-decoration: none;
|
|
}
|
|
&.disabled {
|
|
color: $theme-deafult__collapsible-item-disabled-color;
|
|
}
|
|
.sub-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -(ceil($theme-deafult__toggle-size / 2));
|
|
left: auto;
|
|
right: $theme-deafult__toggle-spacing;
|
|
width: $theme-deafult__toggle-size;
|
|
height: $theme-deafult__toggle-size;
|
|
overflow: hidden;
|
|
font: bold #{$theme-deafult__font-size-small}/#{$theme-deafult__toggle-size} monospace !important;
|
|
text-align: center;
|
|
text-shadow: none;
|
|
border-radius: $theme-deafult__border-radius-small;
|
|
}
|
|
.sub-arrow::before {
|
|
content: '+';
|
|
}
|
|
&.highlighted .sub-arrow::before {
|
|
content: '-';
|
|
}
|
|
}
|
|
@include round_corner($theme-deafult__collapsible-border-radius);
|
|
// Sub menus box
|
|
ul {
|
|
background: $theme-deafult__collapsible-sub-bg;
|
|
ul {
|
|
background: rgba(171, 140, 228, 0.1);
|
|
}
|
|
a {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background: $theme-deafult__collapsible-sub-item-bg;
|
|
color: $theme-deafult__collapsible-sub-item-color;
|
|
font-size: $theme-deafult__font-size-small;
|
|
text-shadow: none;
|
|
}
|
|
&.current {
|
|
background: lighten($theme-deafult__collapsible-sub-item-current-bg , 50%);
|
|
//color: $theme-deafult__collapsible-sub-item-current-color;
|
|
}
|
|
&.disabled {
|
|
color: $theme-deafult__collapsible-sub-item-disabled-color;
|
|
}
|
|
}
|
|
// Add indentation for sub menus text for deeper levels
|
|
@include sub_items($theme-deafult__collapsible-sub-item-indentation);
|
|
|
|
// Sub menus items separators
|
|
li {
|
|
border-top: 1px solid $theme-deafult__collapsible-sub-separators-color;
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vertical-mobile-sidebar{
|
|
font-size: 18px;
|
|
margin-left: 30px;
|
|
}
|
|
// ----------------------------------------------------------
|
|
// :: 2.2. Desktop mode
|
|
// ----------------------------------------------------------
|
|
|
|
@media (min-width: $theme-deafult__desktop-vp) {
|
|
|
|
.page-wrapper{
|
|
.mega-menu-header{
|
|
.vertical-menu-main{
|
|
position: absolute;
|
|
width: auto;
|
|
box-shadow: none;
|
|
right: 630px;
|
|
top: 0;
|
|
}
|
|
}
|
|
.page-main-header{
|
|
&.mega-menu-header
|
|
.main-header-right{
|
|
.nav-right{
|
|
> ul{
|
|
> li{
|
|
&:first-child {
|
|
border-left: none;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* Switch to desktop layout */
|
|
.mobile-back,.vertical-mobile-sidebar{
|
|
display: none;
|
|
}
|
|
.pixelstrap {
|
|
ul{
|
|
>li{
|
|
>a{
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
line-height: 1;
|
|
&:hover{
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
>li{
|
|
>a,> a:hover,> a:active{
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pixelstrap ul{position:absolute!important;width:12em;}
|
|
.pixelstrap li{float:left;}
|
|
.pixelstrap.sm-rtl li{float:right;}
|
|
.pixelstrap ul li,.pixelstrap.sm-rtl ul li,.pixelstrap.sm-vertical li{float:none;}
|
|
.pixelstrap a{white-space:nowrap;}
|
|
.pixelstrap ul a,.pixelstrap.sm-vertical a{white-space:normal;}
|
|
.pixelstrap .sm-nowrap > li > a,.pixelstrap .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
|
|
/* ...end */
|
|
|
|
// Main menu box
|
|
.pixelstrap {
|
|
|
|
.mobile-back {
|
|
padding: 20px;
|
|
font-size: 18px;
|
|
color: #222222;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid #efefef;
|
|
cursor: pointer;
|
|
}
|
|
ul{
|
|
&:not(.mega-menu){
|
|
li{
|
|
a{
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
height: 4px;
|
|
width: 4px;
|
|
background-color: #807f7f;
|
|
border-radius: 100%;
|
|
left: 20px;
|
|
top: 18px;
|
|
}
|
|
padding: 13px 35px;
|
|
&:hover,&:focus,&:active{
|
|
padding: 13px 35px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
&.highlighted{
|
|
.sub-arrow::before {
|
|
content: "\f107";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.sub-arrow {
|
|
position: absolute;
|
|
top: 23px;
|
|
margin-top: -17px;
|
|
right: 3px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
}
|
|
.sub-arrow::before {
|
|
content: "\f107";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
}
|
|
}
|
|
ul {
|
|
padding: 13px $theme-deafult__desktop-sub-padding-horizontal;
|
|
background: $theme-deafult__desktop-sub-bg;
|
|
box-shadow: $theme-deafult__desktop-sub-box-shadow;
|
|
border: 1px solid #e9e9e9;
|
|
li{
|
|
a{
|
|
padding: 13px 35px;
|
|
&:hover,&:focus,&:active{
|
|
padding: 13px 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
border-radius: $theme-deafult__desktop-sub-border-radius !important;
|
|
background: $theme-deafult__desktop-sub-bg;
|
|
}
|
|
a {
|
|
color:#000000;
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.highlighted {
|
|
border: 0 !important;
|
|
background: $theme-deafult__desktop-sub-item-bg;
|
|
color: $theme-deafult__desktop-sub-item-color;
|
|
border-radius: 0 !important;
|
|
}
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.highlighted {
|
|
color: $theme-deafult__desktop-sub-item-hover-bg;
|
|
.sub-arrow {
|
|
top: 50%;
|
|
right: 15px;
|
|
border-style: none;
|
|
&:before{
|
|
content: "\f105";
|
|
line-height: 2.5;
|
|
right: 5px;
|
|
color: gray;
|
|
}
|
|
}
|
|
}
|
|
&.current {
|
|
color: $theme-deafult__desktop-sub-item-hover-bg
|
|
}
|
|
&.disabled {
|
|
color: $theme-deafult__desktop-sub-item-hover-bg
|
|
}
|
|
.sub-arrow {
|
|
top: 50%;
|
|
right: 15px;
|
|
border-style: none;
|
|
&:before{
|
|
content: "\f105";
|
|
line-height: 2.5;
|
|
right: 5px;
|
|
color: gray;
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
border: 0;
|
|
|
|
|
|
}
|
|
}
|
|
.scroll-up,
|
|
.scroll-down {
|
|
position: absolute;
|
|
display: none;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
background: $theme-deafult__desktop-sub-bg;
|
|
height: 20px;
|
|
}
|
|
.scroll-up-arrow,
|
|
.scroll-down-arrow {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-width: 8px; // tweak size of the arrow
|
|
border-style: dashed dashed solid dashed;
|
|
border-color: transparent transparent $theme-deafult__desktop-sub-item-color transparent;
|
|
}
|
|
.scroll-down-arrow {
|
|
top: 6px;
|
|
border-style: solid dashed dashed dashed;
|
|
border-color: $theme-deafult__desktop-sub-item-color transparent transparent transparent;
|
|
}
|
|
// Main menu box
|
|
&.sm-rtl {
|
|
&.sm-vertical {
|
|
a {
|
|
.sub-arrow {
|
|
right: auto;
|
|
left: 10px;
|
|
border-style: none;
|
|
border-color: transparent $theme-deafult__desktop-arrow-color transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
> li {
|
|
&:first-child {
|
|
|
|
}
|
|
&:last-child {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
ul {
|
|
a {
|
|
.sub-arrow {
|
|
right: auto;
|
|
left: 10px;
|
|
border-style: none;
|
|
border-color: transparent $theme-deafult__desktop-arrow-color transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Main menu box
|
|
&.sm-vertical {
|
|
box-shadow: $theme-deafult__desktop-vertical-box-shadow;
|
|
a {
|
|
padding: $theme-deafult__desktop-vertical-item-padding-vertical $theme-deafult__desktop-vertical-item-padding-horizontal;
|
|
.sub-arrow {
|
|
top: 50%;
|
|
margin-top: -$theme-deafult__desktop-arrow-size;
|
|
bottom: auto;
|
|
left: auto;
|
|
margin-left: 0;
|
|
right: 10px;
|
|
border-style: dashed dashed dashed solid;
|
|
border-color: transparent transparent transparent $theme-deafult__desktop-arrow-color;
|
|
}
|
|
}
|
|
> li {
|
|
border-left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
// mega-menu-dropdown
|
|
.cd-dropdown-wrapper{
|
|
display: inline-block;
|
|
position: relative;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.cd-dropdown {
|
|
position: absolute;
|
|
top: calc(100% - 2px);
|
|
height: auto;
|
|
width: auto;
|
|
-webkit-transform: translateX(0);
|
|
-moz-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
-o-transform: translateX(0);
|
|
transform: translateX(0);
|
|
background-color: #fff;
|
|
color: #111433;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.1);
|
|
opacity: 0;
|
|
-webkit-transform: translateY(30px);
|
|
-moz-transform: translateY(30px);
|
|
-ms-transform: translateY(30px);
|
|
-o-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
-webkit-transition: opacity .3s 0s,visibility 0s .3s,-webkit-transform .3s 0s;
|
|
-moz-transition: opacity .3s 0s,visibility 0s .3s,-moz-transform .3s 0s;
|
|
transition: opacity .3s 0s,visibility 0s .3s,transform .3s 0s;
|
|
z-index: 1;
|
|
.cd-dropdown-content{
|
|
position: static;
|
|
height: auto;
|
|
width: 280px;
|
|
padding-top: 0;
|
|
overflow: visible;
|
|
.cd-dropdown-content .cd-secondary-dropdown.fade-out, .cd-dropdown-content .cd-dropdown-gallery.fade-out, .cd-dropdown-content .cd-dropdown-icons.fade-out {
|
|
-webkit-animation: cd-fade-out .2s;
|
|
-moz-animation: cd-fade-out .2s;
|
|
animation: cd-fade-out .2s;
|
|
}
|
|
}
|
|
}
|
|
.cd-dropdown.dropdown-is-active {
|
|
transform: translateY(0);
|
|
}
|
|
.cd-dropdown-content.is-hidden, .cd-dropdown-content div.is-hidden {
|
|
/* push the secondary dropdown items to the right */
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.cd-dropdown-content.move-out > div > a, .cd-dropdown-content div.move-out > div > a {
|
|
/* push the dropdown items to the left when secondary dropdown slides in */
|
|
transform: translateX(-100%);
|
|
}
|
|
@media only screen and (min-width: 1024px) {
|
|
.cd-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
/* reset style*/
|
|
height: auto;
|
|
width: auto;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
|
|
}
|
|
.cd-dropdown.dropdown-is-active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
|
|
}
|
|
|
|
.cd-dropdown-content {
|
|
/* reset mobile style */
|
|
position: static;
|
|
height: auto;
|
|
width: 280px;
|
|
}
|
|
.cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
|
|
transform: translateX(0);
|
|
left: 100%;
|
|
height: auto;
|
|
}
|
|
.cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
|
|
/* reset mobile style */
|
|
transform: translateX(0);
|
|
}
|
|
.cd-dropdown-content > .has-children > div {
|
|
visibility: hidden;
|
|
}
|
|
.cd-dropdown-content > .has-children:hover > div {
|
|
/* when hover over .cd-dropdown-content items - show subnavigation */
|
|
visibility: visible;
|
|
}
|
|
.cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > div > div {
|
|
/* if .cd-secondary-dropdown is visible - show also subnavigation */
|
|
visibility: visible;
|
|
}
|
|
.cd-dropdown-content .cd-secondary-dropdown {
|
|
overflow: hidden;
|
|
width: 550px;
|
|
padding-bottom: 65px;
|
|
}
|
|
}
|
|
.pixelstrap {
|
|
> li{
|
|
> a{
|
|
text-transform: uppercase;
|
|
&.highlighted{
|
|
&:before,&:after{
|
|
content: "";
|
|
position: absolute;
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: #fff;
|
|
bottom: -17px;
|
|
transform: rotate(45deg);
|
|
z-index: 11;
|
|
}
|
|
&:after{
|
|
height: 11px;
|
|
width: 11px;
|
|
background-color: #ebebeb;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 1199px){
|
|
.page-main-header {
|
|
.mega-menu-header{
|
|
.sm{
|
|
right: -300px;
|
|
left: inherit;
|
|
li{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mega-menu{
|
|
.card-body{
|
|
padding-top: 0 !important;
|
|
}
|
|
.title {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.vertical-menu-main {
|
|
.pixelstrap{
|
|
.mega-menu {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
.pixelstrap a, .pixelstrap a:hover, .pixelstrap a:focus, .pixelstrap a:active {
|
|
padding: 15px 25px;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
padding-bottom: 7px;
|
|
padding-top: 7px;
|
|
}
|
|
.pixelstrap ul a, .pixelstrap ul a:hover, .pixelstrap ul a:focus, .pixelstrap ul a:active {
|
|
color: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
}
|