Merge remote-tracking branch 'refs/remotes/origin/3.0'

[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;
				}
			}
			
			> .recentActivityFollowedNoResults {
				text-align: left;
			}
		}
		
		@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,
							> .invisible {
								color: rgba(0, 0, 0, .5);
							}
						}
						
						&.active,
						&:hover {
							> a {
								> .icon,
								> .invisible {
									color: $wcfContentText;
								}
							}
						}
					}
				}
			}
			
			&:hover .buttonGroupNavigation {
				opacity: 1;
			}
		}
	}
	
	@include screen-sm-down {
		&.doubleColumned,
		&.tripleColumned {
			> li + li {
				margin-top: 10px;
			}
		}
	}
	
	@include screen-md-up {
		&.doubleColumned,
		&.tripleColumned {
			display: flex;
			flex-wrap: wrap;
			
			> li {
				// this will cause the mobile drop-down menu to be cut-off
				// overflow: hidden;
				padding-right: 15px;
				
				.containerBoxContent {
					overflow: hidden;
					
					h3 {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				
				&:first-child {
					border-top: none;
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
			
			border-top: 1px solid $wcfContentBorder;
			border-bottom: 1px solid $wcfContentBorder;
		}
		
		&.doubleColumned > li {
			flex: 0 0 50%;
			max-width: 50%;
		}
		
		&.tripleColumned > li {
			flex: 0 0 calc(100% / 3);
			/* work-around for IE10 */
			width: calc(100% / 3);
		}
	}
}

.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%;
			max-width: 50%;
		}
		
		&.tripleColumned > li {
			flex: 0 0 calc(100% / 3);
			/* work-around for IE10 */
			width: calc(100% / 3);
		}
	}
}

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

.flexibleCategoryList {
    position: relative;
    
    > li {
        margin-bottom: 14px;
        
        > ol {
            margin-left: 21px;
        }
        
        > ol > li > ol {
            margin-bottom: 7px;
            margin-left: 21px;
            
            > li {
                font-size: $wcfFontSizeSmall;
            }
        }
    }
}

@include screen-md-up {
    .flexibleCategoryList:not(.flexibleCategoryListDisabled) {
        /* WebKit */
        -webkit-column-count: 2;
        
        /* Firefox */
        -moz-column-count: 2;
        
        /* CSS 3 / Internet Explorer */
        column-count: 2;
        
        > li {
            /* WebKit */
            -webkit-column-break-inside: avoid;
            
            /* CSS 3 / Internet Explorer */
            break-inside: avoid;
            
            > ol > li > ol {
                font-size: 0;
                
                > li {
                    display: inline-block;
                }
            }
        }
    }
    
    /* Firefox */
    @-moz-document url-prefix() {
        .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
            display: block;
            overflow: hidden;
        }
    }
}

@include screen-md-down {
	.styleList > li {
		padding: 10px;
	}
}