[ Mini Kiebo ]

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


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

.menubar-inverse .gui-controls { 
	// GUI header
	small {
		.menubar-visible &,
		.menubar-pin & {
			color: @menubar-inverse-color;
		}
	}

	// Tree badge markup
	.badge {
	}
}


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

.menubar-inverse .gui-controls { 
	> li {
		// General menu link markup
		ul {
			> li {
				// Tree subitems
				> a {
					&:active, &.active {
						background-color: @menubar-inverse-link-active;
					}
					&:hover, &:focus {
						background-color: @menubar-inverse-link-hover;
					}
				}
			}
		}
	}
}

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

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

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


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

.menubar-inverse .gui-controls {
	> li { 
		ul {
			> li {
				// Dashed lines on tree
				&:before {
					border-left: 1px dashed @menubar-inverse-tree-border-color;
				}
				> a:before {
					border-bottom: 1px dashed @menubar-inverse-tree-border-color; 
				}
			}
		}
	}
}


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

.menubar-inverse .gui-controls { 
	li { 
		// General title markup
		.title {
			color: @menubar-inverse-color;
			.textshadowguard(@menubar-inverse-color);
		}
		> a:hover {
			.title { 
				color: @menubar-inverse-link-hover-color; 
			}
		}
		&.active > a {
			.title { 
				color: @menubar-inverse-link-active-color; 
			}
		}

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

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


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

.menubar-inverse .gui-folder {
	> a:after {
		color: fade(@menubar-inverse-color, 50%);
	}
}

// Main level collapse/Expand signs
.menubar-inverse .gui-controls { 
	> .gui-folder {
		&.expanding > a:after, &.expanded > a:after {
			color: fade(@menubar-inverse-color, 40%);
		}
	}
}


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

.menubar-inverse .gui-icon {
	color: @menubar-inverse-icon-color;

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

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

.menubar-inverse .gui-icon-active {
	background-color: @menubar-inverse-icon-bg-active;
	border-color: @white;
	color: @menubar-inverse-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
	.menubar-inverse .gui-folder:hover:not(.active) .gui-icon {
		background-color: @menubar-inverse-icon-bg-hover;
		color: @menubar-inverse-icon-color-hover;
	}
	.menubar-inverse .gui-controls {
		> li:not(.gui-folder) {
			.gui-icon:hover {
				background: inherit;
			}
		}
	}
	.menubar-inverse .gui-icon:hover {
		background: inherit;
	}
}
.menubar-visible {
	.expanded-menu-icon();
}


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

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

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