| Current Path : /home/helpink/www/media/astroid/assets/vendor/astroid/scss/ |
| Current File : /home/helpink/www/media/astroid/assets/vendor/astroid/scss/_menu.scss |
.jddrop-content {
display: none;
z-index: 99;
}
// Menu Badge
.menu-item-badge {
padding: 2px 7px;
font-weight: normal;
text-transform: none;
line-height: 14px;
font-size: 10px;
border-radius: 2px;
}
.item-link-separator {
cursor: default;
}
// Megamenu Dropdown
.megamenu-container {
--as-menu-gutter-x: #{$megamenu-gutter-width};
display: none;
background-color: var(--as-dropdown-bg-color);
position: absolute;
z-index: 1003;
.nav-submenu {
background-color: var(--as-dropdown-bg-color);
}
&.nav-submenu-container {
padding: 0;
}
padding: calc(var(--as-menu-gutter-x) * .5) calc(var(--as-menu-gutter-x) * .5);
.row {
margin-left: calc(-.25 * var(--as-menu-gutter-x));
margin-right: calc(-.25 * var(--as-menu-gutter-x));
> * {
padding-left: calc(var(--as-menu-gutter-x) * .25);
padding-right: calc(var(--as-menu-gutter-x) * .25);
> * {
padding-bottom: calc(var(--as-menu-gutter-x) * .5) !important;
&:last-child {
padding-bottom: 0 !important;
}
}
}
}
li.nav-item-submenu > a {
color: var(--as-dropdown-link-color);
&:hover {
color: var(--as-dropdown-menu-link-hover-color);
background-color: var(--as-dropdown-menu-hover-bg-color);
}
&:active, &.active {
color: var(--as-dropdown-menu-active-link-color);
background-color: var(--as-dropdown-menu-active-bg-color);
}
}
}
.nav-item-megamenu .nav-submenu {
.item-link-heading.item-level-2,
.item-link-separator.item-level-2 {
text-transform: uppercase;
font-weight: bolder;
&:hover {
color: inherit !important;
background-color: inherit !important;
}
.nav-item-caret {
display: none;
}
}
}
.nav-submenu-static {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
z-index: 9;
>li {
padding: 0;
position: relative;
>.as-menu-item {
text-decoration: none;
display: block;
padding: 3px 15px;
}
>.nav-submenu {
position: absolute;
top: 0;
left: 100%;
width: 100%;
max-width: 300px;
display: none;
&.right {
left: -100%;
}
}
}
}
.astroid-nav {
.nav-link {
color: var(--as-main-menu-link-color);
background-color: var(--as-main-menu-link-background);
&:hover, &:focus {
color: var(--as-main-menu-link-hover-color);
background-color: var(--as-main-menu-hover-background);
}
&.active, &:active {
color: var(--as-main-menu-link-active-color);
background-color: var(--as-main-menu-active-background);
}
}
.nav-title {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
margin-left: -5px;
> * {
margin-left: 5px;
}
> sup {
position: absolute;
top: -25px;
left: 10%;
z-index: 1;
.menu-item-badge {
white-space: nowrap;
&:before {
content: "";
position: absolute;
border-left: 3px solid rgba(0,0,0,0);
border-right: 3px solid rgba(0,0,0,0);
border-top: 3px solid var(--as-nav-item-badge-background);
left: 5px;
bottom: -3px;
}
}
}
}
.nav-subtitle {
display: block;
}
.nav-item-parent {
.nav-title {
padding-right: 25px;
>.nav-item-caret {
right: 0;
position: absolute;
top: 50%;
font-size: 75%;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-top: -10px;
}
}
&.no-dropdown-icon .nav-title {
padding-right: 0;
}
}
// Submenu Dropdown
.nav-submenu {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
z-index: 9;
&.megamenu-submenu-level-1 {
box-shadow: none;
}
.nav-item-parent.nav-title {
padding-right: 25px;
}
.nav-title {
padding-right: 0;
}
>li {
padding: 0;
position: relative;
>.as-menu-item {
text-decoration: none;
display: block;
padding: 5px 15px;
}
>.nav-submenu {
position: absolute;
top: 0;
left: 100%;
width: 100%;
display: none;
&.right {
left: -100%;
}
}
}
}
}
.megamenu-module {
padding: 15px;
}
.burger-menu-button {
&.header-mobilemenu-trigger {
.inner, .inner:before, .inner:after{
background-color: var(--as-mobilemenu-menu-icon-color);
}
}
}
#astroid-sticky-header {
.nav-title {
sup {
top: -20px;
}
}
.burger-menu-button {
&.header-mobilemenu-trigger {
.inner, .inner:before, .inner:after{
background-color: var(--as-stick-header-mobile-menu-icon-color);
}
}
}
}
ul {
&.megamenu-submenu {
list-style-type: none;
padding: 0;
>li {
>.megamenu-submenu {
padding-left: 15px;
}
}
}
}
.has-megamenu {
position: relative;
display: flex;
&[data-position=left] {
justify-content: flex-start;
}
&[data-position=right] {
justify-content: flex-end;
}
&[data-position=center],
&[data-position=full],
&[data-position=edge] {
justify-content: center;
}
&:before {
content: '';
display: none;
width: 100%;
height: 250%;
max-height: 100px;
position: absolute;
top: 100%;
cursor: pointer;
z-index: 1003;
}
&.open {
&:before {
display: block;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--bs-border-color);
z-index: 0;
left: 50%;
margin-left: -8px;
bottom: 0;
display: none;
}
}
}
.astroid-header-sticky {
.astroid-nav {
.nav-link {
color: var(--as-stick-header-menu-link-color);
&:hover {
color: var(--as-stick-header-menu-link-hover-color);
}
&.active, &:active {
color: var(--as-stick-header-menu-link-active-color);
}
}
}
}
.astroid-sidebar-menu {
list-style-type: none;
margin: 0;
padding: 0;
.nav-title {
display: block;
}
li {
display: block;
width: 100%;
margin: 5px 0;
.nav-item-inner {
background-color: var(--as-main-menu-link-background);
border-radius: var(--bs-border-radius);
transition: all 500ms ease;
&.active, &:active {
background-color: var(--as-main-menu-active-background);
> i {
color: var(--as-main-menu-link-active-color);
}
}
&:hover {
background-color: var(--as-main-menu-hover-background);
> i {
color: var(--as-main-menu-link-hover-color);
}
}
> .as-menu-item {
color: var(--as-main-menu-link-color);
&:active, &.active {
color: var(--as-main-menu-link-active-color);
}
&:hover {
color: var(--as-main-menu-link-hover-color);
}
}
}
.as-menu-item {
display: block;
padding: $sidebar-menu-item-padding;
flex: auto;
}
ul.nav-child {
display: none;
background-color: var(--as-dropdown-bg-color);
list-style: none;
border-left: 1px dashed var(--bs-border-color);
margin-left: 20px;
padding-left: 15px;
}
.nav-item-submenu .nav-item-inner {
> a {
position: relative;
&:before {
content: "";
margin-right: 10px;
border-top: 1px dashed var(--bs-border-color);
width: 7px;
height: 1px;
position: absolute;
top: 50%;
left: -13px;
}
&.as-menu-item {
color: var(--as-dropdown-link-color);
}
}
> i {
color: var(--as-dropdown-link-color);
}
&:active, &.active {
background-color: var(--as-dropdown-menu-active-bg-color);
> a.as-menu-item, > i {
color: var(--as-dropdown-menu-active-link-color);
}
}
&:hover {
background-color: var(--as-dropdown-menu-hover-bg-color);
> a.as-menu-item, > i {
color: var(--as-dropdown-menu-link-hover-color);
}
}
}
&.nav-item-active {
>ul {
display: block;
}
}
.nav-item-caret {
font-size: 13px;
padding: $sidebar-menu-item-padding;
cursor: pointer;
line-height: inherit;
&:before {
content: "\f067";
}
&.open {
&:before {
content: "\f068";
}
}
}
&:last-child {
border-bottom: 0;
}
}
}
.rtl {
.astroid-nav {
.nav-item-parent {
.nav-title {
padding-left: 25px;
padding-right: 0;
>.nav-item-caret {
left: 0;
right: auto;
}
}
&.no-dropdown-icon .nav-title {
padding-left: 0;
}
.nav-submenu-container {
.nav-title {
>.nav-item-caret {
transform: rotate(180deg);
}
}
}
}
.nav-submenu {
>li {
>.nav-submenu {
right: 100%;
left: auto;
&.right {
right: -100%;
}
}
}
}
}
}