app/webpacker/css/admin_v3/shared/forms.scss
$text-inputs: "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel]";
#{$text-inputs},
input[type="date"],
input[type="datetime"],
input[type="time"],
input[type="number"] {
height: $btn-relaxed-height;
}
#{$text-inputs},
input[type="date"],
input[type="datetime"],
input[type="time"],
input[type="number"],
textarea {
@include border-radius($border-radius);
padding: ($vpadding-txt - 1px) ($hpadding-txt - 1px); // Minus 1px for border
border: 1px solid $color-txt-brd;
color: $color-txt-text;
background-color: $color-txt-bg;
font-size: 14px;
line-height: 22px;
// Appears just like other text on the page.
// See table.products tr:hover for example of revealing them
.naked_inputs & {
background-color: inherit;
height: auto;
font-size: inherit;
font-weight: inherit;
border-color: transparent;
}
&:focus {
outline: none;
border-color: $color-txt-hover-brd;
}
&[disabled] {
color: $color-txt-disabled-text;
border-color: $color-txt-disabled-brd;
}
&.changed {
border-color: $color-txt-changed-brd;
}
}
input[type="checkbox"] {
width: 1em;
height: 1em;
margin-right: 3px;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
accent-color: $color-checkbox-fill;
}
textarea {
line-height: 19px;
}
.fullwidth {
width: 100%;
}
label {
display: inline-block;
font-weight: 600;
font-size: 85%;
margin-bottom: 5px;
color: $near-black;
}
.label-block label {
display: block;
}
span.info {
font-style: italic;
font-size: 85%;
color: lighten($color-body-text, 15);
display: block;
line-height: 20px;
margin: 5px 0;
}
.field {
padding: 10px 0;
&.checkbox {
label {
cursor: pointer;
display: block;
font-size: inherit;
font-weight: normal;
margin-bottom: 0;
}
}
ul {
border-top: 1px solid $color-border;
list-style: none;
padding-top: 5px;
li {
display: inline-block;
padding-right: 10px;
label {
font-weight: normal;
text-transform: none;
}
&.white-space-nowrap {
white-space: nowrap;
}
}
}
// Errors
.field_with_errors {
label {
color: $color-error;
}
input {
border-color: $color-error;
}
}
// Inline error message
.formError {
display: inline-block;
color: $color-error;
font-size: 85%;
// Icon on left, with subsequent lines indented
text-indent: -0.6em;
margin-left: 1.2em;
@extend .icon-remove-sign;
@extend [class^="icon-"];
&:before {
margin-right: 0.3em;
}
}
}
fieldset {
box-shadow: none;
box-sizing: border-box;
border-color: $color-border;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin-left: 0;
margin-right: 0;
position: relative;
margin-bottom: 35px;
padding: 10px 0 15px 0;
background-color: transparent;
border-left: none;
border-right: none;
border-radius: 0;
&.no-border-bottom {
border-bottom: none;
margin-bottom: 0;
}
&.no-border-top {
border-top: none;
padding-top: 0;
}
legend {
background-color: $color-1;
color: $red;
font-size: 14px;
font-weight: 600;
text-align: center;
padding: 8px 15px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
i {
color: $color-link;
}
}
label {
color: lighten($color-body-text, 8);
}
.filter-actions {
margin-bottom: -32px;
margin-top: 15px;
text-align: center;
form {
display: inline-block;
}
button,
.button,
input[type="submit"],
input[type="button"],
span.or {
@include border-radius($border-radius);
-webkit-box-shadow: 0 0 0 15px $color-1;
-moz-box-shadow: 0 0 0 15px $color-1;
-ms-box-shadow: 0 0 0 15px $color-1;
-o-box-shadow: 0 0 0 15px $color-1;
box-shadow: 0 0 0 15px $color-1;
&:hover {
border-color: $color-1;
}
&:first-of-type {
margin-right: 1.25em;
}
}
span.or {
background-color: $color-1;
border-width: 5px;
margin-left: 5px;
margin-right: 5px;
position: relative;
-webkit-box-shadow: 0 0 0 5px $color-1;
-moz-box-shadow: 0 0 0 5px $color-1;
-ms-box-shadow: 0 0 0 5px $color-1;
-o-box-shadow: 0 0 0 5px $color-1;
box-shadow: 0 0 0 5px $color-1;
}
}
&.labels-inline {
.field {
margin-bottom: 0;
display: table;
width: 100%;
label,
input {
display: table-cell !important;
}
input {
width: 100%;
}
&.checkbox {
input {
width: auto !important;
}
}
}
.actions {
padding: 0;
text-align: right;
}
}
}
.form-actions {
box-shadow: $box-shadow;
background-color: $fair-pink;
border: none;
border-left: $border-radius solid $red;
border-radius: $border-radius;
margin: 0.5em 0;
padding: 0;
.status {
font-size: 1rem;
font-weight: bold;
padding: 0.75em 1em;
}
.form-buttons {
padding: 0.5em 1em;
text-align: right;
}
}
.form-buttons {
text-align: center;
}
.modified_summary {
font-size: inherit;
}
.error_summary {
font-size: inherit;
@extend .icon-remove-sign;
&:before {
font-family: FontAwesome;
color: $color-error;
}
}
select {
@extend input, [type="text"];
background-color: white;
}
.inline-checkbox {
display: inline-flex;
align-items: center;
margin-top: 3px;
input,
label {
cursor: pointer;
}
label {
margin: 0;
padding-left: 0.4rem;
}
}