kopia lustrzana https://github.com/wagtail/wagtail
82 wiersze
2.2 KiB
SCSS
82 wiersze
2.2 KiB
SCSS
@use 'sass:map';
|
||
|
||
/**
|
||
* The field component handles form fields’ layout and ancillary elements such as error messages and help text.
|
||
* It doesn’t handle the style of the widgets, which are implemented independently for each widget type.
|
||
*
|
||
* Take special care when changing the field component: it can be used in forms but also in filters, headers, and any
|
||
* other arbitrary part of the UI. It has to be very flexible to accommodate for all those use cases.
|
||
*/
|
||
|
||
.w-field {
|
||
position: relative;
|
||
}
|
||
|
||
.w-field__errors {
|
||
.error-message {
|
||
@apply w-label-2;
|
||
color: theme('colors.critical.200');
|
||
display: inline-block;
|
||
margin: 0;
|
||
margin-bottom: theme('spacing.[2.5]');
|
||
}
|
||
}
|
||
|
||
.w-field__errors-icon {
|
||
// Position and size the icon according to the text size.
|
||
position: relative;
|
||
top: 0.125em;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin-inline-end: 0.625rem;
|
||
color: theme('colors.critical.200');
|
||
|
||
// Avoid displaying the error message icon if we already have an icon.
|
||
+ .error-message::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.w-field__label {
|
||
@apply w-label-3;
|
||
display: block;
|
||
margin-bottom: theme('spacing.3');
|
||
}
|
||
|
||
.w-field__wrapper {
|
||
@include max-form-width();
|
||
// This is primarily helpful to add margins between fields, but fields can often
|
||
// be wrapped into groups (for example a row), so it’s safer to add a margin regardless
|
||
// of what the next element is.
|
||
margin-bottom: theme('spacing.5');
|
||
|
||
// Inside of listing tables we don't need the bottom margin because the table row will handle it.
|
||
table.listing td & {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.w-field__input {
|
||
position: relative;
|
||
// This padding gives room for widgets such as comments beside of inputs
|
||
padding-inline-end: calc($comment-button-size + $comment-button-space);
|
||
}
|
||
|
||
.w-field__icon {
|
||
$size: theme('spacing.4');
|
||
$offset: calc($text-input-height / 2 - $size / 2);
|
||
width: $size;
|
||
height: $size;
|
||
color: theme('colors.primary.DEFAULT');
|
||
position: absolute;
|
||
// Top padding of text input and half of text size.
|
||
top: $offset;
|
||
inset-inline-start: $offset;
|
||
pointer-events: none;
|
||
|
||
+ input {
|
||
// Allows for a nice square around the icon.
|
||
padding-inline-start: $text-input-height;
|
||
}
|
||
}
|