diff --git a/.stylelintignore b/.stylelintignore index 20d61573efa1f..7a13fe68e4576 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -11,6 +11,7 @@ # Ignore CSS copied in from elsewhere projects/js-packages/components/components/boost-score-graph/style-uplot.scss +projects/packages/jetpack-mu-wpcom/src/features/custom-css/custom-css/css/blank.css projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks projects/plugins/crm/css/lib projects/plugins/crm/css/semantic-ui diff --git a/projects/js-packages/ai-client/changelog/fix-stylelint-round_x_of_cleanup b/projects/js-packages/ai-client/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/js-packages/ai-client/src/components/message/style.scss b/projects/js-packages/ai-client/src/components/message/style.scss index ded7c9e3e6519..7e962cb4bbd87 100644 --- a/projects/js-packages/ai-client/src/components/message/style.scss +++ b/projects/js-packages/ai-client/src/components/message/style.scss @@ -18,6 +18,7 @@ .jetpack-ai-assistant__message-content { flex-grow: 2; margin: 0 8px; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.4em; display: flex; gap: 4px; diff --git a/projects/js-packages/components/changelog/fix-stylelint-round_x_of_cleanup b/projects/js-packages/components/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/js-packages/components/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss index 095d024967edc..8ba11761d0f92 100644 --- a/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss +++ b/projects/js-packages/components/components/boost-score-graph/style-tooltip.scss @@ -43,6 +43,7 @@ $white: #fff; &__date { font-size: 1em; font-weight: 600; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.6em; } @@ -69,4 +70,4 @@ $white: #fff; left: 50%; transform: translateX(-50%); } -} \ No newline at end of file +} diff --git a/projects/js-packages/components/components/dot-pager/style.scss b/projects/js-packages/components/components/dot-pager/style.scss index 399f85627eff6..a204e2bd6aa16 100644 --- a/projects/js-packages/components/components/dot-pager/style.scss +++ b/projects/js-packages/components/components/dot-pager/style.scss @@ -50,6 +50,11 @@ .dot-pager__control-choose-page { cursor: pointer; + border-radius: 50%; + width: 6px; + height: 6px; + padding: 0; + background-color: var(--jp-white-off); &:disabled { cursor: default; @@ -58,14 +63,6 @@ &:focus-visible { box-shadow: 0 0 0 2px var(--jp-gray-90); } -} - -.dot-pager__control-choose-page { - border-radius: 50%; - width: 6px; - height: 6px; - padding: 0; - background-color: var(--jp-white-off); &:hover { background-color: var(--jp-gray-20); @@ -76,9 +73,6 @@ } } -.dot-pager { - - &__button { - margin-right: 10px; - } +.dot-pager__button { + margin-right: 10px; } diff --git a/projects/js-packages/components/components/icon-tooltip/style.scss b/projects/js-packages/components/components/icon-tooltip/style.scss index 7d282a06b7862..6dae76669a986 100644 --- a/projects/js-packages/components/components/icon-tooltip/style.scss +++ b/projects/js-packages/components/components/icon-tooltip/style.scss @@ -9,6 +9,14 @@ $arrow-color: var( --jp-gray ); // Namespace to avoid overriding global styles .icon-tooltip-helper { + // POPOVER_HELPER_WIDTH + width: 124px; + height: 18px; + position: absolute; + top: 0; + // -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px' + left: -53px; + pointer-events: none; /* * Fix arrow placement - section start @@ -71,17 +79,6 @@ $arrow-color: var( --jp-gray ); } } -.icon-tooltip-helper { - // POPOVER_HELPER_WIDTH - width: 124px; - height: 18px; - position: absolute; - top: 0; - // -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px' - left: -53px; - pointer-events: none; -} - .icon-tooltip-container { // Recover events pointer-events: all; diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss index ccf61382e28aa..db4ba603fbbd6 100644 --- a/projects/js-packages/components/components/icons/style.module.scss +++ b/projects/js-packages/components/components/icons/style.module.scss @@ -24,10 +24,6 @@ } } - &.instagram { - fill: var( --color-instagram ); - } - &.twitter { fill: var( --color-twitter ); } diff --git a/projects/js-packages/components/components/popover/style.scss b/projects/js-packages/components/components/popover/style.scss index deaa755d26a9a..d0d812dc664de 100644 --- a/projects/js-packages/components/components/popover/style.scss +++ b/projects/js-packages/components/components/popover/style.scss @@ -19,7 +19,8 @@ &__body p { font-weight: 400; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.6em; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } -} \ No newline at end of file +} diff --git a/projects/js-packages/connection/changelog/fix-stylelint-round_x_of_cleanup b/projects/js-packages/connection/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/js-packages/connection/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/js-packages/connection/components/connection-error-notice/styles.module.scss b/projects/js-packages/connection/components/connection-error-notice/styles.module.scss index 705b2eb03de0c..45e463c239e42 100644 --- a/projects/js-packages/connection/components/connection-error-notice/styles.module.scss +++ b/projects/js-packages/connection/components/connection-error-notice/styles.module.scss @@ -76,10 +76,6 @@ margin-bottom: 25px; } -.error { - margin-bottom: 25px; -} - .message { margin-right: var( --spacing-base ); // 8px flex-grow: 1; diff --git a/projects/js-packages/connection/components/disconnect-dialog/style.scss b/projects/js-packages/connection/components/disconnect-dialog/style.scss index d34e7f8304a38..aa1ffb91b77da 100644 --- a/projects/js-packages/connection/components/disconnect-dialog/style.scss +++ b/projects/js-packages/connection/components/disconnect-dialog/style.scss @@ -79,19 +79,6 @@ width: calc(100% - 48px); // Help with the margin on the row. } - &__content{ - background: var( --jp-white-off ); - margin: 0; - padding: 2rem 1rem; - border-radius: 4px; - text-align: center; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - &__actions{ background: var( --jp-white ); padding: 2rem 0; @@ -157,9 +144,19 @@ } } -// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling. .jp-connection__disconnect-dialog__content { - + background: var( --jp-white-off ); + margin: 0; + padding: 2rem 1rem; + border-radius: 4px; + text-align: center; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + // When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling. @media (max-height: 900px) { .jp-components__decorative-card { diff --git a/projects/js-packages/licensing/changelog/fix-stylelint-round_x_of_cleanup b/projects/js-packages/licensing/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/js-packages/licensing/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/js-packages/licensing/components/golden-token-modal/styles.module.scss b/projects/js-packages/licensing/components/golden-token-modal/styles.module.scss index 744989a5bf190..290ad11096564 100644 --- a/projects/js-packages/licensing/components/golden-token-modal/styles.module.scss +++ b/projects/js-packages/licensing/components/golden-token-modal/styles.module.scss @@ -68,10 +68,12 @@ $tablet-width: 760px; .headline { margin-bottom: 8px; font-weight: 500; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 110%; } .paragraph { + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 140%; } diff --git a/projects/js-packages/publicize-components/changelog/fix-stylelint-round_x_of_cleanup b/projects/js-packages/publicize-components/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss b/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss index 9515d6e105406..ca5787f9ba375 100644 --- a/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss @@ -72,7 +72,7 @@ cursor: pointer; } -.remove { +.remove, %remove { position: absolute; top: -4px; right: -4px; @@ -103,7 +103,7 @@ .remove-loading { - @extend .remove; + @extend %remove; // This is to make the close button appear in the right place when we are loading the image. // With this it is possible to close/stop loading images if the request takes too long. top: -56px; diff --git a/projects/js-packages/publicize-components/src/components/social-previews/modal.scss b/projects/js-packages/publicize-components/src/components/social-previews/modal.scss index c6f8331c24140..813d3084b0ea8 100644 --- a/projects/js-packages/publicize-components/src/components/social-previews/modal.scss +++ b/projects/js-packages/publicize-components/src/components/social-previews/modal.scss @@ -78,6 +78,11 @@ display: flex; justify-content: center; } + + // Mastodon + .mastodon-preview { + max-width: 578px; + } } @media ( min-width: $break-small ) { @@ -100,19 +105,9 @@ } // Facebook - .facebook-preview { width: 100%; } - - // Mastodon - - .components-tab-panel__tab-content { - - .mastodon-preview { - max-width: 578px; - } - } } // Modal containing the upgrade nudge diff --git a/projects/packages/account-protection/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/account-protection/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/account-protection/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/account-protection/src/css/strength-meter.css b/projects/packages/account-protection/src/css/strength-meter.css index 6651ebf967571..937ec7f7fb5d9 100644 --- a/projects/packages/account-protection/src/css/strength-meter.css +++ b/projects/packages/account-protection/src/css/strength-meter.css @@ -113,9 +113,6 @@ display: flex; align-items: center; gap: 4px; -} - -.branding { .powered-by { font-size: 12px; diff --git a/projects/packages/backup/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/backup/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/backup/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/backup/src/js/components/masthead/calypso-colors.scss b/projects/packages/backup/src/js/components/masthead/calypso-colors.scss index 7237b4d44b54d..b6de2aab512ad 100644 --- a/projects/packages/backup/src/js/components/masthead/calypso-colors.scss +++ b/projects/packages/backup/src/js/components/masthead/calypso-colors.scss @@ -13,16 +13,18 @@ $light-gray-700: #c3c4c7; $gray-original: #87a6bc; $gray: desaturate( $gray-original, 100% ); // Intermediary transform to match dotcom's colors -// $gray color functions: -// -// lighten( $gray, 10% ) -// lighten( $gray, 20% ) -// lighten( $gray, 30% ) -// darken( $gray, 10% ) -// darken( $gray, 20% ) -// darken( $gray, 30% ) -// -// See wordpress.com/design-handbook/colors/ for more info. +/** + * $gray color functions: + * + * lighten( $gray, 10% ) + * lighten( $gray, 20% ) + * lighten( $gray, 30% ) + * darken( $gray, 10% ) + * darken( $gray, 20% ) + * darken( $gray, 30% ) + * + * See wordpress.com/design-handbook/colors/ for more info. + */ $gray-light: lighten( $gray, 33% ); //#f6f6f6 $gray-dark: darken( $gray, 38% ); //#404040 @@ -57,4 +59,4 @@ $link-highlight: tint($blue-medium, 20%); $white: rgba(255,255,255,1); $transparent: rgba(255,255,255,0); -$border-ultra-light-gray: #e8f0f5; \ No newline at end of file +$border-ultra-light-gray: #e8f0f5; diff --git a/projects/packages/classic-theme-helper/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/classic-theme-helper/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/classic-theme-helper/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/classic-theme-helper/src/social-menu/social-menu.css b/projects/packages/classic-theme-helper/src/social-menu/social-menu.css index 610ec77e4daad..43b59e599730b 100644 --- a/projects/packages/classic-theme-helper/src/social-menu/social-menu.css +++ b/projects/packages/classic-theme-helper/src/social-menu/social-menu.css @@ -48,10 +48,8 @@ Genericons text-decoration: inherit; vertical-align: top; width: 1em; -} -/* Default */ -.jetpack-social-navigation-genericons a::before { + /* Default */ content: "\f415"; } diff --git a/projects/packages/forms/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/forms/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/forms/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/forms/src/blocks/contact-form/components/help-message/style.scss b/projects/packages/forms/src/blocks/contact-form/components/help-message/style.scss index b698716b74171..03f2a3a6bae59 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/help-message/style.scss +++ b/projects/packages/forms/src/blocks/contact-form/components/help-message/style.scss @@ -2,7 +2,7 @@ .help-message { display: flex; font-size: 13px; - line-height: 1.4em; + line-height: 1.4; margin-bottom: 1em; margin-top: -0.5em; diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 007ef2565d12f..ceaaf8f5251cb 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -777,6 +777,7 @@ // For some reason, when keeping the rule below together with the above selector, // on production builds, the attributes are being reordered, causing side-effects + // stylelint-disable-next-line no-duplicate-selectors .notched-label__notch { border-left: none; border-right: none; diff --git a/projects/packages/forms/src/contact-form/css/editor-inline-editing-style.css b/projects/packages/forms/src/contact-form/css/editor-inline-editing-style.css index 658bbc04ffd88..0d584d03d3dd4 100644 --- a/projects/packages/forms/src/contact-form/css/editor-inline-editing-style.css +++ b/projects/packages/forms/src/contact-form/css/editor-inline-editing-style.css @@ -622,10 +622,6 @@ input[type="submit"].button-primary:disabled { color: #fff; } -input[type="submit"].button-primary { - color: #fff; -} - /* ========================================================================== ** Inline editor styles diff --git a/projects/packages/forms/src/contact-form/css/file-field.css b/projects/packages/forms/src/contact-form/css/file-field.css index 8c38b6da99ee7..3a29f9bcb5a3a 100644 --- a/projects/packages/forms/src/contact-form/css/file-field.css +++ b/projects/packages/forms/src/contact-form/css/file-field.css @@ -265,16 +265,13 @@ .jetpack-form-file-field__success { color: #008A20; + display: none; } .jetpack-form-file-field__error { color: #b32d2e; } -.jetpack-form-file-field__success { - display: none; -} - .jetpack-form-file-field__preview.is-error .jetpack-form-file-field__uploading, .jetpack-form-file-field__preview.is-complete .jetpack-form-file-field__uploading { display: none; diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index e20f70db628cd..66846a5c4cee8 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -474,6 +474,7 @@ For some reason, when keeping the rule below together with the above selector, on production builds, the attributes are being reordered, causing side-effects */ +/* stylelint-disable-next-line no-duplicate-selectors*/ .contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch { border-left: none; border-right: none; diff --git a/projects/packages/forms/src/dashboard/inbox/style.scss b/projects/packages/forms/src/dashboard/inbox/style.scss index 151964ec2519b..83a6a406deb33 100644 --- a/projects/packages/forms/src/dashboard/inbox/style.scss +++ b/projects/packages/forms/src/dashboard/inbox/style.scss @@ -30,11 +30,20 @@ $action-bar-height: 88px; } .jp-forms__inbox-tabs { + flex: 1 1 auto; /* Flex, and grow */ + + /* Continue flexing downwards from here. */ + display: flex; + flex-direction: column; + + /* Important to pair with flex-shrink */ + min-height: 0;; .components-tab-panel__tabs { margin: 0; padding: 16px 48px 0; z-index: 1; + flex: 0 1 auto; @media (max-width: 600px) { top: 0; @@ -75,17 +84,6 @@ $action-bar-height: 88px; padding: 0 6px; } -.jp-forms__inbox-response { - border: 1px solid #dcdcde; - border-radius: 8px; - box-sizing: border-box; - display: flex; - flex-direction: column; - min-height: 300px; - overflow: hidden; - width: 100%; -} - @keyframes jp-forms__slide-in { from { @@ -105,6 +103,14 @@ $action-bar-height: 88px; } .jp-forms__inbox-response { + border: 1px solid #dcdcde; + border-radius: 8px; + box-sizing: border-box; + display: flex; + flex-direction: column; + min-height: 300px; + overflow: hidden; + width: 100%; background-color: #fff; position: relative; @@ -363,21 +369,6 @@ $action-bar-height: 88px; } } -.jp-forms__inbox-tabs { - flex: 1 1 auto; /* Flex, and grow */ - - /* Continue flexing downwards from here. */ - display: flex; - flex-direction: column; - - /* Important to pair with flex-shrink */ - min-height: 0;; -} - -.jp-forms__inbox-tabs .components-tab-panel__tabs { - flex: 0 1 auto; -} - .jp-forms__inbox-tabs .components-tab-panel__tab-content { flex: 1 1 auto; diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/jetpack-mu-wpcom/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/FrequencyToggle/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/FrequencyToggle/style.scss index 2edc4eebb7b4a..8e6eda0c4bb2e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/FrequencyToggle/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/FrequencyToggle/style.scss @@ -24,6 +24,24 @@ label.label-wrapper { // protect the button from style leaks from the site; reset all. all: unset; + + background-color: var(--verbum-border-color); + padding: 2px 0; + cursor: pointer; + display: inline-flex; + border: 1px solid transparent; + + &:first-of-type { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + padding-left: 2px; + } + + &:last-of-type { + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + padding-right: 2px; + } } input { @@ -60,26 +78,6 @@ box-shadow: none; } - label.label-wrapper { - background-color: var(--verbum-border-color); - padding: 2px 0; - cursor: pointer; - display: inline-flex; - border: 1px solid transparent; - - &:first-of-type { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - padding-left: 2px; - } - - &:last-of-type { - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - padding-right: 2px; - } - } - span { display: flex; align-items: center; @@ -90,4 +88,4 @@ transition: background-color 160ms linear 0s, color 160ms linear 0s, font-weight 60ms linear 0s; } } -} \ No newline at end of file +} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index 0bfbdd2095c4d..423eee80cc776 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -167,6 +167,7 @@ /** * Profile section of the admin bar */ +// stylelint-disable-next-line no-duplicate-selectors -- disabling due to the complexity of combining the two selectors #wpadminbar { // Add background color to the right side of the admin bar for the mobile view .quicklinks { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-hotfixes/colors/modern/colors.css b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-hotfixes/colors/modern/colors.css index 17cc34e618a6d..305eb60054db9 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-hotfixes/colors/modern/colors.css +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-hotfixes/colors/modern/colors.css @@ -81,7 +81,6 @@ input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, -input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, diff --git a/projects/packages/jitm/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/jitm/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/jitm/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/jitm/src/css/jetpack-admin-jitm.scss b/projects/packages/jitm/src/css/jetpack-admin-jitm.scss index 80a0f183757ea..2db2ca249b3ae 100644 --- a/projects/packages/jitm/src/css/jetpack-admin-jitm.scss +++ b/projects/packages/jitm/src/css/jetpack-admin-jitm.scss @@ -190,11 +190,6 @@ $jp-gray-20: #a7aaad; margin: rem( 40px ) 1.5385em 0 auto; } -// if JITM appears directly below WordPress hello dolly adjust margins -#dolly+.jitm-card { - margin: 3rem 1rem 0 auto; -} - // remove right margin for jitms in the editor .post-php .jitm-card { margin-right: 0; @@ -425,11 +420,13 @@ $jp-gray-20: #a7aaad; .jitm-banner__title { font-size: rem( 15px ); font-weight: 700; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 136%; } .jitm-banner__description { font-size: rem( 13px ); + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 150%; margin-top: rem( 2px ); } @@ -532,6 +529,7 @@ $jp-gray-20: #a7aaad; margin-left: rem( 10px ); } +// if JITM appears directly below WordPress hello dolly adjust margins #dolly + .jitm-card { margin: 3rem 1rem 0 auto; } diff --git a/projects/packages/masterbar/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/masterbar/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/masterbar/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss index edd47237c8449..802ef05e027d7 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_admin.scss @@ -92,7 +92,6 @@ input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, -input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss index 46fd678fb676e..f1194709fa065 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss @@ -15,6 +15,9 @@ #wpadminbar{ background: $masterbar-background !important; + + // Nav Unification - Masterbar - border below the Masterbar + box-shadow: inset 0 -1px 0 $masterbar-background; // Calypso --color-masterbar-background } #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, @@ -45,6 +48,24 @@ #wpadminbar #wp-admin-bar-user-info .username { color: $menu-submenu-text; } + + // Nav unification... + + // Masterbar - My Sites active state + #wpadminbar .ab-top-menu > li.my-sites > .ab-item, + #wpadminbar .ab-top-menu > li.my-sites > .ab-item:hover { + background: $masterbar-active-background; + } + + // Masterbar - Notification hover background + #wpadminbar #wp-admin-bar-notes.hover > .ab-item { + background: $masterbar-highlight-background; + } + + // Masterbar - Notification active background + #wpadminbar .ab-top-menu > li.wpnt-show > .ab-item { + background: $masterbar-active-background !important; // important used in masterbar.css + } } // Make current submenu icon color stay the same on hover @@ -73,39 +94,6 @@ } } -// Nav unification -.admin-color-aquatic, -.admin-color-classic-blue, -.admin-color-classic-bright, -.admin-color-classic-dark, -.admin-color-contrast, -.admin-color-nightfall, -.admin-color-powder-snow, -.admin-color-sakura, -.admin-color-sunset { - - // Masterbar - border below the Masterbar - #wpadminbar { - box-shadow: inset 0 -1px 0 $masterbar-background; // Calypso --color-masterbar-background - } - - // Masterbar - My Sites active state - #wpadminbar .ab-top-menu > li.my-sites > .ab-item, - #wpadminbar .ab-top-menu > li.my-sites > .ab-item:hover { - background: $masterbar-active-background; - } - - // Masterbar - Notification hover background - #wpadminbar #wp-admin-bar-notes.hover > .ab-item { - background: $masterbar-highlight-background; - } - - // Masterbar - Notification active background - #wpadminbar .ab-top-menu > li.wpnt-show > .ab-item { - background: $masterbar-active-background !important; // important used in masterbar.css - } -} - // Ensure sidebar is visually separate from the content in the Contrast color scheme .admin-color-contrast #adminmenuback { outline: 1px solid $nav-unification-sidebar-border; diff --git a/projects/packages/masterbar/src/admin-menu/admin-menu.css b/projects/packages/masterbar/src/admin-menu/admin-menu.css index 1002a57f5d056..0a9bcd3c09841 100644 --- a/projects/packages/masterbar/src/admin-menu/admin-menu.css +++ b/projects/packages/masterbar/src/admin-menu/admin-menu.css @@ -346,6 +346,8 @@ } /** Add new site button **/ + +/* stylelint-disable-next-line no-duplicate-selectors -- This is part of a larger section of changes. */ #adminmenu { display: flex; flex-direction: column; diff --git a/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss b/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss index 1af235b46f86c..0f11c243b6bf8 100644 --- a/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss +++ b/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss @@ -42,6 +42,10 @@ $tour-footer-spacing: 16px; height: 14px; } } + + button { + color: var(--jp-gray-0); + } } .components-guide__footer { @@ -101,12 +105,5 @@ $tour-footer-spacing: 16px; } } } - - .components-modal__header { - - button { - color: var(--jp-gray-0); - } - } } } diff --git a/projects/packages/my-jetpack/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/my-jetpack/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/search/changelog/fix-stylelint-round_x_of_cleanup b/projects/packages/search/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/packages/search/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/packages/search/src/customberg/lib/wordpress-interface.scss b/projects/packages/search/src/customberg/lib/wordpress-interface.scss index 9ed2d1958845f..43bde8da6c996 100644 --- a/projects/packages/search/src/customberg/lib/wordpress-interface.scss +++ b/projects/packages/search/src/customberg/lib/wordpress-interface.scss @@ -1,11 +1,11 @@ -// These styles are copied directly from @wordpress/interface -// in order to remove our dependency on this experimental package. +/** + * These styles are copied directly from @wordpress/interface + * in order to remove our dependency on this experimental package. + * + * TODO: Replace these styles with our own styles. + */ -// TODO: Replace these styles with our own styles. - -// // complementary-area-header -// .components-panel__header.interface-complementary-area-header__small { background: $white; padding-right: $grid-unit-05; @@ -27,9 +27,7 @@ padding-right: $grid-unit-05; } -// // complementary-area -// .interface-complementary-area { background: $white; color: $gray-900; @@ -98,9 +96,7 @@ } } -// // fullscreen-mode -// body.js.is-fullscreen-mode { @include break-medium { @@ -121,9 +117,8 @@ body.js.is-fullscreen-mode { } } -// // interface-skeleton -// + // On Mobile devices, swiping the HTML element should not scroll. // By making it fixed, we prevent that. html.interface-interface-skeleton__html-container { @@ -258,9 +253,7 @@ html.interface-interface-skeleton__html-container { } } -// // more-menu-dropdown -// .interface-more-menu-dropdown { margin-left: -4px; @@ -297,9 +290,7 @@ html.interface-interface-skeleton__html-container { z-index: z-index( '.components-popover.interface-more-menu__content' ); } -// // pinned-items -// .interface-pinned-items { display: flex; diff --git a/projects/packages/search/src/dashboard/components/donut-meter-container/style.scss b/projects/packages/search/src/dashboard/components/donut-meter-container/style.scss index 2d87f3b5b10c4..badacf50d7a06 100644 --- a/projects/packages/search/src/dashboard/components/donut-meter-container/style.scss +++ b/projects/packages/search/src/dashboard/components/donut-meter-container/style.scss @@ -24,6 +24,7 @@ .donut-info-primary { margin: 0 0 8px 0; font-size: 1em; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1em; font-weight: 700; } @@ -32,6 +33,7 @@ color: $studio-gray-60; margin: 0; font-size: 0.7em; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 0.7em; .info-link { diff --git a/projects/packages/search/src/dashboard/components/notice/style.scss b/projects/packages/search/src/dashboard/components/notice/style.scss index 54cd63d17e361..ea7e82a3687ea 100644 --- a/projects/packages/search/src/dashboard/components/notice/style.scss +++ b/projects/packages/search/src/dashboard/components/notice/style.scss @@ -47,10 +47,6 @@ } } - .dops-notice__dismiss { - overflow: hidden; - } - &.is-success, &.is-error, &.is-warning, @@ -166,6 +162,7 @@ } .dops-notice & { + overflow: hidden; color: $gray-lighten-10; &:hover, diff --git a/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss b/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss index 6ac6c6191fdf1..86f0f13003dd6 100644 --- a/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss +++ b/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss @@ -1,6 +1,4 @@ -// // Variables -// @import '~@automattic/color-studio/dist/color-variables'; .jp-search-notice-box { @@ -72,7 +70,6 @@ .jp-search-notice-box__important .dops-notice__action, .jp-search-notice-box__important .dops-notice__icon-wrapper, .jp-search-notice-box__important, -.jp-search-notice-box__important .dops-notice__action, .jp-search-notice-box__important .dops-notice__header { color: $studio-red-50; } diff --git a/projects/packages/search/src/dashboard/components/record-meter/style.scss b/projects/packages/search/src/dashboard/components/record-meter/style.scss index b732dee238378..ed0ed591246a4 100644 --- a/projects/packages/search/src/dashboard/components/record-meter/style.scss +++ b/projects/packages/search/src/dashboard/components/record-meter/style.scss @@ -1,6 +1,4 @@ -// // Variables -// @import '~@automattic/color-studio/dist/color-variables'; .jp-search-bar-chart__container { diff --git a/projects/packages/search/src/dashboard/scss/_variables.scss b/projects/packages/search/src/dashboard/scss/_variables.scss index 84617419333ae..702a6bd196968 100644 --- a/projects/packages/search/src/dashboard/scss/_variables.scss +++ b/projects/packages/search/src/dashboard/scss/_variables.scss @@ -1,6 +1,4 @@ -// // Variables -// @import 'node_modules/@automattic/color-studio/dist/color-variables'; /********* RNA styles *********/ diff --git a/projects/packages/search/src/dashboard/scss/calypso-colors.scss b/projects/packages/search/src/dashboard/scss/calypso-colors.scss index 63e23fcca8b79..b6de2aab512ad 100644 --- a/projects/packages/search/src/dashboard/scss/calypso-colors.scss +++ b/projects/packages/search/src/dashboard/scss/calypso-colors.scss @@ -13,16 +13,18 @@ $light-gray-700: #c3c4c7; $gray-original: #87a6bc; $gray: desaturate( $gray-original, 100% ); // Intermediary transform to match dotcom's colors -// $gray color functions: -// -// lighten( $gray, 10% ) -// lighten( $gray, 20% ) -// lighten( $gray, 30% ) -// darken( $gray, 10% ) -// darken( $gray, 20% ) -// darken( $gray, 30% ) -// -// See wordpress.com/design-handbook/colors/ for more info. +/** + * $gray color functions: + * + * lighten( $gray, 10% ) + * lighten( $gray, 20% ) + * lighten( $gray, 30% ) + * darken( $gray, 10% ) + * darken( $gray, 20% ) + * darken( $gray, 30% ) + * + * See wordpress.com/design-handbook/colors/ for more info. + */ $gray-light: lighten( $gray, 33% ); //#f6f6f6 $gray-dark: darken( $gray, 38% ); //#404040 diff --git a/projects/packages/search/src/dashboard/scss/functions/rem.scss b/projects/packages/search/src/dashboard/scss/functions/rem.scss index af0831b43a425..1b9a7c0461adf 100644 --- a/projects/packages/search/src/dashboard/scss/functions/rem.scss +++ b/projects/packages/search/src/dashboard/scss/functions/rem.scss @@ -1,11 +1,10 @@ - -// ====================================================================== -// Rem function -// -// Convert px to rem in a readable fashion. -// -// Example: font-size: rem( 21px ); -// ====================================================================== +/** + * Rem function + * + * Convert px to rem in a readable fashion. + * + * Example: font-size: rem( 21px ); + */ @use "sass:math"; diff --git a/projects/packages/search/src/dashboard/scss/z-index.scss b/projects/packages/search/src/dashboard/scss/z-index.scss index ed753aef2c8ec..dc616ba184bba 100644 --- a/projects/packages/search/src/dashboard/scss/z-index.scss +++ b/projects/packages/search/src/dashboard/scss/z-index.scss @@ -1,33 +1,33 @@ -// ========================================================================== -// A nested map of all of our z-index values. -// -// Please add new values relative to their parent stacking context. For -// example the values of 'root' are elements with a stacking context that have no -// parents with a stacking context, other than the default html root. -// -// A Stacking Context is created when: -// 1. It's the root element (HTML) -// 2. Has a position other than static, with a z-index value -// 3. position:fixed -// 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter) -// 5. isolation:isolate -// 6: -webkit-overflow-scrolling: touch -// -// So before adding a new z-index: -// 1. You'll want to make sure the element actually creates a stacking context -// 2. Look up what its parent stacking context is -// You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both. -// -// For readability please sort values from lowest to highest. -// -// Usage: -// .environment-badge { -// z-index: z-index( 'root' '.environment-badge' ); -// } -// -// For a refresher on stacking contexts see: -// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -// ========================================================================== +/** + * A nested map of all of our z-index values. + * + * Please add new values relative to their parent stacking context. For + * example the values of 'root' are elements with a stacking context that have no + * parents with a stacking context, other than the default html root. + * + * A Stacking Context is created when: + * 1. It's the root element (HTML) + * 2. Has a position other than static, with a z-index value + * 3. position:fixed + * 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter) + * 5. isolation:isolate + * 6: -webkit-overflow-scrolling: touch + * + * So before adding a new z-index: + * 1. You'll want to make sure the element actually creates a stacking context + * 2. Look up what its parent stacking context is + * You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both. + * + * For readability please sort values from lowest to highest. + * + * Usage: + * .environment-badge { + * z-index: z-index( 'root' '.environment-badge' ); + * } + * + * For a refresher on stacking contexts see: + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ $z-layers: ( 'root': ( diff --git a/projects/packages/search/src/instant-search/components/search-app.scss b/projects/packages/search/src/instant-search/components/search-app.scss index e1506a66519fb..9fefd9c669426 100644 --- a/projects/packages/search/src/instant-search/components/search-app.scss +++ b/projects/packages/search/src/instant-search/components/search-app.scss @@ -42,9 +42,7 @@ body.enable-search-modal .cover-modal.show-modal.search-modal.active { word-wrap: normal !important; } -// // Dark theme styling -// .jetpack-instant-search__overlay.jetpack-instant-search__overlay--dark { background: $color-dark-modal-backdrop-background; color: $color-dark-text; diff --git a/projects/packages/search/src/instant-search/components/search-result-expanded.scss b/projects/packages/search/src/instant-search/components/search-result-expanded.scss index 3b8acd881afe1..32f90395588c5 100644 --- a/projects/packages/search/src/instant-search/components/search-result-expanded.scss +++ b/projects/packages/search/src/instant-search/components/search-result-expanded.scss @@ -55,11 +55,9 @@ $image-square-size: 128px; .jetpack-instant-search__search-result-expanded--no-image & { display: none; } -} -// Aspect ratio box trick -// See https://css-tricks.com/aspect-ratio-boxes/ -.jetpack-instant-search__search-result-expanded__image-container { + // Aspect ratio box trick + // See https://css-tricks.com/aspect-ratio-boxes/ position: relative; &::before { @@ -79,9 +77,6 @@ $image-square-size: 128px; height: 100%; object-fit: cover; width: 100%; -} - -.jetpack-instant-search__search-result-expanded__image { border-radius: 5px; } @@ -116,6 +111,7 @@ $image-square-size: 128px; font-style: normal; font-weight: 600; font-size: 13px; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 180%; } diff --git a/projects/packages/search/src/instant-search/components/search-result.scss b/projects/packages/search/src/instant-search/components/search-result.scss index 189dd859cd508..c650307946a97 100644 --- a/projects/packages/search/src/instant-search/components/search-result.scss +++ b/projects/packages/search/src/instant-search/components/search-result.scss @@ -1,9 +1,9 @@ @import '../lib/styles/helper'; -// -// Only add styles here that should be shared across different result types (minimal, expanded, product). -// NOTE: Due to Webpack import order, these styles will apply AFTER minimal/expanded/product styles. -// +/** + * Only add styles here that should be shared across different result types (minimal, expanded, product). + * NOTE: Due to Webpack import order, these styles will apply AFTER minimal/expanded/product styles. + */ .jetpack-instant-search__search-result { margin: 0 0 2em; } diff --git a/projects/packages/search/src/instant-search/lib/styles/_mixins.scss b/projects/packages/search/src/instant-search/lib/styles/_mixins.scss index ba1232bb09432..2cb666c665f32 100644 --- a/projects/packages/search/src/instant-search/lib/styles/_mixins.scss +++ b/projects/packages/search/src/instant-search/lib/styles/_mixins.scss @@ -1,8 +1,6 @@ @import './variables'; -// // Mixins -// // @breakpoint is a string prefixed with < or > followed by a breakpoint size. // (e.g. ">sm" or "660px' ) { margin-left: auto; } -} \ No newline at end of file +} diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss b/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss index 76b9fd36276d1..fd9c091648ab5 100644 --- a/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss +++ b/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss @@ -118,6 +118,7 @@ margin: 0; font-size: 15px; font-weight: 700; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 136%; color: $black; } @@ -471,10 +472,6 @@ } } -.jp-connection-settings__info { - display: flex; -} - .jp-connection-settings__text { margin-left: rem( 16px ); word-break: break-word; @@ -489,6 +486,7 @@ } .jp-connection-settings__info { + display: flex; .gridicon { opacity: 0.6; @@ -538,6 +536,7 @@ margin: rem( 16px ) rem( 24px ) 0; font-size: $font-body; font-weight: 400; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.5em; color: $blue-heading; } diff --git a/projects/plugins/jetpack/_inc/client/components/apps-card/style.scss b/projects/plugins/jetpack/_inc/client/components/apps-card/style.scss index bdf6a7939e8db..daa30c46baafe 100644 --- a/projects/plugins/jetpack/_inc/client/components/apps-card/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/apps-card/style.scss @@ -56,6 +56,7 @@ .jp-apps-card__paragraph { margin: 14px 0 0 0; font-size: 17px; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 145%; color: var( --gray-100 ); letter-spacing: -0.24px; diff --git a/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss b/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss index eb445ca363fbf..7958328def2f5 100644 --- a/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss @@ -19,6 +19,11 @@ a:hover { text-decoration: underline; } + + .dops-notice { + margin-top: rem( -1px ); + margin-bottom: rem( -1px ); + } } } @@ -125,17 +130,6 @@ } } -.jp-dash-item { - - .dops-section-header__actions { - - .dops-notice { - margin-top: rem( -1px ); - margin-bottom: rem( -1px ); - } - } -} - .jp-dash-item__active-label { display: inline-block; color: darken( $gray, 10% ); @@ -145,17 +139,6 @@ text-transform: uppercase; } -.jp-at-a-glance__left, -.jp-at-a-glance__right { - - .jp-dash-item__is-inactive { - - .dops-banner__content { - height: 100%; - } - } -} - // conditional styles for content when items are inactive .jp-dash-item__is-inactive { @@ -172,6 +155,10 @@ background: none; } } + + .dops-banner__content { + height: 100%; + } } .dops-card.dops-banner { diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/style.scss b/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/style.scss index 5d22387e42943..04aa8a34dcde5 100644 --- a/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/jetpack-dialogue-modern/style.scss @@ -103,6 +103,7 @@ h1.jp-dialogue-modern__title { .jp-dialogue-modern__cta-container { text-align: center; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 200%; padding: rem( 8px ) 0 0; diff --git a/projects/plugins/jetpack/_inc/client/components/notice/style.scss b/projects/plugins/jetpack/_inc/client/components/notice/style.scss index baee210d3cf0f..2f6cecb6fffd3 100644 --- a/projects/plugins/jetpack/_inc/client/components/notice/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/notice/style.scss @@ -47,10 +47,6 @@ } } - .dops-notice__dismiss { - overflow: hidden; - } - &.is-success, &.is-error, &.is-warning, @@ -170,6 +166,7 @@ } .dops-notice & { + overflow: hidden; color: $gray-lighten-10; &:hover, diff --git a/projects/plugins/jetpack/_inc/client/components/reconnect-modal/style.scss b/projects/plugins/jetpack/_inc/client/components/reconnect-modal/style.scss index 9b82659995b01..bfee5773148b8 100644 --- a/projects/plugins/jetpack/_inc/client/components/reconnect-modal/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/reconnect-modal/style.scss @@ -18,6 +18,7 @@ margin: rem( 16px ) rem( 24px ) 0; font-size: rem( 16px ); font-weight: 400; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.5em; color: $blue-heading; } diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss b/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss index 91e73d473b556..942b41226ab67 100644 --- a/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss @@ -421,6 +421,7 @@ } // -------- Search -------- +// stylelint-disable-next-line no-duplicate-selectors -- This is a styling section for a distinct purpose. .dops-section-nav { @include breakpoint( "<660px" ) { diff --git a/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss b/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss index 98dcc5a12d835..8045cf65bb5c9 100644 --- a/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/settings-group/style.scss @@ -25,11 +25,6 @@ margin-bottom: rem( 4px ); } - .form-toggle__switch { - float: left; - margin-top: 2px; - } - .jp-form-setting-explanation { color: $gray-text-min; display: block; @@ -96,4 +91,4 @@ .email-settings__title { margin-bottom: 0.3rem; } -} \ No newline at end of file +} diff --git a/projects/plugins/jetpack/_inc/client/components/text-input/style.scss b/projects/plugins/jetpack/_inc/client/components/text-input/style.scss index e27b69b423f7a..c0c341d15ce6e 100644 --- a/projects/plugins/jetpack/_inc/client/components/text-input/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/text-input/style.scss @@ -18,6 +18,7 @@ background-color: $white; transition: all .15s ease-in-out, box-shadow 0s; box-shadow: none; + -webkit-appearance: none; &::placeholder { color: $gray; @@ -30,6 +31,22 @@ &::-ms-clear { display: none; } + + &.is-valid { + box-shadow: 0 0 0 2px lighten( $alert-green, 35 ); + + &:hover { + box-shadow: 0 0 0 2px lighten( $alert-green, 25 ); + } + } + + &.is-error { + box-shadow: 0 0 0 2px lighten( $alert-red, 35 ); + + &:hover { + box-shadow: 0 0 0 2px lighten( $alert-red, 25 ); + } + } } &:hover, @@ -51,10 +68,6 @@ color: lighten( $gray, 10% ); } } -} - -.dops-text-input.dops-text-input { // input is needed to override the default styles - -webkit-appearance: none; &.is-valid { border-color: $alert-green; @@ -72,23 +85,4 @@ border-color: darken( $alert-red, 10 ); } } - - &:focus { - - &.is-valid { - box-shadow: 0 0 0 2px lighten( $alert-green, 35 ); - - &:hover { - box-shadow: 0 0 0 2px lighten( $alert-green, 25 ); - } - } - - &.is-error { - box-shadow: 0 0 0 2px lighten( $alert-red, 35 ); - - &:hover { - box-shadow: 0 0 0 2px lighten( $alert-red, 25 ); - } - } - } } diff --git a/projects/plugins/jetpack/_inc/client/components/tree-dropdown/style.scss b/projects/plugins/jetpack/_inc/client/components/tree-dropdown/style.scss index 41bc2beede210..acce9b2e48e6e 100644 --- a/projects/plugins/jetpack/_inc/client/components/tree-dropdown/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/tree-dropdown/style.scss @@ -170,9 +170,6 @@ ul.jp-tree-items { overflow-y: hidden; - } - - ul.jp-tree-items { max-height: 370px; } diff --git a/projects/plugins/jetpack/_inc/client/my-plan/style.scss b/projects/plugins/jetpack/_inc/client/my-plan/style.scss index 7424f1c46323c..8e61128c7361d 100644 --- a/projects/plugins/jetpack/_inc/client/my-plan/style.scss +++ b/projects/plugins/jetpack/_inc/client/my-plan/style.scss @@ -105,11 +105,7 @@ } .jp-landing__licensing-actions-item.no-licenses { - justify-content: space-between; flex: 1; - } - - .jp-landing__licensing-actions-item.no-licenses { justify-content: flex-end; @include breakpoint( "<660px" ) { diff --git a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/one-click-restores/style.scss b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/one-click-restores/style.scss index f00be20fd2038..20d51c857ca28 100644 --- a/projects/plugins/jetpack/_inc/client/recommendations/sidebar/one-click-restores/style.scss +++ b/projects/plugins/jetpack/_inc/client/recommendations/sidebar/one-click-restores/style.scss @@ -29,6 +29,7 @@ h2 { margin: 0 0 0.2rem; font-size: 0.75rem; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1rem; letter-spacing: -0.02em; } @@ -36,6 +37,7 @@ p { margin: 0; font-size: 0.625rem; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1rem; letter-spacing: -0.02em; } diff --git a/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss b/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss index c5824f5f3bb96..29b69402ec51b 100644 --- a/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss +++ b/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss @@ -13,16 +13,18 @@ $light-gray-700: #c3c4c7; $gray-original: #87a6bc; $gray: desaturate( $gray-original, 100% ); // Intermediary transform to match dotcom's colors -// $gray color functions: -// -// lighten( $gray, 10% ) -// lighten( $gray, 20% ) -// lighten( $gray, 30% ) -// darken( $gray, 10% ) -// darken( $gray, 20% ) -// darken( $gray, 30% ) -// -// See wordpress.com/design-handbook/colors/ for more info. +/** + * $gray color functions: + * + * lighten( $gray, 10% ) + * lighten( $gray, 20% ) + * lighten( $gray, 30% ) + * darken( $gray, 10% ) + * darken( $gray, 20% ) + * darken( $gray, 30% ) + * + * See wordpress.com/design-handbook/colors/ for more info. + */ $gray-light: lighten( $gray, 33% ); //#f6f6f6 $gray-dark: darken( $gray, 38% ); //#404040 diff --git a/projects/plugins/jetpack/_inc/client/scss/functions/rem.scss b/projects/plugins/jetpack/_inc/client/scss/functions/rem.scss index af0831b43a425..148d6af04432f 100644 --- a/projects/plugins/jetpack/_inc/client/scss/functions/rem.scss +++ b/projects/plugins/jetpack/_inc/client/scss/functions/rem.scss @@ -1,11 +1,11 @@ -// ====================================================================== -// Rem function -// -// Convert px to rem in a readable fashion. -// -// Example: font-size: rem( 21px ); -// ====================================================================== +/** + * Rem function + * + * Convert px to rem in a readable fashion. + * + * Example: font-size: rem( 21px ); + */ @use "sass:math"; diff --git a/projects/plugins/jetpack/_inc/client/scss/mixin_long-content-fade.scss b/projects/plugins/jetpack/_inc/client/scss/mixin_long-content-fade.scss index 355bd25f01ac9..8f3041e853dc9 100644 --- a/projects/plugins/jetpack/_inc/client/scss/mixin_long-content-fade.scss +++ b/projects/plugins/jetpack/_inc/client/scss/mixin_long-content-fade.scss @@ -1,9 +1,9 @@ -// ========================================================================== -// Long content fade mixin -// -// Creates a fading overlay to signify that the content is longer -// than the space allows. -// ========================================================================== +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ @mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) { content: ''; diff --git a/projects/plugins/jetpack/_inc/client/scss/mixins/_long-content-fade.scss b/projects/plugins/jetpack/_inc/client/scss/mixins/_long-content-fade.scss index 355bd25f01ac9..8f3041e853dc9 100644 --- a/projects/plugins/jetpack/_inc/client/scss/mixins/_long-content-fade.scss +++ b/projects/plugins/jetpack/_inc/client/scss/mixins/_long-content-fade.scss @@ -1,9 +1,9 @@ -// ========================================================================== -// Long content fade mixin -// -// Creates a fading overlay to signify that the content is longer -// than the space allows. -// ========================================================================== +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ @mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) { content: ''; diff --git a/projects/plugins/jetpack/_inc/client/scss/mixins/_rna.scss b/projects/plugins/jetpack/_inc/client/scss/mixins/_rna.scss index db05bdfa964d3..e29e3f49709df 100644 --- a/projects/plugins/jetpack/_inc/client/scss/mixins/_rna.scss +++ b/projects/plugins/jetpack/_inc/client/scss/mixins/_rna.scss @@ -1,8 +1,8 @@ -// ========================================================================== -// RNA mixins -// -// See https://jetpackdesignhandbook.wordpress.com/rna-components/ -// ========================================================================== +/** + * RNA mixins + * + * See https://jetpackdesignhandbook.wordpress.com/rna-components/ + */ @mixin rna-link( $has-focus-state: true ) { $resting-shadow: 0 1px 0 0 currentColor; diff --git a/projects/plugins/jetpack/_inc/client/scss/style.scss b/projects/plugins/jetpack/_inc/client/scss/style.scss index 63f4019340aa3..9268ce0c773b3 100644 --- a/projects/plugins/jetpack/_inc/client/scss/style.scss +++ b/projects/plugins/jetpack/_inc/client/scss/style.scss @@ -1,12 +1,12 @@ -// ========================================================================== -// Jetpack Admin styles -// -// This is an import of all component CSS that is bundled with each component. -// Please keep these imports sorted and use specificity to ensure that -// stylesheet order does not matter. - -// example: @import '../components/card/style'; -// ========================================================================== +/** + * Jetpack Admin styles + * + * This is an import of all component CSS that is bundled with each component. + * Please keep these imports sorted and use specificity to ensure that + * stylesheet order does not matter. + * + * example: @import '../components/card/style'; + */ // Functions @import 'functions/rem'; diff --git a/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss b/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss index 05e72256927cc..08fd0806a67db 100644 --- a/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss +++ b/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss @@ -27,15 +27,18 @@ $blue-dark-text: #2e4453; $gray-text: $gray-dark; $gray-text-min: darken( $gray, 18% ); //#537994 -// $gray color functions: -// lighten( $gray, 10% ) -// lighten( $gray, 20% ) -// lighten( $gray, 30% ) -// darken( $gray, 10% ) -// darken( $gray, 20% ) -// darken( $gray, 30% ) -// -// See wordpress.com/design-handbook/colors/ for more info. +/** + * $gray color functions: + * + * lighten( $gray, 10% ) + * lighten( $gray, 20% ) + * lighten( $gray, 30% ) + * darken( $gray, 10% ) + * darken( $gray, 20% ) + * darken( $gray, 30% ) + * + * See wordpress.com/design-handbook/colors/ for more info. + */ // Product types $color-product: #3895ba; // $studio-wordpress-blue-30 diff --git a/projects/plugins/jetpack/_inc/client/scss/z-index.scss b/projects/plugins/jetpack/_inc/client/scss/z-index.scss index ed753aef2c8ec..dc616ba184bba 100644 --- a/projects/plugins/jetpack/_inc/client/scss/z-index.scss +++ b/projects/plugins/jetpack/_inc/client/scss/z-index.scss @@ -1,33 +1,33 @@ -// ========================================================================== -// A nested map of all of our z-index values. -// -// Please add new values relative to their parent stacking context. For -// example the values of 'root' are elements with a stacking context that have no -// parents with a stacking context, other than the default html root. -// -// A Stacking Context is created when: -// 1. It's the root element (HTML) -// 2. Has a position other than static, with a z-index value -// 3. position:fixed -// 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter) -// 5. isolation:isolate -// 6: -webkit-overflow-scrolling: touch -// -// So before adding a new z-index: -// 1. You'll want to make sure the element actually creates a stacking context -// 2. Look up what its parent stacking context is -// You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both. -// -// For readability please sort values from lowest to highest. -// -// Usage: -// .environment-badge { -// z-index: z-index( 'root' '.environment-badge' ); -// } -// -// For a refresher on stacking contexts see: -// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -// ========================================================================== +/** + * A nested map of all of our z-index values. + * + * Please add new values relative to their parent stacking context. For + * example the values of 'root' are elements with a stacking context that have no + * parents with a stacking context, other than the default html root. + * + * A Stacking Context is created when: + * 1. It's the root element (HTML) + * 2. Has a position other than static, with a z-index value + * 3. position:fixed + * 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter) + * 5. isolation:isolate + * 6: -webkit-overflow-scrolling: touch + * + * So before adding a new z-index: + * 1. You'll want to make sure the element actually creates a stacking context + * 2. Look up what its parent stacking context is + * You can run this handy gist: https://gist.github.com/gwwar/2f661deec7b99a1a418b in the console to find both. + * + * For readability please sort values from lowest to highest. + * + * Usage: + * .environment-badge { + * z-index: z-index( 'root' '.environment-badge' ); + * } + * + * For a refresher on stacking contexts see: + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ $z-layers: ( 'root': ( diff --git a/projects/plugins/jetpack/_inc/client/traffic/style.scss b/projects/plugins/jetpack/_inc/client/traffic/style.scss index 52fae30bf4b63..c45dbb7280f37 100644 --- a/projects/plugins/jetpack/_inc/client/traffic/style.scss +++ b/projects/plugins/jetpack/_inc/client/traffic/style.scss @@ -43,6 +43,7 @@ .jp-form-input-with-prefix-bottom-message { top: rem( -20px ); position: relative; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 2em; margin-top: 5px; } diff --git a/projects/plugins/jetpack/changelog/fix-stylelint-round_x_of_cleanup b/projects/plugins/jetpack/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..0d88b59b16131 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Linting: Do additional stylesheet cleanup. diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/editor.scss b/projects/plugins/jetpack/extensions/blocks/ai-assistant/editor.scss index 24663b1ed43cb..334484f05985a 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/editor.scss @@ -95,8 +95,7 @@ } } - // Border Styles - // + // Border Styles: // Allow any custom border color, style or width selections to be inherited // from the table element that receives the border support props. diff --git a/projects/plugins/jetpack/extensions/blocks/donations/editor.scss b/projects/plugins/jetpack/extensions/blocks/donations/editor.scss index de97f83f4b7a9..005869c11fb5c 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/donations/editor.scss @@ -48,6 +48,7 @@ .jetpack-donations__currency-toggle { font-weight: 700; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 100%; width: max-content; } diff --git a/projects/plugins/jetpack/extensions/blocks/goodreads/style.scss b/projects/plugins/jetpack/extensions/blocks/goodreads/style.scss index 7e92fa09e3895..25417a828a3a0 100644 --- a/projects/plugins/jetpack/extensions/blocks/goodreads/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/goodreads/style.scss @@ -25,15 +25,7 @@ } [class^='gr_custom_each_container_'] { - width: 100%; - clear: both; margin: auto; - overflow: auto; - padding-bottom: 4px; - border-bottom: 1px solid #aaa; - } - - [class^='gr_custom_each_container_'] { width: 100%; clear: both; margin-bottom: 10px; diff --git a/projects/plugins/jetpack/extensions/blocks/image-compare/view.scss b/projects/plugins/jetpack/extensions/blocks/image-compare/view.scss index 50eaf18191b1d..838f5623d551d 100644 --- a/projects/plugins/jetpack/extensions/blocks/image-compare/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/image-compare/view.scss @@ -285,7 +285,7 @@ figure.wp-block-jetpack-image-compare figcaption { /** * Custom styling for handle. */ - +// stylelint-disable no-duplicate-selectors -- This is part of a larger section of changes. div.jx-control { color: #fff; } @@ -333,3 +333,4 @@ div.vertical div.jx-arrow.jx-left, div.vertical div.jx-arrow.jx-right { transform: rotate(90deg); } +// stylelint-enable no-duplicate-selectors diff --git a/projects/plugins/jetpack/extensions/blocks/like/editor.scss b/projects/plugins/jetpack/extensions/blocks/like/editor.scss index 5e9b83477084a..b77821344c177 100644 --- a/projects/plugins/jetpack/extensions/blocks/like/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/like/editor.scss @@ -14,6 +14,8 @@ /* Fetched below from https://widgets.wp.com/likes/style.css at 2024-06-11T14:41:11.500Z */ .wpl-likebox { container-type:inline-size; + display:flex; + align-items:center; } .wpl-likebox,.wpl-follow a,.wpl-count a { @@ -24,6 +26,7 @@ .wpl-button { min-width:40px; overflow:hidden; + float:left; } .wpl-button a { @@ -129,10 +132,6 @@ font-size:12px!important; } -.wpl-button { - float:left; -} - .rtl .wpl-button { float:right; } @@ -214,11 +213,6 @@ a.comment-like-link.loading::before { opacity:0; } -.wpl-likebox { - display:flex; - align-items:center; -} - .wpl-likebox .wpl-avatars { display:inline-flex; flex-direction:row-reverse; @@ -270,7 +264,7 @@ a.comment-like-link.loading::before { white-space:nowrap; } -/* Overrides to fix CSS conflicts within editor. */ +// stylelint-disable no-duplicate-selectors -- Overrides to fix CSS conflicts within editor. .wpl-likebox { // Prevents color and outline conflict by // .wp-block-post-content a:where(:not(.wp-element-button)) @@ -329,6 +323,7 @@ a.comment-like-link.loading::before { background-image:url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 18 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.00081 2 1.95699 4.26814h4.3763l-3.6666 3.39117 1.2473 4.34069-3.91399-2.25-3.914 2.25 1.24734-4.34069-3.66667-3.39117h2.18817 2.18816z' stroke='%232c3338' stroke-linecap='round' stroke-width='1.5'/%3E%3C/svg%3E"); } } +// stylelint-enable no-duplicate-selectors // Format buttons correctly when displayed in columns @container (max-width: 320px) { diff --git a/projects/plugins/jetpack/extensions/blocks/map/editor.scss b/projects/plugins/jetpack/extensions/blocks/map/editor.scss index a3f3a9dd3fdb4..fe0e1b543c20b 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/map/editor.scss @@ -1,5 +1,6 @@ .wp-block-jetpack-map__delete-btn { padding: 0; + margin-top: 10px; svg { margin-right: 0.4em; @@ -67,10 +68,6 @@ margin-top: 10px; } - .wp-block-jetpack-map__delete-btn { - margin-top: 10px; - } - .component__add-point__popover { .components-popover__content { diff --git a/projects/plugins/jetpack/extensions/blocks/rating-star/editor.scss b/projects/plugins/jetpack/extensions/blocks/rating-star/editor.scss index aa6fabb6b8c6d..111fea3c7c87c 100644 --- a/projects/plugins/jetpack/extensions/blocks/rating-star/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/rating-star/editor.scss @@ -1,11 +1,9 @@ // Editor only styles -.jetpack-ratings-button { - cursor: pointer; -} -// Control symbol outline when focus and hover. .jetpack-ratings-button { + cursor: pointer; + // Control symbol outline when focus and hover. &:focus { border: none; outline: none; diff --git a/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss b/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss index f5921e334a914..c2cbc0531a0f8 100644 --- a/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss @@ -42,14 +42,12 @@ word-wrap: normal !important; } - // The !important is necessary to override the inline style. + // This immediate span is a whole star. > span { + // The !important is necessary to override the inline style. display: inline-flex !important; - } - // Put the star together. - // This immediate span is a whole star. - > span { // Frontend. + // Put the star together. margin-inline-end: 0.3em; } @@ -87,8 +85,4 @@ fill: transparent; } } - - .jetpack-ratings-button { - margin-inline-end: 0.3em; - } } diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/style.scss b/projects/plugins/jetpack/extensions/blocks/related-posts/style.scss index e862ee643de01..ef2525310e256 100644 --- a/projects/plugins/jetpack/extensions/blocks/related-posts/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/related-posts/style.scss @@ -39,12 +39,14 @@ &__post-heading { margin: 0.5rem 0; font-size: 1rem; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.2em; } &__post-link { display: block; width: 100%; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.2em; margin: 0.2em 0; } diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss b/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss index 0855304fdf45b..e497fc8bdf1fb 100644 --- a/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss @@ -20,9 +20,6 @@ textarea { display: block; } - } - - .simple-payments__field { input, textarea { @@ -125,6 +122,7 @@ margin-bottom: 5px; .components-toggle-control__label { + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.4em; } } diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss index f3f5b1c34ffb5..22e9d803452e4 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss @@ -70,18 +70,20 @@ } } -// SWIPER WORKAROUND - START -// -// swiper.css is loaded only once no matter how many times the `createSwiper` JS function is called -// (this might be related to how webpack caches assets dynamically imported). That becomes an issue -// in the context of the site editor because when we leave a template page that contains a slideshow, -// the swiper assets are unlinked from the site editor iframe but never added back when revisiting -// the page (without a hard refresh). -// See https://github.com/Automattic/vulcan/issues/615 -// -// I haven't been able to come up with a proper fix to make sure the swiper assets are loaded when needed. -// The next best solution is to include the minimum set of rules to align the slideshow controls properly, -// which has minimal impact on the user experience. +/** + * SWIPER WORKAROUND - START + * + * swiper.css is loaded only once no matter how many times the `createSwiper` JS function is called + * (this might be related to how webpack caches assets dynamically imported). That becomes an issue + * in the context of the site editor because when we leave a template page that contains a slideshow, + * the swiper assets are unlinked from the site editor iframe but never added back when revisiting + * the page (without a hard refresh). + * See https://github.com/Automattic/vulcan/issues/615 + * + * I haven't been able to come up with a proper fix to make sure the swiper assets are loaded when needed. + * The next best solution is to include the minimum set of rules to align the slideshow controls properly, + * which has minimal impact on the user experience. + */ .swiper-button-white { position: absolute; diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss b/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss index b111190ba25d5..4f758fe7d0169 100644 --- a/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss @@ -15,6 +15,7 @@ } .components-toggle-control__label { + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.4em; } diff --git a/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss b/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss index d49c8079fbea5..202660dfaa7a7 100644 --- a/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss @@ -83,9 +83,6 @@ $gutter-m: 15px !default; .mejs-time-float { color: $jetpack-audio-player-background; color: var( --jetpack-audio-player-background ); - } - - .mejs-time-float { background: $jetpack-audio-player-primary; background: var( --jetpack-audio-player-primary ); border-color: $jetpack-audio-player-primary; diff --git a/projects/plugins/jetpack/extensions/shared/help-message.scss b/projects/plugins/jetpack/extensions/shared/help-message.scss index b698716b74171..935f53c45fc64 100644 --- a/projects/plugins/jetpack/extensions/shared/help-message.scss +++ b/projects/plugins/jetpack/extensions/shared/help-message.scss @@ -2,6 +2,7 @@ .help-message { display: flex; font-size: 13px; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.4em; margin-bottom: 1em; margin-top: -0.5em; diff --git a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.css b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.css index 0b1a940c2e3df..bae3c9286b417 100644 --- a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.css +++ b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.css @@ -398,9 +398,6 @@ div.jp-carousel-buttons a:hover { font-size: 16px; margin: 25px 0; width: 100%; -} - -.jp-carousel-photo-description { overflow: hidden; overflow-wrap: break-word; } @@ -481,6 +478,7 @@ div.jp-carousel-buttons a:hover { background: none !important; border: none !important; font-weight: 400 !important; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.3em !important; } diff --git a/projects/plugins/jetpack/modules/infinite-scroll/infinity.css b/projects/plugins/jetpack/modules/infinite-scroll/infinity.css index bf9ba6e6aacca..b2f1e0a542e5c 100644 --- a/projects/plugins/jetpack/modules/infinite-scroll/infinity.css +++ b/projects/plugins/jetpack/modules/infinite-scroll/infinity.css @@ -38,6 +38,7 @@ height: 12px; border-radius: 3px / 6px; transform-origin: 3px 26px; + box-sizing: content-box; } .infinite-loader .spinner-inner div:nth-child(1) { @@ -129,10 +130,6 @@ transform-origin: 0 0; /* see note above */ } -.infinite-loader .spinner-inner div { - box-sizing: content-box; -} - /** * Using a highly-specific rule to make sure that all button styles * will be reset @@ -225,12 +222,6 @@ width: 40%; } -#infinite-footer .blog-credits { - font-weight: 400; - float: right; - width: 60%; -} - #infinite-footer .blog-info a { color: #111; font-size: 14px; @@ -238,6 +229,9 @@ } #infinite-footer .blog-credits { + font-weight: 400; + float: right; + width: 60%; color: #888; font-size: 12px; text-align: right; diff --git a/projects/plugins/jetpack/modules/infinite-scroll/themes/twentysixteen.css b/projects/plugins/jetpack/modules/infinite-scroll/themes/twentysixteen.css index dade50c40463b..fd22a46de3547 100644 --- a/projects/plugins/jetpack/modules/infinite-scroll/themes/twentysixteen.css +++ b/projects/plugins/jetpack/modules/infinite-scroll/themes/twentysixteen.css @@ -76,6 +76,7 @@ body #infinite-footer .container { body #infinite-footer .blog-info { font-family: Montserrat, "Helvetica Neue", sans-serif; height: 2.1875em; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 2.1875em; } @@ -88,6 +89,7 @@ body #infinite-footer .blog-credits { font-size: 13px; font-size: 0.8125rem; height: 2.692307692em; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 2.692307692em; } diff --git a/projects/plugins/jetpack/modules/sharedaddy/sharing.css b/projects/plugins/jetpack/modules/sharedaddy/sharing.css index cb3e335e7b7c9..167802e8b0b26 100644 --- a/projects/plugins/jetpack/modules/sharedaddy/sharing.css +++ b/projects/plugins/jetpack/modules/sharedaddy/sharing.css @@ -48,6 +48,8 @@ body.highlander-dark h3.sd-title::before { .sd-content ul li { display: inline-block; + margin: 0 8px 12px 0; + padding: 0; } .sd-content ul li.share-deprecated { @@ -217,11 +219,6 @@ body .sd-social-icon .sd-content ul li[class*='share-'] a.sd-button.share-icon.n } } -.sd-content ul li { - margin: 0 8px 12px 0; - padding: 0; -} - /* Add more pading on touch devices */ .jp-sharing-input-touch .sd-content ul li { padding-left: 10px; } @@ -575,9 +572,6 @@ body .sd-social-icon .sd-content ul li[class*='share-'] a.sd-button.share-icon.n body .sd-social-icon .sd-content li.share-custom a span { width: 0; -} - -body .sd-social-icon .sd-content li.share-custom a span { padding-left: 16px !important; } diff --git a/projects/plugins/jetpack/modules/shortcodes/css/quiz.css b/projects/plugins/jetpack/modules/shortcodes/css/quiz.css index 461c4434224f5..95a11b828b653 100644 --- a/projects/plugins/jetpack/modules/shortcodes/css/quiz.css +++ b/projects/plugins/jetpack/modules/shortcodes/css/quiz.css @@ -2,6 +2,7 @@ div.jetpack-quiz { border: 1px solid #deede3; background-color: #f3f3f3; padding: 1em; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.3em; margin-bottom: 2em; border-radius: .2em; diff --git a/projects/plugins/jetpack/modules/shortcodes/css/style.css b/projects/plugins/jetpack/modules/shortcodes/css/style.css index 0806cf6d7a950..6d449f7213d02 100644 --- a/projects/plugins/jetpack/modules/shortcodes/css/style.css +++ b/projects/plugins/jetpack/modules/shortcodes/css/style.css @@ -132,6 +132,7 @@ body.presentation-wrapper-fullscreen-parent { opacity: 0.8; } +/* stylelint-disable-next-line no-duplicate-selectors -- This is part of the larger nav arrows section. */ .presentation-wrapper-fullscreen .nav-fullscreen-button { background-image: url(../images/collapse.png); } diff --git a/projects/plugins/jetpack/modules/theme-tools/compat/twentyfifteen.css b/projects/plugins/jetpack/modules/theme-tools/compat/twentyfifteen.css index 37a10afcb7163..ac6a7a3624aca 100644 --- a/projects/plugins/jetpack/modules/theme-tools/compat/twentyfifteen.css +++ b/projects/plugins/jetpack/modules/theme-tools/compat/twentyfifteen.css @@ -290,6 +290,7 @@ iframe[id*="twitter-widget-"] { .comment-subscription-form { font-size: 12px; font-size: 1.2rem; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.5em; margin: 2em 0 0; } @@ -559,6 +560,7 @@ iframe[id*="twitter-widget-"] { .hentry div#jp-relatedposts div.jp-relatedposts-items p { font-size: 1.6rem; font-size: 16px; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.5em; } @@ -779,6 +781,7 @@ iframe[id*="twitter-widget-"] { .hentry div#jp-relatedposts div.jp-relatedposts-items p { font-size: 16px; font-size: 1.6rem; + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.5em; } diff --git a/projects/plugins/jetpack/modules/theme-tools/compat/twentyfourteen.css b/projects/plugins/jetpack/modules/theme-tools/compat/twentyfourteen.css index f48177b9e16d9..356b9f3f83447 100644 --- a/projects/plugins/jetpack/modules/theme-tools/compat/twentyfourteen.css +++ b/projects/plugins/jetpack/modules/theme-tools/compat/twentyfourteen.css @@ -178,9 +178,6 @@ img[id*="botd"] { .widget_jetpack_display_posts_widget .jetpack-display-remote-posts p { font-size: 14px; line-height: 1.2857142857 !important; -} - -.widget_jetpack_display_posts_widget .jetpack-display-remote-posts p { margin: 9px 0 18px !important; } @@ -315,14 +312,12 @@ img[id*="botd"] { @media screen and (min-width: 1008px) { - .footer-sidebar .widget_jp_blogs_i_follow li, .footer-sidebar .widget_jp_blogs_i_follow li, .footer-sidebar .widget_top-clicks li, .footer-sidebar .widget_top-posts li, .footer-sidebar .top_rated li, .footer-sidebar .widget_upcoming_events_widget .upcoming-events li, .primary-sidebar .widget_jp_blogs_i_follow li, - .primary-sidebar .widget_jp_blogs_i_follow li, .primary-sidebar .widget_top-clicks li, .primary-sidebar .widget_top-posts li, .primary-sidebar .top_rated li { @@ -330,14 +325,12 @@ img[id*="botd"] { padding: 0 0 6px; } - .footer-sidebar .widget_jp_blogs_i_follow li:last-child, .footer-sidebar .widget_jp_blogs_i_follow li:last-child, .footer-sidebar .widget_top-clicks li:last-child, .footer-sidebar .widget_top-posts li:last-child, .footer-sidebar .top_rated li:last-child, .footer-sidebar .widget_upcoming_events_widget .upcoming-events li:last-child, .primary-sidebar .widget_jp_blogs_i_follow li:last-child, - .primary-sidebar .widget_jp_blogs_i_follow li:last-child, .primary-sidebar .widget_top-clicks li:last-child, .primary-sidebar .widget_top-posts li:last-child, .primary-sidebar .top_rated li:last-child { diff --git a/projects/plugins/jetpack/modules/theme-tools/compat/twentysixteen.css b/projects/plugins/jetpack/modules/theme-tools/compat/twentysixteen.css index 6fb07a69bb1d2..34c720678f1cd 100644 --- a/projects/plugins/jetpack/modules/theme-tools/compat/twentysixteen.css +++ b/projects/plugins/jetpack/modules/theme-tools/compat/twentysixteen.css @@ -742,6 +742,7 @@ iframe[src^="http://api.mixcloud.com/"] { } .widget_jetpack_display_posts_widget .jetpack-display-remote-posts p { + /* stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values */ line-height: 1.615384615em !important; margin: 0 0 1.615384615em !important; } diff --git a/projects/plugins/jetpack/modules/theme-tools/social-menu/social-menu.css b/projects/plugins/jetpack/modules/theme-tools/social-menu/social-menu.css index 7777dbe245829..6f306f7867eb4 100644 --- a/projects/plugins/jetpack/modules/theme-tools/social-menu/social-menu.css +++ b/projects/plugins/jetpack/modules/theme-tools/social-menu/social-menu.css @@ -48,10 +48,8 @@ Genericons text-decoration: inherit; vertical-align: top; width: 1em; -} -/* Default */ -.jetpack-social-navigation-genericons a::before { + /* Default */ content: "\f415"; } diff --git a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css index 2294b46f2c36e..07a3101ea92f7 100644 --- a/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css +++ b/projects/plugins/jetpack/modules/widget-visibility/widget-conditions/widget-conditions.css @@ -71,10 +71,6 @@ margin-top: -28px; } -.widget-conditional .condition .actions { - margin-top: -28px; -} - .widget-conditional .condition-control a { text-decoration: none; position: absolute; diff --git a/projects/plugins/jetpack/modules/widgets/milestone/style-admin.css b/projects/plugins/jetpack/modules/widgets/milestone/style-admin.css index 6b1eabcf0196e..ad548c3104b1b 100644 --- a/projects/plugins/jetpack/modules/widgets/milestone/style-admin.css +++ b/projects/plugins/jetpack/modules/widgets/milestone/style-admin.css @@ -8,7 +8,7 @@ .jp-ms-data-time input[type="text"] { text-align: right; - width: 2.1em; + width: 3.2em; } .jp-ms-data-time .month { @@ -18,15 +18,6 @@ .jp-ms-data-time .year[type="text"] { text-align: right; - width: 3.2em; -} - -.jp-ms-data-time input[type="text"] { - text-align: right; - width: 3.2em; -} - -.jp-ms-data-time .year[type="text"] { width: 4.5em; } @@ -69,4 +60,4 @@ .editor-styles-wrapper ul.milestone-type { list-style-type: none; padding-left: 0; -} \ No newline at end of file +} diff --git a/projects/plugins/jetpack/modules/widgets/social-icons/social-icons-admin.css b/projects/plugins/jetpack/modules/widgets/social-icons/social-icons-admin.css index 9ddd00b5e394d..5fd25e1baec24 100644 --- a/projects/plugins/jetpack/modules/widgets/social-icons/social-icons-admin.css +++ b/projects/plugins/jetpack/modules/widgets/social-icons/social-icons-admin.css @@ -22,6 +22,7 @@ html[class*='wordpress_com'] .jetpack-social-icons-widget-item:hover, .jetpack-social-icons-widget-item.ui-sortable-helper { border-color: #999; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } html[class*='wordpress_com'] .jetpack-social-icons-widget-item.ui-sortable-helper, @@ -29,10 +30,6 @@ html[class*='wordpress_com'] .jetpack-social-icons-widget-item.ui-sortable-helpe border-color: #a8bece; } -.jetpack-social-icons-widget-item.ui-sortable-helper { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - .jetpack-social-icons-widget-item.ui-state-placeholder { border-color: #a7aaad; border-style: dashed; diff --git a/projects/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss b/projects/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss index c0e0b18a15633..3ea822a1fc997 100644 --- a/projects/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss +++ b/projects/plugins/jetpack/scss/_utilities/mixins/_breakpoint.scss @@ -1,16 +1,17 @@ -// ========================================================================== -// Breakpoint Mixin -// -// Uses Sass Maps which requires Sass v3.3.0 or newer -// -// -// EXAMPLE -// -// body { -// @include breakpoint(tablet){ -// font-size: 14px; -// }; -// } +/** + * Breakpoint Mixin + * + * Uses Sass Maps which requires Sass v3.3.0 or newer + * + * + * EXAMPLE + * + * body { + * @include breakpoint(tablet){ + * font-size: 14px; + * }; + * } + */ // ========================================================================== diff --git a/projects/plugins/jetpack/scss/atoms/_buttons.scss b/projects/plugins/jetpack/scss/atoms/_buttons.scss index 06d14807f64dd..cc259261a9c3a 100644 --- a/projects/plugins/jetpack/scss/atoms/_buttons.scss +++ b/projects/plugins/jetpack/scss/atoms/_buttons.scss @@ -7,7 +7,7 @@ transition: all .1s ease-in-out; } -.jp-button { +.jp-button, %jp-button { display: inline-block; position: relative; padding: em(10px, 13px) em(19px, 13px); @@ -37,7 +37,7 @@ .jp-button--settings { - @extend .jp-button; + @extend %jp-button; background: #93b45f; color: #e8eedf; diff --git a/projects/plugins/jetpack/scss/atoms/icons/_automatticons.scss b/projects/plugins/jetpack/scss/atoms/icons/_automatticons.scss index b64d13eaa4074..ed144e52822c8 100644 --- a/projects/plugins/jetpack/scss/atoms/icons/_automatticons.scss +++ b/projects/plugins/jetpack/scss/atoms/icons/_automatticons.scss @@ -1,8 +1,8 @@ -// ========================================================================== -// Automatticons -// -// A quick reference -// ========================================================================== +/** + * Automatticons + * + * A quick reference + */ $automatticons: 'automatticons'; diff --git a/projects/plugins/jetpack/scss/atoms/typography/_functions.scss b/projects/plugins/jetpack/scss/atoms/typography/_functions.scss index c8f08d928d8d1..c21d0445f798d 100644 --- a/projects/plugins/jetpack/scss/atoms/typography/_functions.scss +++ b/projects/plugins/jetpack/scss/atoms/typography/_functions.scss @@ -1,12 +1,13 @@ -// ========================================================================== -// em() -// -// Convert px to em in a readable fashion. -// ========================================================================== +/** + * em() + * + * Convert px to em in a readable fashion. + * ========================================================================== -// Examples: -// 1. font-size: em(14px); -// 2. font-size: em(30px/14px); + * Examples: + * 1. font-size: em(14px); + * 2. font-size: em(30px/14px); + */ @use "sass:math"; @function em($value, $context: map-get($root-font, font-size)) { diff --git a/projects/plugins/jetpack/scss/templates/_connection-landing.scss b/projects/plugins/jetpack/scss/templates/_connection-landing.scss index 96a5fa1ee6deb..83b4eba5dbc76 100644 --- a/projects/plugins/jetpack/scss/templates/_connection-landing.scss +++ b/projects/plugins/jetpack/scss/templates/_connection-landing.scss @@ -24,6 +24,7 @@ h1 { font-weight: 400; + // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values line-height: 1.75em; position: relative; z-index: 3; diff --git a/projects/plugins/jetpack/scss/templates/_main.scss b/projects/plugins/jetpack/scss/templates/_main.scss index 2ebf12bedffc1..64994bcfe62f3 100644 --- a/projects/plugins/jetpack/scss/templates/_main.scss +++ b/projects/plugins/jetpack/scss/templates/_main.scss @@ -399,6 +399,7 @@ }; } +// stylelint-disable-next-line no-duplicate-selectors -- This is part of the larger footer nav section. .footer nav { max-width: 100%; @@ -578,13 +579,6 @@ } } - .squeezer { - - h2 { - font-size: 1em; - } - } - h2 { color: #fff; margin: 0; @@ -614,6 +608,10 @@ top: calc( 50% - 22px ); } + h2 { + font-size: 1em; + } + @include breakpoint(large-phone){ padding: 23px; diff --git a/projects/plugins/jetpack/scss/wordads-ccpa.scss b/projects/plugins/jetpack/scss/wordads-ccpa.scss index 1af71a0ffbf9e..7b46415536559 100644 --- a/projects/plugins/jetpack/scss/wordads-ccpa.scss +++ b/projects/plugins/jetpack/scss/wordads-ccpa.scss @@ -140,21 +140,6 @@ body.admin-bar .cleanslate .components-modal__frame { align-items: center !important; } - .components-button { - display: inline-flex !important; - text-decoration: none !important; - font-size: 13px !important; - margin: 0 !important; - border: 0 !important; - cursor: pointer !important; - -webkit-appearance: none !important; - background: none !important; - - /* Buttons that look like links, for a cross of good semantics with the visual */ - - /* Link buttons that are red to indicate destructive behavior. */ - } - .components-icon-button { display: flex !important; align-items: center !important; @@ -245,6 +230,10 @@ body.admin-bar .cleanslate .components-modal__frame { .components-form-toggle .components-form-toggle__on { left: 8px !important; display: none !important; + outline: 1px solid transparent !important; + outline-offset: -1px !important; + border: 1px solid #000 !important; + filter: invert(100%) contrast(500%) !important; } .components-form-toggle .components-form-toggle__track { @@ -353,13 +342,6 @@ body.admin-bar .cleanslate .components-modal__frame { content: "" !important; } - .components-form-toggle .components-form-toggle__on { - outline: 1px solid transparent !important; - outline-offset: -1px !important; - border: 1px solid #000 !important; - filter: invert(100%) contrast(500%) !important; - } - .components-button { display: inline-flex !important; text-decoration: none !important; diff --git a/projects/plugins/protect/changelog/fix-stylelint-round_x_of_cleanup b/projects/plugins/protect/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/plugins/protect/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss index 461b542a2267f..fcfc29ad681ca 100644 --- a/projects/plugins/protect/src/js/components/threats-list/styles.module.scss +++ b/projects/plugins/protect/src/js/components/threats-list/styles.module.scss @@ -19,11 +19,16 @@ } .threat-footer { + margin-top: calc( var( --spacing-base ) * 3 ); // 24px + width: 100%; display: flex; - justify-content: flex-end; + justify-content: right; + padding-top: calc( var( --spacing-base ) * 4 ); // 32px border-top: 1px solid var( --jp-gray ); - padding-top: calc( var( --spacing-base ) * 3 ); // 24px - margin-top: calc( var( --spacing-base ) * 3 ); // 24px + + > :last-child { + margin-left: calc( var( --spacing-base ) * 2 ); // 16px + } } .threat-item-cta { @@ -46,18 +51,6 @@ gap: calc( var( --spacing-base ) * 2 ); // 16px } -.threat-footer { - width: 100%; - display: flex; - justify-content: right; - padding-top: calc( var( --spacing-base ) * 4 ); // 32px - border-top: 1px solid var( --jp-gray ); - - > :last-child { - margin-left: calc( var( --spacing-base ) * 2 ); // 16px - } -} - .accordion-header { display: grid; grid-template-columns: repeat( 9, 1fr ); diff --git a/projects/plugins/vaultpress/changelog/fix-stylelint-round_x_of_cleanup b/projects/plugins/vaultpress/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/plugins/vaultpress/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/plugins/vaultpress/nav-styles.css b/projects/plugins/vaultpress/nav-styles.css index 1cc4ffdce133f..c2f7eda36855e 100644 --- a/projects/plugins/vaultpress/nav-styles.css +++ b/projects/plugins/vaultpress/nav-styles.css @@ -50,6 +50,7 @@ .dops-notice .dops-notice__dismiss { overflow: hidden; + color: #bbb; } .dops-notice.is-success .dops-notice__dismiss, .dops-notice.is-error .dops-notice__dismiss, .dops-notice.is-warning .dops-notice__dismiss, .dops-notice.is-info .dops-notice__dismiss { @@ -158,10 +159,6 @@ } } -.dops-notice .dops-notice__dismiss { - color: #bbb; -} - .dops-notice .dops-notice__dismiss:hover, .dops-notice .dops-notice__dismiss:focus { color: #fff; } diff --git a/projects/plugins/vaultpress/styles.css b/projects/plugins/vaultpress/styles.css index 925474d688295..4813a5d48097c 100644 --- a/projects/plugins/vaultpress/styles.css +++ b/projects/plugins/vaultpress/styles.css @@ -885,7 +885,7 @@ Progress Bars margin: 0; padding: 15px 30px; width: 100%; - line-height: 100%; + line-height: 1; border-top: 1px solid rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.05); } @@ -988,7 +988,7 @@ Progress Bars color: #777; margin: 0 0 15px 0; font-size: 12px; - line-height: 160%; + line-height: 1.6; } .vp_progress-description strong { @@ -999,7 +999,7 @@ Progress Bars font-size: 12px; color: #999; font-style: italic; - line-height: 160%; + line-height: 1.6; margin: 0 0 30px 0; } diff --git a/projects/plugins/wpcomsh/changelog/fix-stylelint-round_x_of_cleanup b/projects/plugins/wpcomsh/changelog/fix-stylelint-round_x_of_cleanup new file mode 100644 index 0000000000000..aa51ece224cc4 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/fix-stylelint-round_x_of_cleanup @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Linting: Do additional stylesheet cleanup. diff --git a/projects/plugins/wpcomsh/custom-colors/css/colors-control.css b/projects/plugins/wpcomsh/custom-colors/css/colors-control.css index 642f1336c7911..e6b69284f82ef 100644 --- a/projects/plugins/wpcomsh/custom-colors/css/colors-control.css +++ b/projects/plugins/wpcomsh/custom-colors/css/colors-control.css @@ -752,6 +752,7 @@ input#iris { /* Restored CSS from wp.com theme customizer updates */ +/* stylelint-disable no-duplicate-selectors -- Preserving sectioning. */ .colour-lovers { border-radius: 2px; overflow: hidden; @@ -793,6 +794,7 @@ input#iris { .the-picker p { margin-top: 30px; } +/* stylelint-enable no-duplicate-selectors */ .the-picker p a { font-weight: 700; diff --git a/projects/plugins/wpcomsh/custom-colors/css/rtl/colors-control-rtl.css b/projects/plugins/wpcomsh/custom-colors/css/rtl/colors-control-rtl.css index fe94a50fa65e5..15e85f5d7a9ad 100644 --- a/projects/plugins/wpcomsh/custom-colors/css/rtl/colors-control-rtl.css +++ b/projects/plugins/wpcomsh/custom-colors/css/rtl/colors-control-rtl.css @@ -42,12 +42,12 @@ .color-grid.main li { height: 55px; width: 55px; - background-image: radial-gradient( center top, circle farthest-side, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 80% ); background-position: center center; background-size: cover; - border: 2px solid #fff; border-radius: 50%; - box-shadow: inset 0 -1px 4px rgba(0,0,0,0.1); + background-image: none; + border: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.1); } .disable-background .color-grid.main li, @@ -87,12 +87,13 @@ height: auto; text-align: center; width: 100%; + border-bottom: none; + background-color: transparent; } .color-grid li { background: #f1f1f1; border: 5px solid rgba(0,0,0,0.1); - border-width: 1px 1px 5px; font-size: 0; box-sizing: border-box; display: block; @@ -101,6 +102,7 @@ margin: 0; height: 50px; width: 80px; + border-width: 1px; } .color-grid li a { @@ -138,13 +140,13 @@ color: #fff; content: '\f406'; font-family: Noticons; - font-size: 21px; opacity: 0.4; float: right; position: relative; - right: 15px; - top: 18px; text-shadow: 0 0 2px rgba(0,0,0,0.4); + font-size: 20px; + right: 17px; + top: 20px; } .color-grid.main .selected { @@ -191,9 +193,12 @@ a.revert { display: none; padding: 10px 20px; position: relative; - right: -20px; + right: -20px; width: 260px; z-index: 2; + background-color: transparent; + border-top: 1px solid #333; + margin-top: 40px; } /* override new-customizer.css */ @@ -230,7 +235,7 @@ a.revert { clear: both; color: #646464; font-size: 13px; - margin: 10px 0 10px; + margin: 30px 0 10px; } /* override new-customizer.css */ @@ -325,12 +330,13 @@ a.revert { /* =Color Palettes ----------------------------------------------- */ .colour-lovers { - border-radius: 4px; float: right; margin: 0 0 18px 18px; height: 50px; width: 72px; position: relative; + border-radius: 2px; + overflow: hidden; } .colour-lovers:nth-of-type(3) { @@ -764,43 +770,6 @@ input#iris { /* Restored CSS from wp.com theme customizer updates */ -.colour-lovers { - border-radius: 2px; - overflow: hidden; -} - -.color-grid li { - border-width: 1px; -} - -.color-grid.main { - border-bottom: none; - background-color: transparent; -} - -.color-grid.main li { - background-image: none; - border: none; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.1); -} - -.color-grid .unavailable::before { - font-size: 20px; - right: 17px; - top: 20px; -} - -.the-picker { - background-color: transparent; - border-top: 1px solid #333; - margin-top: 40px; - padding-top: 10px; -} - -.the-picker p { - margin-top: 30px; -} - .the-picker p a { font-weight: 700; } diff --git a/tools/js-tools/stylelint.config.base.mjs b/tools/js-tools/stylelint.config.base.mjs index 261c383ee7c72..951056194c297 100644 --- a/tools/js-tools/stylelint.config.base.mjs +++ b/tools/js-tools/stylelint.config.base.mjs @@ -27,14 +27,24 @@ const baseConfig = { // https://github.com/stylelint/stylelint/issues/7844#issuecomment-2230857428 'no-descending-specificity': null, + 'property-no-unknown': [ + true, + { + ignoreSelectors: [ ':export' ], // Ignore selector used by CSS Modules. + ignoreProperties: [ 'shadow-color' ], // Ignore property used by React Native. + }, + ], + // Disabled until a valid pattern has been decided on: https://github.com/WordPress/gutenberg/issues/28616 'selector-class-pattern': null, - // Allow some pseudo-classes that are needed for CSS modules. + // Disabled due to widespread inconsistent patterns throughout that would require coordinated changes across CSS, JS, and PHP across multiple repos. + 'selector-id-pattern': null, + 'selector-pseudo-class-no-unknown': [ true, { - ignorePseudoClasses: [ 'export', 'global' ], + ignorePseudoClasses: [ 'export', 'global' ], // Ignore pseudo-classes used by CSS Modules. }, ], @@ -47,14 +57,8 @@ const baseConfig = { ], // Disable all other rules for now. - 'declaration-property-unit-allowed-list': null, - 'no-duplicate-selectors': null, - 'property-no-unknown': null, - 'scss/at-extend-no-missing-placeholder': null, - 'scss/comment-no-empty': null, 'scss/no-global-function-names': null, 'scss/selector-no-redundant-nesting-selector': null, - 'selector-id-pattern': null, }, };