publik-base-theme/static/eurelien-cd28-2022/_widgets.scss

// global placeholders & classes
%button {
	padding: $space-medium $space-xlarge;
	box-shadow: none;
	text-transform: uppercase;
	font-weight: $font-weight-5;
	background: $yellow-4;
	transition: 0s;

	&:hover, &:focus{
		font-weight: $font-weight-7;
	}

	&:hover {
		box-shadow: none;
		border-color: $yellow-3;
		text-decoration: underline;
	}

	&:focus {
		background: $yellow-3;
		border-color: $yellow-5;
	}

	&:disabled {
		border-color: transparent;
		background: $gray-2;
		font-weight: $font-weight-5;
		color: $gray-5;
		text-decoration: none;
	}
}

.cd28-button-secondary {
	@extend %button;

	outline: 1px solid $black;
	background: transparent;

	&:hover {
		background: $gray-2;
		border-color: $gray-3;
	}

	&:focus {
		background: $gray-3;
		border-color: $gray-2;
		color: $black;
	}
}

.cd28-button-secondary-dark {
	@extend %button;

	outline: 1px solid white;
	background: $black;
	color: white;

	&:hover, &:focus {
		outline: none;
		color: white;
	}

	&:hover {
		background: $gray-10;
		border-color: $gray-8;
	}

	&:focus {
		background: $gray-8;
		border-color: $gray-10;
	}
}

input,
textarea,
div.file-button,
.select2-selection,
select {
	// use outline to avoid widget being resized when border grows
	margin: $border-width-3;
	outline-color: $gray-5;
	outline-style: solid;
	outline-width: $border-width-0;

	&:hover, &:focus {
		outline-color: $gray-8;
	}

	&:hover {
		outline-width: $border-width-1;
	}

	&:focus {
		outline-width: $border-width-3;
	}

	&[readonly] {
		&, &:hover {
			border-radius: $widget-border-radius;
			outline-width: $border-width-0;
			outline-color: $gray-5;
			background: $gray-2;
			color: $gray-5;
		}
	}
}

$check-widget-size: 1rem;
$check-widget-border-width: $border-width-1;

input[type=radio],
input[type=checkbox] {
	@include vendor-prefix('appearance', 'none');

	position: relative;
	width: $check-widget-size;
	height: $check-widget-size;
	margin: 0 $space-small 0 0;

	outline: none;
	border: $check-widget-border-width solid $gray-5;
	padding: 0;

	transition: 0s;

	&:focus {
		outline: none;
		border: $check-widget-border-width solid $yellow-4;
	}

	&:checked {
		border-color: $yellow-4;
	}
}

input[type=checkbox] {
	border-radius: 0;

	&:checked {
		background: $yellow-4;

		&::after {
			position: absolute;
			top: -#{$check-widget-border-width};
			left: -#{$check-widget-border-width};

			content: "\eb7b"; // check-line
			font-size: 1rem;
			font-family: "RemixIcon";
		}
	}

	.widget-readonly & { // read-only checkbox are not set read-only in WCS ?
		border-color: $gray-5;
		background: $gray-2;

		&:checked {
			background: $gray-5;

			&::after {
				color: white;
			}
		}
	}
}

input[type=radio] {
	&:checked {
		&::after {
			position: absolute;
			top: calc(50% - #{$check-widget-size} / 4);
			left: calc(50% - #{$check-widget-size} / 4);
			width: calc(#{$check-widget-size} / 2);
			height: calc(#{$check-widget-size} / 2);
			border-radius: 100%;
			background: $yellow-4;
			content: "";
		}
	}

	&[readonly] {
		border-color: $gray-5;
		background: $gray-2;

		&::after {
			background: $gray-5;
		}
	}
}

div.CheckboxWidget:not(.widget-readonly),
div.RadiobuttonsWidget:not(.widget-readonly) .content label {
	color: $gray-8;
	&:focus-within, &:hover {
		font-weight: $font-weight-7;
	}

	&:hover {
		text-decoration: underline;
	}
}

div.CheckboxWidget.widget-readonly,
div.RadiobuttonsWidget.widget-readonly .content label {
	color: $gray-5;
}

div.RadiobuttonsWidget .content label {
	display: flex;
	align-items: center;
}

.select2-container {
	&--open {
		.select2-selection {
			&--single, &--multiple {
				border-radius: $widget-border-radius !important;
			}
		}
	}

	.select2-dropdown {
		box-shadow: $shadow-8;

		&--below, &--above {
			border-radius: $widget-border-radius 0 0 $widget-border-radius;
		}

		&--below {
			top: $space-xsmall !important;
		}
	}

	.select2-results {
		&__options {
			border-radius: $widget-border-radius 0 0 $widget-border-radius;
		}

		&__option{
			&--highlighted[aria-selected] {
				font-weight: 700;
				background: $gray-1;
				color: $gray-8;
				text-decoration: underline;
			}
		}
	}
}

.widget .title .required {
	color: $alert-2;
}

span.helptext, div.hint {
	font-size: $font-size-0;
}

.errornotice, .warningnotice, .successnotice, .infonotice {
	padding: $space-large;
	border-width: 0 0 0 44px;
	border-radius: $border-radius;

	&::before {
		top: calc(50% - #{$notification-icon-size} / 2);
		left: -42px;
		content: "\ee59"; // information-line
		font-family: "RemixIcon";
	}
}

.errornotice {
	background: $alert-1;
}

.warningnotice {
	background: $warning-1;
}

.successnotice {
	background: $success-1;
}

.infonotice {
	background: $information-1;
}