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

A UI component library from AppNexus.

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

@IconGroup_margin: 9px;
@iconBoxFontSize: 14px;

.@{prefix}-IconSelect {
	display: inline-flex;
	flex-wrap: wrap;

	> figure:not(:last-of-type) {
		margin: 0 @IconGroup_margin @IconGroup_margin 0;
	}
}

// Base Iconbox
.@{prefix}-IconSelect-Item {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	align-items: center;
	padding: 12px 6px 11px;
	width: 120px;
	overflow: hidden;

	// Create border that doesn't effect layout
	&::before {
		content: '';
		top: 0;
		left: 0;
		position: absolute;
		border: 1px solid @color-gray;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		margin: 0 18px 0 0;
	}

	.@{prefix}-Icon {
		width: 72px;
		height: 32px;
		stroke: @color-neutral-9;
	}

	// On Hover, Active, Indeterminate, or Selected
	&:not(.@{prefix}-IconSelect-Item-is-disabled):hover,
	&.@{prefix}-IconSelect-Item-is-active,
	&.@{prefix}-IconSelect-Item-is-selected {
		cursor: pointer;

		&:not(.@{prefix}-IconSelect-Item-is-indeterminate)::before {
			border: 1px solid @color-primary;
		}

		.@{prefix}-Icon {
			opacity: 1;
			stroke: @color-primary;
		}

		.@{prefix}-Checkbox-visualization-container {
			border: 1px solid @color-primary;
		}
	}

	&.@{prefix}-IconSelect-Item-is-active,
	&:active {
		.@{prefix}-Checkbox-visualization-container {
			background: @color-primary;
		}
	}

	.@{prefix}-IconSelect-Item-figcaption,
	.@{prefix}-CheckboxLabeled,
	.@{prefix}-RadioButtonLabeled {
		font-size: @size-font;
		font-weight: @font-weight-medium;
		white-space: nowrap;
		text-align: center;
	}
}

// Disabled
.@{prefix}-IconSelect-Item-is-disabled {
	opacity: 0.9;

	&.@{prefix}-IconSelect-Item-is-active,
	&.@{prefix}-IconSelect-Item-is-selected {
		&.@{prefix}-IconSelect-Item-is-disabled::before {
			border: 1px solid @color-primary-50;
		}
	}

	.@{prefix}-CheckboxLabeled {
		color: @color-neutral-5;
	}

	&:hover {
		cursor: not-allowed;
	}

	.@{prefix}-Icon {
		stroke: @color-neutral-5;
	}
}

// Disabled && Selected
.@{prefix}-IconSelect-Item-is-disabled.@{prefix}-IconSelect-Item-is-selected {
	.@{prefix}-Icon {
		opacity: 0.5;
		stroke: @color-primary;
	}
}

// Has a Checkbox Input
.@{prefix}-IconSelect-Item-multi {
	height: 110px;
}

.@{prefix}-IconSelect-Item-checkbox {
	&.@{prefix}-CheckboxLabeled {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	&.@{prefix}-CheckboxLabeled > .@{prefix}-Checkbox {
		margin-right: 0;
	}

	.@{prefix}-CheckboxLabeled-Checkbox {
		order: 2;
	}

	.@{prefix}-CheckboxLabeled-label {
		order: 1;
		padding: 6px 0;
	}
}

// Has Radio Input
.@{prefix}-IconSelect-Item-single {
	height: 90px;
}

.@{prefix}-IconSelect-Item-radio {
	.@{prefix}-RadioButton.@{prefix}-IconSelect-Item-radio {
		visibility: hidden;
		position: absolute;
	}
}