Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / buttonGroupFlexible.scss

.flexibleButtonGroup {
	display: flex;
	flex-wrap: wrap;

	> li {
		display: flex;
		flex: 0 0 auto;

		&:not(:last-child) {
			margin-right: 5px;

			&.spaceAfter {
				margin-right: 20px;
			}
		}

		> input[type="radio"] {
			left: -3000px;
			opacity: 0;
			position: absolute;

			&:checked + label {
				cursor: default;

				> .icon {
					cursor: default !important;
				}
			}

			&:focus + label {
				border-color: rgba(0, 0, 0, 0.3);
			}
		}

		> a,
		> label {
			background-color: rgb(207, 216, 220);
			border: 1px solid transparent;
			color: rgb(33, 33, 33);
			cursor: pointer;
			padding: 5px 10px;

			> .icon {
				color: inherit;
			}

			> .icon {
				color: inherit !important;
				cursor: pointer !important;
			}
		}

		> a.active,
		> input[type="radio"]:checked + label,
		> input[type="radio"] + label:hover {
			color: #fff;

			&.green {
				background-color: rgb(46, 125, 50);
			}

			&.red {
				background-color: rgb(198, 40, 40);
			}

			&.yellow {
				background-color: rgb(251, 140, 0);
				color: #000;
			}
		}
	}
}

.disabled .flexibleButtonGroup > li > input[type="radio"]:checked + label,
.flexibleButtonGroup > li > input[type="radio"]:disabled + label {
	background-color: rgb(242, 242, 242) !important;
	color: rgb(125, 130, 100) !important;
	cursor: default;

	> .icon {
		color: rgb(125, 130, 100) !important;
		cursor: default !important;
	}
}