documize/gui/app/styles/widget/widget-list-picker.scss

.widget-list-picker {
	margin: 10px 0;

	> .options {
		width: 100%;
		margin: 0 auto;
		padding: 0;

		> .option {
			@include border-radius(3px);
			margin: 0 0 15px 0;
			padding: 10px 15px;
			color: $color-gray;
			background-color: $color-off-white;
			border: 1px solid $color-gray;
			cursor: pointer;
			position: relative;
			list-style-type: none;
		    line-height: 26px;

			&:hover {
				> .text-header, > .text {
					color: $color-off-black;
				}
			}

			> .text-header {
				@include ease-in();
				color: $color-gray;
				font-size: 1.3rem;
				font-weight: 600;
				margin-bottom: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 80%;
			}

			> .text {
				@include ease-in();
				color: $color-gray;
				font-size: 1rem;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 80%;
			}

			> .material-icons {
				position: absolute;
				top: 10px;
				right: 10px;
				color: $color-green;
				font-weight: 700;
				font-size: 1.3rem;
			}
		}

		> .selected {
			> .text-header, > .text {
				color: $color-off-black;
			}

			background-color: $color-yellow !important;
			border: 1px solid $color-goldy !important;
		}
	}
}

.widget-list-picker-horiz {
	> .options {
		> .option {
			display: inline-block;
			margin: 15px 15px 0 0;
			padding: 10px 15px;
			width: 30%;

			@media only screen and (max-width: 1200px) {
				display: block;
				width: 100%;
			}
		}
	}
}

.widget-list-choice {
	text-align: left;
	margin: 0;
	padding: 0;
	display: inline-block;

	> li {
		margin: 0 20px 0 0;
		padding: 0;
		display: inline-block;
		font-size: 1.3rem;
		font-weight: 700;
		color: $color-gray;
		cursor: pointer;
	}

	> .selected {
		color: $color-green;
		border-bottom: 1px solid $color-green;
	}
}