22

✏️ Editing: chekboxes.css

.usof-checkbox {
	display: inline-block;
	vertical-align: top;
	line-height: 1.4;
	}
	.usof-checkbox.hidden {
		display: none !important;
		}
	.usof-checkbox label {
		display: block;
		padding: .3em 0;
		}
	.usof-checkbox input[type="checkbox"] {
		flex-shrink: 0;
		vertical-align: top;
		text-align: center;
		line-height: 1.4em;
		height: 1.4em;
		width: 1.4em;
		margin: 0 .3em 0 0;
		border-radius: .15em;
		}
		.usof-checkbox input[type="checkbox"]:before {
			content: '\f00c';
			font-family: fontawesome;
			font-weight: 900;
			font-size: .85em;
			margin: 0;
			height: inherit;
			width: inherit;
			color: transparent;
			}
	.usof-checkbox input[type="checkbox"]:hover {
		background-color: var(--usof-color-gray-5);
		}
	.usof-checkbox input[type="checkbox"]:checked {
		background-color: var(--usof-color-blue-50);
		}
		.usof-checkbox input[type="checkbox"]:checked:before {
			color: var(--usof-color-white);
			}
	.usof-checkbox-text > i {
		color: var(--usof-color-gray-30);
		}

/* TYPE Checkboxes */
.usof-form-row.type_checkboxes .usof-form-row-title {
	padding-top: 6px;
	padding-bottom: 6px;
	}
.usof-form-row.type_checkboxes.desc_2 .usof-form-row-desc,
.usof-form-row.type_checkboxes.desc_3 .usof-form-row-desc {
	top: 4px;
	}
.usof-checkbox-list {
	margin: 0;
	padding: 0;
	}
	.type_checkboxes .usof-checkbox {
		margin: 0 1.3em 0 0;
		}
.type_checkboxes.vertical .usof-checkbox-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	}
	.type_checkboxes.vertical .usof-checkbox {
		margin: 0;
		}

/* TYPE Check Table */
.type_check_table .usof-form-row-desc {
	margin: 8px 0 !important;
	}
.type_check_table .usof-checkbox-list {
	margin-right: -40px;
	margin-top: 50px;
	columns: auto 2;
	}
.type_check_table .usof-checkbox {
	display: block;
	margin-bottom: 0;
	max-width: 350px;
	}
.type_check_table .usof-checkbox label {
	display: flex;
	position: relative;
	}
	.type_check_table .usof-checkbox-text {
		flex-grow: 1;
		}
	.type_check_table input:checked ~ .usof-checkbox-text {
		font-weight: 600;
		}
	.type_check_table .usof-checkbox-size {
		flex-shrink: 0;
		direction: ltr;
		text-align: right;
		position: relative;
		width: 50px;
		color: var(--usof-color-gray-30);
		}
	.type_check_table input:checked ~ .usof-checkbox-size {
		color: var(--usof-color-gray-90);
		}
		.type_check_table .usof-checkbox span:first-child {
			position: absolute;
			top: -26px;
			font-weight: 600;
			}
		.type_check_table .usof-checkbox-size:before {
			position: absolute;
			right: 0;
			top: -30px;
			font-weight: 600;
			color: var(--usof-color-gray-90);
			}
		.type_check_table .usof-checkbox:first-child .usof-checkbox-size.for_js:before {
			content: 'JS';
			}
		.type_check_table .usof-checkbox:first-child .usof-checkbox-size.for_css:before {
			content: 'CSS';
			}
	.type_check_table .usof-checkbox label:after {
		content: '';
		position: absolute;
		bottom: 2px;
		width: 100%;
		border-bottom: 1px solid transparent;
		}
	.type_check_table .usof-checkbox label:hover:after {
		border-color: var(--usof-color-gray-5);
		}
.usof-checkbox-description {
	display: none;
	position: absolute;
	}

/* TYPE Link */
.usof-form-row.type_link .usof-checkbox {
	margin: .3em 0 -0.3em;
	}

MR SKB