• Home
• com.liferay
• com.liferay.product.navigation.product.menu.theme.contributor
• 3.0.12
• source code
• product_navigation_product_menu.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.product_navigation_product_menu.scss Maven / Gradle / Ivy

@import "bourbon";
@import "mixins";
@import "variables";

body {
	&.open #wrapper {
		@include sm() {
			padding-left: $product-menu-width;
		}
	}

	&.open .control-menu, &.open .affix {
		@include sm() {
			left: $product-menu-width;
		}
	}

	&.open, &.sidenav-transition {
		@include sm() {
			overflow-x: hidden;
		}
	}

	&.sidenav-transition #wrapper {
		@include transition(padding 0.5s ease);
	}
}

.lfr-product-menu-panel.sidenav-menu-slider {
	z-index: $product-menu-zindex;

	&.open,
	.sidenav-menu {
		width: $product-menu-width;
	}
}

.product-menu {
	background-color: $product-menu-body-bg;

	.company-details {
		float: left;
		width: calc(100% - 32px);

		@include sm {
			width: 100%;
		}

		.company-logo {
			margin-right: 16px;
			max-height: 32px;
			max-width: 32px;
		}
	}

	.panel-header {
		background-color: $product-menu-body-bg;
	}
}

.product-menu {
	.form-control {
		background-color: #1B2228;
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
		color: #869CAD;
		height: 40px;
		padding: 8px 12px;

		@include placeholder {
			color: #869CAD;
		}

		&:focus {
			background-color: #1B2228;
			box-shadow: none;
			color: #FFF;

			@include placeholder {
				color: #FFF;
			}
		}
	}
}

.product-menu {
	.collapse-icon {
		&:before {
			right: 25px;
		}
	}
}

.product-menu {
	.lfr-icon-menu .btn-default {
		background-color: transparent;

		&:active {
			box-shadow: none;
			color: $product-menu-nav-link-color;
		}
	}
}

.product-menu {
	.nav > li > a {
		color: $product-menu-nav-link-color;

		&:hover {
			color: $product-menu-nav-link-color;
		}
	}

	.dropdown-menu a {
		color: inherit;
	}

	.nav-equal-height {
		.nav > .active, > .active {
			border-left: 4px solid $product-menu-nav-link-active-color;
			font-weight: 700;
			margin-left: -24px;
			padding-left: 20px;
		}

		> .active > a, .nav > .active > a {
			&, &:focus, &:hover {
				color: $product-menu-nav-link-active-color;
			}
		}

		> .active, .nav > .active {
			border-left-color: $product-menu-nav-link-active-color;
		}
	}

	.nav-equal-height-heading {
		&:focus, &:hover {
			background-color: transparent;
		}

		.collapse-icon {
			&:after, &.collapsed:after {
				background-color: $product-menu-collapse-icon-bg;
				height: 12px;
			}

			&:before {
				color: $product-menu-nav-link-color;
				content: $product-menu-nav-equal-height-heading-open-collapse-icon;
				font-size: 15px;
				left: -8px;
			}

			&.collapsed:before {
				content: $product-menu-nav-equal-height-heading-closed-collapse-icon;
			}
		}
	}

	.nav-nested-margins > li .nav > li {
		border-left: 2px solid $product-menu-nav-link-color;

		.nav > li {
			border-left: 1px dotted $product-menu-nav-link-color;

			&.active {
				border-left: 1px solid $product-menu-nav-link-active-color;

				> a {
					color: $product-menu-nav-link-active-color;
				}
			}
		}
	}
}

.product-menu {
	.sidebar-header {
		background-color: $product-menu-header-bg;
		color: $product-menu-header-color;

		a {
			color: $product-menu-header-link-color;

			&:focus, &:hover {
				color: $product-menu-header-link-hover-color;
			}
		}
	}
}

.product-menu {
	a.list-group-heading, button.list-group-heading, .list-group-heading[data-toggle="collapse"] {
		border-color: transparent;
		color: $product-menu-list-group-heading-color;
	}

	.list-group {
		box-shadow: none;
		margin-bottom: 0;
	}

	.list-group-heading.goto-link {
		color: $product-menu-nav-link-color;
		font-size: 0.8rem;

		&:hover {
			text-decoration: underline;
		}
	}

	.list-group-heading,
	.panel-title {
		> .panel-toggler {
			line-height: 32px;
			padding: 10px 44px 10px 24px;
		}

		.aspect-ratio-bg-cover {
			background-size: contain;
		}

		.site-administration-toggler {
			padding-right: 85px;
		}
	}

	.list-group-heading {
		background-color: $product-menu-list-group-heading-bg;
		border-color: transparent;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		@include word-wrap(normal);

		&.active {
			background-color: $product-menu-list-group-heading-active-bg;

			+ div {
				background-color: $product-menu-list-group-heading-active-bg;
			}
		}

		&:after {
			background-color: $product-menu-list-group-heading-border;
			height: $product-menu-list-group-heading-border-width;
		}

		&:focus, &:hover {
			background-color: $product-menu-list-group-heading-bg;
		}

		&.collapsed {
			font-weight: 400;
		}
	}

	.list-group-heading.collapsed {
		&:after {
			background-color: $product-menu-list-group-heading-collapsed-border;
			height: $product-menu-list-group-heading-collapsed-border-width;
		}
	}

	.list-group-heading {
		padding-left: 24px;
	}

	.list-group-item-field {
		width: auto;
	}

	.list-group-item,
	.list-group .list-group-item {
		border-width: $product-menu-list-group-item-border-width;
		color: $product-menu-nav-link-color;
		padding: 8px 8px 8px 24px;
	}

	.collapse, .collapsing {
		> .list-group-item {
			background-color: $product-menu-list-group-item-bg;
		}
	}

	.nav > li > a {
		&:focus, &:hover {
			background-color: transparent;
		}
	}
}

.product-menu {
	.panel {
		background-color: transparent;
		border-left-width: 0;
		border-radius: 0;
		border-right-width: 0;
		border-top-width: 0;
		box-shadow: none;
		color: $product-menu-nav-link-color;

		&:not(:first-of-type) {
			border-top: 1px solid $product-menu-header-border;
		}
	}

	.panel-body {
		background-color: $product-menu-panel-body-bg;
		padding: 0;
	}

	.panel-group {
		margin-bottom: 0;

		.panel + .panel {
			margin-top: 0;
		}

		.panel-heading + .panel-collapse {
			> .panel-body, > .list-group {
				border-top-width: 0;
			}

			&.in, &.collapsing {
				border-bottom: 2px solid $product-menu-panel-title-active-border;
			}
		}
	}

	.panel-header, .panel-heading {
		border-bottom-width: 1px;
		font-size: inherit;
		line-height: 1.5;
		position: relative;

		.panel-title > .panel-toggler {
			&:not(.collapsed) {
				background-color: $product-menu-panel-title-active-bg;
				border-left: $product-menu-panel-title-active-border-left-width $product-menu-panel-title-active-border-style $product-menu-panel-title-active-border;
				font-weight: 700;
				padding-left: 24px - $product-menu-panel-title-active-border-left-width;
			}

			.category-name, .user-name, .site-name {
				color: $product-menu-panel-title-color;
			}
		}
	}

	.panel-header {
		.collapse-icon-closed, .collapse-icon-open {
			font-size: inherit;
			top: 50%;
		}

		&.panel-heading {
			border-bottom-width: 0;
			padding: 0;
		}
	}
}

.product-menu {
	.user-icon, .sticker {
		display: inline-block;
		float: left;
		margin-right: 16px;
		position: static;
		vertical-align: middle;
	}

	.icon-sites {
		a {
			color: $product-menu-panel-title-color;
		}

		position: absolute;
		right: 46px;
		top: 9px;
		z-index: 1;
	}
}

.product-menu .scope-selector span {
	color: $product-menu-nav-link-active-color;
}

.product-menu {
	.staging-links {
		a, .links-separator {
			color: $product-menu-nav-link-color;
		}

		.active {
			color: $product-menu-nav-link-active-color;
			font-weight: 600;
		}

		.links-separator {
			padding: 0 5px;
		}
	}
}

.product-menu {
	.text-muted {
		opacity: 0.3;
	}
}

.product-menu-expanded {
	&.sidebar-body {
		overflow: visible;
	}

	&.sidenav-fixed.sidenav-menu-slider {
		overflow: auto;
		visibility: visible;
		width: 100%;
	}
}