lucid-ui/src/components/Submarine/Submarine.less

A UI component library from AppNexus.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Submarine-Divider-height: @size-XS;
@Submarine-Bar-header-height: 33px;
@Submarine-transition-duration: @timing-animation-fade;
@Submarine-transition-half-duration: @Submarine-transition-duration / 2;
@Submarine-transition-third-duration: @Submarine-transition-duration / 3;

.@{prefix}-Submarine {
	display: flex;
	align-items: stretch;
	height: 100%;
	width: 100%;
	flex-direction: column;

	& > .@{prefix}-SplitHorizontal-inner {
		& > .@{prefix}-Submarine-Bar {
			position: relative;
			z-index: @zindex-base;
			background-color: @color-white;
			overflow: auto;
			display: flex;

			/* https://connect.microsoft.com/IE/feedback/details/949764/ie-11-incorrectly-rejects-flexbox-shorthand-syntax-flex-1-1-0-as-invalid */
			/* stylelint-disable-next-line length-zero-no-unit */
			flex-shrink: 0px;

			.@{prefix}-Submarine-is-position-top& {
				border-bottom: @border-standardBorder;
				flex-direction: column-reverse;
			}

			.@{prefix}-Submarine-is-position-bottom& {
				border-top: @border-standardBorder;
				flex-direction: column;
			}

			& > .@{prefix}-Submarine-Bar-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: @color-backgroundColor;
				opacity: 1;
				z-index: @zindex-base;

				.@{prefix}-SplitHorizontal-is-expanded& {
					opacity: 0;
					pointer-events: none;
				}
			}

			& > .@{prefix}-Submarine-Bar-header {
				.box-sizing();

				background-color: @color-backgroundColor;
				color: @color-textColor;
				font-size: @size-L;
				font-weight: @font-weight-semiBold;
				display: flex;
				flex-shrink: 0;
				min-height: @Submarine-Bar-header-height;

				.@{prefix}-Submarine-is-position-top& {
					border-top: @border-standardBorder;
				}

				.@{prefix}-Submarine-is-position-bottom& {
					border-bottom: @border-standardBorder;
				}

				& > .@{prefix}-Submarine-Bar-Title {
					margin: @size-XS auto @size-XS @size-standard;

					&-is-shown-collapsed {
						z-index: @zindex-base;
					}
				}

				& > .@{prefix}-Submarine-expander {
					align-self: center;
					flex: 0 0;
					margin: 0 @size-XS;
					z-index: @zindex-base + 1;

					&:focus,
					&:active {
						background: none;
					}

					.@{prefix}-ChevronIcon {
						stroke: @color-neutral-6;
					}
				}
			}

			& > .@{prefix}-Submarine-Bar-content {
				flex: 1 0;
				padding: @size-XS;
			}
		}

		& > .@{prefix}-SplitHorizontal-Divider.@{prefix}-Submarine-Divider {
			position: relative;
			display: flex;
			flex-shrink: 0;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: @color-backgroundColor;
			height: @Submarine-Divider-height;
			z-index: @zindex-base - 1;

			.@{prefix}-Submarine-is-position-top& {
				transform: translateY(-@Submarine-Divider-height);
				border-bottom: @border-standardBorder;
			}

			.@{prefix}-Submarine-is-position-bottom& {
				transform: translateY(@Submarine-Divider-height);
				border-top: @border-standardBorder;
			}

			.@{prefix}-SplitHorizontal-is-expanded& {
				transform: translateY(0);
			}

			.@{prefix}-Submarine-is-resize-disabled& {
				display: none;
			}

			&:hover {
				background-color: @color-mediumGray;
			}
		}

		& > .@{prefix}-Submarine-Primary {
			/* https://connect.microsoft.com/IE/feedback/details/949764/ie-11-incorrectly-rejects-flexbox-shorthand-syntax-flex-1-1-0-as-invalid */
			/* stylelint-disable-next-line length-zero-no-unit */
			flex-basis: 0px;
			overflow: auto;
			display: flex;
			flex-direction: column;

			.@{prefix}-Submarine-is-position-top& {
				margin-top: -@Submarine-Divider-height;

				.@{prefix}-Submarine-is-resize-disabled& {
					margin-top: 0;
				}

				.@{prefix}-SplitHorizontal-is-expanded& {
					margin-top: 0;
				}
			}

			.@{prefix}-Submarine-is-position-bottom& {
				margin-bottom: -@Submarine-Divider-height;

				.@{prefix}-Submarine-is-resize-disabled& {
					margin-bottom: 0;
				}

				.@{prefix}-SplitHorizontal-is-expanded& {
					margin-bottom: 0;
				}
			}

			& > .@{prefix}-Submarine {
				flex: 1;
			}
		}
	}

	&.@{prefix}-SplitHorizontal-is-animated.@{prefix}-SplitHorizontal-is-animated {
		& > .@{prefix}-SplitHorizontal-inner {
			& > .@{prefix}-Submarine-Bar {
				& > .@{prefix}-Submarine-Bar-overlay {
					transition: opacity @Submarine-transition-half-duration;
				}
			}

			& > .@{prefix}-SplitHorizontal-Divider.@{prefix}-Submarine-Divider {
				transition: transform @Submarine-transition-third-duration, background-color @Submarine-transition-third-duration;

				.@{prefix}-SplitHorizontal-is-expanded& {
					transition: transform @Submarine-transition-third-duration @Submarine-transition-duration, background-color @Submarine-transition-third-duration;
				}
			}

			& > .@{prefix}-Submarine-Primary {
				.@{prefix}-Submarine-is-position-top& {
					transition: margin-top @Submarine-transition-half-duration linear;
				}

				.@{prefix}-Submarine-is-position-bottom& {
					transition: margin-bottom @Submarine-transition-third-duration;

					.@{prefix}-SplitHorizontal-is-expanded& {
						transition: margin-bottom @Submarine-transition-third-duration @Submarine-transition-duration;
					}
				}
			}
		}
	}
}