From 95642a40ca5dddbaf93a565d9a78a554974a3e0e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 21 Mar 2019 13:40:40 +0100 Subject: [PATCH] Extract CSS resets to reusable mixins (#14509) --- assets/stylesheets/_mixins.scss | 216 +++++++++++++++++ packages/edit-post/src/style.scss | 218 +----------------- packages/edit-widgets/src/style.scss | 49 +--- .../src/components/post-title/style.scss | 13 ++ 4 files changed, 233 insertions(+), 263 deletions(-) diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 50bd59d38c3551..75d38e971ef15d 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -343,3 +343,219 @@ animation-duration: 1ms !important; } } + +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +@mixin reset { + box-sizing: border-box; + + *, + *::before, + *::after { + box-sizing: inherit; + } + + select { + font-size: $default-font-size; + color: $dark-gray-500; + } + + .input-control, // Upstream name is `.regular-text`. + input[type="text"], + input[type="search"], + input[type="radio"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="week"], + input[type="password"], + input[type="checkbox"], + input[type="color"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], + select, + textarea { + font-family: $default-font; + padding: 6px 8px; + @include input-style__neutral(); + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + + &:focus { + @include input-style__focus(); + } + } + + input[type="number"] { + padding-left: 4px; + padding-right: 4px; + } + + select { + padding: 2px; + + &:focus { + border-color: $blue-medium-600; + // Windows High Contrast mode will show this outline + outline: 2px solid transparent; + outline-offset: 0; + } + } + + input[type="checkbox"], + input[type="radio"] { + border: $border-width + 1 solid $dark-gray-300; + margin-right: 12px; + transition: none; + + &:focus { + border-color: $dark-gray-300; + box-shadow: 0 0 0 1px $dark-gray-300; + } + + &:checked { + background: theme(toggle); + border-color: theme(toggle); + } + + &:checked:focus { + box-shadow: 0 0 0 2px $dark-gray-500; + } + } + + input[type="checkbox"] { + border-radius: $radius-round-rectangle / 2; + + &:checked::before, + &[aria-checked="mixed"]::before { + margin: -3px -5px; + color: $white; + + @include break-medium() { + margin: -4px 0 0 -5px; + } + } + + &[aria-checked="mixed"] { + background: theme(toggle); + border-color: theme(toggle); + + &::before { + // Inherited from `forms.css`. + // See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132 + content: "\f460"; + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + /* stylelint-disable */ + font: normal 30px/1 dashicons; + /* stylelint-enable */ + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @include break-medium() { + float: none; + font-size: 21px; + } + } + + &:focus { + box-shadow: 0 0 0 2px $dark-gray-500; + } + } + } + + input[type="radio"] { + border-radius: $radius-round; + + &:checked::before { + margin: 3px 0 0 3px; + background-color: $white; + } + } + + // Placeholder colors + input, + textarea { + // Use opacity to work in various editor styles. + &::-webkit-input-placeholder { + color: $dark-opacity-300; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: $dark-opacity-300; + } + + &:-ms-input-placeholder { + color: $dark-opacity-300; + } + + .is-dark-theme & { + &::-webkit-input-placeholder { + color: $light-opacity-300; + } + + &::-moz-placeholder { + opacity: 1; // Necessary because Firefox reduces this from 1. + color: $light-opacity-300; + } + + &:-ms-input-placeholder { + color: $light-opacity-300; + } + } + } +} + +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +@mixin wp-admin-reset( $content-container ) { + background: $white; + + #wpcontent { + padding-left: 0; + } + + #wpbody-content { + padding-bottom: 0; + } + + /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. + Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ + #wpbody-content > div:not(#{ $content-container }):not(#screen-meta) { + display: none; + } + + #wpfooter { + display: none; + } + + .a11y-speak-region { + left: -1px; + top: -1px; + } + + ul#adminmenu a.wp-has-current-submenu::after, + ul#adminmenu > li.current > a.current::after { + border-right-color: $white; + } + + .media-frame select.attachment-filters:last-of-type { + width: auto; + max-width: 100%; + } +} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 4b8b9e39491402..a0703d07b00d0f 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -58,57 +58,13 @@ html.wp-toolbar { } body.block-editor-page { - background: $white; - - #wpcontent { - padding-left: 0; - } - - #wpbody-content { - padding-bottom: 0; - } - - /* We hide legacy notices in Gutenberg, because they were not designed in a way that scaled well. - Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ - #wpbody-content > div:not(.block-editor):not(#screen-meta) { - display: none; - } - - #wpfooter { - display: none; - } - - .a11y-speak-region { - left: -1px; - top: -1px; - } - - ul#adminmenu a.wp-has-current-submenu::after, - ul#adminmenu > li.current > a.current::after { - border-right-color: $white; - } - - .media-frame select.attachment-filters:last-of-type { - width: auto; - max-width: 100%; - } + @include wp-admin-reset( ".block-editor" ); } .block-editor, // The modals are shown outside the .block-editor wrapper, they need these styles .components-modal__frame { - box-sizing: border-box; - - *, - *::before, - *::after { - box-sizing: inherit; - } - - select { - font-size: $default-font-size; - color: $dark-gray-500; - } + @include reset; } .block-editor__container { @@ -146,176 +102,6 @@ body.block-editor-page { } } -// Override core input styles to provide styles consistent with Gutenberg. -// Upstream ticket for redesigned input and styles in general: https://core.trac.wordpress.org/ticket/44749 -// Upstream ticket for redesigned checkbox: https://core.trac.wordpress.org/ticket/35596 -.editor-post-permalink, -.edit-post-sidebar, -.editor-post-publish-panel, -.block-editor-block-list__block, -.components-popover, -.components-modal__content { - .input-control, // Upstream name is `.regular-text`. - input[type="text"], - input[type="search"], - input[type="radio"], - input[type="tel"], - input[type="time"], - input[type="url"], - input[type="week"], - input[type="password"], - input[type="checkbox"], - input[type="color"], - input[type="date"], - input[type="datetime"], - input[type="datetime-local"], - input[type="email"], - input[type="month"], - input[type="number"], - select, - textarea { - font-family: $default-font; - padding: 6px 8px; - @include input-style__neutral(); - - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; - @include break-small { - font-size: $default-font-size; - } - - &:focus { - @include input-style__focus(); - } - } - - input[type="number"] { - padding-left: 4px; - padding-right: 4px; - } - - select { - padding: 2px; - - &:focus { - border-color: $blue-medium-600; - // Windows High Contrast mode will show this outline - outline: 2px solid transparent; - outline-offset: 0; - } - } - - input[type="checkbox"], - input[type="radio"] { - border: $border-width + 1 solid $dark-gray-300; - margin-right: 12px; - transition: none; - - &:focus { - border-color: $dark-gray-300; - box-shadow: 0 0 0 1px $dark-gray-300; - } - - &:checked { - background: theme(toggle); - border-color: theme(toggle); - } - - &:checked:focus { - box-shadow: 0 0 0 2px $dark-gray-500; - } - } - - input[type="checkbox"] { - border-radius: $radius-round-rectangle / 2; - - &:checked::before, - &[aria-checked="mixed"]::before { - margin: -3px -5px; - color: $white; - - @include break-medium() { - margin: -4px 0 0 -5px; - } - } - - &[aria-checked="mixed"] { - background: theme(toggle); - border-color: theme(toggle); - - &::before { - // Inherited from `forms.css`. - // See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132 - content: "\f460"; - float: left; - display: inline-block; - vertical-align: middle; - width: 16px; - /* stylelint-disable */ - font: normal 30px/1 dashicons; - /* stylelint-enable */ - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @include break-medium() { - float: none; - font-size: 21px; - } - } - - &:focus { - box-shadow: 0 0 0 2px $dark-gray-500; - } - } - } - - input[type="radio"] { - border-radius: $radius-round; - - &:checked::before { - margin: 3px 0 0 3px; - background-color: $white; - } - } -} - -// Placeholder colors -.editor-post-title, -.block-editor-block-list__block { - input, - textarea { - // Use opacity to work in various editor styles. - &::-webkit-input-placeholder { - color: $dark-opacity-300; - } - - &::-moz-placeholder { - opacity: 1; // Necessary because Firefox reduces this from 1. - color: $dark-opacity-300; - } - - &:-ms-input-placeholder { - color: $dark-opacity-300; - } - - .is-dark-theme & { - &::-webkit-input-placeholder { - color: $light-opacity-300; - } - - &::-moz-placeholder { - opacity: 1; // Necessary because Firefox reduces this from 1. - color: $light-opacity-300; - } - - &:-ms-input-placeholder { - color: $light-opacity-300; - } - } - } -} - // These are default editor styles in case the theme doesn't provide them. .wp-block { max-width: $content-width; diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 2c013c9a2d5ae7..334a89c65cd622 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -1,4 +1,3 @@ - // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations html.wp-toolbar { @@ -6,57 +5,13 @@ html.wp-toolbar { } body.gutenberg_page_gutenberg-widgets { - background: $white; - - #wpcontent { - padding-left: 0; - } - - #wpbody-content { - padding-bottom: 0; - } - - /* We hide legacy notices in Gutenberg, because they were not designed in a way that scaled well. - Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ - #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) { - display: none; - } - - #wpfooter { - display: none; - } - - .a11y-speak-region { - left: -1px; - top: -1px; - } - - ul#adminmenu a.wp-has-current-submenu::after, - ul#adminmenu > li.current > a.current::after { - border-right-color: $white; - } - - .media-frame select.attachment-filters:last-of-type { - width: auto; - max-width: 100%; - } + @include wp-admin-reset( ".blocks-widgets-container" ); } .blocks-widgets-container, // The modals are shown outside the .blocks-widgets-container wrapper, they need these styles .components-modal__frame { - box-sizing: border-box; - - *, - *::before, - *::after { - box-sizing: inherit; - } - - select { - font-size: $default-font-size; - color: $dark-gray-500; - } + @include reset; } .blocks-widgets-container { diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 2196946168b5d8..885a0a130b6108 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -24,6 +24,7 @@ border: $border-width solid transparent; border-left-width: 0; border-right-width: 0; + border-radius: 0; // Include transparent outline for Windows High Contrast mode. outline: $border-width solid transparent; @@ -49,6 +50,18 @@ &:-ms-input-placeholder { color: $dark-opacity-200; } + + &:focus { + // Stack borders on mobile. + border: $border-width solid transparent; + border-left-width: 0; + border-right-width: 0; + + // Include transparent outline for Windows High Contrast mode. + outline: $border-width solid transparent; + + box-shadow: none; + } } &:not(.is-focus-mode) {