Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-blocks   php

Repository URL to install this package:

Version: 1.2.8 

/ scss / widgets / _jet-nav-menu.scss

.jet-nav {
	display: flex;
	flex-wrap: wrap;

	direction: ltr;

	.menu-item {
		&-has-children {
			position: relative;
		}
		&-link {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px 10px;

			&.menu-item-link-top {
				justify-content: center;
				padding: 8px 15px;
			}
			&-sub {
				.jet-nav-arrow {
					transform: rotate( -90deg );
				}
			}
		}
	}
	&-item-desc{
		display: block;
	}
	&-arrow {
		margin-left: 10px;
	}
	&__sub {
		position: absolute;
		left: 0;
		top: -999em;
		visibility: hidden;
		z-index: 999;
		width: 200px;
		background: #fff;
		opacity: 0;
		transform: translateY(20px);
		transition: transform 200ms, opacity 200ms;
		transition-timing-function: cubic-bezier(.17,.67,.83,.67);

		.jet-mobile-menu.jet-nav-wrap & {
			@media ( max-width: $sm-max ) {
				position: static;
				top: 0;
				left: 0;
				width: 100% !important;
				transform: translateY(0);

				display: none;
			}
		}

		.jet-nav--vertical-sub-bottom & {
			position: static;
			top: 0;
			left: 0;
			width: 100%;
			transform: translateY(0);

			display: none;
		}

		.menu-item.jet-nav-hover > & {
			opacity: 1;
			transform: translateY(0);

			.jet-mobile-menu.jet-nav-wrap & {
				@media ( max-width: $sm-max ) {
					display: block;
				}
			}

			.jet-nav--vertical-sub-bottom & {
				display: block;
			}
		}

		.menu-item.jet-nav-hover > &,
		.menu-item.jet-nav-hover-out > & {
			top: 0;
			left: 100%;
			visibility: visible;

			.jet-nav--vertical-sub-left-side & {
				left: auto;
				right: 100%;
			}
		}

		&.jet-nav-depth-0 {
			.menu-item.jet-nav-hover > &,
			.menu-item.jet-nav-hover-out > & {
				top: 100%;
				left: 0;

				.jet-nav--vertical & {
					top: 0;
					left: 100%;
				}

				.jet-nav--vertical-sub-left-side & {
					left: auto;
					right: 100%;
				}
			}
		}
	}

	// Horizontal Menu ( RTL )
	&--horizontal {
		@if $direction == rtl {
			flex-direction: row-reverse;

			.jet-nav__sub {
				left: auto;
				right: 0;
			}

			.menu-item.jet-nav-hover > .jet-nav__sub,
			.menu-item.jet-nav-hover-out > .jet-nav__sub {
				left: auto;
				right: 100%;
			}

			.menu-item.jet-nav-hover > .jet-nav__sub.jet-nav-depth-0,
			.menu-item.jet-nav-hover-out > .jet-nav__sub.jet-nav-depth-0 {
				left: auto;
				right: 0;
			}

			.menu-item {
				&-link-sub {
					.jet-nav-arrow {
						transform: rotate(90deg);
					}
				}
			}

			.jet-nav-arrow {
				margin-left: 0;
				margin-right: 10px;
				order: -1;
			}
		}
	}

	// Horizontal Menu Alignment
	&--horizontal {
		.jet-nav-align-space-between & {
			> .menu-item {
				flex-grow: 1;
			}
		}

		.jet-nav-tablet-align-space-between & {
			@media ( max-width: $md-max ) {
				> .menu-item {
					flex-grow: 1;
				}
			}
		}

		.jet-nav-tablet-align-center &,
		.jet-nav-tablet-align-flex-start &,
		.jet-nav-tablet-align-flex-end & {
			@media ( max-width: $md-max ) {
				> .menu-item {
					flex-grow: 0;
				}
			}
		}

		.jet-nav-mobile-align-space-between & {
			@media ( max-width: $sm-max ) {
				> .menu-item {
					flex-grow: 1;
				}
			}
		}

		.jet-nav-mobile-align-center &,
		.jet-nav-mobile-align-flex-start &,
		.jet-nav-mobile-align-flex-end & {
			@media ( max-width: $sm-max ) {
				> .menu-item {
					flex-grow: 0;
				}
			}
		}
	}

	// Vertical Menu Style
	&.jet-nav--vertical {
		flex-direction: column;
		flex-wrap: nowrap;

		.menu-item-link.menu-item-link-top {
			justify-content: flex-start;

			.jet-nav-arrow {
				transform: rotate( -90deg );
			}
		}
	}

	&.jet-nav--vertical-sub-left-side {
		.menu-item-link.menu-item-link-top,
		.menu-item-link.menu-item-link-sub {
			.jet-nav-arrow {
				transform: rotate( 90deg );
			}
		}

		.menu-item-link.menu-item-link-sub {
			justify-content: flex-start;
		}

		.jet-nav-arrow {
			margin-left: 0;
			margin-right: 10px;
			order: -1;
		}

		// Menu Alignment
		.jet-nav-align-space-between & {
			.menu-item-link-top .jet-nav-link-text {
				margin-left: auto;
			}
		}

		.jet-nav-tablet-align-space-between & {
			@media ( max-width: $md-max ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: auto;
				}
			}
		}

		.jet-nav-tablet-align-center &,
		.jet-nav-tablet-align-flex-start &,
		.jet-nav-tablet-align-flex-end & {
			@media ( max-width: $md-max ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: 0;
				}
			}
		}

		.jet-nav-mobile-align-space-between & {
			@media ( max-width: $sm-max ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: auto;
				}
			}
		}

		.jet-nav-mobile-align-center &,
		.jet-nav-mobile-align-flex-start &,
		.jet-nav-mobile-align-flex-end & {
			@media ( max-width: $sm-max ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: 0;
				}
			}
		}
	}

	&.jet-nav--vertical-sub-bottom {
		.menu-item-link.menu-item-link-top,
		.menu-item-link.menu-item-link-sub {
			.jet-nav-arrow {
				transform: rotate(0);

				@if $direction == rtl {
					margin-left: 0;
					margin-right: 10px;
					order: -1;
				}
			}
		}
	}

	// Mobile Menu
	.jet-mobile-menu.jet-nav-wrap & {
		@media ( max-width: $sm-max ) {
			display: none;

			flex-direction: column;
			flex-wrap: nowrap;
			margin-top: 10px;

			.menu-item-link.menu-item-link-top {
				justify-content: space-between;
			}

			.menu-item-link.menu-item-link-top,
			.menu-item-link.menu-item-link-sub {
				.jet-nav-arrow {
					transform: rotate( 0deg );

					@if $direction == rtl {
						margin-left: 0;
						margin-right: 10px;
						order: -1;
					}
				}
			}

			&.jet-nav--vertical {}

			&.jet-nav--vertical-sub-left-side {
				.menu-item .menu-item-link.menu-item-link-top .jet-nav-link-text {
					margin-left: 0;
				}

				.menu-item-link.menu-item-link-sub {
					justify-content: space-between;
				}

				.jet-nav-arrow {
					@if $direction == ltr {
						margin-left: 10px;
						margin-right: 0;
						order: 1;
					}
				}
			}
		}
	}

	.jet-mobile-menu--full-width.jet-nav-wrap & {
		@media ( max-width: $sm-max ) {
			position: absolute;
			z-index: 9999;
			left: 0;
			display: block;
			width: 100vw;
			transform: scaleY(0);
Loading ...