META-INF.resources.css.main.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.product.navigation.product.menu.web
The newest version!
@import 'cadmin-variables';

@import 'variables';

@import 'PagesTree';

$product-menu-width: 320px;
$product-menu-item-fixed-width: $product-menu-width;
$product-menu-pages-administration-link-height: 72px;

html#{$cadmin-selector} {
	.cadmin {
		.pages-tree {
			.layout-finder {
				border-bottom: 1px solid $cadmin-dark;
				padding: 24px 16px 0;

				input {
					background-color: $cadmin-gray-800;

					&::placeholder {
						color: $cadmin-secondary-l1;
					}
				}

				.back-to-menu {
					color: $cadmin-secondary-l3;
				}

				.breadcrumb {
					flex-wrap: nowrap;
					margin-bottom: 0;
					padding-bottom: 4px;

					.breadcrumb-item {
						flex-shrink: 0;

						&:not(:first-child):not(:last-child) {
							flex-basis: 1.5rem;
							flex-grow: 0.5;
							flex-shrink: 1;
							width: 100%;

							.breadcrumb-text-truncate {
								max-width: 95%;
								padding-right: 0.5rem;
								position: absolute;
							}
						}
					}
				}

				.btn-sm {
					font-size: 14px;
				}

				& .form-control:focus {
					border-radius: 1px;
				}

				.layout-finder-icon {
					color: white;
					position: absolute;
					right: 1.8rem;
					top: 4.55rem;
				}
			}

			.pages-administration-link {
				align-items: center;
				background-color: $cadmin-dark;
				border-top: 1px solid $cadmin-gray-800;
				bottom: 0;
				display: flex;
				font-size: 14px;
				height: $product-menu-pages-administration-link-height;
				padding: 16px 0 24px 16px;
				position: fixed;
				width: $product-menu-item-fixed-width;

				a {
					color: $cadmin-secondary-l1;
				}
			}

			.page-type-selector {
				border-top: 1px solid $cadmin-gray-800;
				margin-top: 20px;

				.add-page-button,
				.configure-link {
					color: $cadmin-secondary-l3;
				}

				.form-control {
					background-color: $cadmin-dark;
					border-color: $cadmin-gray-800;
					color: $cadmin-gray-500;
				}

				.dropdown-toggle.form-control-select {
					&,
					&:hover,
					&:active,
					&:focus {
						background-color: $cadmin-dark;
						border-color: $cadmin-gray-800;
						color: $cadmin-secondary-l3;
					}
				}
			}
		}

		.page-type-selector-option {
			padding-left: 32px;
		}

		.product-menu-toast-toggle {
			align-items: center;
			display: inline-flex;
			height: 2em;
			justify-content: center;
			position: relative;
			width: 2em;

			.icon-product-menu-open {
				display: none;
			}

			.icon-product-menu-closed {
				display: block;
			}
		}

		.product-menu {
			.sidebar-header {
				line-height: 32px;
				padding-bottom: 8px;
				padding-right: 9px;
				padding-top: 8px;

				@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
					padding-bottom: 12px;
					padding-left: 24px;
					padding-top: 12px;
				}

				.sidenav-close {
					float: right;
					margin-right: -2px;
				}
			}

			.sidebar-header-logo {
				margin-right: 10px;
			}

			.sidebar-body {
				bottom: 0;
				left: 0;
				padding: 0;
				position: relative;
				right: 0;
				top: 0;

				@include media-breakpoint-down(xs) {
					overflow: visible;
					position: static;
				}

				.panel-app-root {
					&.active {
						border-left: 4px solid $cadmin-white;
					}

					li {
						font-weight: 400;
						list-style: none;

						&.active {
							font-weight: 700;
							margin-left: -24px;
							padding-left: 20px;
						}
					}
				}

				.panel-group {
					border-radius: 0;
				}
			}

			.lfr-product-menu-sidebar .panel-group {
				overflow: hidden;
			}

			small {
				display: block;
			}

			.list-group-heading {
				.h4,
				.h5,
				h1,
				h2,
				h3,
				h4,
				h5,
				h6 {
					margin-bottom: 0;
					margin-top: 0;
				}
			}

			.list-group-item {
				border-top-width: 0;
				padding: 10px 20px;
			}

			.nav-nested-margins > li .nav > li {
				.nav > li {
					margin-bottom: 1px;
				}
			}

			&.popover {
				background-color: $cadmin-white;
			}

			.impersonation-message {
				font-size: 12px;
			}

			.lexicon-icon-home {
				margin-right: 8px;
			}

			.manage-sites-link {
				padding: 1em;
			}

			.site-selector {
				box-shadow: none;

				.selectable-site {
					color: #333;
					height: auto;
				}

				.site-link {
					color: #333;

					&.selected-site {
						color: #999;
					}
				}

				.site-logo-container {
					padding: 2em;
				}
			}

			.staging-links {
				font-size: 12px;
				margin: 6px 22px 4px 16px;
			}
		}
	}

	body.product-menu-open .cadmin {
		.product-menu-toast-toggle {
			.icon-product-menu-open {
				display: block;
			}

			.icon-product-menu-closed {
				display: none;
			}
		}
	}
}