diff --git a/client/scss/components/_dismissible.scss b/client/scss/components/_dismissible.scss index cf87208f02..454181ae92 100644 --- a/client/scss/components/_dismissible.scss +++ b/client/scss/components/_dismissible.scss @@ -41,18 +41,18 @@ border: 3px solid transparent; box-sizing: content-box; } +} - &--count { - color: theme('colors.surface-menus'); - text-align: center; - font-size: 0.625rem; - font-weight: theme('fontWeight.bold'); - min-width: theme('spacing.[3.5]'); - height: theme('spacing.[3.5]'); - line-height: theme('lineHeight.tight'); +.w-dismissible-badge--count { + color: theme('colors.surface-menus'); + text-align: center; + font-size: 0.625rem; + font-weight: theme('fontWeight.bold'); + min-width: theme('spacing.[3.5]'); + height: theme('spacing.[3.5]'); + line-height: theme('lineHeight.tight'); - @media (prefers-reduced-motion: no-preference) { - animation: pulse-warning 5s 5; - } + @media (prefers-reduced-motion: no-preference) { + animation: pulse-warning 5s 5; } } diff --git a/client/scss/components/_filters.scss b/client/scss/components/_filters.scss index e2aadab880..cc6dd4e43f 100644 --- a/client/scss/components/_filters.scss +++ b/client/scss/components/_filters.scss @@ -3,23 +3,23 @@ grid-template-columns: 1fr minmax(theme('spacing.48'), theme('spacing.64')); grid-column-gap: theme('spacing.12'); - &__filters { - button[type='submit'] { - display: block; - margin-bottom: theme('spacing.6'); - } + @include media-breakpoint-down(md) { + grid-template-columns: auto; + } +} - input[type='checkbox'] { - display: block; - margin-bottom: theme('spacing.3'); - } +.filterable__filters { + button[type='submit'] { + display: block; + margin-bottom: theme('spacing.6'); + } + + input[type='checkbox'] { + display: block; + margin-bottom: theme('spacing.3'); } @include media-breakpoint-down(md) { - grid-template-columns: auto; - - &__filters { - grid-row: 1; - } + grid-row: 1; } } diff --git a/client/scss/components/_footer.scss b/client/scss/components/_footer.scss index acdeba24be..be29cc4f6e 100644 --- a/client/scss/components/_footer.scss +++ b/client/scss/components/_footer.scss @@ -105,6 +105,8 @@ } @include media-breakpoint-down(xs) { + margin-top: $mobile-nice-padding; + .actions, .preview, &__container, @@ -112,8 +114,6 @@ width: 100%; } - margin-top: $mobile-nice-padding; - .meta { p { white-space: normal; diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss index 97c9e2142b..c58eb723ea 100644 --- a/client/scss/components/_listing.scss +++ b/client/scss/components/_listing.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-max-combinators */ // General listings, like for pages, images or snippets ul.listing { @include unlist(); diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss index 4b5edbd2a4..dc8e9ffcd5 100644 --- a/client/scss/components/_preview-panel.scss +++ b/client/scss/components/_preview-panel.scss @@ -1,8 +1,4 @@ .preview-panel { - height: 100%; - display: flex; - flex-direction: column; - --w-preview-background-color: var(--w-color-white); --preview-width-ratio: min( 1, @@ -10,6 +6,10 @@ ); --preview-iframe-width: calc(1px * var(--preview-device-width, 375)); + height: 100%; + display: flex; + flex-direction: column; + &__area { height: 100%; display: flex; diff --git a/client/scss/components/_tabs.scss b/client/scss/components/_tabs.scss index 0a9ac5b062..21992a09a6 100644 --- a/client/scss/components/_tabs.scss +++ b/client/scss/components/_tabs.scss @@ -65,6 +65,7 @@ } // Optional animate attr for tabs to animate in + /* stylelint-disable-next-line selector-attribute-name-disallowed-list */ &[data-tabs-animate] &__panel { @apply motion-reduce:w-transition-none w-transition w-duration-150 w-translate-y-1 w-opacity-0; diff --git a/client/scss/components/forms/_error-message.scss b/client/scss/components/forms/_error-message.scss index b0a12a826d..775439e798 100644 --- a/client/scss/components/forms/_error-message.scss +++ b/client/scss/components/forms/_error-message.scss @@ -7,10 +7,6 @@ font-weight: bold; color: theme('colors.text-error'); - @media (forced-colors: active) { - forced-color-adjust: none; - } - &::before { content: ''; display: inline-block; diff --git a/client/scss/layouts/_report.scss b/client/scss/layouts/_report.scss index f98953eb86..cbe732fc62 100644 --- a/client/scss/layouts/_report.scss +++ b/client/scss/layouts/_report.scss @@ -1,9 +1,8 @@ .report { + @include nice-margin(); display: grid; grid-column-gap: theme('spacing.12'); - @include nice-margin(); - &__results { &--text { margin: 0 theme('spacing.[1.5]') theme('spacing.[1.5]') 0; diff --git a/client/scss/overrides/_vendor.datetimepicker.scss b/client/scss/overrides/_vendor.datetimepicker.scss index 2c87b6bac9..1d0850ec12 100644 --- a/client/scss/overrides/_vendor.datetimepicker.scss +++ b/client/scss/overrides/_vendor.datetimepicker.scss @@ -159,7 +159,6 @@ padding-inline-start: 0.6em; padding-inline-end: 0.6em; - // stylelint-disable-next-line max-nesting-depth &:first-child { border-top-width: 0; } @@ -208,7 +207,6 @@ > div > .xdsoft_option:hover { background: theme('colors.text-highlight'); - // stylelint-disable-next-line max-nesting-depth @media (forced-colors: active) { background: SelectedItem; } @@ -280,20 +278,20 @@ .xdsoft_calendar td.xdsoft_other_month, .xdsoft_calendar td.xdsoft_disabled, .xdsoft_time_box > div > div.xdsoft_disabled { - opacity: 0.5; + opacity: 50%; background: theme('colors.border-furniture'); @media (forced-colors: active) { - opacity: 1; + opacity: 100%; color: GrayText; } } .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { - opacity: 0.2; + opacity: 20%; @media (forced-colors: active) { - opacity: 1; + opacity: 100%; color: GrayText; } } diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss index 584d7ede67..161699a81e 100644 --- a/client/src/components/CommentApp/components/CommentHeader/style.scss +++ b/client/src/components/CommentApp/components/CommentHeader/style.scss @@ -40,12 +40,7 @@ > button, > details > summary { - // Hides triangle on Firefox - list-style-type: none; - // Hides triangle on Chrome - &::-webkit-details-marker { - display: none; - } + list-style-type: none; // Hides triangle on Firefox width: 30px; height: 30px; position: relative; @@ -53,6 +48,10 @@ border: unset; padding: 0; + &::-webkit-details-marker { + display: none; // Hides triangle on Chrome + } + svg { position: absolute; top: 7.5px; diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss index 40e9be22cd..1428450c15 100644 --- a/client/src/components/Draftail/Draftail.scss +++ b/client/src/components/Draftail/Draftail.scss @@ -77,10 +77,10 @@ $draftail-editor-font-family: $font-sans; } .Draftail-Editor { - @include input-base(); // Number used inside a `calc` function, which doesn’t support unitless zero. // stylelint-disable-next-line length-zero-no-unit --draftail-offset-inline-start: 0px; + @include input-base(); &--focus { outline: $focus-outline-width solid theme('colors.focus'); diff --git a/client/src/components/PageExplorer/PageExplorer.scss b/client/src/components/PageExplorer/PageExplorer.scss index ff5c497bf9..4031d2aedf 100644 --- a/client/src/components/PageExplorer/PageExplorer.scss +++ b/client/src/components/PageExplorer/PageExplorer.scss @@ -85,8 +85,8 @@ $explorer-header-horizontal-padding: 10px; } .c-page-explorer__header__select { - @apply w-text-text-label-menus-default w-bg-surface-menus; $margin: 10px; + @apply w-text-text-label-menus-default w-bg-surface-menus; margin-inline-end: $margin; > select { diff --git a/client/src/components/Sidebar/SidebarPanel.scss b/client/src/components/Sidebar/SidebarPanel.scss index c5e97ca9a5..7db944d1c0 100644 --- a/client/src/components/Sidebar/SidebarPanel.scss +++ b/client/src/components/Sidebar/SidebarPanel.scss @@ -1,7 +1,7 @@ .sidebar-panel { - @apply w-transition-sidebar; // With CSS variable allows panels with different widths to animate properly --width: #{$menu-width}; + @apply w-transition-sidebar; visibility: hidden; transform: translateX(calc(var(--w-direction-factor) * -100%)); diff --git a/client/src/components/Sidebar/menu/SubMenuItem.scss b/client/src/components/Sidebar/menu/SubMenuItem.scss index aefb76bb42..530914ef7a 100644 --- a/client/src/components/Sidebar/menu/SubMenuItem.scss +++ b/client/src/components/Sidebar/menu/SubMenuItem.scss @@ -1,16 +1,16 @@ .sidebar-sub-menu-trigger-icon { $root: &; - display: block; - width: 1rem; - height: 1rem; - inset-inline-end: 15px; - margin-inline-start: auto; @include transition( transform $menu-transition-duration ease, width $menu-transition-duration ease, height $menu-transition-duration ease ); + display: block; + width: 1rem; + height: 1rem; + inset-inline-end: 15px; + margin-inline-start: auto; &--open { transform-origin: 50% 50%; @@ -40,9 +40,8 @@ } ul > li { - position: relative; - @include transition(border-color $menu-transition-duration ease); + position: relative; } > ul { diff --git a/client/src/components/Sidebar/modules/MainMenu.scss b/client/src/components/Sidebar/modules/MainMenu.scss index 148349b8ce..44e3428a85 100644 --- a/client/src/components/Sidebar/modules/MainMenu.scss +++ b/client/src/components/Sidebar/modules/MainMenu.scss @@ -1,4 +1,3 @@ -// stylelint-disable declaration-no-important .sidebar-main-menu { overflow: auto; overflow-x: hidden; @@ -23,16 +22,18 @@ > ul > li > a { // Need !important to override body.ready class + // stylelint-disable-next-line declaration-no-important transition: padding $menu-transition-duration ease !important; + } - .menuitem-label { - transition: opacity $menu-transition-duration ease; - } + .menuitem-label { + transition: opacity $menu-transition-duration ease; } } .sidebar-footer { @apply w-bg-surface-menus w-mt-auto; + // stylelint-disable-next-line declaration-no-important transition: width $menu-transition-duration ease !important; // Override body.ready > ul, diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss index 119a58aead..a071a99350 100644 --- a/client/src/components/Sidebar/modules/WagtailBranding.scss +++ b/client/src/components/Sidebar/modules/WagtailBranding.scss @@ -1,4 +1,5 @@ -// stylelint-disable declaration-no-important +/* stylelint-disable declaration-no-important, selector-attribute-name-disallowed-list */ + $logo-size: 110px; // Wagging animation diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss index 4b74a1d671..2aee8c98d7 100644 --- a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss +++ b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss @@ -2,12 +2,6 @@ @import '../../../../../../client/scss/tools'; .typed-table-block { - &__wrapper { - overflow-x: auto; - // Reserve space for the add column menu. - min-height: 20rem; - } - // Layout is handled by the table markup. .w-field__wrapper { margin-bottom: 0; @@ -105,3 +99,9 @@ padding-inline-start: theme('spacing.9'); } } + +.typed-table-block__wrapper { + overflow-x: auto; + // Reserve space for the add column menu. + min-height: 20rem; +}