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

A UI component library from AppNexus.

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

.@{prefix}-Selection {
	position: relative;
	display: flex;
	align-items: center;
	font-size: @size-font;
	line-height: 15px;
	color: @color-darkGray;
	background-color: @color-white;
	border-radius: @size-borderRadius;
	border: 1px solid @featured-color-primary-borderColor;
	padding-left: @size-S;
	min-height: @size-standard-height;

	&-Icon {
		margin-right: @size-XS;
		margin-top: 6px;
		align-self: flex-start;
	}

	&-label-container {
		flex: 1;
		display: flex;
		align-items: center;
	}

	&-label {
		flex: 1;
		padding: 6px 28px 6px 0;
	}

	&-close-button {
		position: absolute;
		right: 10px;
		top: 10px;

		&-is-small {
			top: 20px;
		}
	}

	&-content {
		flex: 1;
	}

	&-no-title &-children-container {
		padding-top: 0px;

		& > .@{prefix}-Selection {
			margin-right: 30px;
		}
	}

	&-children-container {
		padding-top: 2px;

		& > .@{prefix}-Selection {
			margin-right: 10px;
		}

		& > .@{prefix}-Selection:last-of-type {
			margin-bottom: @size-S;
		}
	}

	&:not(:last-child) {
		&:not(.@{prefix}-Selection-is-top) {
			border-bottom: 0;
		}
	}

	&-is-top {
		margin: @size-L;
		// border-bottom: 1px;
	}

	&-is-small {
		font-size: @size-font-L;
		line-height: 44px;

		.@{prefix}-Selection-Icon {
			margin-top: 20px;
		}
	}

	&-is-bold {
		.bold();
	}

	&-has-background {
		background-color: @color-backgroundColor;
	}

	// Kinds

	&-success {
		border-color: @featured-color-success-borderColor;
		padding-left: @size-XS;
	}

	&-danger {
		border-color: @featured-color-danger-borderColor;
		padding-left: @size-XS;
	}

	&-info {
		border-color: @featured-color-info-borderColor;
		padding-left: @size-XS;
	}

	&-warning {
		border-color: @featured-color-warning-borderColor;
		padding-left: @size-XS;
	}

	&-container {
		border-color: @color-neutral-4;
		font-weight: @font-weight-medium;

		.@{prefix}-Selection {
			font-weight: @font-weight-regular;
		}
	}

	&-is-filled {
		background-color: @color-neutral-3;
		border-color: @color-neutral-3;
	}
}