181 lines
3.7 KiB
SCSS
181 lines
3.7 KiB
SCSS
.simple_form {
|
|
.fields-row {
|
|
padding-top: 8px;
|
|
margin: 0 0 16px;
|
|
|
|
&__column { padding: 0 8px }
|
|
}
|
|
|
|
.fields-group {
|
|
padding: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.input {
|
|
margin-bottom: 16px;
|
|
|
|
&.with_label .label_input>label,
|
|
&.with_block_label>label,
|
|
&.with_floating_label .label_input>label { color: $ui-text-color }
|
|
|
|
&.with_block_label .hint { margin-bottom: 16px }
|
|
|
|
&.boolean {
|
|
.recommended { margin: 0 8px }
|
|
|
|
.label_input>label { padding-top: 3px }
|
|
}
|
|
|
|
&.radio_buttons .radio {
|
|
margin-bottom: 16px;
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
color: $ui-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label_input {
|
|
&__wrapper {
|
|
border-radius: $card-radius;
|
|
|
|
&:hover { background: $dropdown-field-bg-hover-color }
|
|
|
|
&:active,
|
|
&:focus { background: $dropdown-field-bg-active-color }
|
|
}
|
|
|
|
&__append {
|
|
padding: 16px;
|
|
color: $ui-text-color;
|
|
|
|
&::after { background-image: none }
|
|
}
|
|
}
|
|
|
|
.card { margin-bottom: 16px }
|
|
|
|
.row .input { padding: 0 4px }
|
|
|
|
.hint {
|
|
color: $ui-text-color;
|
|
|
|
code {
|
|
border-radius: 2px;
|
|
background: $contained-chip-color;
|
|
color: $ui-text-color;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
padding: 16px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.check_boxes .checkbox label {
|
|
color: $primary-text-color;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
p.hint {
|
|
padding: 16px;
|
|
margin-bottom: 0;
|
|
color: $ui-text-color;
|
|
|
|
&.subtle-hint { margin-top: 16px }
|
|
}
|
|
|
|
select {
|
|
color: $ui-text-color;
|
|
background-color: $dropdown-field-bg-color;
|
|
border: none;
|
|
border-radius: $menu-radius $menu-radius 0 0;
|
|
padding-left: 16px;
|
|
padding-right: 40px;
|
|
height: 40px;
|
|
|
|
option {
|
|
color: $menu-text-color;
|
|
background-color: $menu-bg-color;
|
|
}
|
|
|
|
&:hover { background-color: $dropdown-field-bg-hover-color }
|
|
|
|
&:active,
|
|
&:focus { background-color: $dropdown-field-bg-active-color }
|
|
}
|
|
|
|
h4 { margin-bottom: 0 !important }
|
|
|
|
input[type=email],
|
|
input[type=number],
|
|
input[type=password],
|
|
input[type=text],
|
|
input[type=url],
|
|
textarea {
|
|
@include text-area-border($other-text-area-border);
|
|
padding: 16px;
|
|
|
|
&:active,
|
|
&:focus {
|
|
background: $text-field-bg-color;
|
|
padding: 16px 16px 15px;
|
|
}
|
|
|
|
&::placeholder { color: $tips-text-color }
|
|
}
|
|
|
|
input[type=email],
|
|
input[type=number],
|
|
input[type=password],
|
|
input[type=text] {
|
|
&:focus:invalid:not(:placeholder-shown),
|
|
&:required:invalid:not(:placeholder-shown) { border-color: $error-color }
|
|
}
|
|
}
|
|
|
|
.flash-message {
|
|
@include shadow-1dp;
|
|
background: $card-bg-color;
|
|
color: $ui-text-color;
|
|
border-radius: $card-radius;
|
|
padding: 16px;
|
|
margin: 0 16px 32px;
|
|
|
|
a {
|
|
color: $link-text-color;
|
|
|
|
&:hover { color: $link-text-color }
|
|
}
|
|
|
|
&.translation-prompt { color: $ui-text-color }
|
|
|
|
&.notice {
|
|
border: none;
|
|
background: $succeeded-card-bg-color;
|
|
color: $verified-color;
|
|
}
|
|
}
|
|
|
|
.form-footer a { color: $ui-text-color }
|
|
|
|
.follow-prompt,
|
|
.oauth-prompt {
|
|
margin-bottom: 32px;
|
|
color: $ui-text-color;
|
|
|
|
strong { color: $primary-text-color }
|
|
}
|
|
|
|
.input-copy {
|
|
background: $bg-color;
|
|
padding-right: 8px;
|
|
border: 0;
|
|
}
|
|
|
|
input {
|
|
&#account_header.file.optional,
|
|
&#account_avatar.file.optional,
|
|
&#import_data.file.optional { color: $ui-text-color }
|
|
} |