mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
51 lines
1.3 KiB
SCSS
51 lines
1.3 KiB
SCSS
// Styles for title fields throughout the page.
|
||
// The `title` class is meant to be applied by end users throughout different forms APIs.
|
||
.w-panel.title,
|
||
.w-field.title {
|
||
input,
|
||
textarea,
|
||
.Draftail-Editor .public-DraftEditor-content {
|
||
@apply w-h2;
|
||
color: theme('colors.text-context');
|
||
}
|
||
}
|
||
|
||
// Styles for the title field when at the top of the page.
|
||
// It’s the first panel when comments are disabled, second if enabled.
|
||
.w-panel.title:nth-child(1),
|
||
.w-panel.title:nth-child(2) {
|
||
.w-panel__header {
|
||
@apply w-sr-only;
|
||
|
||
.w-panel__anchor,
|
||
.w-panel__toggle {
|
||
@apply w-hidden;
|
||
}
|
||
}
|
||
|
||
.w-field {
|
||
display: grid;
|
||
}
|
||
|
||
// Force the help text after the field as the field also visually acts as page heading.
|
||
.w-field__help {
|
||
order: 2;
|
||
}
|
||
|
||
input,
|
||
textarea,
|
||
.Draftail-Editor .public-DraftEditor-content {
|
||
@apply w-h1;
|
||
color: theme('colors.text-context');
|
||
// Slightly out-dented so the field’s is horizontally aligned.
|
||
padding-inline-start: theme('spacing[1.5]');
|
||
margin-inline-start: calc(-1 * theme('spacing[1.5]'));
|
||
|
||
// Avoid calling attention to the field _unless_ it’s in one of those states.
|
||
&:not(:hover, :focus, :placeholder-shown, [aria-invalid='true']) {
|
||
// Hide w/ transparency to preserve border size and show it in forced-colors mode.
|
||
border-color: transparent;
|
||
}
|
||
}
|
||
}
|