gadjo/gadjo/static/css/_forms.scss

@charset "UTF-8";

$button-color: $primary-color;
$button-cancel-color: darken(grayscale($button-color), 10%);
$button-delete-color: #CD2026;
$button-submit-color: #215D9C;

input, select, button, textarea {
	font-size: 100%;
	font-family: $font-family;
}

label {
	margin-bottom: 0;
	font-weight: normal;
}

form div.widget {
	margin-bottom: 2ex;
}

div.errornotice p {
	margin: 1ex 0;
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}

div.error {
	color: black;
	font-weight: normal;
	background: transparent;
	padding-left: 0px;
	margin-left: 2px;
}

div.error::before {
	content: "\f071"; /* fa-exclamation-triangle */
	font-family: FontAwesome;
	padding-right: 1ex;
}

span.required {
	margin-left: 0.7ex;
	position: relative;
	top: -0.2ex;
}

div.widget div.title {
	margin-bottom: 0;
}

div.buttons {
	margin-top: 2em;
}

div.buttons div {
	display: inline-block;

	& input[name="submit"] {
		font-weight: bold;
	}
}

a.button {
	padding-bottom: calc(1ex + 1px);
	line-height: 2.5em;
}

%button {
	padding: 5px 15px;
	cursor: pointer;
	border: 0px solid #aaa;
	@include vendor-prefix('transition', 'all 200ms ease');
	vertical-align: baseline;
	border-radius: 3px;
	font-weight: bold;
	background: white;
	border: 1px solid $button-color;
	color: $button-color;
	&:hover {
		background: $button-color;
		color: white;
		border-color: darken($button-color, 20%);
	}
	&:active { border-color: darken($button-color, 10%); }
	&:focus {
		border-color: darken($button-color, 20%);
	}
	@include vendor-prefix('transition', 'border-color 0.2s ease, box-shadow 0.2s linear');
}

a.button, button, input[type=submit], div.buttons input {
	@extend %button;
}

input[type=submit] {
	height: 2.3rem;
}

a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.buttons .cancel-button button {
	color: $button-cancel-color;
	border-color: $button-cancel-color;
	&:hover {
		background: #eee;
		border-color: darken($button-cancel-color, 20%);
	}
	&:active { border-color: darken($button-cancel-color, 10%); }
}

a.delete-button, button.delete-button, div.buttons .delete-button input, div.buttons .delete-button button {
	color: $button-delete-color;
	border-color: $button-delete-color;
	&:hover {
		background: $button-delete-color;
		color: white;
		border-color: darken($button-delete-color, 20%);
	}
	&:active { border-color: darken($button-delete-color, 10%); }
}

a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button {
	color: $button-submit-color;
	border-color: $button-submit-color;
	&:hover {
		color: white;
		background: $button-submit-color;
		border-color: darken($button-submit-color, 20%);
	}
	&:active { border-color: darken($button-submit-color, 10%); }
}

form.disabled-during-submit {
	// this class is added to forms in w.c.s. when a button is clicked.
	div.buttons {
		cursor: wait;
		button {
			pointer-events: none;
			box-shadow: none;
			opacity: 0.7;
		}
	}
}

div.ui-dialog button.ui-button-disabled,
div#content button:disabled,
input[type=submit]:disabled {
	border-color: #888;
	color: #888;
	background: #f3f3f3;
	pointer-events: none;
	box-shadow: none;
	cursor: not-allowed;
}

input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
	border: 1px solid #AAA;
	border-radius: 0px;
	box-sizing: border-box;
	margin: 0.2em 0px;
	outline: medium none;
	padding: 0.7ex 0.7em;
	max-width: 100%;
	@include vendor-prefix('transition', 'background-size 0.2s ease');
	background: white;
	&:focus {
		border-bottom-color: $button-submit-color;
	}
	&.disabled,
	&[disabled] {
		background: #eee;
	}
}

input[type="text"][name$="_url"], input[type="text"][name$="-url"], input[type="url"] {
	width: 100%;
}

input[type="radio"]:focus, input[type="checkbox"]:focus {
	box-shadow: none;
}

input[readonly], select[readonly], textarea[readonly] {
	border-width: 0 0 1px 0;
}

div.date input[readonly] {
	border-width: 1px;
}

input[type=file] {
	border: none;
	padding-left: 0;
}

input[type="time"], input[type="date"] {
    width: auto !important;
}

select {
	background: white;
	@include vendor-prefix('appearance', 'none');
	padding-right: 4em;
	background-image: url(arrow-down.svg);
	background-position: right 1.3rem center;
	background-repeat: no-repeat;
	background-size: 1rem auto;
}

select[multiple=multiple] {
	background: white;
	padding-right: 0;
}

input[type="checkbox"],
input[type="radio"] {
	margin-right: 1ex;
	margin-bottom: 1ex;
}

div.content label {
	margin-right: 1em;
}

div.widget div.content ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

span.helptext,
div.hint {
	display: block;
	font-size: 80%;
}

form p label {
	display: block;
}

div.a2-block form input,
div.a2-block form select {
	width: 100%;
}

div.a2-block form input[type=radio] {
	width: auto;
}

div.a2-block form input[type=submit] {
	width: auto;
	min-width: 20ex;
}

div.a2-block ul#id_edit-profile-title {
	margin-left: 1em;
	margin-top: -1ex;
	li {
		display: inline-block;
		margin-right: 2em;
	}
	label {
		font-weight: normal;
	}
}

form ul.errorlist {
	padding: 0;
	margin: 2em 0 0 0;
	list-style: none;

	& li::before {
		content: "\f06a";
		font-family: FontAwesome;
		padding-right: 1ex;
	}
}

/* fieldsets */
fieldset.gadjo-foldable legend.gadjo-foldable-widget {
	border-bottom: 1px solid #aaa;
	cursor: pointer;
	display: block;
	font-weight: bold;
	padding: 1ex 0 0;
	width: 100%;
	position: relative;
}
fieldset.gadjo-foldable legend.gadjo-foldable-widget:after {
	content: "▼";
	@include vendor-prefix('transition', 'transform 0.1s ease');
	position: absolute;
	right: 1ex;
}
fieldset.gadjo-foldable.gadjo-folded legend.gadjo-foldable-widget:after {
	transform: rotate(-90deg);
}
fieldset.gadjo-foldable {
	padding: 1ex 0 0 0;
	border: 0;
}
.gadjo-foldable.gadjo-folded > .gadjo-folding {
	display: none;
}

/* form.as_p */

form p {
	margin: 0 0 1em 0;
}

form p label {
	display: block;
}

form p.required label:after {
	padding-left: 1ex;
	content: "*";
	color: red;
}

form p label {
	margin-bottom: 0.3ex;
}

/* form.small */

form.small p input {
	margin-left: 0;
}

form.small p {
	margin-bottom: 0.5em;
}

form.small label {
	width: 200px;
	display: inline-block;
}

form.small a.button,
form.small button {
	margin-left: 205px;
	display: inline-block;
}

form.small button + button,
form.small button + a.button {
	margin-left: 1em;
}

[name$="-clear"] + label {
	display: inline;
}