app/assets/stylesheets/alchemy/forms.scss
form {
#main_content > &.alchemy {
max-width: 600px;
padding: 2 * $default-padding;
margin: 2em auto;
}
&.button-with-confirm {
display: inline-block;
margin: 0;
padding: 0;
}
&.edit_page textarea {
height: 67px;
}
.control-label {
@include form-label;
}
.inline-label {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
}
.input {
padding: $default-padding 0;
@include clearfix;
input[type="url"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.select2-container,
.autocomplete_tag_list,
.tinymce_container {
width: $form-right-width;
float: right;
}
.input > select,
.input > .select2-container {
width: 100%;
}
> .autocomplete_tag_list {
.select2-container,
.select2-choices {
width: 100%;
}
}
::-webkit-input-placeholder {
line-height: 16px;
}
select,
.select2-container {
margin: 4px 0;
}
&.boolean {
margin-left: $form-left-width;
label {
width: 100%;
text-align: left;
padding: 0;
margin: $default-margin 0;
float: none;
margin-left: 4px;
}
}
label.checkbox {
display: block;
margin: $default-margin 0;
input {
margin-right: $default-margin;
margin-left: 1px;
}
}
&.language_locale small.error {
@include form-hint(
$background-color: $error_background_color,
$border-color: $error_border_color
);
text-align: left;
}
}
.field_with_errors {
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.select2-choices {
@extend %field-with-error;
}
.select2-choice,
.select2-choices {
border-color: $error_border_color;
color: $error_text_color;
margin-bottom: 4px;
input[type="text"] {
box-shadow: none;
}
}
label {
color: $error_text_color;
}
}
small.error {
color: $error_text_color;
display: block;
margin-left: $form-left-width;
line-height: 1.5em;
clear: both;
text-align: right;
margin-bottom: 0.25em;
}
.input-addon {
width: $form-field-addon-width;
position: absolute;
bottom: 2 * $default-padding;
--select-background-image: none;
select {
width: 100%;
padding: 0;
text-align: center;
}
&.left {
left: 0;
select {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&.right {
left: unset;
right: 0;
select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.second {
left: unset;
right: $form-field-addon-width;
select {
border-right-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
}
.inline-input {
align-items: center;
display: flex;
margin: 0 -1 * $default-margin;
.left-column,
.right-column {
padding: 0 $default-padding;
}
.left-column {
width: $form-right-width;
}
.right-column {
width: $form-left-width;
}
button,
.button,
input[type="url"],
input[type="text"],
input[type="email"],
input[type="submit"],
input[type="password"] {
width: 100%;
}
}
.control_group {
width: $form-right-width;
padding-top: $default-margin;
float: right;
}
.check_boxes .control_group {
padding-top: 0.6em;
}
.input .hint {
@include form-hint;
margin-left: $form-left-width;
a[href] {
color: $very-dark-gray;
text-decoration: underline;
}
}
.submit {
padding: $default-padding 0;
text-align: right;
}
.input-column {
padding: 0 $default-padding;
input[type] {
float: none;
width: 100%;
}
}
.input-row {
display: flex;
.input-column {
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
}
}
.input-column > label {
display: block;
margin-top: $default-margin + 1;
}