MediaWiki:Common.css/src/interface/mainBox/navBar/tabs/dropdown.scss

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

Ancestors: / src / interface / mainBox / navBar / tabs / dropdown.scss

Siblings:dropdown.scsstab.scsswatch.scss

Children: (none)

@use "../../../../lib";
/* dropdown menu*/
#mw-head .vector-menu-dropdown{
	.vector-menu-heading {
		/* tab label */
		position: relative;
		display: flex;
		align-items: center;
		gap: 3px;
		&::after{
			all: unset;
			/* arrow icon */
			@include lib.pseudo-block;
			width: 14px;
			height: 14px;
			margin-top: 1px;/*<< offset */
			@include lib.mask-icon(var(--theme-icon-color-link), var(--icon-chevron-down));
		}
	}
	&:hover .vector-menu-heading::after{
		/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
		@include lib.mask-icon(var(--theme-icon-color-hover), var(--icon-chevron-down));
	}
	.vector-menu-content{
		/* dropdown list body */
		border-width: var(--theme-dropdown-border-width);
		border-style: var(--theme-dropdown-border-style);
		border-color: var(--theme-dropdown-border-color);
		border-radius: var(--theme-dropdown-border-radius);
		background: var(--theme-dropdown-background);
		box-shadow: var(--theme-dropdown-shadow);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		left: 0;
		margin-top: 0;
		white-space: nowrap;
		z-index: 999;
		ul{
			padding: 4px;
		}
		li{
			border-radius: calc(var(--theme-widget-border-radius) - 2px);
			transition: background 0.3s;
			&:hover{
				background: var(--theme-highlight-background);
			}
			a{
				display: block;
				padding: var(--layout-dropdown-item-padding-y) var(--layout-dropdown-item-padding-x);
				text-decoration: none;
				color: var(--theme-link-color);
				&:visited{
					color: var(--theme-link-color-visited);
				}
				&:hover{
					color: var(--theme-link-color-hover);
				}
			}
		}
	}
}
/* "more" menu */
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content{
	left: auto;
	right: var(--layout-gap);
}