You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
3.0 KiB
220 lines
3.0 KiB
// Unified Form wrapper
|
|
form { @include naked(); }
|
|
|
|
.Box.errors {
|
|
.list {
|
|
color: crimson;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lead {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.Row {
|
|
vertical-align: middle;
|
|
margin: 12px auto;
|
|
text-align: left;
|
|
line-height: 1.35em;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.SubRow {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
@include media($phone) {
|
|
flex-direction: column;
|
|
margin: 6px auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.v {
|
|
display: block;
|
|
}
|
|
|
|
.aside {
|
|
float: right;
|
|
margin-left: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
@include media($phone) {
|
|
margin: 0; float: none;
|
|
}
|
|
}
|
|
|
|
.spacer {
|
|
width: $form-label-w;
|
|
|
|
@include media($phone) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// buttons2 is the same style, but different selector for use in the admin page
|
|
&.buttons, &.buttons2 {
|
|
margin: 16px auto;
|
|
input, .button {
|
|
margin-right: dist(-1);
|
|
}
|
|
}
|
|
|
|
&.buttons2 {
|
|
display:block;
|
|
}
|
|
|
|
&.centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
&.message {
|
|
font-size: 1em;
|
|
//margin-left: $label-gap + $w-labels;
|
|
text-shadow: 1px 1px 3px black;
|
|
text-align: center;
|
|
|
|
&.error {
|
|
color: crimson;
|
|
}
|
|
|
|
&.ok {
|
|
color: #0fe851;
|
|
}
|
|
}
|
|
|
|
&.separator {
|
|
padding-top: 14px;
|
|
border-top: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
textarea {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
min-height: 10rem;
|
|
flex-grow: 1;
|
|
|
|
resize: vertical;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
color: $c-form-label-fg;
|
|
display: inline-block;
|
|
width: $form-label-w;
|
|
text-align: right;
|
|
text-shadow: 1px 1px 3px black;
|
|
|
|
padding: $form-label-gap;
|
|
align-self: flex-start;
|
|
|
|
@include noselect;
|
|
@include nowrap;
|
|
}
|
|
|
|
label.error {
|
|
color: crimson;
|
|
}
|
|
|
|
//.checkbox-wrap {
|
|
// display: inline-block;
|
|
// width: $form-label-w;
|
|
// padding: $form-label-gap;
|
|
// text-align: right;
|
|
// align-self: flex-start;
|
|
//
|
|
// input[type=checkbox] {
|
|
// margin: auto;
|
|
// width: auto;
|
|
// height: auto;
|
|
// }
|
|
//
|
|
// & + label {
|
|
// width: $form-field-w;
|
|
// padding-left: 0;
|
|
// text-align: left;
|
|
// cursor: pointer;
|
|
// }
|
|
//}
|
|
|
|
input[type="range"] {
|
|
width: 200px;
|
|
}
|
|
|
|
// special phone style
|
|
@include media($phone) {
|
|
flex-direction: column;
|
|
margin: 6px auto;
|
|
|
|
&.buttons, &.centered, &.checkbox {
|
|
flex-direction: row;
|
|
}
|
|
|
|
&.buttons {
|
|
justify-content: center;
|
|
|
|
// remove margin on lats button
|
|
:last-child {
|
|
margin-right:0;
|
|
}
|
|
}
|
|
|
|
label {
|
|
padding-left: 0;
|
|
text-align: left;
|
|
width: auto;
|
|
}
|
|
|
|
.checkbox-wrap {
|
|
order: 1;
|
|
text-align: left;
|
|
padding-bottom: 0;
|
|
|
|
border-radius: .4px;
|
|
width: auto;
|
|
|
|
& + label {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
#{$all-text-inputs}, input[type="range"], textarea, select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// red asterisk
|
|
form span.required {
|
|
color: red;
|
|
}
|
|
|
|
.RadioGroup {
|
|
display: inline-block;
|
|
line-height: 1.5em;
|
|
vertical-align: middle;
|
|
|
|
label {
|
|
width: auto;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
vertical-align: middle;
|
|
margin: 0 0 0 5px;
|
|
}
|
|
}
|
|
|