Improved visuals for editor + messageTabMenu

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / tabMenuMessage.scss

.messageTabMenu {
	> div,
	> fieldset,
	> section {
		display: none;
		
		&.active {
			display: block;
		}
	}
	
	> div {
		> nav {
			ul {
				white-space: nowrap;
				
				li {
					outline: 0;
					
					&.active a,
					&.active a:hover {
						color: $wcfContentLinkActive;
					}
					
					a {
						color: $wcfContentLinkActive;
						display: block;
						outline: 0;
						
						@extend .userSelectNone;
						@extend .wcfFontSmall;
						
						&:hover {
							color: $wcfContentLinkActive;
						}
					}
				}
			}
		}
	}
}

.messageTabMenu + .innerError {
	margin-top: -1px; // TODO
	width: 100%;
}

.messageTabMenuNavigation {
	position: relative;
	
	> ul {
		border-bottom: 1px solid $wcfContentBorderInner;
		margin-bottom: 10px;
		padding: 10px 0;
		
		@extend .inlineList;
		
		> li {
			&:not(:last-child) {
				margin-right: 20px;
			}
			
			> a {
				display: block;
				
				@extend .userSelectNone;
				
				> span.icon {
					display: none;
				}
			}
		}
	}
	
	> span {
		border-top: 1px solid $wcfContentLink;
		bottom: 0;
		content: "";
		position: absolute;
		transition: transform .2s linear, width .2s linear;
	}
}

@media only screen and (max-width: 800px) {
	.messageTabMenu {
		> nav > ul > li:not(.active) > a {
			> span.icon {
				display: block;
			}
			
			> span:not(.icon) {
				display: none;
			}
		}
		
		> div > nav {
			// TODO: margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall;
		}
	}
}

/* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
   and the next element, similar to gaps with display: inline-block and font-size > 0 */
@-moz-document url-prefix() {
	fieldset + .messageTabMenu {
		margin-top: -3px;
	}
}

.uploadButton {
	overflow: hidden;
	position: relative;
	
	> input {
		left: -4px;
		opacity: 0;
		padding: 4px;
		position: absolute;
		top: -2px;
	}
}