silverstripe-framework/admin/client/src/sections/campaign-admin/styles.scss

// Changeset items
.cms-campaigns {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	background-color: #f6f7f8;
	z-index: 2;
	transition: width .2s;
	padding-bottom: $toolbar-total-height;
}

.campaign-items {
	height: 100%;
	margin-bottom: 40px;
	overflow-y: auto;

	.list-group {
		margin-left: -$spacer-y;
		margin-right: -$spacer-y;

		border-bottom: 1px solid $border-color-light;
		margin-bottom: $spacer-y*.75;
	}

	.list-group-item {
		min-height: 64px;
		cursor: pointer;
		text-decoration: none;

		&:first-child {
			border-top: none;
		}

		&__heading {
			font-weight: 400;
			font-size: 14px;
			margin: 2px 0 5px;
			color: $body-color;
		}

		&__thumbnail {
			width: 64px;
			height: 64px;
			display: block;
			background: #ccc;
			float: left;
			margin: -12px 12px 0 -$spacer-y;
		}

		.label {
			text-transform: uppercase;
			font-size: 10px;
			font-weight: 400;
			letter-spacing: .4px;
		}

		// Show linked items
		&--has-links,
		&--is-linked {
			color: $brand-primary;
			float: right;
			font-size: $font-size-sm;
			position: absolute;
			right: $spacer-y;
			top: 27px;
			opacity: 0;
			transition: opacity .2s ease-in-out;

			.font-icon-link {
				font-size: 16px;
				position: relative;
				top: 3px;
				margin-right: 1px;
			}
		}

		&:hover,
		&:focus {
			text-decoration: none;

			.list-group-item--has-links {
				display: block;
				opacity: 1;
			}
		}

		&.active {
			background-color: $brand-primary;
			color: #FFF;
			opacity: 1;

			.list-group-item--has-links,
			.list-group-item__status {
				color: #FFF;
				opacity: 1;
			}
		}

		// Published item
		&--published {
			opacity: .6;
			transition: opacity .2s ease-in-out;

			.list-group-item__status {
				opacity: 0;
				transition: opacity .2s ease-in-out;
			}

			&:hover {
				opacity: 1;

				.list-group-item__status {
					display: inline-block;
					opacity: 1;
				}
			}
		}
	}
}