Why Gemfury?
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Bower components
Debian packages
RPM packages
NuGet packages
@import "widgets/jet-custom-menu";
@mixin font-awesome-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.jet-menu-container {
position: relative;
width: 100%;
}
.jet-menu {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
width: 100%;
position: relative;
margin: 0;
padding: 0;
list-style: none;
&.jet-menu--roll-up {
//flex-flow: row nowrap;
> .jet-menu-item {
.jet-menu-item-wrapper {
//flex-wrap: nowrap;
}
.jet-menu-title {
//white-space: nowrap;
}
&[hidden] {
display: none;
}
}
&-available-items {
&[hidden] {
display: none;
}
}
}
.jet-menu-item {
display: flex;
}
.top-level-link {
width: 100%;
margin: 0;
padding: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
ul {
left: 0;
}
}
.jet-menu-item {
position: relative;
> a {
display: block;
text-decoration: none;
width: auto;
}
&.jet-mega-menu-item {
position: static;
&.jet-mega-menu-position-relative-item {
position: relative;
.jet-sub-mega-menu {
left: 0;
right: auto;
.rtl & {
left: auto;
right: 0;
}
}
}
}
&.jet-mega-menu-position-relative-item {
}
&-desc {
font-size: 10px;
font-style: italic;
white-space: normal;
}
.jet-sub-menu {
display: block;
min-width: 200px;
margin: 0;
background-color: white;
list-style: none;
top: 100%;
left: 0;
right: auto;
position: absolute;
padding: 0;
box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
pointer-events: none;
z-index: 999;
.rtl & {
left: auto;
right: 0;
}
&.inverse-side {
right: 0;
left: auto;
}
.jet-sub-menu {
top: 0;
left: 100%;
right: auto;
&.inverse-side {
right: 100%;
left: auto;
}
}
> li {
display: block;
> a {
padding: 10px;
}
}
.rtl & {
left: auto;
right: 0;
&.inverse-side {
right: auto;
left: 0;
}
.jet-sub-menu {
left: auto;
right: 100%;
&.inverse-side {
right: auto;
left: 100%;
}
}
}
}
.jet-sub-mega-menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
background-color: white;
pointer-events: none;
top: 100%;
left: 0;
box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
z-index: 999;
&__loader {
padding: 5px;
min-width: 35px;
min-height: 35px;
}
> .elementor {
width: 100%;
}
}
}
.jet-menu-item-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
.jet-menu-icon {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
margin-right: 10px;
.label-hidden & {
margin-right: 0;
margin-left: 0;
}
svg {
fill: currentColor;
height: auto;
}
}
.jet-dropdown-arrow {
align-self: center;
margin-left: 10px;
}
.jet-menu-badge {
align-self: flex-start;
text-align: center;
width: 0;
&__inner {
display: inline-block;
white-space: nowrap;
}
}
}
// FIX showing sub-menu and sub-mega-menu when loading a page.
.jet-sub-menu,
.jet-sub-mega-menu {
opacity: 0;
visibility: hidden;
}
// Prevent duplicate sub-menu and mega-menu when the section is sticky
.jet-desktop-menu-active {
.elementor-sticky--active + .elementor-sticky {
.jet-sub-menu,
.jet-sub-mega-menu {
display: none;
}
}
}
.jet-menu {
&.jet-menu--animation-type-none {
.jet-sub-menu {
opacity: 0;
visibility: hidden;
}
.jet-sub-mega-menu {
opacity: 0;
visibility: hidden;
}
.jet-simple-menu-item {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
li {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
.jet-mega-menu-item {
&.jet-menu-hover {
.jet-sub-mega-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
&.jet-menu--animation-type-fade {
.jet-sub-menu {
opacity: 0;
visibility: hidden;
transition: opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility .1s linear;
}
.jet-sub-mega-menu {
opacity: 0;
visibility: hidden;
transition: opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility .1s linear;
}
.jet-simple-menu-item {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
li {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
.jet-mega-menu-item {
&.jet-menu-hover {
.jet-sub-mega-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
&.jet-menu--animation-type-move-up {
.jet-sub-menu {
opacity: 0;
top: 130%;
visibility: hidden;
transition: top .2s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
}
.jet-sub-mega-menu {
opacity: 0;
top: 130%;
visibility: hidden;
transition: top .3s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .3s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
}
.jet-simple-menu-item {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: top .3s cubic-bezier(.48,.01,.5,.99),
opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility 1s linear;
}
}
li {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: top .3s cubic-bezier(.48,.01,.5,.99),
opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility 1s linear;
}
}
}
}
.jet-mega-menu-item {
&.jet-menu-hover {
.jet-sub-mega-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
&.jet-menu--animation-type-move-down {
.jet-sub-menu {
opacity: 0;
top: 80%;
visibility: visible;
transition: top .3s cubic-bezier(.48,.01,.5,.99),
opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility 1s linear;
}
.jet-sub-mega-menu {
opacity: 0;
top: 80%;
visibility: hidden;
transition: top .3s cubic-bezier(.48,.01,.5,.99),
opacity .3s cubic-bezier(.48,.01,.5,.99),
visibility 1s linear;
}
.jet-simple-menu-item {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
li {
&.jet-menu-hover {
& > .jet-sub-menu {
top: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
.jet-mega-menu-item {
&.jet-menu-hover {
.jet-sub-mega-menu {
top: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}
}
.jet-menu-body-blocker {
overflow: hidden;
}
.jet-mobile-menu-cover {
position: fixed;
display: block;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba( 0, 0, 0, 0.5 );
z-index: 997;
}
.jet-mobile-menu {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: stretch;
&__instance {
position: relative;
&--slide-out-layout {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
.jet-mobile-menu__container {
display: flex;
justify-content: flex-start;
align-items: stretch;
position: fixed;
top: 0;
height: 100%;
max-width: 100%;
z-index: 998;
body.admin-bar[ data-elementor-device-mode='desktop' ] & {
top: 32px;
height: calc( 100vh - 32px );
}
body.admin-bar[ data-elementor-device-mode='tablet' ] & {
top: 32px;
height: calc( 100vh - 32px );
}
body.admin-bar[ data-elementor-device-mode='mobile' ] & {
top: 46px;
height: calc( 100vh - 46px );
}
.jet-mobile-menu__container-inner {
width: 100%;
}
}
&.right-container-position {
.jet-mobile-menu__container {
right: 0;
}
}
&.left-container-position {
.jet-mobile-menu__container {
left: 0;
}
}
&.fixed-right-toggle-position,
&.fixed-left-toggle-position {
.jet-mobile-menu__toggle {
top: 20px;
body.admin-bar[ data-elementor-device-mode='desktop' ] & {
top: 52px;
}
body.admin-bar[ data-elementor-device-mode='tablet' ] & {
top: 35px;
}
body.admin-bar[ data-elementor-device-mode='mobile' ] & {
top: 66px;
}
}
}
&.fixed-right-toggle-position {
.jet-mobile-menu__toggle {
position: fixed;
right: 20px;
z-index: 997;
}
}
&.fixed-left-toggle-position {
.jet-mobile-menu__toggle {
position: fixed;
left: 20px;
z-index: 997;
}
}
}
&--dropdown-layout {
display: flex;
flex-direction: column;
justify-content: flex-start;
.jet-mobile-menu__container {
position: absolute;
top: 100%;
z-index: 998;
}
&.right-container-position {
align-items: flex-end;
}
&.left-container-position {
align-items: flex-start;
}
}
&--push-layout {
display: flex;
flex-direction: column;
justify-content: flex-start;
.jet-mobile-menu__container {
position: relative;
}
&.right-container-position {
align-items: flex-end;
}
&.left-container-position {
align-items: flex-start;
}
}
}
&__toggle {
min-width: 35px;
min-height: 35px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
cursor: pointer;
&-text {
color: #3a3a3a;
}
}
&__toggle-icon {
display: flex;
justify-content: center;
align-items: center;
& + .jet-mobile-menu__toggle-text {
margin-left: 10px;
}
svg {
fill: currentColor;
height: auto;
}
}
&__container {
overflow-x: hidden;
overflow-y: auto;
width: 400px;
}
&__container-inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 20px;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
&__controls {
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 35px;
}
&__back {
min-width: 30px;
min-height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #3a3a3a;
svg {
fill: currentColor;
height: auto;
}
span {
margin-left: 7px;
}
}
&__breadcrumbs {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
&__breadcrumb {
display: flex;
justify-content: flex-start;
align-items: center;
.breadcrumb-label {
color: #3a3a3a;
}
.breadcrumb-divider {
margin: 0 5px;
color: #3a3a3a;
svg {
fill: currentColor;
height: auto;
}
}
}
&__body {
}
&__list {
width: 100%;
position: relative;
}
&__template {
width: 100%;
position: relative;
}
&__template-loader {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
& + .jet-mobile-menu__toggle-text {
margin-left: 10px;
}
}
&__items {
margin: 0;
padding: 0;
}
&__item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 10px 0;
.jet-mobile-menu-single &:last-child {
border-bottom: none !important;
}
.jet-mobile-menu-widget &:last-child {
border-bottom: none !important;
}
&--sub-trigger-item {
.mobile-link {
//pointer-events: none;
}
}
> .jet-mobile-menu__list {
padding: 10px 0 10px 30px;
}
}
&__item-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.jet-menu-icon {
color: #3a3a3a;
}
.jet-menu-name {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.jet-menu-label {
}
.jet-menu-desc {
font-size: 10px;
font-style: italic;
}
.jet-menu-badge {
width: auto;
margin-left: 5px;
&__inner {
font-size: 10px;
padding: 0 3px;
color: white;
background-color: #3a3a3a;
}
}
.jet-dropdown-arrow {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #3a3a3a;
svg {
fill: currentColor;
height: auto;
}
}
}
.cover-animation-enter {
opacity: 0;
}
.cover-animation-enter-to {
opacity: 1;
}
.cover-animation-enter-active {
transition: opacity .3s cubic-bezier(.5,.12,.46,.88) .1s;
}
.cover-animation-leave {
opacity: 1;
}
.cover-animation-leave-to {
opacity: 0;
}
.cover-animation-leave-active {
transition: opacity .3s cubic-bezier(.5,.12,.46,.88) .1s;
}
.menu-container-right-animation-enter {
transform: translateX(-100%);
}
.menu-container-right-animation-enter-to {
transform: translateX(0);
}
.menu-container-right-animation-enter-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-right-animation-leave {
transform: translateX(0);
}
.menu-container-right-animation-leave-to {
transform: translateX(-150%);
}
.menu-container-right-animation-leave-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-left-animation-enter {
transform: translateX(100%);
}
.menu-container-left-animation-enter-to {
transform: translateX(0);
}
.menu-container-left-animation-enter-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-left-animation-leave {
transform: translateX(0);
}
.menu-container-left-animation-leave-to {
transform: translateX(150%);
}
.menu-container-left-animation-leave-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-dropdown-animation-enter {
opacity: 0;
transform: translateY(10px);
}
.menu-container-dropdown-animation-enter-to {
opacity: 1;
transform: translateY(0);
}
.menu-container-dropdown-animation-enter-active {
transition: all .25s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-dropdown-animation-leave {
opacity: 1;
transform: translateY(0);
}
.menu-container-dropdown-animation-leave-to {
opacity: 0;
transform: translateY(10%);
}
.menu-container-dropdown-animation-leave-active {
transition: all .25s cubic-bezier(.5,.12,.46,.88);
}
.menu-container-expand-animation-enter-active,
.menu-container-expand-animation-leave-active {
max-height: 100vh;
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.menu-container-expand-animation-enter,
.menu-container-expand-animation-leave-to {
max-height: 0;
}
.items-next-animation-enter {
transform: translateX(110%);
}
.items-next-animation-enter-to {
transform: translateX(0);
}
.items-next-animation-enter-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.items-next-animation-leave {
transform: translateX(0);
}
.items-next-animation-leave-to {
transform: translateX(-110%);
}
.items-next-animation-leave-active {
position: absolute;
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.items-prev-animation-enter {
transform: translateX(-110%);
}
.items-prev-animation-enter-to {
transform: translateX(0);
}
.items-prev-animation-enter-active {
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}
.items-prev-animation-leave {
transform: translateX(0);
}
.items-prev-animation-leave-to {
transform: translateX(110%);
}
.items-prev-animation-leave-active {
position: absolute;
transition: transform .3s cubic-bezier(.5,.12,.46,.88);
}