Use prettier for SCSS (#3895)

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

/* object list, e.g. users and groups */
.aclList {
	max-height: 400px;
	overflow: auto;

	&:not(:empty) {
		border-bottom: 1px solid $wcfContentBorder;
		border-top: 1px solid $wcfContentBorder;
	}

	> li {
		align-items: center;
		display: flex;
		padding: 10px 0;

		&:not(.active) {
			cursor: pointer;
		}

		&.active {
			background-color: $wcfTabularBoxBackgroundActive;
		}

		> .icon {
			flex: 0 0 36px;
			padding: 0 5px;
		}

		> .aclLabel {
			flex: 1 1 auto;
			margin: 0 5px;
		}

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

		&:last-child {
			border-bottom: none;
		}
	}

	/* search input */
	& + .dropdown {
		display: block;
		margin-top: 20px;
	}
}

/* permissions per object */
.aclPermissionList {
	margin-top: 40px;
	position: relative;

	&::after,
	&::before {
		min-width: 60px;
		position: absolute;
		text-align: center;
		top: -5px;
		transform: translateY(-100%);

		@include wcfFontSmall;
	}

	&::after {
		content: attr(data-deny);
		right: 0;
	}

	&::before {
		content: attr(data-grant);
		right: 80px;
	}

	> li {
		&.aclCategory {
			padding: 20px 10px 10px 0;

			@include wcfFontHeadline;

			&:hover {
				background-color: transparent;
			}
		}

		&:not(.aclCategory) {
			display: flex;
			padding: 10px 0;
		}

		> span {
			flex: 1 1 auto;
			padding-left: 10px;
		}

		> label {
			cursor: pointer;
			flex: 0 0 auto;
			padding: 0 20px;

			& + label {
				margin-left: 20px;
			}
		}
	}
}