Using menu color schema

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / containerList.scss

.containerList > li {
	position: relative;
	transition: background-color .2s;
	
	@include screen-md-down {
		padding: 10px 0;
	}
	
	@include screen-lg {
		padding: 20px;
	}
	
	&:not(:last-child) {
		border-bottom: 1px solid $wcfContentBorderInner;
	}
	
	&:first-child {
		border-top: 1px solid $wcfContentBorder;
	}
	
	&:last-child {
		border-bottom: 1px solid $wcfContentBorder;
	}
	
	&:hover {
		background-color: $wcfTabularBoxBackgroundActive;
	}
		
	&.showMore {
		text-align: center;
		
		&:hover {
			background-color: transparent;
		}
	}
	
	.containerHeadline {
		position: relative;
		
		> .containerContentType {
			color: $wcfContentDimmedText;
			position: absolute;
			top: 5px;
			right: 0;
			
			@include screen-xs {
				display: none;
			}
		}
	}
	
	&.containerListButtonGroup {
		text-align: right;
		
		&:hover {
			background-color: transparent;
		}
		
		> .buttonGroup {
			display: inline-flex;
			
			&:not(:first-child) {
				margin-left: 5px;
			}
		}
	}
	
	@include screen-md-down {
		.hasMobileNavigation > .containerHeadline > h3 {
			padding-right: 30px;
		}
		
		.buttonGroupNavigation {
			position: absolute;
			right: 0;
			top: 14px;
			
			&.open {
				left: 0;
				
				// dropdown is contained within this element, required to have it stand
				// above any succeeding siblings
				z-index: 10;
				
				> .buttonList {
					display: block;
					visibility: visible;
				}
			}
			
			> .dropdownLabel {
				left: calc(100% - 24px);
				position: relative;
			}
			
			> .buttonList {
				@include dropdownMenu;
				
				position: static !important;
				top: 0;
				
				> li {
					.invisible {
						display: inline;
						padding-left: 5px;
					}
				}
			}
		}
	}
	
	@include screen-lg {
		.buttonGroupNavigation {
			opacity: 0;
			position: absolute;
			right: 20px;
			top: 15px;
			transition: opacity .12s;
			
			> .dropdownLabel {
				display: none;
			}
			
			> ul {
				background-color: $wcfContentBackground;
				border: 1px solid rgba(0, 0, 0, .15);
				border-radius: 6px;
				
				> li {
					margin-right: 0;
					
					&:not(:last-child) {
						border-right: 1px solid rgba(0, 0, 0, .15);
					}
					
					> a {
						display: inline-block;
						padding: 3px 5px;
						
						> .icon {
							color: rgba(0, 0, 0, .5);
						}
					}
					
					&.active,
					&:hover {
						> a {
							> .icon {
								color: $wcfContentText;
							}
						}
					}
				}
			}
		}
		
		&:hover .buttonGroupNavigation {
			opacity: 1;
		}
	}
}

.containerBoxList {
	@include screen-sm-down {
		&.doubleColumned,
		&.tripleColumned {
			> li + li {
				margin-top: 10px;
			}
		}
	}
	
	@include screen-md-up {
		&.doubleColumned,
		&.tripleColumned {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -15px;
			
			> li {
				overflow: hidden;
				padding-right: 15px;
				margin-bottom: 15px;
				
				.containerBoxContent {
					overflow: hidden;
					
					h3 {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		
		&.doubleColumned > li {
			flex: 0 0 50%;
		}
		
		&.tripleColumned > li {
			flex: 0 0 calc(100% / 3);
			/* work-around for IE10 */
			width: calc(100% / 3);
		}
	}
}

.recentActivityList {
	.box48 {
		max-height: 500px;
		overflow: hidden;
	}
}