[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/14082024/Data/htdocs/htdocs/galeri/assets/less/materialadmin/ [ Home ]
File: gui-controls.less
//
// GUI controls
// --------------------------------------------------


// General GUI elements
// -------------------------

.gui-controls { 
	font-size: @menubar-font-size;
	padding: 0;
	margin-bottom: 30px;

	// GUI header
	small {
		display: block;
		margin: 30px @menubar-gap @menubar-gap @menubar-gap;
		font-size: 10px;
		font-weight: @weight-medium;
		opacity: 0.7;

		.menubar-visible &,
		.menubar-pin & {
			color: @menubar-color;
		}
	}
	// First GUI header has no top margin
	li { 
		&:first-child > small {
			margin-top: 0;
		}
	}

	// Tree badge markup
	.badge {
		position: absolute;
		top: 1px;
		margin-left: 8px;
		border-radius: 2px;
		padding: 2px 4px;
		font-size: 10px;
	}
}


// GUI items
// -------------------------

.gui-controls { 
	// General GUI item markup
	li { 
		list-style: none;

		// GUI item titles
		&.gui-folder > a {
			cursor: pointer;
		}
	}

	> li {
		// First level menu items
		position: relative;
		margin-bottom: @menubar-gap;

		// First level link markup
		> a {
			position: relative;
			display: block;
			text-decoration: none;
			.button-size(12px; 0px; @menubar-font-size; normal; 0);
			padding-left: 0;
			min-height: @menubar-width-collapsed - (@menubar-gap * 2);
			min-width: @menubar-width-collapsed;
			z-index: 1;

			&:focus {
				outline: none;
			}
		}

		// General menu link markup
		ul {
			> li {
				// Tree subitems
				> a {
					position: relative;
					display: block;
					text-decoration: none;
					.button-size(7px; 17px; @menubar-font-size; normal; 0);
					padding-left: @menubar-tree-indent;

					&:active, &.active {
						background-color: @menubar-link-active;
					}
					&:hover, &:focus {
						background-color: @menubar-link-hover;
					}
				}
			}
		}
	}

	// Overide default bootstrap behavior, for docs display
	&.nav > li > a:hover {
		background: inherit;
	}
}

// Markup for a first level item when it is selected and the menu is opened
.expanded-menu-item-markup {
	.gui-controls { 
		> li {
			// First level menu item hover style 
			&:not(.gui-folder) > a:hover {
				background-color: @menubar-link-hover;
			}

			// First level menu item active style 
			&.active:not(.gui-folder) > a {
				background-color: @menubar-link-active;
				.transition(background 0.3s linear);
			}
		}
	}
}

.menubar-visible {
	.expanded-menu-item-markup();
}

// Submenu markup / tree indents
// -------------------------

.gui-controls {
	li { 
		// General tree markup
		ul {
			padding: 0;
			display: none;
		}
		&.expanded > ul {
			display: block;
		}
	}

	// Tree Level specific styles
	> li {

		// Treelevel 2 markup
		> ul > li > ul li:before { left: @menubar-tree-indent-level2; }
		> ul > li > ul a {
			padding-left: @menubar-tree-indent + @menubar-tree-width;
			&:before { left: @menubar-tree-indent-level2; }
		}

		// Treelevel 3 markup
		> ul > li > ul > li > ul li:before { left: @menubar-tree-indent-level3; }
		> ul > li > ul > li > ul a {
			padding-left: @menubar-tree-indent + (@menubar-tree-width * 2);
			&:before { left: @menubar-tree-indent-level3; }
		}

		// Treelevel 4 markup
		> ul > li > ul > li > ul > li > ul li:before { left: @menubar-tree-indent-level4; }
		> ul > li > ul > li > ul > li > ul a {
			padding-left: @menubar-tree-indent + (@menubar-tree-width * 3);
			&:before { left: @menubar-tree-indent-level4; }
		}

		// Treelevel 5 markup
		> ul > li > ul > li > ul > li > ul > li > ul li:before { left: @menubar-tree-indent-level5; }
		> ul > li > ul > li > ul > li > ul > li > ul a {
			padding-left: @menubar-tree-indent + (@menubar-tree-width * 4);
			&:before { left: @menubar-tree-indent-level5; }
		}
	}
}


// Dashed menu lines
// -------------------------

.gui-controls {
	> li { 
		ul {
			> li {
				position: relative;

				// Dashed lines on tree
				&:before {
					content: "";
					left: @menubar-tree-indent-level1; top: 15px; bottom: -15px;
					position: absolute;
					display: block;
					width: 1px;
					border-left: 1px dashed @menubar-tree-border-color;
					z-index: 1;
				}
				&:first-child:before {
					top: 0;
				}
				&:last-child:before,
					&.last-child:before {
					display: none;
				}
				> a:before {
					content: "";
					left: @menubar-tree-indent-level1; top: 15px;
					position: absolute;
					display: block;
					width: @menubar-tree-width;
					border-bottom: 1px dashed @menubar-tree-border-color; 
					z-index: 1;
				}
			}
		}
	}
}


// Titles
// -------------------------

.gui-controls { 
	li { 
		// General title markup
		.title {
			position: relative;
			left: -10px;
			display: block;
			padding-left: 6px;
			color: @menubar-color;
			white-space: nowrap;
			overflow: hidden;
			opacity: 0;
			.textshadowguard(@menubar-color);
			.transition(all @menubar-collapse-speed @menubar-collapse-ease);
		}
		> a:hover {
			.title { 
				color: @menubar-link-hover-color; 
			}
		}
		&.active > a {
			.title { 
				color: @menubar-link-active-color; 
				font-weight: @weight-medium;
			}
		}

		// Folder title markup 
		&.gui-folder > a {
			.title {
				font-style: italic;
				color: @menubar-folder-color;
			}
		}

		// Folder title markup when expanded/active
		&.gui-folder.expanded > a .title,
		&.gui-folder.active > a .title {
			color: @menubar-color;
		}
	}

	> li {
		> a .title {
			margin-left: @menubar-tree-indent;
		}
	}
}

// Markup for the title when the menu is visible
.expanded-menu-title { 
	.gui-controls { 
		// Show menu titles
		li {
			.title {
				left: 0;
				opacity: 1;
			}
		}
	}
}

.menubar-visible {
	.expanded-menu-title();
}


// Folder - Collapse/Expand sign
// --------------------------------------------------

.gui-folder {
	> a:after {
		content: "+";
		position: absolute;
		top: 7px;
		display: inline-block;
		margin-left: -12px;
		color: fade(@menubar-color, 50%);
		font-size: 12px;
		font-weight: inherit;
		opacity: 0;
		.rotate(0deg);
		.transition(all .15s linear);
	}
	&.expanding, &.expanded {
		> a:after {
			font-size: 16px;
			font-weight: @weight-normal;
			margin-top: -2px;
			margin-left: -12px;
			.rotate(-45deg);
			.transition(all 0.10s linear);
		}
	}
}

// Main level collapse/Expand signs
.gui-controls { 
	> .gui-folder {
		> a:after {
			top: 12px;
			margin-left: 2px;
		}
		&.expanding > a:after, &.expanded > a:after {
			color: fade(@menubar-color, 40%);
			margin-left: 0;
			.rotate(-45deg);
		}
	}
}

.expanded-menu-sign {
	.gui-folder {
		> a:after {
			opacity: 1;
		}
	}
}

.menubar-visible {
	.expanded-menu-sign();
}


// GUI icon
// --------------------------------------------------

.gui-icon {
	position: absolute;
	left: @menubar-gap;
	top: 0;
	width: @menubar-icon-width;
	height: @menubar-icon-width;
	color: @menubar-icon-color;
	font-size: 18px;
	overflow: hidden;
	border-radius: 999px;
	.transition(all .15s linear);

	.fa:first-child, .md:first-child, .glyphicon:first-child {
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		margin: auto;
		//height: 16px;
		line-height: 40px;
		width: 1em;
	}

	&:hover {
		background-color: @menubar-icon-bg-hover;
		color: @menubar-icon-color-hover;

		img {
			left: -5px;
			top: -5px;
			width: @menubar-icon-width + 10;
			height: @menubar-icon-width + 10;
		}
	}
}

.gui-controls { 
	a.expanded .gui-icon,
	li.active .gui-icon,
	li.active .gui-icon:hover {
		.gui-icon-active();
	}
}

.gui-icon-active {
	background-color: @menubar-icon-bg-active;
	border-color: @white;
	color: @menubar-icon-color-active;
}

// Markup for icons when the menu is expanded
.expanded-menu-icon {
	// Change the look of the gui-icons when the menu is expanded
	.gui-folder:hover:not(.active) .gui-icon {
		background-color: @menubar-icon-bg-hover;
		color: @menubar-icon-color-hover;
	}
	.gui-controls {
		> li:not(.gui-folder) {
			.gui-icon:hover {
				background: inherit;
			}
		}
	}
	.gui-icon:hover {
		background: inherit;
	}
}
.menubar-visible {
	.expanded-menu-icon();
}


// Animations
// --------------------------------------------------

.gui-controls {
	a.blink .gui-icon {
		.animation(normal 1.4s 4 blink cubic-bezier(.9,0,0.1,1));
	}
}

@-moz-keyframes blink {
	50% { .gui-icon-active(); }
}

@-webkit-keyframes blink {
	50% { .gui-icon-active(); }
}

@keyframes blink {
	50% { .gui-icon-active(); }
}


// Responsive classes
// --------------------------------------------------

// Medium Devices
// -------------------------

@media (min-width: @screen-lg-min) { 
	.menubar-pin {
		.expanded-menu-item-markup();
		.expanded-menu-title();
		.expanded-menu-sign();
		.expanded-menu-icon();
	}
}