From 8cbc9882cfd4ce793fabf3de926a24a1c6cb8b8b Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 8 Aug 2018 17:39:25 +1000 Subject: [PATCH] Add stylelint for SCSS linting (#8647) * Add stylelint Adds stylelint and configures it to lint SCSS files with a very conservative rule set. * Make "npm run lint" run its tasks concurrently --- .stylelintrc.json | 17 + core-blocks/button/editor.scss | 4 +- core-blocks/button/style.scss | 4 +- core-blocks/code/editor.scss | 4 +- core-blocks/code/theme.scss | 2 +- core-blocks/cover-image/editor.scss | 4 +- core-blocks/cover-image/style.scss | 6 +- core-blocks/file/style.scss | 2 +- core-blocks/freeform/editor.scss | 12 +- core-blocks/gallery/editor.scss | 28 +- core-blocks/gallery/style.scss | 10 +- core-blocks/image/editor.scss | 4 +- core-blocks/latest-posts/style.scss | 2 +- core-blocks/more/editor.scss | 8 +- core-blocks/nextpage/editor.scss | 6 +- core-blocks/paragraph/style.scss | 4 +- core-blocks/pullquote/editor.scss | 2 +- core-blocks/separator/style.scss | 2 +- core-blocks/separator/theme.scss | 4 +- core-blocks/spacer/editor.scss | 4 +- core-blocks/style.scss | 4 +- core-blocks/text-columns/style.scss | 6 +- edit-post/assets/stylesheets/_animations.scss | 8 +- edit-post/assets/stylesheets/_colors.scss | 86 +- edit-post/assets/stylesheets/_mixins.scss | 48 +- edit-post/assets/stylesheets/_variables.scss | 10 +- edit-post/assets/stylesheets/_z-index.scss | 90 +- edit-post/assets/stylesheets/main.scss | 54 +- .../header/header-toolbar/style.scss | 2 +- .../components/header/more-menu/style.scss | 2 +- .../header/pinned-plugins/style.scss | 6 +- edit-post/components/header/style.scss | 6 +- edit-post/components/layout/style.scss | 8 +- .../meta-boxes/meta-boxes-area/style.scss | 9 +- .../sidebar/post-visibility/style.scss | 2 +- .../sidebar/settings-header/style.scss | 2 +- edit-post/components/sidebar/style.scss | 10 +- edit-post/components/text-editor/style.scss | 4 +- edit-post/components/visual-editor/style.scss | 10 +- package-lock.json | 1035 ++++++++++++++++- package.json | 6 +- packages/components/src/button/style.scss | 80 +- .../src/checkbox-control/style.scss | 4 +- .../components/src/color-indicator/style.scss | 6 +- .../components/src/color-palette/style.scss | 49 +- packages/components/src/date-time/style.scss | 22 +- packages/components/src/disabled/style.scss | 4 +- packages/components/src/draggable/style.scss | 2 +- packages/components/src/drop-zone/style.scss | 10 +- .../components/src/form-toggle/style.scss | 24 +- .../src/form-token-field/style.scss | 6 +- .../higher-order/navigate-regions/style.scss | 6 +- .../components/src/icon-button/style.scss | 6 +- packages/components/src/menu-item/style.scss | 2 +- packages/components/src/modal/style.scss | 14 +- packages/components/src/notice/style.scss | 2 +- packages/components/src/panel/style.scss | 4 +- .../components/src/placeholder/style.scss | 2 +- packages/components/src/popover/style.scss | 30 +- .../components/src/radio-control/style.scss | 4 +- .../components/src/range-control/style.scss | 2 +- .../components/src/select-control/style.scss | 2 +- packages/components/src/style.scss | 74 +- packages/components/src/toolbar/style.scss | 24 +- packages/components/src/tooltip/style.scss | 6 +- .../src/components/block-drop-zone/style.scss | 6 +- .../src/components/block-inspector/style.scss | 2 +- .../src/components/block-list/style.scss | 74 +- .../src/components/block-mover/style.scss | 12 +- .../src/components/block-preview/style.scss | 2 +- .../components/block-settings-menu/style.scss | 6 +- .../src/components/block-styles/style.scss | 4 +- .../src/components/block-switcher/style.scss | 6 +- .../src/components/block-toolbar/style.scss | 4 +- .../components/block-types-list/style.scss | 4 +- .../src/components/color-palette/control.scss | 2 +- .../default-block-appender/style.scss | 14 +- .../components/document-outline/style.scss | 10 +- .../src/components/inner-blocks/style.scss | 6 +- .../editor/src/components/inserter/style.scss | 4 +- .../src/components/page-attributes/style.scss | 3 +- .../components/post-featured-image/style.scss | 2 +- .../src/components/post-permalink/style.scss | 4 +- .../components/post-saved-state/style.scss | 4 +- .../src/components/post-taxonomies/style.scss | 2 +- .../components/post-text-editor/style.scss | 4 +- .../src/components/post-title/style.scss | 6 +- .../rich-text/core-tokens/image/style.scss | 2 +- .../rich-text/format-toolbar/style.scss | 2 +- .../src/components/rich-text/style.scss | 11 +- .../components/rich-text/tokens/ui/style.scss | 2 +- .../skip-to-selected-block/style.scss | 6 +- .../src/components/url-input/style.scss | 8 +- .../editor/src/components/warning/style.scss | 6 +- packages/editor/src/style.scss | 88 +- .../nux/src/components/dot-tip/style.scss | 36 +- packages/nux/src/style.scss | 2 +- 97 files changed, 1633 insertions(+), 633 deletions(-) create mode 100644 .stylelintrc.json diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000000000..ced1059555879 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,17 @@ +{ + "extends": "stylelint-config-wordpress", + "rules": { + "at-rule-empty-line-before": null, + "at-rule-no-unknown": null, + "comment-empty-line-before": null, + "declaration-block-no-duplicate-properties": null, + "declaration-property-unit-whitelist": null, + "font-weight-notation": null, + "max-line-length": null, + "no-descending-specificity": null, + "no-duplicate-selectors": null, + "rule-empty-line-before": null, + "selector-class-pattern": null, + "value-keyword-case": null + } +} diff --git a/core-blocks/button/editor.scss b/core-blocks/button/editor.scss index 40b3f90f77a69..6f3f6086769c8 100644 --- a/core-blocks/button/editor.scss +++ b/core-blocks/button/editor.scss @@ -38,7 +38,7 @@ .editor-url-input__suggestions { width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size; - z-index: z-index( '.core-blocks-button__inline-link .editor-url-input__suggestions' ); + z-index: z-index(".core-blocks-button__inline-link .editor-url-input__suggestions"); } > .dashicon { @@ -49,7 +49,7 @@ color: $dark-gray-100; } - .editor-url-input input[type=text]::placeholder { + .editor-url-input input[type="text"]::placeholder { color: $dark-gray-100; } diff --git a/core-blocks/button/style.scss b/core-blocks/button/style.scss index 91ab636558dc7..c3b8ec7c17cde 100644 --- a/core-blocks/button/style.scss +++ b/core-blocks/button/style.scss @@ -13,7 +13,7 @@ $blocks-button__line-height: $big-font-size + 6px; font-size: $big-font-size; line-height: $blocks-button__line-height; margin: 0; - padding: ( $blocks-button__height - $blocks-button__line-height ) / 2 24px; + padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px; text-align: center; text-decoration: none; white-space: normal; @@ -80,7 +80,7 @@ $blocks-button__line-height: $big-font-size + 6px; } &.has-very-light-gray-background-color { - border-color: #eeeeee; + border-color: #eee; } &.has-cyan-bluish-gray-background-color { diff --git a/core-blocks/code/editor.scss b/core-blocks/code/editor.scss index a06086944cd38..681484c287bb5 100644 --- a/core-blocks/code/editor.scss +++ b/core-blocks/code/editor.scss @@ -2,7 +2,7 @@ font-family: $editor-html-font; font-size: $text-editor-font-size; color: $dark-gray-800; - padding: .8em 1.6em; + padding: 0.8em 1.6em; border: $border-width solid $light-gray-500; border-radius: 4px; } @@ -33,7 +33,7 @@ cursor: default; } - &> span { + & > span { border: $border-width solid transparent; padding: 0 6px; box-sizing: content-box; diff --git a/core-blocks/code/theme.scss b/core-blocks/code/theme.scss index c44affa6dda6e..91edcbf03fed7 100644 --- a/core-blocks/code/theme.scss +++ b/core-blocks/code/theme.scss @@ -2,7 +2,7 @@ font-family: $editor-html-font; font-size: $text-editor-font-size; color: $dark-gray-800; - padding: .8em 1.6em; + padding: 0.8em 1.6em; border: 1px solid $light-gray-500; border-radius: 4px; } diff --git a/core-blocks/cover-image/editor.scss b/core-blocks/cover-image/editor.scss index 1f4af11e6603b..d62d5806fd3b7 100644 --- a/core-blocks/cover-image/editor.scss +++ b/core-blocks/cover-image/editor.scss @@ -10,7 +10,7 @@ margin: 0 -2px; border-radius: 2px; box-shadow: none; - background: rgba( 255, 255, 255, 0.3 ); + background: rgba(255, 255, 255, 0.3); } .editor-rich-text strong { @@ -25,7 +25,7 @@ justify-content: flex-start; } - &.has-right-content .editor-rich-text__inline-toolbar{ + &.has-right-content .editor-rich-text__inline-toolbar { justify-content: flex-end; } } diff --git a/core-blocks/cover-image/style.scss b/core-blocks/cover-image/style.scss index f61cea278841f..8c38d4aa2939a 100644 --- a/core-blocks/cover-image/style.scss +++ b/core-blocks/cover-image/style.scss @@ -53,18 +53,18 @@ } &.has-background-dim::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; - background-color: rgba( $black, 0.5 ); + background-color: rgba($black, 0.5); } @for $i from 1 through 10 { &.has-background-dim.has-background-dim-#{ $i * 10 }::before { - background-color: rgba( $black, $i * 0.1 ); + background-color: rgba($black, $i * 0.1); } } diff --git a/core-blocks/file/style.scss b/core-blocks/file/style.scss index 744e89e582f2a..f25d4f08d9f60 100644 --- a/core-blocks/file/style.scss +++ b/core-blocks/file/style.scss @@ -26,7 +26,7 @@ &:active { box-shadow: none; color: $white; - opacity: .85; + opacity: 0.85; text-decoration: none; } } diff --git a/core-blocks/freeform/editor.scss b/core-blocks/freeform/editor.scss index 26b5a07935f03..91bb7b318fd88 100644 --- a/core-blocks/freeform/editor.scss +++ b/core-blocks/freeform/editor.scss @@ -110,7 +110,7 @@ margin: 15px auto; outline: 0; cursor: default; - border: 2px dashed rgb( 186, 186, 186 ); + border: 2px dashed rgb(186, 186, 186); } } @@ -132,17 +132,17 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { - margin-top: 0; - padding-top: 0; + margin-top: 0; + padding-top: 0; } .freeform-toolbar { width: auto; margin: 0 #{ -$parent-block-padding }; position: sticky; - z-index: z-index( '.freeform-toolbar' ); + z-index: z-index(".freeform-toolbar"); top: $block-padding; - transform: translateY( -$block-padding ); + transform: translateY(-$block-padding); } .freeform-toolbar:empty { @@ -153,7 +153,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { &::before { font-family: $default-font; font-size: $default-font-size; - content: attr( data-placeholder ); + content: attr(data-placeholder); color: #555d66; line-height: 37px; padding: $block-padding; diff --git a/core-blocks/gallery/editor.scss b/core-blocks/gallery/editor.scss index 7190c3051822d..7630e11bc751e 100644 --- a/core-blocks/gallery/editor.scss +++ b/core-blocks/gallery/editor.scss @@ -1,15 +1,15 @@ .wp-block-gallery.components-placeholder { - margin: 0px; + margin: 0; } // Allow gallery items to go edge to edge. -.gutenberg .wp-block-gallery:not( .components-placeholder ) { +.gutenberg .wp-block-gallery:not(.components-placeholder) { margin-left: -8px; margin-right: -8px; } // Don't use negative margins when full-wide. -.gutenberg [data-align="full"] .wp-block-gallery:not( .components-placeholder ) { +.gutenberg [data-align="full"] .wp-block-gallery:not(.components-placeholder) { margin-left: auto; margin-right: auto; } @@ -17,7 +17,7 @@ .blocks-gallery-item { .is-selected { - outline: 4px solid theme( primary ); + outline: 4px solid theme(primary); outline-offset: -4px; } @@ -32,13 +32,13 @@ overflow-y: auto; } - .editor-rich-text figcaption:not( [data-is-placeholder-visible="true"] ) { + .editor-rich-text figcaption:not([data-is-placeholder-visible="true"]) { position: relative; overflow: hidden; } .is-selected .editor-rich-text { - width: calc( 100% - 8px ); + width: calc(100% - 8px); left: 4px; margin-top: -4px; @@ -84,9 +84,9 @@ position: absolute; top: 0; right: 0; - background-color: theme( primary ); + background-color: theme(primary); display: inline-flex; - z-index: z-index( '.core-blocks-gallery-item__inline-menu' ); + z-index: z-index(".core-blocks-gallery-item__inline-menu"); .components-button { color: $white; @@ -105,16 +105,18 @@ position: absolute; top: 50%; left: 50%; - transform: translate( -50%, -50% ); + transform: translate(-50%, -50%); } // IE11 doesn't support object-fit or flex very well, so we inline-block. -@media all and ( -ms-high-contrast: none ) { - *::-ms-backdrop, .blocks-gallery-item { +@media all and (-ms-high-contrast: none) { + *::-ms-backdrop, + .blocks-gallery-item { display: inline-block; } - *::-ms-backdrop, .blocks-gallery-item img { + *::-ms-backdrop, + .blocks-gallery-item img { width: 100%; } -} \ No newline at end of file +} diff --git a/core-blocks/gallery/style.scss b/core-blocks/gallery/style.scss index 71eaa2c126665..ba6da0fffdf6b 100644 --- a/core-blocks/gallery/style.scss +++ b/core-blocks/gallery/style.scss @@ -2,7 +2,7 @@ display: flex; flex-wrap: wrap; list-style-type: none; - padding: 0px; + padding: 0; // allow gallery items to go edge to edge margin: 0 -8px 0 -8px; @@ -37,8 +37,8 @@ color: $white; text-align: center; font-size: $default-font-size; - background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent ); - + background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent); + img { display: inline; } @@ -61,7 +61,7 @@ // Responsive fallback value, 2 columns & .blocks-gallery-image, & .blocks-gallery-item { - width: calc( 100% / 2 - 16px ); + width: calc(100% / 2 - 16px); } &.columns-1 .blocks-gallery-image, @@ -73,7 +73,7 @@ @for $i from 3 through 8 { &.columns-#{ $i } .blocks-gallery-image, &.columns-#{ $i } .blocks-gallery-item { - width: calc(100% / #{ $i } - 16px ); + width: calc(100% / #{ $i } - 16px); } } } diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss index 48f3de5183881..adc34413965de 100644 --- a/core-blocks/image/editor.scss +++ b/core-blocks/image/editor.scss @@ -29,11 +29,11 @@ width: 16px !important; height: 16px !important; position: absolute; - background: theme( primary ); + background: theme(primary); .wp-block-image.is-focused & { display: block; - z-index: z-index( '.wp-block-image__resize-handlers' ); + z-index: z-index(".wp-block-image__resize-handlers"); } } diff --git a/core-blocks/latest-posts/style.scss b/core-blocks/latest-posts/style.scss index cbab1a36c65ab..2bbfb7384558b 100644 --- a/core-blocks/latest-posts/style.scss +++ b/core-blocks/latest-posts/style.scss @@ -20,7 +20,7 @@ @include break-small { @for $i from 2 through 6 { &.columns-#{ $i } li { - width: calc( ( 100% / #{ $i } ) - 16px ); + width: calc((100% / #{ $i }) - 16px); } } } diff --git a/core-blocks/more/editor.scss b/core-blocks/more/editor.scss index 180ee3c8d369a..c0d2955bfeb5d 100644 --- a/core-blocks/more/editor.scss +++ b/core-blocks/more/editor.scss @@ -9,7 +9,7 @@ white-space: nowrap; // Label - input[type=text] { + input[type="text"] { font-size: $default-font-size; text-transform: uppercase; font-weight: 600; @@ -32,12 +32,12 @@ // Dashed line &::before { - content: ''; + content: ""; position: absolute; - top: calc( 50% ); + top: calc(50%); left: 0; right: 0; border-top: 3px dashed $light-gray-700; - z-index: z-index( '.editor-block-list__block .wp-block-more::before' ); + z-index: z-index(".editor-block-list__block .wp-block-more::before"); } } diff --git a/core-blocks/nextpage/editor.scss b/core-blocks/nextpage/editor.scss index 4956abfa47790..0914b06af3bbb 100644 --- a/core-blocks/nextpage/editor.scss +++ b/core-blocks/nextpage/editor.scss @@ -24,12 +24,12 @@ // Dashed line &::before { - content: ''; + content: ""; position: absolute; - top: calc( 50% ); + top: calc(50%); left: 0; right: 0; border-top: 3px dashed $light-gray-700; - z-index: z-index( '.editor-block-list__block .wp-block-more::before' ); + z-index: z-index(".editor-block-list__block .wp-block-more::before"); } } diff --git a/core-blocks/paragraph/style.scss b/core-blocks/paragraph/style.scss index ab1be60eb7e01..25d8cea731f3e 100644 --- a/core-blocks/paragraph/style.scss +++ b/core-blocks/paragraph/style.scss @@ -19,12 +19,12 @@ p { // number of bugs in combination with `contenteditable` fields. The caret // cannot be set around it, caret position calculation fails in Chrome, and // typing at the end of the paragraph doesn't work. - &.has-drop-cap:not( :focus ):first-letter { + &.has-drop-cap:not(:focus)::first-letter { float: left; font-size: 8.4em; line-height: 0.68; font-weight: 100; - margin: .05em .1em 0 0; + margin: 0.05em 0.1em 0 0; text-transform: uppercase; font-style: normal; } diff --git a/core-blocks/pullquote/editor.scss b/core-blocks/pullquote/editor.scss index 9dbd2bcffdf8b..fddbfa06b065a 100644 --- a/core-blocks/pullquote/editor.scss +++ b/core-blocks/pullquote/editor.scss @@ -21,7 +21,7 @@ .editor-rich-text__tinymce[data-is-empty="true"]::before { width: 100%; left: 50%; - transform: translateX( -50% ); + transform: translateX(-50%); } & > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, diff --git a/core-blocks/separator/style.scss b/core-blocks/separator/style.scss index 6a17542d8cd92..48c7d878091e6 100644 --- a/core-blocks/separator/style.scss +++ b/core-blocks/separator/style.scss @@ -15,7 +15,7 @@ height: auto; &::before { - content: '\00b7 \00b7 \00b7'; + content: "\00b7 \00b7 \00b7"; color: $dark-gray-700; font-size: 20px; letter-spacing: 2em; diff --git a/core-blocks/separator/theme.scss b/core-blocks/separator/theme.scss index 7d8b0f41ffe90..1d679a32ece8f 100644 --- a/core-blocks/separator/theme.scss +++ b/core-blocks/separator/theme.scss @@ -4,7 +4,7 @@ margin: 1.65em auto; // Default, thin style - &:not( .is-style-wide ):not( .is-style-dots ) { + &:not(.is-style-wide):not(.is-style-dots) { max-width: 100px; } -} \ No newline at end of file +} diff --git a/core-blocks/spacer/editor.scss b/core-blocks/spacer/editor.scss index 42a7bd423db9d..fd666690d043e 100644 --- a/core-blocks/spacer/editor.scss +++ b/core-blocks/spacer/editor.scss @@ -11,11 +11,11 @@ .core-blocks-spacer__resize-handler-bottom { display: none; border-radius: 50%; - border: 2px solid white; + border: 2px solid $white; width: 15px !important; height: 15px !important; position: absolute; - background: theme( primary ); + background: theme(primary); padding: 0 3px 3px 0; cursor: se-resize; left: 50% !important; diff --git a/core-blocks/style.scss b/core-blocks/style.scss index a13e6364e038a..5ae12e333274f 100644 --- a/core-blocks/style.scss +++ b/core-blocks/style.scss @@ -31,7 +31,7 @@ } .has-very-light-gray-background-color { - background-color: #eeeeee; + background-color: #eee; } .has-cyan-bluish-gray-background-color { @@ -75,7 +75,7 @@ } .has-very-light-gray-color { - color: #eeeeee; + color: #eee; } .has-cyan-bluish-gray-color { diff --git a/core-blocks/text-columns/style.scss b/core-blocks/text-columns/style.scss index 1fc3a2c524b75..63f0ac4e6f669 100644 --- a/core-blocks/text-columns/style.scss +++ b/core-blocks/text-columns/style.scss @@ -19,12 +19,12 @@ } &.columns-2 .wp-block-column { - width: calc( 100% / 2 ); + width: calc(100% / 2); } &.columns-3 .wp-block-column { - width: calc( 100% / 3 ); + width: calc(100% / 3); } &.columns-4 .wp-block-column { - width: calc( 100% / 4 ); + width: calc(100% / 4); } } diff --git a/edit-post/assets/stylesheets/_animations.scss b/edit-post/assets/stylesheets/_animations.scss index 0ebdbf228adef..d6cc20a043913 100644 --- a/edit-post/assets/stylesheets/_animations.scss +++ b/edit-post/assets/stylesheets/_animations.scss @@ -14,7 +14,7 @@ @mixin move_background { background-size: 28px 28px; - animation: move_background .5s linear infinite; + animation: move_background 0.5s linear infinite; } @mixin loading_fade { @@ -26,7 +26,7 @@ animation: slide_in_right 0.1s forwards; } -@mixin fade_in( $speed: 0.2s ) { +@mixin fade_in($speed: 0.2s) { animation: fade-in $speed ease-out; animation-fill-mode: forwards; } @@ -40,7 +40,7 @@ } } -@mixin region_focus( $speed: 0.2s ) { +@mixin region_focus($speed: 0.2s) { animation: editor_region_focus $speed ease-out; animation-fill-mode: forwards; -} \ No newline at end of file +} diff --git a/edit-post/assets/stylesheets/_colors.scss b/edit-post/assets/stylesheets/_colors.scss index 8d762146ce552..a9efc3eca4d68 100644 --- a/edit-post/assets/stylesheets/_colors.scss +++ b/edit-post/assets/stylesheets/_colors.scss @@ -27,44 +27,44 @@ $light-gray-100: #f8f9f9; $white: #fff; // Dark opacities, for use with light themes. -$dark-opacity-900: rgba( #000510, .9 ); -$dark-opacity-800: rgba( #00000a, .85 ); -$dark-opacity-700: rgba( #06060b, .8 ); -$dark-opacity-600: rgba( #000913, .75 ); -$dark-opacity-500: rgba( #0a1829, .7 ); -$dark-opacity-400: rgba( #0a1829, .65 ); -$dark-opacity-300: rgba( #0e1c2e, .6 ); -$dark-opacity-200: rgba( #162435, .55 ); -$dark-opacity-100: rgba(#223443, .5 ); -$dark-opacity-light-900: rgba( #304455, .45 ); -$dark-opacity-light-800: rgba( #425863, .4 ); -$dark-opacity-light-700: rgba( #667886, .35 ); -$dark-opacity-light-600: rgba( #7b86a2, .3 ); -$dark-opacity-light-500: rgba( #9197a2, .25 ); -$dark-opacity-light-400: rgba( #95959c, .2 ); -$dark-opacity-light-300: rgba( #829493, .15 ); -$dark-opacity-light-200: rgba( #8b8b96, .1 ); -$dark-opacity-light-100: rgba( #747474, .05 ); +$dark-opacity-900: rgba(#000510, 0.9); +$dark-opacity-800: rgba(#00000a, 0.85); +$dark-opacity-700: rgba(#06060b, 0.8); +$dark-opacity-600: rgba(#000913, 0.75); +$dark-opacity-500: rgba(#0a1829, 0.7); +$dark-opacity-400: rgba(#0a1829, 0.65); +$dark-opacity-300: rgba(#0e1c2e, 0.6); +$dark-opacity-200: rgba(#162435, 0.55); +$dark-opacity-100: rgba(#223443, 0.5); +$dark-opacity-light-900: rgba(#304455, 0.45); +$dark-opacity-light-800: rgba(#425863, 0.4); +$dark-opacity-light-700: rgba(#667886, 0.35); +$dark-opacity-light-600: rgba(#7b86a2, 0.3); +$dark-opacity-light-500: rgba(#9197a2, 0.25); +$dark-opacity-light-400: rgba(#95959c, 0.2); +$dark-opacity-light-300: rgba(#829493, 0.15); +$dark-opacity-light-200: rgba(#8b8b96, 0.1); +$dark-opacity-light-100: rgba(#747474, 0.05); // Light opacities, for use with dark themes. -$light-opacity-900: rgba( $white, 1 ); -$light-opacity-800: rgba( $white, .9 ); -$light-opacity-700: rgba( $white, .85 ); -$light-opacity-600: rgba( $white, .8 ); -$light-opacity-500: rgba( $white, .75 ); -$light-opacity-400: rgba( $white, .7 ); -$light-opacity-300: rgba( $white, .65 ); -$light-opacity-200: rgba( $white, .6 ); -$light-opacity-100: rgba( $white, .55 ); -$light-opacity-light-900: rgba( $white, .5 ); -$light-opacity-light-800: rgba( $white, .45 ); -$light-opacity-light-700: rgba( $white, .4 ); -$light-opacity-light-600: rgba( $white, .35 ); -$light-opacity-light-500: rgba( $white, .3 ); -$light-opacity-light-400: rgba( $white, .25 ); -$light-opacity-light-300: rgba( $white, .2 ); -$light-opacity-light-200: rgba( $white, .15 ); -$light-opacity-light-100: rgba( $white, .1 ); +$light-opacity-900: rgba($white, 1); +$light-opacity-800: rgba($white, 0.9); +$light-opacity-700: rgba($white, 0.85); +$light-opacity-600: rgba($white, 0.8); +$light-opacity-500: rgba($white, 0.75); +$light-opacity-400: rgba($white, 0.7); +$light-opacity-300: rgba($white, 0.65); +$light-opacity-200: rgba($white, 0.6); +$light-opacity-100: rgba($white, 0.55); +$light-opacity-light-900: rgba($white, 0.5); +$light-opacity-light-800: rgba($white, 0.45); +$light-opacity-light-700: rgba($white, 0.4); +$light-opacity-light-600: rgba($white, 0.35); +$light-opacity-light-500: rgba($white, 0.3); +$light-opacity-light-400: rgba($white, 0.25); +$light-opacity-light-300: rgba($white, 0.2); +$light-opacity-light-200: rgba($white, 0.15); +$light-opacity-light-100: rgba($white, 0.1); // Additional colors // some from https://make.wordpress.org/design/handbook/foundations/colors/ @@ -72,14 +72,14 @@ $blue-wordpress-700: #00669b; $blue-dark-900: #0071a1; $blue-medium-900: #006589; -$blue-medium-800: #00739C; -$blue-medium-700: #007FAC; -$blue-medium-600: #008DBE; +$blue-medium-800: #00739c; +$blue-medium-700: #007fac; +$blue-medium-600: #008dbe; $blue-medium-500: #00a0d2; -$blue-medium-400: #33B3DB; -$blue-medium-300: #66C6E4; -$blue-medium-200: #BFE7F3; -$blue-medium-100: #E5F5FA; +$blue-medium-400: #33b3db; +$blue-medium-300: #66c6e4; +$blue-medium-200: #bfe7f3; +$blue-medium-100: #e5f5fa; $blue-medium-highlight: #b3e7fe; $blue-medium-focus: #007cba; diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index 7c54743f48a07..9bad2c32e6261 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -3,37 +3,37 @@ */ @mixin break-huge() { - @media ( min-width: #{ ( $break-huge ) } ) { + @media (min-width: #{ ($break-huge) }) { @content; } } @mixin break-wide() { - @media ( min-width: #{ ( $break-wide ) } ) { + @media (min-width: #{ ($break-wide) }) { @content; } } @mixin break-large() { - @media ( min-width: #{ ( $break-large ) } ) { + @media (min-width: #{ ($break-large) }) { @content; } } @mixin break-medium() { - @media ( min-width: #{ ( $break-medium ) } ) { + @media (min-width: #{ ($break-medium) }) { @content; } } @mixin break-small() { - @media ( min-width: #{ ( $break-small ) } ) { + @media (min-width: #{ ($break-small) }) { @content; } } @mixin break-mobile() { - @media ( min-width: #{ ( $break-mobile ) } ) { + @media (min-width: #{ ($break-mobile) }) { @content; } } @@ -46,8 +46,8 @@ * than the space allows. */ -@mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0px, $z-index: false) { - content: ''; +@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) { + content: ""; display: block; position: absolute; -webkit-touch-callout: none; @@ -62,8 +62,8 @@ z-index: $z-index; } - @if $direction == 'bottom' { - background: linear-gradient( to top, rgba( $color, 0 ), $color 90% ); + @if $direction == "bottom" { + background: linear-gradient(to top, rgba($color, 0), $color 90%); left: $edge; right: $edge; top: $edge; @@ -71,8 +71,8 @@ width: auto; } - @if $direction == 'top' { - background: linear-gradient( to bottom, rgba( $color, 0 ), $color 90% ); + @if $direction == "top" { + background: linear-gradient(to bottom, rgba($color, 0), $color 90%); top: calc(100% - $size); left: $edge; right: $edge; @@ -80,8 +80,8 @@ width: auto; } - @if $direction == 'left' { - background: linear-gradient( to left, rgba( $color, 0 ), $color 90% ); + @if $direction == "left" { + background: linear-gradient(to left, rgba($color, 0), $color 90%); top: $edge; left: $edge; bottom: $edge; @@ -90,8 +90,8 @@ height: auto; } - @if $direction == 'right' { - background: linear-gradient( to right, rgba( $color, 0 ), $color 90% ); + @if $direction == "right" { + background: linear-gradient(to right, rgba($color, 0), $color 90%); top: $edge; bottom: $edge; right: $edge; @@ -114,7 +114,7 @@ @mixin button-style__hover { background-color: $white; color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 ); + box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white, 0 1px 1px rgba($dark-gray-900, 0.2); } @mixin button-style__active() { @@ -167,7 +167,7 @@ // Tabs, Inputs, Square buttons. @mixin input-style__neutral() { box-shadow: 0 0 0 transparent; - transition: box-shadow .1s linear; + transition: box-shadow 0.1s linear; border-radius: $radius-round-rectangle; border: $border-width solid $dark-gray-150; } @@ -214,7 +214,7 @@ } @mixin block-style__hover { - box-shadow: inset 0 0 0 1px rgba( $dark-gray-900, .2 ), 0 1px 3px rgba( $dark-gray-900, .4 ); + box-shadow: inset 0 0 0 1px rgba($dark-gray-900, 0.2), 0 1px 3px rgba($dark-gray-900, 0.4); } @mixin block-style__focus-active() { @@ -229,10 +229,10 @@ * Applies editor left position to the selector passed as argument */ -@mixin editor-left( $selector ) { +@mixin editor-left($selector) { #{$selector} { /* Set left position when auto-fold is not on the body element. */ left: 0; - + @include break-medium() { left: $admin-sidebar-width; } @@ -258,14 +258,14 @@ } /* Mobile menu opened. */ - @media ( max-width: #{ ( $break-medium ) } ) { + @media (max-width: #{ ($break-medium) }) { .auto-fold .wp-responsive-open #{$selector} { left: $admin-sidebar-width-big; } } /* In small screens with resposive menu expanded there is small white space. */ - @media ( max-width: #{ ( $break-small ) } ) { + @media (max-width: #{ ($break-small) }) { .auto-fold .wp-responsive-open #{$selector} { margin-left: -18px; } @@ -276,7 +276,7 @@ * Applies editor right position to the selector passed as argument */ -@mixin editor-right( $selector ) { +@mixin editor-right($selector) { #{ $selector } { right: 0; } diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index 4bb596a14dd59..a1bad8c80494f 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -3,7 +3,7 @@ */ // Fonts & basics -$default-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; +$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; $default-font-size: 13px; $default-line-height: 1.4; $editor-font: "Noto Serif", serif; @@ -27,10 +27,10 @@ $admin-sidebar-width-collapsed: 36px; $empty-paragraph-height: $text-editor-font-size * 4; // Visuals -$shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 ); -$shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 ); -$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .05 ), 0 2px 2px rgba( $dark-gray-900, .05 ); -$shadow-modal: 0 3px 30px rgba( $dark-gray-900, .2 ); +$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1); +$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1); +$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05); +$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2); // Editor Widths $sidebar-width: 280px; diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index d927b42813520..b93cbb32553e4 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -3,90 +3,90 @@ // value is designed to work with). $z-layers: ( - '.editor-block-list__block-edit::before': 0, - '.editor-block-switcher__arrow': 1, - '.editor-block-list__block .wp-block-more::before': -1, - '.editor-block-list__block {core/image aligned left or right}': 20, - '.editor-block-list__block {core/image aligned wide or fullwide}': 20, - '.freeform-toolbar': 10, - '.editor-block-list__breadcrumb': 1, - '.components-form-toggle__input': 1, - '.editor-inserter__tabs': 1, - '.editor-inserter__tab.is-active': 1, - '.components-panel__header': 1, - '.edit-post-meta-boxes-area.is-loading::before': 1, - '.edit-post-meta-boxes-area .spinner': 5, - '.editor-block-contextual-toolbar': 21, - '.components-popover__close': 5, - '.editor-block-list__insertion-point': 5, - '.editor-inserter-with-shortcuts': 5, - '.editor-warning': 6, - '.core-blocks-gallery-item__inline-menu': 20, - '.editor-url-input__suggestions': 30, - '.edit-post-header': 30, - '.core-blocks-button__inline-link .editor-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter - '.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter + ".editor-block-list__block-edit::before": 0, + ".editor-block-switcher__arrow": 1, + ".editor-block-list__block .wp-block-more::before": -1, + ".editor-block-list__block {core/image aligned left or right}": 20, + ".editor-block-list__block {core/image aligned wide or fullwide}": 20, + ".freeform-toolbar": 10, + ".editor-block-list__breadcrumb": 1, + ".components-form-toggle__input": 1, + ".editor-inserter__tabs": 1, + ".editor-inserter__tab.is-active": 1, + ".components-panel__header": 1, + ".edit-post-meta-boxes-area.is-loading::before": 1, + ".edit-post-meta-boxes-area .spinner": 5, + ".editor-block-contextual-toolbar": 21, + ".components-popover__close": 5, + ".editor-block-list__insertion-point": 5, + ".editor-inserter-with-shortcuts": 5, + ".editor-warning": 6, + ".core-blocks-gallery-item__inline-menu": 20, + ".editor-url-input__suggestions": 30, + ".edit-post-header": 30, + ".core-blocks-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter + ".wp-block-image__resize-handlers": 1, // Resize handlers above sibling inserter // Side UI active buttons - '.editor-block-settings-remove': 1, - '.editor-block-mover__control': 1, + ".editor-block-settings-remove": 1, + ".editor-block-mover__control": 1, // Should have lower index than anything else positioned inside the block containers - '.editor-block-list__block-draggable': 0, + ".editor-block-list__block-draggable": 0, // The draggable element should show up above the entire UI - '.components-draggable__clone': 1000000000, + ".components-draggable__clone": 1000000000, // Should have higher index than the inset/underlay used for dragging - '.components-placeholder__fieldset': 1, - '.editor-block-list__block-edit .reusable-block-edit-panel *': 1, + ".components-placeholder__fieldset": 1, + ".editor-block-list__block-edit .reusable-block-edit-panel *": 1, // Show drop zone above most standard content, but below any overlays - '.components-drop-zone': 100, - '.components-drop-zone__content': 110, + ".components-drop-zone": 100, + ".components-drop-zone__content": 110, // Block controls, particularly in nested contexts, floats aside block and // should overlap most block content. - '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}': 80, + ".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}": 80, // Small screen inner blocks overlay must be displayed above drop zone, // settings menu, and movers. - '.editor-inner-blocks__small-screen-overlay:after': 120, + ".editor-inner-blocks__small-screen-overlay:after": 120, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } - '.edit-post-sidebar': 100000, - '.edit-post-layout .edit-post-post-publish-panel': 100001, + ".edit-post-sidebar": 100000, + ".edit-post-layout .edit-post-post-publish-panel": 100001, // Show sidebar in greater than small viewports above editor related elements // but bellow #adminmenuback { z-index: 100 } - '.edit-post-sidebar {greater than small}': 90, + ".edit-post-sidebar {greater than small}": 90, // Show notices below expanded wp-admin submenus: // #adminmenuwrap { z-index: 9990 } - '.components-notice-list': 9989, + ".components-notice-list": 9989, // Show modal under the wp-admin menus and the popover - '.components-modal__screen-overlay': 100000, + ".components-modal__screen-overlay": 100000, // Show popovers above wp-admin menus and submenus and sidebar: // #adminmenuwrap { z-index: 9990 } - '.components-popover': 1000000, + ".components-popover": 1000000, // Shows adminbar quicklink submenu above bottom popover: // #wpadminbar ul li {z-index: 99999;} - '.components-popover.is-bottom': 99990, + ".components-popover.is-bottom": 99990, - '.components-autocomplete__results': 1000000, + ".components-autocomplete__results": 1000000, - '.skip-to-selected-block': 100000, - '.edit-post-toggle-publish-panel': 100000, + ".skip-to-selected-block": 100000, + ".edit-post-toggle-publish-panel": 100000, // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: - '.nux-dot-tip': 1000001, + ".nux-dot-tip": 1000001, // Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar: - '.components-tooltip': 1000002 + ".components-tooltip": 1000002 ); @function z-index( $key ) { diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 0ef54263a80e9..1672a9a8e1269 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -2,11 +2,11 @@ @keyframes animate_fade { from { opacity: 0; - transform: translateY( 4px ); + transform: translateY(4px); } to { opacity: 1; - transform: translateY( 0px ); + transform: translateY(0); } } @@ -21,19 +21,19 @@ @keyframes loading_fade { 0% { - opacity: .5; + opacity: 0.5; } 50% { opacity: 1; } 100% { - opacity: .5; + opacity: 0.5; } } @keyframes slide_in_right { 100% { - transform: translateX( 0% ); + transform: translateX(0%); } } @@ -56,7 +56,7 @@ body.gutenberg-editor-page { /* We hide legacy notices in Gutenberg, because they were not designed in a way that scaled well. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ - #wpbody-content > div:not( .gutenberg ):not( #screen-meta ) { + #wpbody-content > div:not(.gutenberg):not(#screen-meta) { display: none; } @@ -69,8 +69,8 @@ body.gutenberg-editor-page { top: -1px; } - ul#adminmenu a.wp-has-current-submenu:after, - ul#adminmenu>li.current>a.current:after { + ul#adminmenu a.wp-has-current-submenu::after, + ul#adminmenu > li.current > a.current::after { border-right-color: $white; } } @@ -80,7 +80,7 @@ body.gutenberg-editor-page { *, *::before, - *:after { + *::after { box-sizing: inherit; } @@ -99,12 +99,12 @@ body.gutenberg-editor-page { right: 0; bottom: 0; left: 0; - min-height: calc( 100vh - #{ $admin-bar-height-big } ); + min-height: calc(100vh - #{ $admin-bar-height-big }); } // The WP header height changes at this breakpoint @include break-medium { - min-height: calc( 100vh - #{ $admin-bar-height } ); + min-height: calc(100vh - #{ $admin-bar-height }); } img { @@ -128,22 +128,22 @@ body.gutenberg-editor-page { .editor-block-list__block, .components-popover { .input-control, // upstream name is .regular-text - input[type=text], - input[type=search], - input[type=radio], - input[type=tel], - input[type=time], - input[type=url], - input[type=week], - input[type=password], - input[type=checkbox], - input[type=color], - input[type=date], - input[type=datetime], - input[type=datetime-local], - input[type=email], - input[type=month], - input[type=number], + input[type="text"], + input[type="search"], + input[type="radio"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="week"], + input[type="password"], + input[type="checkbox"], + input[type="color"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], select, textarea { margin-top: 0; // These override a "margin: 1px" from core. diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss index 0e9477918b656..b793efacb91b9 100644 --- a/edit-post/components/header/header-toolbar/style.scss +++ b/edit-post/components/header/header-toolbar/style.scss @@ -29,7 +29,7 @@ min-height: $block-toolbar-height; border-bottom: $border-width solid $light-gray-500; - .editor-block-toolbar { + .editor-block-toolbar { border-left: none; } diff --git a/edit-post/components/header/more-menu/style.scss b/edit-post/components/header/more-menu/style.scss index 5d154d4232dfc..e4b6478e59341 100644 --- a/edit-post/components/header/more-menu/style.scss +++ b/edit-post/components/header/more-menu/style.scss @@ -23,6 +23,6 @@ .edit-post-more-menu__content { .components-menu-group:not(:last-child), > div:not(:last-child) .components-menu-group { - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $light-gray-500; } } diff --git a/edit-post/components/header/pinned-plugins/style.scss b/edit-post/components/header/pinned-plugins/style.scss index 3e08c6033ee78..83c639e94248e 100644 --- a/edit-post/components/header/pinned-plugins/style.scss +++ b/edit-post/components/header/pinned-plugins/style.scss @@ -6,12 +6,12 @@ } // Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override. - .components-icon-button:not( .is-toggled ) svg, - .components-icon-button:not( .is-toggled ) svg * { + .components-icon-button:not(.is-toggled) svg, + .components-icon-button:not(.is-toggled) svg * { stroke: $dark-gray-500; fill: $dark-gray-500; } - + // Forcefully colorize hover and toggled plugin icon states to ensure legibility and consistency. .components-icon-button.is-toggled svg, .components-icon-button.is-toggled svg * { diff --git a/edit-post/components/header/style.scss b/edit-post/components/header/style.scss index 2b79febb81988..83ba1237ce373 100644 --- a/edit-post/components/header/style.scss +++ b/edit-post/components/header/style.scss @@ -7,7 +7,7 @@ flex-direction: row; align-items: stretch; justify-content: space-between; - z-index: z-index( '.edit-post-header' ); + z-index: z-index(".edit-post-header"); left: 0; right: 0; @@ -36,7 +36,7 @@ } } -@include editor-left('.edit-post-header'); +@include editor-left(".edit-post-header"); .edit-post-header__settings { display: inline-flex; @@ -52,7 +52,7 @@ } // put the gray background on a separate layer, so as to match the size of the publish button (34px) - &.is-toggled:before { + &.is-toggled::before { content: ""; border-radius: $radius-round-rectangle; position: absolute; diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss index 4b6981937b2a1..a035ed3397a63 100644 --- a/edit-post/components/layout/style.scss +++ b/edit-post/components/layout/style.scss @@ -53,8 +53,8 @@ } } -@include editor-left('.components-notice-list'); -@include editor-right('.components-notice-list'); +@include editor-left(".components-notice-list"); +@include editor-right(".components-notice-list"); .edit-post-layout__metaboxes:not(:empty) { border-top: $border-width solid $light-gray-500; @@ -96,7 +96,7 @@ .edit-post-layout .editor-post-publish-panel { position: fixed; - z-index: z-index( '.edit-post-layout .edit-post-post-publish-panel' ); + z-index: z-index(".edit-post-layout .edit-post-post-publish-panel"); top: $admin-bar-height-big; bottom: 0; right: 0; @@ -121,7 +121,7 @@ position: relative; float: right; top: -9999em; - z-index: z-index( '.edit-post-toggle-publish-panel' ); + z-index: z-index(".edit-post-toggle-publish-panel"); padding: 20px 0 0 0; width: $sidebar-width; &:focus-within { diff --git a/edit-post/components/meta-boxes/meta-boxes-area/style.scss b/edit-post/components/meta-boxes/meta-boxes-area/style.scss index 113abbbb12fdf..c5db0e0983d8c 100644 --- a/edit-post/components/meta-boxes/meta-boxes-area/style.scss +++ b/edit-post/components/meta-boxes/meta-boxes-area/style.scss @@ -14,7 +14,8 @@ box-sizing: content-box; } - textarea, input { + textarea, + input { box-sizing: border-box; } @@ -63,16 +64,16 @@ left: 0; right: 0; bottom: 0; - content: ''; + content: ""; background: transparent; - z-index: z-index( '.edit-post-meta-boxes-area.is-loading::before'); + z-index: z-index(".edit-post-meta-boxes-area.is-loading::before"); } .spinner { position: absolute; top: 10px; right: 20px; - z-index: z-index( '.edit-post-meta-boxes-area .spinner'); + z-index: z-index(".edit-post-meta-boxes-area .spinner"); } } diff --git a/edit-post/components/sidebar/post-visibility/style.scss b/edit-post/components/sidebar/post-visibility/style.scss index 49f0d372202d6..b6e01fb796cd1 100644 --- a/edit-post/components/sidebar/post-visibility/style.scss +++ b/edit-post/components/sidebar/post-visibility/style.scss @@ -25,7 +25,7 @@ } .edit-post-post-visibility__dialog-password-input { - width: calc( 100% - 20px ); + width: calc(100% - 20px); margin-left: 20px; } diff --git a/edit-post/components/sidebar/settings-header/style.scss b/edit-post/components/sidebar/settings-header/style.scss index 0ff5c13d5d1e9..467f3d73a710b 100644 --- a/edit-post/components/sidebar/settings-header/style.scss +++ b/edit-post/components/sidebar/settings-header/style.scss @@ -19,7 +19,7 @@ &.is-active { padding-bottom: 0; - border-bottom: 3px solid theme( primary ); + border-bottom: 3px solid theme(primary); font-weight: 600; } diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss index 0711d15b1efb3..6b421e74de485 100644 --- a/edit-post/components/sidebar/style.scss +++ b/edit-post/components/sidebar/style.scss @@ -1,6 +1,6 @@ .edit-post-sidebar { position: fixed; - z-index: z-index( '.edit-post-sidebar' ); + z-index: z-index(".edit-post-sidebar"); top: 0; right: 0; bottom: 0; @@ -13,7 +13,7 @@ @include break-small() { top: $admin-bar-height-big + $header-height; - z-index: z-index( '.edit-post-sidebar {greater than small}' ); + z-index: z-index(".edit-post-sidebar {greater than small}"); height: auto; overflow: auto; -webkit-overflow-scrolling: touch; @@ -29,7 +29,7 @@ overflow: auto; -webkit-overflow-scrolling: touch; height: auto; - max-height: calc( 100vh - #{ $admin-bar-height-big + $panel-header-height } ); + max-height: calc(100vh - #{ $admin-bar-height-big + $panel-header-height }); margin-top: -1px; margin-bottom: -1px; @@ -42,7 +42,7 @@ > .components-panel .components-panel__header { position: fixed; - z-index: z-index( '.components-panel__header' ); + z-index: z-index(".components-panel__header"); top: 0; left: 0; right: 0; @@ -157,7 +157,7 @@ &.is-active { padding-bottom: 0; - border-bottom: 3px solid theme( primary ); + border-bottom: 3px solid theme(primary); font-weight: 600; } diff --git a/edit-post/components/text-editor/style.scss b/edit-post/components/text-editor/style.scss index d670292ada58a..c4e3d0f0507e9 100644 --- a/edit-post/components/text-editor/style.scss +++ b/edit-post/components/text-editor/style.scss @@ -16,8 +16,8 @@ padding-right: 20px; @include break-large() { - padding-left: calc( 50% - #{ $content-width / 2 } ); - padding-right: calc( 50% - #{ $content-width / 2 } ); + padding-left: calc(50% - #{ $content-width / 2 }); + padding-right: calc(50% - #{ $content-width / 2 }); } .edit-post-post-text-editor__toolbar { diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index cf5a44c16ebcb..4c1fe1d7249bb 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -59,8 +59,8 @@ // Use specific selector to not affect nested block toolbars. &[data-align="wide"] > .editor-block-contextual-toolbar, &[data-align="full"] > .editor-block-contextual-toolbar { - width: calc( 100% + #{ ( $parent-block-padding * 4 ) + $border-width + $border-width } ); // Matches the negative margins applied to parent blocks. - height: 0px; // This collapses the container to an invisible element without margin. + width: calc(100% + #{ ($parent-block-padding * 4) + $border-width + $border-width }); // Matches the negative margins applied to parent blocks. + height: 0; // This collapses the container to an invisible element without margin. text-align: center; .editor-block-toolbar { @@ -72,7 +72,7 @@ // The centering math changes when a fullwide image doesn't have block padding. &[data-align="full"] > .editor-block-contextual-toolbar { - width: calc( 100% + #{ ( $parent-block-padding * 2 ) + ( $block-padding * 2 ) } ); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide. + width: calc(100% + #{ ($parent-block-padding * 2) + ($block-padding * 2) }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide. .editor-block-toolbar { max-width: $content-width - $border-width - $border-width; @@ -118,10 +118,10 @@ // This is a focus style shown for blocks that need an indicator even when in an isEditing state // like for example an image block that receives arrowkey focus. -.edit-post-visual-editor .editor-block-list__block:not( .is-selected ) { +.edit-post-visual-editor .editor-block-list__block:not(.is-selected) { .editor-block-list__block-edit { box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900; - transition: .1s box-shadow .05s; + transition: 0.1s box-shadow 0.05s; } &:focus .editor-block-list__block-edit { diff --git a/package-lock.json b/package-lock.json index 19b29405bb463..0e84731c3789d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2887,6 +2887,12 @@ "es-abstract": "^1.7.0" } }, + "array-iterate": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/array-iterate/-/array-iterate-1.1.2.tgz", + "integrity": "sha512-1hWSHTIlG/8wtYD+PPX5AOBtKWngpDFjrsrHgZpe+JdgNGz0udYu6ZIkAa/xuenIUEqFv7DvE2Yr60jxweJSrQ==", + "dev": true + }, "array-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", @@ -4168,6 +4174,12 @@ "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", "dev": true }, + "bail": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz", + "integrity": "sha512-1X8CnjFVQ+a+KW36uBNMTU5s8+v5FzeqrP7hTG5aTb4aPreSbZJlhwPon9VKMuEVgV++JM+SQrALY3kr7eswdg==", + "dev": true + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -4708,6 +4720,12 @@ "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", "dev": true }, + "ccount": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.3.tgz", + "integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==", + "dev": true + }, "center-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", @@ -4730,6 +4748,30 @@ "supports-color": "^5.3.0" } }, + "character-entities": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz", + "integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ==", + "dev": true + }, + "character-entities-html4": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.2.tgz", + "integrity": "sha512-sIrXwyna2+5b0eB9W149izTPJk/KkJTg6mEzDGibwBUkyH1SbDa+nf515Ppdi3MaH35lW0JFJDWeq9Luzes1Iw==", + "dev": true + }, + "character-entities-legacy": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz", + "integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA==", + "dev": true + }, + "character-reference-invalid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz", + "integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ==", + "dev": true + }, "chardet": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", @@ -5097,6 +5139,16 @@ } } }, + "clone-regexp": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-1.0.1.tgz", + "integrity": "sha512-Fcij9IwRW27XedRIJnSOEupS7RVcXtObJXbcUOX93UCLqqOdRpkvzKywOOSizmEK/Is3S/RHX9dLdfo6R1Q1mw==", + "dev": true, + "requires": { + "is-regexp": "^1.0.0", + "is-supported-regexp-flag": "^1.0.0" + } + }, "clone-response": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", @@ -5164,6 +5216,12 @@ "urlgrey": "0.4.4" } }, + "collapse-white-space": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz", + "integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw==", + "dev": true + }, "collection-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", @@ -7223,6 +7281,15 @@ "strip-eof": "^1.0.0" } }, + "execall": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execall/-/execall-1.0.0.tgz", + "integrity": "sha1-c9CQTjlbPKsGWLCNCewlMH8pu3M=", + "dev": true, + "requires": { + "clone-regexp": "^1.0.0" + } + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -9098,6 +9165,12 @@ "pinkie-promise": "^2.0.0" } }, + "globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=", + "dev": true + }, "globule": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", @@ -9109,6 +9182,23 @@ "minimatch": "~3.0.2" } }, + "gonzales-pe": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.3.tgz", + "integrity": "sha512-Kjhohco0esHQnOiqqdJeNz/5fyPkOMD/d6XVjwTAoPGUFh0mCollPUTUTa2OZy4dYNAqlPIQdTiNzJTWdd9Htw==", + "dev": true, + "requires": { + "minimist": "1.1.x" + }, + "dependencies": { + "minimist": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz", + "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=", + "dev": true + } + } + }, "good-listener": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", @@ -9416,6 +9506,12 @@ "whatwg-encoding": "^1.0.1" } }, + "html-tags": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz", + "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=", + "dev": true + }, "htmlparser2": { "version": "3.9.2", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz", @@ -9494,6 +9590,12 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==" }, + "import-lazy": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz", + "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==", + "dev": true + }, "import-local": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz", @@ -9655,6 +9757,28 @@ } } }, + "is-alphabetical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.2.tgz", + "integrity": "sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==", + "dev": true + }, + "is-alphanumeric": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz", + "integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=", + "dev": true + }, + "is-alphanumerical": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz", + "integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==", + "dev": true, + "requires": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + } + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -9746,6 +9870,12 @@ "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=", "dev": true }, + "is-decimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz", + "integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg==", + "dev": true + }, "is-descriptor": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", @@ -9827,6 +9957,12 @@ "is-extglob": "^1.0.0" } }, + "is-hexadecimal": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz", + "integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==", + "dev": true + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -9965,6 +10101,12 @@ "has": "^1.0.1" } }, + "is-regexp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz", + "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=", + "dev": true + }, "is-resolvable": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", @@ -10003,6 +10145,12 @@ "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=", "dev": true }, + "is-supported-regexp-flag": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.1.tgz", + "integrity": "sha512-3vcJecUUrpgCqc/ca0aWeNu64UGgxcvO60K/Fkr1N6RSvfGCTU60UKN68JDmKokgba0rFFJs12EnzOQa14ubKQ==", + "dev": true + }, "is-svg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz", @@ -10039,12 +10187,24 @@ "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", "dev": true }, + "is-whitespace-character": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz", + "integrity": "sha512-SzM+T5GKUCtLhlHFKt2SDAX2RFzfS6joT91F2/WSi9LxgFdsnhfPK/UIA+JhRR2xuyLdrCys2PiFDrtn1fU5hQ==", + "dev": true + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", "dev": true }, + "is-word-character": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.2.tgz", + "integrity": "sha512-T3FlsX8rCHAH8e7RE7PfOPZVFQlcV3XRF9eOOBQ1uf70OxO7CjjSOjeImMPCADBdYWcStAbVbYvJ1m2D3tb+EA==", + "dev": true + }, "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", @@ -12165,6 +12325,12 @@ "integrity": "sha512-8srIZ5BK5PCJw1L/JN741xgNfSjuQNK9ImYbYzv7ZUD3WPfuywaY+yd7lQOphJ+2vwXnMLnRZoAh5X+orRt4LQ==", "dev": true }, + "known-css-properties": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.6.1.tgz", + "integrity": "sha512-nQRpMcHm1cQ6gmztdvLcIvxocznSMqH/y6XtERrWrHaymOYdDGroRqetJvJycxGEr1aakXiigDgn7JnzuXlk6A==", + "dev": true + }, "lazy-cache": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", @@ -12760,6 +12926,12 @@ "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", "dev": true }, + "longest-streak": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.2.tgz", + "integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==", + "dev": true + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -12837,6 +13009,18 @@ "object-visit": "^1.0.0" } }, + "markdown-escapes": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz", + "integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==", + "dev": true + }, + "markdown-table": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz", + "integrity": "sha512-NcWuJFHDA8V3wkDgR/j4+gZx+YQwstPgfQDV8ndUeWWzta3dnDTBxpVzqS9lkmJAuV5YX35lmyojl6HO5JXAgw==", + "dev": true + }, "material-colors": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", @@ -12854,6 +13038,12 @@ "integrity": "sha1-izqsWIuKZuSXXjzepn97sylgH6w=", "dev": true }, + "mathml-tag-names": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz", + "integrity": "sha512-3Zs9P/0zzwTob2pdgT0CHZuMbnSUSp8MB1bddfm+HDmnFWHGT4jvEZRf+2RuPoa+cjdn/z25SEt5gFTqdhvJAg==", + "dev": true + }, "md5.js": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz", @@ -12864,6 +13054,16 @@ "inherits": "^2.0.1" } }, + "mdast-util-compact": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.1.tgz", + "integrity": "sha1-zbX4TitqLTEU3zO9BdnLMuPECDo=", + "dev": true, + "requires": { + "unist-util-modify-children": "^1.0.0", + "unist-util-visit": "^1.1.0" + } + }, "mdn-data": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz", @@ -13803,6 +14003,12 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, + "normalize-selector": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz", + "integrity": "sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=", + "dev": true + }, "normalize-url": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz", @@ -14391,6 +14597,20 @@ "pbkdf2": "^3.0.3" } }, + "parse-entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.1.2.tgz", + "integrity": "sha512-5N9lmQ7tmxfXf+hO3X6KRG6w7uYO/HL9fHalSySTdyn63C3WNvTM/1R8tn1u1larNcEbo3Slcy2bsVDQqvEpUg==", + "dev": true, + "requires": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, "parse-github-repo-url": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz", @@ -14890,6 +15110,95 @@ } } }, + "postcss-html": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.31.0.tgz", + "integrity": "sha512-5orIml7dVf17OrHyO39BXMGlklKT884FvkB+gdCtGJ63b1AAeGF7NuXGC1HM83TI0Ip1gZyBowrPuXCOPqqerA==", + "dev": true, + "requires": { + "htmlparser2": "^3.9.2" + } + }, + "postcss-less": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-2.0.0.tgz", + "integrity": "sha512-pPNsVnpCB13nBMOcl5GVh8JGmB0JGFjqkLUDzKdVpptFFKEe9wFdEzvh2j4lD2AD+7qcrUfw9Ta+oi5+Fw7jjQ==", + "dev": true, + "requires": { + "postcss": "^5.2.16" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "dependencies": { + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", + "dev": true + }, + "postcss": { + "version": "5.2.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", + "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", + "dev": true, + "requires": { + "chalk": "^1.1.3", + "js-base64": "^2.1.9", + "source-map": "^0.5.6", + "supports-color": "^3.2.3" + } + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "dev": true, + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, "postcss-load-config": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz", @@ -15003,6 +15312,22 @@ "schema-utils": "^0.4.0" } }, + "postcss-markdown": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/postcss-markdown/-/postcss-markdown-0.31.0.tgz", + "integrity": "sha512-2fKbCxnyACX0ZSRpgZD0XYmVLlz0Sam8cCy423xn08t/EygOYPsK6FOp7gGrLsVXzQVwtN3HNLfcPkiseIZSSA==", + "dev": true, + "requires": { + "remark": "^9.0.0", + "unist-util-find-all-after": "^1.0.2" + } + }, + "postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=", + "dev": true + }, "postcss-merge-idents": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", @@ -15435,58 +15760,173 @@ "postcss-value-parser": "^3.0.0" } }, - "postcss-selector-parser": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", - "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "postcss-reporter": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-5.0.0.tgz", + "integrity": "sha512-rBkDbaHAu5uywbCR2XE8a25tats3xSOsGNx6mppK6Q9kSFGKc/FyAzfci+fWM2l+K402p1D0pNcfDGxeje5IKg==", "dev": true, "requires": { - "flatten": "^1.0.2", - "indexes-of": "^1.0.1", - "uniq": "^1.0.1" + "chalk": "^2.0.1", + "lodash": "^4.17.4", + "log-symbols": "^2.0.0", + "postcss": "^6.0.8" } }, - "postcss-svgo": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.0.tgz", - "integrity": "sha1-wLutAlIPxjbJ14sOhAPi5RXDIoU=", - "dev": true, - "requires": { - "is-svg": "^3.0.0", - "postcss": "^6.0.0", - "postcss-value-parser": "^3.0.0", - "svgo": "^1.0.0" - } + "postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=", + "dev": true }, - "postcss-unique-selectors": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.0.tgz", - "integrity": "sha1-BMHpdkx1h0JhMDQCxB8Ol2n8VQE=", + "postcss-safe-parser": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz", + "integrity": "sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==", "dev": true, "requires": { - "alphanum-sort": "^1.0.0", - "postcss": "^6.0.0", - "uniqs": "^2.0.0" + "postcss": "^7.0.0" + }, + "dependencies": { + "postcss": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz", + "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, - "postcss-value-parser": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", - "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", - "dev": true - }, - "postcss-zindex": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", - "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=", + "postcss-sass": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.3.2.tgz", + "integrity": "sha512-0HgxikiZ07VKYr98KT+k7/rAzyMgZlP+3+R8vUti56T2dPdhW0OhPGDQzddxY/N2iDtBVZQqCHRDA09j5I6EWg==", "dev": true, "requires": { - "has": "^1.0.1", - "postcss": "^5.0.4", - "uniqs": "^2.0.0" + "gonzales-pe": "4.2.3", + "postcss": "6.0.22" }, "dependencies": { - "ansi-regex": { + "postcss": { + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.22.tgz", + "integrity": "sha512-Toc9lLoUASwGqxBSJGTVcOQiDqjK+Z2XlWBg+IgYwQMY9vA2f7iMpXVc1GpPcfTSyM5lkxNo0oDwDRO+wm7XHA==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "postcss-scss": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz", + "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==", + "dev": true, + "requires": { + "postcss": "^7.0.0" + }, + "dependencies": { + "postcss": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz", + "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "postcss-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", + "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "dev": true, + "requires": { + "flatten": "^1.0.2", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, + "postcss-styled": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/postcss-styled/-/postcss-styled-0.31.0.tgz", + "integrity": "sha512-tyCeU0XuuJJdmLmnklWuvcQe8zFIRoq+zof2K19UqdvoH8+P007vu9ShSRcu7S/LcjB+VWJl1tyqUszgFIjcDQ==", + "dev": true + }, + "postcss-svgo": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.0.tgz", + "integrity": "sha1-wLutAlIPxjbJ14sOhAPi5RXDIoU=", + "dev": true, + "requires": { + "is-svg": "^3.0.0", + "postcss": "^6.0.0", + "postcss-value-parser": "^3.0.0", + "svgo": "^1.0.0" + } + }, + "postcss-syntax": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.31.0.tgz", + "integrity": "sha512-siI3tp74W8paHBCfEEeSCta5GUnEEEztAbkyL87/tqwW6wl2o4CbRA6utW30n9gz/FEqe+eOhvVPXpbpqmcdWw==", + "dev": true + }, + "postcss-unique-selectors": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.0.tgz", + "integrity": "sha1-BMHpdkx1h0JhMDQCxB8Ol2n8VQE=", + "dev": true, + "requires": { + "alphanum-sort": "^1.0.0", + "postcss": "^6.0.0", + "uniqs": "^2.0.0" + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", + "dev": true + }, + "postcss-zindex": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", + "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=", + "dev": true, + "requires": { + "has": "^1.0.1", + "postcss": "^5.0.4", + "uniqs": "^2.0.0" + }, + "dependencies": { + "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", @@ -16459,6 +16899,62 @@ } } }, + "remark": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark/-/remark-9.0.0.tgz", + "integrity": "sha512-amw8rGdD5lHbMEakiEsllmkdBP+/KpjW/PRK6NSGPZKCQowh0BT4IWXDAkRMyG3SB9dKPXWMviFjNusXzXNn3A==", + "dev": true, + "requires": { + "remark-parse": "^5.0.0", + "remark-stringify": "^5.0.0", + "unified": "^6.0.0" + } + }, + "remark-parse": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz", + "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==", + "dev": true, + "requires": { + "collapse-white-space": "^1.0.2", + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-whitespace-character": "^1.0.0", + "is-word-character": "^1.0.0", + "markdown-escapes": "^1.0.0", + "parse-entities": "^1.1.0", + "repeat-string": "^1.5.4", + "state-toggle": "^1.0.0", + "trim": "0.0.1", + "trim-trailing-lines": "^1.0.0", + "unherit": "^1.0.4", + "unist-util-remove-position": "^1.0.0", + "vfile-location": "^2.0.0", + "xtend": "^4.0.1" + } + }, + "remark-stringify": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-5.0.0.tgz", + "integrity": "sha512-Ws5MdA69ftqQ/yhRF9XhVV29mhxbfGhbz0Rx5bQH+oJcNhhSM6nCu1EpLod+DjrFGrU0BMPs+czVmJZU7xiS7w==", + "dev": true, + "requires": { + "ccount": "^1.0.0", + "is-alphanumeric": "^1.0.0", + "is-decimal": "^1.0.0", + "is-whitespace-character": "^1.0.0", + "longest-streak": "^2.0.1", + "markdown-escapes": "^1.0.0", + "markdown-table": "^1.1.0", + "mdast-util-compact": "^1.0.0", + "parse-entities": "^1.0.2", + "repeat-string": "^1.5.4", + "state-toggle": "^1.0.0", + "stringify-entities": "^1.0.1", + "unherit": "^1.0.4", + "xtend": "^4.0.1" + } + }, "rememo": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/rememo/-/rememo-3.0.0.tgz", @@ -17482,6 +17978,12 @@ "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==", "dev": true }, + "specificity": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.0.tgz", + "integrity": "sha512-nGUlURFuoSsmJQ2TBKaO2l7+dBHtRnofSSQdiFKEpd+HBDWXR9/+gtJfgNpe3Nh6o5mqSxDpin/M4YoN7AijGg==", + "dev": true + }, "split": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz", @@ -17553,6 +18055,12 @@ "integrity": "sha1-1PM6tU6OOHeLDKXP07OvsS22hiA=", "dev": true }, + "state-toggle": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.1.tgz", + "integrity": "sha512-Qe8QntFrrpWTnHwvwj2FZTgv+PKIsp0B9VxLzLLbSpPXWOgRgc5LVj/aTiSfK1RqIeF9jeC1UeOH8Q8y60A7og==", + "dev": true + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -17676,6 +18184,18 @@ "safe-buffer": "~5.1.0" } }, + "stringify-entities": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz", + "integrity": "sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==", + "dev": true, + "requires": { + "character-entities-html4": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, "stringstream": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz", @@ -17757,6 +18277,12 @@ "schema-utils": "^0.4.5" } }, + "style-search": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", + "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=", + "dev": true + }, "stylehacks": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.0.tgz", @@ -17792,6 +18318,291 @@ } } }, + "stylelint": { + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.4.0.tgz", + "integrity": "sha512-pcw0Dpb4Ib/OfgONhaeF+myA+5iZdsI8dYgWs1++IYN/dgvo90O0FhgMDKb1bMgZVy/A2Q1CCN/PFZ0FLnnRnQ==", + "dev": true, + "requires": { + "autoprefixer": "^9.0.0", + "balanced-match": "^1.0.0", + "chalk": "^2.4.1", + "cosmiconfig": "^5.0.0", + "debug": "^3.0.0", + "execall": "^1.0.0", + "file-entry-cache": "^2.0.0", + "get-stdin": "^6.0.0", + "globby": "^8.0.0", + "globjoin": "^0.1.4", + "html-tags": "^2.0.0", + "ignore": "^4.0.0", + "import-lazy": "^3.1.0", + "imurmurhash": "^0.1.4", + "known-css-properties": "^0.6.0", + "lodash": "^4.17.4", + "log-symbols": "^2.0.0", + "mathml-tag-names": "^2.0.1", + "meow": "^5.0.0", + "micromatch": "^2.3.11", + "normalize-selector": "^0.2.0", + "pify": "^3.0.0", + "postcss": "^7.0.0", + "postcss-html": "^0.31.0", + "postcss-less": "^2.0.0", + "postcss-markdown": "^0.31.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-reporter": "^5.0.0", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^4.0.0", + "postcss-sass": "^0.3.0", + "postcss-scss": "^2.0.0", + "postcss-selector-parser": "^3.1.0", + "postcss-styled": "^0.31.0", + "postcss-syntax": "^0.31.0", + "postcss-value-parser": "^3.3.0", + "resolve-from": "^4.0.0", + "signal-exit": "^3.0.2", + "specificity": "^0.4.0", + "string-width": "^2.1.0", + "style-search": "^0.1.0", + "sugarss": "^1.0.0", + "svg-tags": "^1.0.0", + "table": "^4.0.1" + }, + "dependencies": { + "arr-diff": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", + "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", + "dev": true, + "requires": { + "arr-flatten": "^1.0.1" + } + }, + "array-unique": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz", + "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=", + "dev": true + }, + "autoprefixer": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.1.0.tgz", + "integrity": "sha512-BbAIdxNdptG/x4DiGGfpkDVYyqu4nUyNdBB0Utr49Gn3+0RERV1MdHik2FSbbWwhMAuk1KrfVJHe7nEMheGdBA==", + "dev": true, + "requires": { + "browserslist": "^4.0.1", + "caniuse-lite": "^1.0.30000872", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "postcss": "^7.0.2", + "postcss-value-parser": "^3.2.3" + } + }, + "braces": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz", + "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", + "dev": true, + "requires": { + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" + } + }, + "browserslist": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.0.1.tgz", + "integrity": "sha512-QqiiIWchEIkney3wY53/huI7ZErouNAdvOkjorUALAwRcu3tEwOV3Sh6He0DnP38mz1JjBpCBb50jQBmaYuHPw==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30000865", + "electron-to-chromium": "^1.3.52", + "node-releases": "^1.0.0-alpha.10" + } + }, + "caniuse-lite": { + "version": "1.0.30000874", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000874.tgz", + "integrity": "sha512-29nr1EPiHwrJTAHHsEmTt2h+55L8j2GNFdAcYPlRy2NX6iFz7ZZiepVI7kP/QqlnHLq3KvfWpbmGa0d063U09w==", + "dev": true + }, + "expand-brackets": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz", + "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", + "dev": true, + "requires": { + "is-posix-bracket": "^0.1.0" + } + }, + "extglob": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz", + "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", + "dev": true, + "requires": { + "is-extglob": "^1.0.0" + } + }, + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + }, + "globby": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz", + "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "dir-glob": "^2.0.0", + "fast-glob": "^2.0.2", + "glob": "^7.1.2", + "ignore": "^3.3.5", + "pify": "^3.0.0", + "slash": "^1.0.0" + }, + "dependencies": { + "ignore": { + "version": "3.3.10", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", + "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", + "dev": true + } + } + }, + "ignore": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.3.tgz", + "integrity": "sha512-Z/vAH2GGIEATQnBVXMclE2IGV6i0GyVngKThcGZ5kHgHMxLo9Ow2+XHRq1aEKEej5vOF1TPJNbvX6J/anT0M7A==", + "dev": true + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + }, + "micromatch": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz", + "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", + "dev": true, + "requires": { + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + }, + "postcss": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz", + "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "stylelint-config-recommended": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz", + "integrity": "sha512-ajMbivOD7JxdsnlS5945KYhvt7L/HwN6YeYF2BH6kE4UCLJR0YvXMf+2j7nQpJyYLZx9uZzU5G1ZOSBiWAc6yA==", + "dev": true + }, + "stylelint-config-wordpress": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-wordpress/-/stylelint-config-wordpress-13.0.0.tgz", + "integrity": "sha512-GnrFFlAyf4TBgKAAY574+Qx/mVa2QlDfRALYgVKV8ZPsyazraZLz+z5JGkgH/BFCPKlh+4zRZcS8fbG9wT9pxg==", + "dev": true, + "requires": { + "stylelint-config-recommended": "^2.1.0", + "stylelint-scss": "^2.1.0" + } + }, + "stylelint-scss": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.5.0.tgz", + "integrity": "sha512-+joZpza5nQxAyGwzRMancFEl0EH9+1Vy88YzBghRMS0wHulzDPE9fEkBi6ZOlz+I3tYIBI4x9NbqO5/LkbeE3Q==", + "dev": true, + "requires": { + "lodash": "^4.17.4", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-selector-parser": "^3.1.1", + "postcss-value-parser": "^3.3.0" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", + "dev": true, + "requires": { + "dot-prop": "^4.1.1", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + } + } + }, + "sugarss": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-1.0.1.tgz", + "integrity": "sha512-3qgLZytikQQEVn1/FrhY7B68gPUUGY3R1Q1vTiD5xT+Ti1DP/8iZuwFet9ONs5+bmL8pZoDQ6JrQHVgrNlK6mA==", + "dev": true, + "requires": { + "postcss": "^6.0.14" + } + }, "supports-color": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", @@ -17801,6 +18612,12 @@ "has-flag": "^3.0.0" } }, + "svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", + "dev": true + }, "svgo": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.0.5.tgz", @@ -18184,6 +19001,12 @@ "integrity": "sha512-DlX6dR0lOIRDFxI0mjL9IYg6OTncLm/Zt+JiBhE5OlFcAR8yc9S7FFXU9so0oda47frdM/JFsk7UjNt9vscKcg==", "dev": true }, + "trim": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", + "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", + "dev": true + }, "trim-newlines": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz", @@ -18202,6 +19025,18 @@ "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", "dev": true }, + "trim-trailing-lines": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.1.tgz", + "integrity": "sha512-bWLv9BbWbbd7mlqqs2oQYnLD/U/ZqeJeJwbO0FG2zA1aTq+HTvxfHNKFa/HGCVyJpDiioUYaBhfiT6rgk+l4mg==", + "dev": true + }, + "trough": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.3.tgz", + "integrity": "sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw==", + "dev": true + }, "true-case-path": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz", @@ -18386,6 +19221,16 @@ "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=", "dev": true }, + "unherit": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz", + "integrity": "sha512-+XZuV691Cn4zHsK0vkKYwBEwB74T3IZIcxrgn2E4rKwTfFyI1zCh7X7grwh9Re08fdPlarIdyWgI8aVB3F5A5g==", + "dev": true, + "requires": { + "inherits": "^2.0.1", + "xtend": "^4.0.1" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -18414,6 +19259,20 @@ "integrity": "sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==", "dev": true }, + "unified": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz", + "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==", + "dev": true, + "requires": { + "bail": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^1.1.0", + "trough": "^1.0.0", + "vfile": "^2.0.0", + "x-is-string": "^0.1.0" + } + }, "union-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", @@ -18479,6 +19338,63 @@ "imurmurhash": "^0.1.4" } }, + "unist-util-find-all-after": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/unist-util-find-all-after/-/unist-util-find-all-after-1.0.2.tgz", + "integrity": "sha512-nDl79mKpffXojLpCimVXnxhlH/jjaTnDuScznU9J4jjsaUtBdDbxmlc109XtcqxY4SDO0SwzngsxxW8DIISt1w==", + "dev": true, + "requires": { + "unist-util-is": "^2.0.0" + } + }, + "unist-util-is": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-2.1.2.tgz", + "integrity": "sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==", + "dev": true + }, + "unist-util-modify-children": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-1.1.2.tgz", + "integrity": "sha512-GRi04yhng1WqBf5RBzPkOtWAadcZS2gvuOgNn/cyJBYNxtTuyYqTKN0eg4rC1YJwGnzrqfRB3dSKm8cNCjNirg==", + "dev": true, + "requires": { + "array-iterate": "^1.0.0" + } + }, + "unist-util-remove-position": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.2.tgz", + "integrity": "sha512-XxoNOBvq1WXRKXxgnSYbtCF76TJrRoe5++pD4cCBsssSiWSnPEktyFrFLE8LTk3JW5mt9hB0Sk5zn4x/JeWY7Q==", + "dev": true, + "requires": { + "unist-util-visit": "^1.1.0" + } + }, + "unist-util-stringify-position": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz", + "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==", + "dev": true + }, + "unist-util-visit": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.0.tgz", + "integrity": "sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==", + "dev": true, + "requires": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "unist-util-visit-parents": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz", + "integrity": "sha512-6B0UTiMfdWql4cQ03gDTCSns+64Zkfo2OCbK31Ov0uMizEz+CJeAp0cgZVb5Fhmcd7Bct2iRNywejT0orpbqUA==", + "dev": true, + "requires": { + "unist-util-is": "^2.1.2" + } + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -18686,6 +19602,41 @@ "extsprintf": "^1.2.0" } }, + "vfile": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz", + "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==", + "dev": true, + "requires": { + "is-buffer": "^1.1.4", + "replace-ext": "1.0.0", + "unist-util-stringify-position": "^1.0.0", + "vfile-message": "^1.0.0" + }, + "dependencies": { + "replace-ext": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz", + "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=", + "dev": true + } + } + }, + "vfile-location": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.3.tgz", + "integrity": "sha512-zM5/l4lfw1CBoPx3Jimxoc5RNDAHHpk6AM6LM0pTIkm5SUSsx8ZekZ0PVdf0WEZ7kjlhSt7ZlqbRL6Cd6dBs6A==", + "dev": true + }, + "vfile-message": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.0.1.tgz", + "integrity": "sha512-vSGCkhNvJzO6VcWC6AlJW4NtYOVtS+RgCaqFIYUjoGIlHnFL+i0LbtYvonDWOMcB97uTPT4PRsyYY7REWC9vug==", + "dev": true, + "requires": { + "unist-util-stringify-position": "^1.1.1" + } + }, "vinyl": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz", @@ -19943,6 +20894,12 @@ "safe-buffer": "~5.1.0" } }, + "x-is-string": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz", + "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=", + "dev": true + }, "xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", diff --git a/package.json b/package.json index 2ab4ef4171ba0..e8edb1bd9057a 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,8 @@ "source-map-loader": "0.2.3", "sprintf-js": "1.1.1", "style-loader": "0.20.3", + "stylelint": "9.4.0", + "stylelint-config-wordpress": "13.0.0", "symlink-or-copy": "1.2.0", "uuid": "3.1.0", "webpack": "4.8.3", @@ -161,11 +163,13 @@ "fixtures:server-registered": "docker-compose run -w /var/www/html/wp-content/plugins/gutenberg --rm wordpress ./bin/get-server-blocks.php > core-blocks/test/server-registered.json", "fixtures:generate": "npm run fixtures:server-registered && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit", "fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate", - "lint": "npm run lint-js && npm run lint-pkg-json", + "lint": "concurrently \"npm run lint-js\" \"npm run lint-pkg-json\" \"npm run lint-css\"", "lint-js": "eslint .", "lint-js:fix": "eslint . --fix", "lint-php": "docker-compose run --rm composer run-script lint", "lint-pkg-json": "wp-scripts lint-pkg-json ./packages", + "lint-css": "stylelint '**/*.scss'", + "lint-css:fix": "stylelint '**/*.scss' --fix", "package-plugin": "./bin/build-plugin-zip.sh", "postinstall": "npm run build:packages", "pot-to-php": "./bin/pot-to-php.js", diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index f3cf866928c31..f10575fb3e381 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -21,9 +21,9 @@ // Default button style &.is-default { color: #555; - border-color: #cccccc; + border-color: #ccc; background: #f7f7f7; - box-shadow: inset 0 -1px 0 #cccccc; + box-shadow: inset 0 -1px 0 #ccc; vertical-align: top; &:hover { @@ -37,14 +37,15 @@ background: #fafafa; color: #23282d; border-color: #999; - box-shadow: inset 0 -1px 0 #999, + box-shadow: + inset 0 -1px 0 #999, 0 0 0 2px $blue-medium-200; } &:active:not(:disabled):not([aria-disabled="true"]) { background: #eee; border-color: #999; - box-shadow: inset 0 1px 0 #999, + box-shadow: inset 0 1px 0 #999,; } &:disabled, @@ -60,56 +61,62 @@ } &.is-primary { - background: color( theme( button ) ); - border-color: color( theme( button ) shade( 20% ) ) color( theme( button ) shade( 25% ) ) color( theme( button ) shade( 25% ) ); - box-shadow: inset 0 -1px 0 color( theme( button ) shade( 25% ) ); + background: color(theme(button)); + border-color: color(theme(button) shade(20%)) color(theme(button) shade(25%)) color(theme(button) shade(25%)); + box-shadow: inset 0 -1px 0 color(theme(button) shade(25%)); color: $white; text-decoration: none; - text-shadow: 0 -1px 1px color( theme( button ) shade( 30% ) ), - 1px 0 1px color( theme( button ) shade( 30% ) ), - 0 1px 1px color( theme( button ) shade( 30% ) ), - -1px 0 1px color( theme( button ) shade( 30% ) ); + text-shadow: + 0 -1px 1px color(theme(button) shade(30%)), + 1px 0 1px color(theme(button) shade(30%)), + 0 1px 1px color(theme(button) shade(30%)), + -1px 0 1px color(theme(button) shade(30%)); &:hover, &:focus:not(:disabled):not([aria-disabled="true"]) { - background: color( theme( button ) shade( 5% ) ); - border-color: color( theme( button ) shade( 50% ) ); - box-shadow: inset 0 -1px 0 color( theme( button ) shade( 50% ) ); + background: color(theme(button) shade(5%)); + border-color: color(theme(button) shade(50%)); + box-shadow: inset 0 -1px 0 color(theme(button) shade(50%)); color: $white; } &:focus:not(:disabled):not([aria-disabled="true"]) { - box-shadow: inset 0 -1px 0 color( theme( button ) shade( 50% ) ), + box-shadow: + inset 0 -1px 0 color(theme(button) shade(50%)), 0 0 0 2px $blue-medium-200; } &:active:not(:disabled):not([aria-disabled="true"]) { - background: color( theme( button ) shade( 20% ) ); - border-color: color( theme( button ) shade( 50% ) ); - box-shadow: inset 0 1px 0 color( theme( button ) shade( 50% ) ); + background: color(theme(button) shade(20%)); + border-color: color(theme(button) shade(50%)); + box-shadow: inset 0 1px 0 color(theme(button) shade(50%)); vertical-align: top; } &:disabled, &[disabled] { - color: color( theme( button ) tint( 30% ) ) !important; - background: color( theme( button ) shade( 30% ) ) !important; - border-color: color( theme( button ) shade( 20% ) ) !important; + color: color(theme(button) tint(30%)) !important; + background: color(theme(button) shade(30%)) !important; + border-color: color(theme(button) shade(20%)) !important; box-shadow: none !important; - text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } &.is-busy, &.is-primary.is-busy[disabled] { color: $white !important; background-size: 100px 100% !important; + // Disable reason: This function call looks nicer when each argument is on its own line. + /* stylelint-disable */ background-image: linear-gradient( -45deg, - theme( primary ) 28%, - color( theme( primary ) shade( 30% ) ) 28%, - color( theme( primary ) shade( 30% ) ) 72%, - theme( primary ) 72%) !important; - border-color: color( theme( primary ) shade( 50% ) ) !important; + theme(primary) 28%, + color(theme(primary) shade(30%)) 28%, + color(theme(primary) shade(30%)) 72%, + theme(primary) 72% + ) !important; + /* stylelint-enable */ + border-color: color(theme(primary) shade(50%)) !important; } } @@ -127,10 +134,11 @@ color: #0073aa; text-decoration: underline; transition-property: border, background, color; - transition-duration: .05s; + transition-duration: 0.05s; transition-timing-function: ease-in-out; - &:hover, &:active { + &:hover, + &:active { color: #00a0d2; } @@ -138,7 +146,7 @@ color: #124964; box-shadow: 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); + 0 0 2px 1px rgba(30, 140, 190, 0.8); } } @@ -157,7 +165,7 @@ opacity: 0.3; } - &:not( :disabled ):not( [aria-disabled="true"] ):focus { + &:not(:disabled):not([aria-disabled="true"]):focus { @include button-style__focus-active; } @@ -165,14 +173,14 @@ &.is-busy[disabled] { animation: components-button__busy-animation 2500ms infinite linear; background-size: 100px 100% !important; - background-image: repeating-linear-gradient( -45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px) !important; + background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px) !important; opacity: 1; } &.is-large { height: 30px; - line-height: 28px; - padding: 0 12px 2px; + line-height: 28px; + padding: 0 12px 2px; } &.is-small { @@ -184,5 +192,7 @@ } @keyframes components-button__busy-animation { - 0% { background-position: 200px 0; } + 0% { + background-position: 200px 0; + } } diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss index 9971776a52112..98f0b7b6464e6 100644 --- a/packages/components/src/checkbox-control/style.scss +++ b/packages/components/src/checkbox-control/style.scss @@ -1,4 +1,4 @@ -.components-checkbox-control__input[type=checkbox] { +.components-checkbox-control__input[type="checkbox"] { margin-top: 0; margin-right: 6px; -} \ No newline at end of file +} diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss index 47d8c5d1ce9cf..3729291268a8e 100644 --- a/packages/components/src/color-indicator/style.scss +++ b/packages/components/src/color-indicator/style.scss @@ -1,11 +1,11 @@ .component-color-indicator { width: 25px; height: 16px; - margin-left: .8rem; - border: 1px solid #DADADA; + margin-left: 0.8rem; + border: 1px solid #dadada; display: inline-block; & + & { - margin-left: .5rem; + margin-left: 0.5rem; } } diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss index ea48cd27c12b4..e1380bbab7904 100644 --- a/packages/components/src/color-palette/style.scss +++ b/packages/components/src/color-palette/style.scss @@ -17,10 +17,10 @@ $color-palette-circle-spacing: 14px; margin-right: $color-palette-circle-spacing; margin-bottom: $color-palette-circle-spacing; vertical-align: top; - transform: scale( 1 ); + transform: scale(1); transition: 100ms transform ease; &:hover { - transform: scale( 1.2 ); + transform: scale(1.2); } // Ensure that the
that wraps our toggle button with is full height @@ -38,7 +38,7 @@ $color-palette-circle-spacing: 14px; border: none; border-radius: 50%; background: transparent; - box-shadow: inset 0 0 0 ( $color-palette-circle-size / 2 ); + box-shadow: inset 0 0 0 ($color-palette-circle-size / 2); transition: 100ms box-shadow ease; cursor: pointer; @@ -47,20 +47,20 @@ $color-palette-circle-spacing: 14px; } &::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); } &:focus { outline: none; &::after { - content: ''; + content: ""; border: $border-width solid $dark-gray-400; width: 32px; height: 32px; @@ -90,14 +90,14 @@ $color-palette-circle-spacing: 14px; position: absolute; top: 0; left: 0; - content: ''; + content: ""; width: 100%; height: 100%; border-bottom: 2px solid $alert-red; transform: rotate(45deg) - translateY( - $color-palette-circle-size / 2 + 1px ) - translateX( - 1px ); + translateY(- $color-palette-circle-size / 2 + 1px) + translateX(- 1px); } } @@ -118,8 +118,8 @@ $color-palette-circle-spacing: 14px; } .components-color-palette__custom-color .components-color-palette__custom-color-gradient::before { - content: ''; - filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 ); + content: ""; + filter: blur(6px) saturate(0.7) brightness(1.1); display: block; width: 200%; height: 200%; @@ -127,19 +127,20 @@ $color-palette-circle-spacing: 14px; top: -50%; left: -50%; padding-top: 100%; - transform: scale( 1 ); - background-image: linear-gradient(330deg, transparent 50%, #ff8100 50%), - linear-gradient(300deg, transparent 50%, #ff5800 50%), - linear-gradient(270deg, transparent 50%, #c92323 50%), - linear-gradient(240deg, transparent 50%, #cc42a2 50%), - linear-gradient(210deg, transparent 50%, #9f49ac 50%), - linear-gradient(180deg, transparent 50%, #306cd3 50%), - linear-gradient(150deg, transparent 50%, #179067 50%), - linear-gradient(120deg, transparent 50%, #0eb5d6 50%), - linear-gradient(90deg, transparent 50%, #50b517 50%), - linear-gradient(60deg, transparent 50%, #ede604 50%), - linear-gradient(30deg, transparent 50%, #ffcc00 50%), - linear-gradient(0deg, transparent 50%, #feac00 50%); + transform: scale(1); + background-image: + linear-gradient(330deg, transparent 50%, #ff8100 50%), + linear-gradient(300deg, transparent 50%, #ff5800 50%), + linear-gradient(270deg, transparent 50%, #c92323 50%), + linear-gradient(240deg, transparent 50%, #cc42a2 50%), + linear-gradient(210deg, transparent 50%, #9f49ac 50%), + linear-gradient(180deg, transparent 50%, #306cd3 50%), + linear-gradient(150deg, transparent 50%, #179067 50%), + linear-gradient(120deg, transparent 50%, #0eb5d6 50%), + linear-gradient(90deg, transparent 50%, #50b517 50%), + linear-gradient(60deg, transparent 50%, #ede604 50%), + linear-gradient(30deg, transparent 50%, #fc0 50%), + linear-gradient(0deg, transparent 50%, #feac00 50%); background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box; } diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 9b6d00e3238c1..a0738635acc83 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -15,7 +15,7 @@ $datepicker__navigation-disabled-color: lighten($datepicker__muted-color, 10%); $datepicker__border-color: $light-gray-500; // Lerna hoist packages, so can't reference with ~ -@import '../../../../node_modules/react-datepicker/src/stylesheets/datepicker'; +@import "../../../../node_modules/react-datepicker/src/stylesheets/datepicker"; .react-datepicker__month-container { float: none; @@ -81,9 +81,9 @@ $datepicker__border-color: $light-gray-500; ul.react-datepicker__time-list { li.react-datepicker__time-list-item { &--selected { - background-color: theme( primary ); + background-color: theme(primary); &:hover { - background-color: theme( primary ); + background-color: theme(primary); } } } @@ -94,33 +94,33 @@ $datepicker__border-color: $light-gray-500; .react-datepicker__day { &--highlighted { - background-color: theme( primary ); + background-color: theme(primary); &:hover { - background-color: color( theme( primary ) shade(5%) ); + background-color: color(theme(primary) shade(5%)); } } &--selected, &--in-selecting-range, &--in-range { - background-color: theme( primary ); + background-color: theme(primary); &:hover { - background-color: color( theme( primary ) shade(5%) ); + background-color: color(theme(primary) shade(5%)); } } &--keyboard-selected { - background-color: color( theme( primary ) tint(5%) ); + background-color: color(theme(primary) tint(5%)); &:hover { - background-color: color( theme( primary ) shade(5%) ); + background-color: color(theme(primary) shade(5%)); } } &--in-selecting-range:not(&--in-range) { - background-color: color( theme( primary ) a(50%) ); + background-color: color(theme(primary) a(50%)); } } .react-datepicker__close-icon::after { - background-color: theme( primary ); + background-color: theme(primary); } diff --git a/packages/components/src/disabled/style.scss b/packages/components/src/disabled/style.scss index 1e6c51a62ff30..8ca29bb801e15 100644 --- a/packages/components/src/disabled/style.scss +++ b/packages/components/src/disabled/style.scss @@ -2,8 +2,8 @@ position: relative; pointer-events: none; - &:after { - content: ''; + &::after { + content: ""; position: absolute; top: 0; right: 0; diff --git a/packages/components/src/draggable/style.scss b/packages/components/src/draggable/style.scss index 6d4f9845840db..ad046f4e092a3 100644 --- a/packages/components/src/draggable/style.scss +++ b/packages/components/src/draggable/style.scss @@ -15,6 +15,6 @@ body.is-dragging-components-draggable { padding: 20px; background: transparent; pointer-events: none; - z-index: z-index( '.components-draggable__clone' ); + z-index: z-index(".components-draggable__clone"); opacity: 0.8; } diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss index 06f76420f2c81..65b6795300424 100644 --- a/packages/components/src/drop-zone/style.scss +++ b/packages/components/src/drop-zone/style.scss @@ -4,7 +4,7 @@ right: 0; bottom: 0; left: 0; - z-index: z-index( '.components-drop-zone' ); + z-index: z-index(".components-drop-zone"); visibility: hidden; opacity: 0; transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s; @@ -18,7 +18,7 @@ } &.is-dragging-over-element { - background-color: rgba( $blue-dark-900, 0.8 ); + background-color: rgba($blue-dark-900, 0.8); .components-drop-zone__content { display: block; @@ -31,8 +31,8 @@ top: 50%; left: 0; right: 0; - z-index: z-index( '.components-drop-zone__content' ); - transform: translateY( -50% ); + z-index: z-index(".components-drop-zone__content"); + transform: translateY(-50%); width: 100%; text-align: center; color: $white; @@ -41,7 +41,7 @@ } .components-drop-zone.is-dragging-over-element .components-drop-zone__content { - transform: translateY( -50% ) scale( 1.05 ); + transform: translateY(-50%) scale(1.05); } .components-drop-zone__content-icon, diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index fd7e59500910f..4a92b0f67fe32 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -24,7 +24,7 @@ $toggle-border-width: 2px; // unchecked state .components-form-toggle__track { - content: ''; + content: ""; display: inline-block; vertical-align: top; background-color: $white; @@ -40,8 +40,8 @@ $toggle-border-width: 2px; position: absolute; top: $toggle-border-width * 2; left: $toggle-border-width * 2; - width: $toggle-height - ( $toggle-border-width * 4 ); - height: $toggle-height - ( $toggle-border-width * 4 ); + width: $toggle-height - ($toggle-border-width * 4); + height: $toggle-height - ($toggle-border-width * 4); border-radius: 50%; transition: 0.1s transform ease; background-color: $dark-gray-300; @@ -65,8 +65,8 @@ $toggle-border-width: 2px; // checked state &.is-checked .components-form-toggle__track { - background-color: theme( toggle ); - border: $toggle-border-width solid theme( toggle ); + background-color: theme(toggle); + border: $toggle-border-width solid theme(toggle); border: #{ $toggle-height / 2 } solid transparent; // expand the border to fake a solid in Windows High Contrast Mode } @@ -78,17 +78,17 @@ $toggle-border-width: 2px; .components-form-toggle__thumb { background-color: $white; border-width: 0; // zero out the border color to make the thumb invisible in Windows High Contrast Mode - transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) ); + transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4))); } &::before { - background-color: theme( toggle ); - border: $toggle-border-width solid theme( toggle ); + background-color: theme(toggle); + border: $toggle-border-width solid theme(toggle); } } } -.components-form-toggle__input[type=checkbox] { +.components-form-toggle__input[type="checkbox"] { position: absolute; top: 0; left: 0; @@ -97,7 +97,7 @@ $toggle-border-width: 2px; opacity: 0; margin: 0; padding: 0; - z-index: z-index( '.components-form-toggle__input' ); + z-index: z-index(".components-form-toggle__input"); } // Ensure on indicator works in normal and Windows high contrast mode both @@ -108,10 +108,10 @@ $toggle-border-width: 2px; // this colors the indicator black, then inverts it for normal mode border: $border-width solid $black; - filter: invert( 100% ) contrast( 500% ); // this makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode + filter: invert(100%) contrast(500%); // this makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode } -@supports ( -ms-high-contrast-adjust: auto ) { +@supports (-ms-high-contrast-adjust: auto) { // Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again // Therefore, show a different style for the on indicator only in Edge and IE11 .components-form-toggle .components-form-toggle__on { diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 49ad0fdbe29e2..800b604b62269 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -85,7 +85,7 @@ .components-form-token-field__token-text { background: transparent; - color: theme( secondary ); + color: theme(secondary); } .components-form-token-field__remove-token { @@ -129,7 +129,7 @@ display: inline-block; line-height: 24px; background: $light-gray-500; - transition: all .2s cubic-bezier( .4, 1, .4, 1 ); + transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); } .components-form-token-field__token-text { @@ -157,7 +157,7 @@ background: $white; max-height: 9em; overflow-y: scroll; - transition: all .15s ease-in-out; + transition: all 0.15s ease-in-out; list-style: none; border-top: $border-width solid $dark-gray-300; margin: 0; diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index d6378f3ee68e3..21f8f8b5a728b 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -1,6 +1,6 @@ .components-navigate-regions.is-focusing-regions [role="region"] { - &:focus:after { - content: ''; + &:focus::after { + content: ""; position: absolute; top: 0; bottom: 0; @@ -8,6 +8,6 @@ right: 0; pointer-events: none; outline: 4px solid transparent; // Shown in Windows High Contrast mode. - @include region_focus( .1s ); + @include region_focus(0.1s); } } diff --git a/packages/components/src/icon-button/style.scss b/packages/components/src/icon-button/style.scss index 369f964b321f2..f562a2f2e048b 100644 --- a/packages/components/src/icon-button/style.scss +++ b/packages/components/src/icon-button/style.scss @@ -21,15 +21,15 @@ outline: none; } - &:not( :disabled ):not( [aria-disabled="true"] ):not( .is-default ):hover { + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { @include button-style__hover; } - &:not( :disabled ):not( [aria-disabled="true"] ):not( .is-default ):active { + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):active { @include button-style__active; } - &[aria-disabled=true]:focus, + &[aria-disabled="true"]:focus, &:disabled:focus { box-shadow: none; } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 4e6c0ea56dfdf..23d446bc145c7 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -45,7 +45,7 @@ } .components-menu-item__shortcut { - opacity: .5; + opacity: 0.5; margin-right: 0; margin-left: auto; } diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 888ed193e8b65..e3f5f5027194a 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -5,8 +5,8 @@ right: 0; bottom: 0; left: 0; - background-color: rgba( $white, .4 ); - z-index: z-index( '.components-modal__screen-overlay' ); + background-color: rgba($white, 0.4); + z-index: z-index(".components-modal__screen-overlay"); } // The modal window element. @@ -24,9 +24,9 @@ position: absolute; right: auto; bottom: auto; - max-width: calc( 100% - #{ $panel-padding } - #{ $panel-padding } ); + max-width: calc(100% - #{ $panel-padding } - #{ $panel-padding }); margin-right: -50%; - transform: translate( -50%, 0 ); + transform: translate(-50%, 0); top: $panel-padding; left: 50%; height: 90%; @@ -34,8 +34,8 @@ // Show pretty big on desktop breakpoints. @include break-medium () { - max-width: calc( #{ $break-medium } - #{ $panel-padding } - #{ $panel-padding } ); - transform: translate( -50%, -30% ); + max-width: calc(#{ $break-medium } - #{ $panel-padding } - #{ $panel-padding }); + transform: translate(-50%, -30%); top: 30%; left: 50%; height: 70%; @@ -83,7 +83,7 @@ .components-modal__content { // The height of the content is the height of it's parent, minus the header. after that, the offset was 3px. - height: calc( 100% - #{ $header-height } - #{ $admin-bar-height } ); + height: calc(100% - #{ $header-height } - #{ $admin-bar-height }); overflow: auto; padding: $panel-padding; } diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index 2da61c495da2a..7920ff01604a0 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -1,4 +1,4 @@ .components-notice-list { min-width: 300px; - z-index: z-index( ".components-notice-list" ); + z-index: z-index(".components-notice-list"); } diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 51e55bfb205c7..57ac86eec7864 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -22,7 +22,7 @@ border-bottom: $border-width solid $light-gray-500; h3 { - margin: 0 0 .5em; + margin: 0 0 0.5em; } &.is-opened { @@ -84,7 +84,7 @@ position: absolute; right: $item-spacing; top: 50%; - transform: translateY( -50% ); + transform: translateY(-50%); } // mirror the arrow horizontally in RTL languages diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 9eee059b75002..454e86aefade0 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -37,7 +37,7 @@ width: 100%; max-width: 280px; flex-wrap: wrap; - z-index: z-index( '.components-placeholder__fieldset' ); + z-index: z-index(".components-placeholder__fieldset"); p { font-family: $default-font; diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 889e129a1d289..c9d3fdecac4b7 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -2,7 +2,7 @@ $arrow-size: 8px; .components-popover { position: fixed; - z-index: z-index( ".components-popover" ); + z-index: z-index(".components-popover"); left: 50%; &.is-mobile { @@ -19,12 +19,12 @@ $arrow-size: 8px; border: $arrow-size solid $light-gray-500; } - &:after { + &::after { border: $arrow-size solid $white; } &::before, - &:after { + &::after { content: ""; position: absolute; height: 0; @@ -39,12 +39,12 @@ $arrow-size: 8px; bottom: - $arrow-size; } - &:after { + &::after { bottom: -6px; } &::before, - &:after { + &::after { border-bottom: none; border-left-color: transparent; border-right-color: transparent; @@ -60,12 +60,12 @@ $arrow-size: 8px; top: -$arrow-size; } - &:after { + &::after { top: -6px; } &::before, - &:after { + &::after { border-bottom-style: solid; border-left-color: transparent; border-right-color: transparent; @@ -82,12 +82,12 @@ $arrow-size: 8px; right: -$arrow-size; } - &:after { + &::after { right: -6px; } &::before, - &:after { + &::after { border-bottom-color: transparent; border-left-style: solid; border-right: none; @@ -104,12 +104,12 @@ $arrow-size: 8px; left: -$arrow-size; } - &:after { + &::after { left: -6px; } &::before, - &:after { + &::after { border-bottom-color: transparent; border-left: none; border-right-style: solid; @@ -126,7 +126,7 @@ $arrow-size: 8px; &.is-bottom { top: 100%; - z-index: z-index( ".components-popover.is-bottom" ); + z-index: z-index(".components-popover.is-bottom"); } &.is-middle { @@ -143,7 +143,7 @@ $arrow-size: 8px; height: 100%; .components-popover.is-mobile & { - height: calc( 100% - #{ $panel-header-height } ); + height: calc(100% - #{ $panel-header-height }); border-top: 0; } @@ -160,7 +160,7 @@ $arrow-size: 8px; .components-popover:not(.is-mobile).is-center & { left: 50%; - transform: translateX( -50% ); + transform: translateX(-50%); } .components-popover:not(.is-mobile).is-right & { @@ -209,5 +209,5 @@ $arrow-size: 8px; } .components-popover__close.components-icon-button { - z-index: z-index( '.components-popover__close' ); + z-index: z-index(".components-popover__close"); } diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss index 0f79124d3285b..f765cdd34798d 100644 --- a/packages/components/src/radio-control/style.scss +++ b/packages/components/src/radio-control/style.scss @@ -7,7 +7,7 @@ margin-bottom: 4px; } -.components-radio-control__input[type=radio] { +.components-radio-control__input[type="radio"] { margin-top: 0; margin-right: 6px; -} \ No newline at end of file +} diff --git a/packages/components/src/range-control/style.scss b/packages/components/src/range-control/style.scss index 4592bfbe2b33b..8cd14cf3940d7 100644 --- a/packages/components/src/range-control/style.scss +++ b/packages/components/src/range-control/style.scss @@ -96,7 +96,7 @@ * Track */ - // webkit + // webkit &::-webkit-slider-runnable-track { @include range-track(); margin-top: -4px; diff --git a/packages/components/src/select-control/style.scss b/packages/components/src/select-control/style.scss index a0c73a4e8efd8..7da6a7464f12b 100644 --- a/packages/components/src/select-control/style.scss +++ b/packages/components/src/select-control/style.scss @@ -1,3 +1,3 @@ .components-select-control__input { width: 100%; -} \ No newline at end of file +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index e9b340f9b1725..2440ecea57473 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -1,37 +1,37 @@ -@import './autocomplete/style.scss'; -@import './base-control/style.scss'; -@import './button-group/style.scss'; -@import './button/style.scss'; -@import './checkbox-control/style.scss'; -@import './color-indicator/style.scss'; -@import './color-palette/style.scss'; -@import './dashicon/style.scss'; -@import './date-time/style.scss'; -@import './disabled/style.scss'; -@import './draggable/style.scss'; -@import './drop-zone/style.scss'; -@import './dropdown-menu/style.scss'; -@import './external-link/style.scss'; -@import './font-size-picker/style.scss'; -@import './form-file-upload/style.scss'; -@import './form-toggle/style.scss'; -@import './form-token-field/style.scss'; -@import './higher-order/navigate-regions/style.scss'; -@import './icon-button/style.scss'; -@import './menu-group/style.scss'; -@import './menu-item/style.scss'; -@import './modal/style.scss'; -@import './notice/style.scss'; -@import './panel/style.scss'; -@import './placeholder/style.scss'; -@import './popover/style.scss'; -@import './radio-control/style.scss'; -@import './range-control/style.scss'; -@import './responsive-wrapper/style.scss'; -@import './scroll-lock/style.scss'; -@import './select-control/style.scss'; -@import './text-control/style.scss'; -@import './textarea-control/style.scss'; -@import './toggle-control/style.scss'; -@import './toolbar/style.scss'; -@import './tooltip/style.scss'; +@import "./autocomplete/style.scss"; +@import "./base-control/style.scss"; +@import "./button-group/style.scss"; +@import "./button/style.scss"; +@import "./checkbox-control/style.scss"; +@import "./color-indicator/style.scss"; +@import "./color-palette/style.scss"; +@import "./dashicon/style.scss"; +@import "./date-time/style.scss"; +@import "./disabled/style.scss"; +@import "./draggable/style.scss"; +@import "./drop-zone/style.scss"; +@import "./dropdown-menu/style.scss"; +@import "./external-link/style.scss"; +@import "./font-size-picker/style.scss"; +@import "./form-file-upload/style.scss"; +@import "./form-toggle/style.scss"; +@import "./form-token-field/style.scss"; +@import "./higher-order/navigate-regions/style.scss"; +@import "./icon-button/style.scss"; +@import "./menu-group/style.scss"; +@import "./menu-item/style.scss"; +@import "./modal/style.scss"; +@import "./notice/style.scss"; +@import "./panel/style.scss"; +@import "./placeholder/style.scss"; +@import "./popover/style.scss"; +@import "./radio-control/style.scss"; +@import "./range-control/style.scss"; +@import "./responsive-wrapper/style.scss"; +@import "./scroll-lock/style.scss"; +@import "./select-control/style.scss"; +@import "./text-control/style.scss"; +@import "./textarea-control/style.scss"; +@import "./toggle-control/style.scss"; +@import "./toolbar/style.scss"; +@import "./tooltip/style.scss"; diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 21097d5233680..d4e80b32d082b 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -6,17 +6,17 @@ } div.components-toolbar { - &> div { + & > div { // IE11 does not support `position: sticky`, or Flex very well, so use block. display: inline-block; - @supports ( position: sticky ) { + @supports (position: sticky) { display: inline-flex; } margin: 0; } - &> div + div { + & > div + div { margin-left: -3px; &.has-left-divider { @@ -27,7 +27,7 @@ div.components-toolbar { &.has-left-divider::before { display: inline-block; - content: ''; + content: ""; box-sizing: content-box; background-color: $light-gray-500; position: absolute; @@ -52,8 +52,8 @@ div.components-toolbar { // Unset icon button styles &:active, - &:not( [aria-disabled="true"] ):hover, - &:not( [aria-disabled="true"] ):focus { + &:not([aria-disabled="true"]):hover, + &:not([aria-disabled="true"]):focus { outline: none; box-shadow: none; background: none; @@ -76,8 +76,8 @@ div.components-toolbar { padding: 4px 8px 4px 0; } - &[data-subscript]:after { - content: attr( data-subscript ); + &[data-subscript]::after { + content: attr(data-subscript); font-family: $default-font; font-size: $default-font-size; font-weight: 600; @@ -87,12 +87,12 @@ div.components-toolbar { } // Assign hover style to child element, not the button itself - &:not( :disabled ):not([aria-disabled="true"]):hover { + &:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: none; } - &:not( :disabled ).is-active > svg, - &:not( :disabled ):hover > svg { + &:not(:disabled).is-active > svg, + &:not(:disabled):hover > svg { @include formatting-button-style__hover; } @@ -101,7 +101,7 @@ div.components-toolbar { @include formatting-button-style__active; } - &:not(:disabled).is-active[data-subscript]:after { + &:not(:disabled).is-active[data-subscript]::after { color: $white; } diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss index 4f4b7e6aafef5..06ce8a290fab3 100644 --- a/packages/components/src/tooltip/style.scss +++ b/packages/components/src/tooltip/style.scss @@ -1,15 +1,15 @@ .components-tooltip.components-popover { - z-index: z-index( '.components-tooltip' ); + z-index: z-index(".components-tooltip"); &::before { border-color: transparent; } - &.is-top:after { + &.is-top::after { border-top-color: $dark-gray-900; } - &.is-bottom:after { + &.is-bottom::after { border-bottom-color: $dark-gray-900; } } diff --git a/packages/editor/src/components/block-drop-zone/style.scss b/packages/editor/src/components/block-drop-zone/style.scss index bff3a2b432657..8cbc15a90a1d3 100644 --- a/packages/editor/src/components/block-drop-zone/style.scss +++ b/packages/editor/src/components/block-drop-zone/style.scss @@ -1,4 +1,4 @@ - // Dropzones +// Dropzones .editor-block-drop-zone { border: none; border-radius: 0; @@ -9,14 +9,14 @@ &.is-close-to-bottom { background: none; - border-bottom: 3px solid theme( primary ); + border-bottom: 3px solid theme(primary); } &.is-close-to-top, &.is-appender.is-close-to-top, &.is-appender.is-close-to-bottom { background: none; - border-top: 3px solid theme( primary ); + border-top: 3px solid theme(primary); border-bottom: none; } diff --git a/packages/editor/src/components/block-inspector/style.scss b/packages/editor/src/components/block-inspector/style.scss index d6b464c8c9ffe..461b22054dd8c 100644 --- a/packages/editor/src/components/block-inspector/style.scss +++ b/packages/editor/src/components/block-inspector/style.scss @@ -3,7 +3,7 @@ display: block; font-size: $default-font-size; background: $white; - padding: ( $panel-padding * 2 ) $panel-padding; + padding: ($panel-padding * 2) $panel-padding; text-align: center; } diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 3e1e7e16c510e..972761e09a01a 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -30,7 +30,7 @@ right: 0; bottom: 0; left: 0; - z-index: z-index( '.editor-block-list__block-draggable' ); + z-index: z-index(".editor-block-list__block-draggable"); > .editor-block-list__block-draggable-inner { position: absolute; @@ -99,7 +99,7 @@ } .editor-block-list__block-edit .reusable-block-edit-panel * { - z-index: z-index( '.editor-block-list__block-edit .reusable-block-edit-panel *' ); + z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); } } @@ -165,23 +165,23 @@ /** * Notices */ - .components-placeholder .components-with-notices-ui { + .components-placeholder .components-with-notices-ui { margin: -10px 20px 12px 20px; - width: calc( 100% - 40px ); - } - .components-with-notices-ui { + width: calc(100% - 40px); + } + .components-with-notices-ui { margin: 0 0 12px 0; width: 100%; .notice { - margin-left: 0px; - margin-right: 0px; + margin-left: 0; + margin-right: 0; p { font-size: $default-font-size; } } - } + } /** * Block outline layout @@ -191,11 +191,11 @@ position: relative; &::before { - z-index: z-index( '.editor-block-list__block-edit::before' ); - content: ''; + z-index: z-index(".editor-block-list__block-edit::before"); + content: ""; position: absolute; outline: $border-width solid transparent; - transition: outline .1s linear; + transition: outline 0.1s linear; pointer-events: none; // Show wider padding for top level blocks. @@ -233,7 +233,7 @@ // Hover style &.is-hovered > .editor-block-list__block-edit::before { - outline: $border-width solid theme( outlines ); + outline: $border-width solid theme(outlines); } } @@ -284,13 +284,13 @@ // Warnings &.has-warning .editor-block-list__block-edit { - > :not( .editor-warning ) { + > :not(.editor-warning) { pointer-events: none; user-select: none; } } - &.has-warning:not( .is-hovered ) .editor-block-list__block-edit::before { + &.has-warning:not(.is-hovered) .editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline-color: $dark-opacity-light-500; @@ -299,10 +299,10 @@ } } - &.has-warning .editor-block-list__block-edit:after { - content: ''; + &.has-warning .editor-block-list__block-edit::after { + content: ""; position: absolute; - background-color: rgba( $light-gray-100, .8 ); + background-color: rgba($light-gray-100, 0.8); top: -$block-padding; bottom: -$block-padding; @@ -329,7 +329,7 @@ } // Reusable blocks - &.is-reusable > .editor-block-list__block-edit:before { + &.is-reusable > .editor-block-list__block-edit::before { // Use opacity to work in various editor styles. outline: $border-width dashed $dark-opacity-light-500; @@ -342,7 +342,7 @@ &[data-align="left"], &[data-align="right"] { // Without z-index, won't be clickable as "above" adjacent content. - z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' ); + z-index: z-index(".editor-block-list__block {core/image aligned left or right}"); width: 100%; // When images are floated, the block itself should collapse to zero height. @@ -395,7 +395,7 @@ clear: both; // Without z-index, the block toolbar will be below an adjecent float - z-index: z-index( '.editor-block-list__block {core/image aligned wide or fullwide}' ); + z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above > .editor-block-mover, @@ -570,7 +570,7 @@ &.is-hovered { .editor-block-settings-menu, .editor-block-mover { - z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' ); + z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}"); } } } @@ -633,7 +633,7 @@ border-top: $border-width solid $light-gray-500; height: $block-toolbar-height; - transform: translateY( #{ $block-padding + $border-width } ); + transform: translateY(#{ $block-padding + $border-width }); @include break-small() { display: none; @@ -707,16 +707,16 @@ // Insertion point (includes inbetween inserter and insertion indicator) .editor-block-list__insertion-point { position: relative; - z-index: z-index( '.editor-block-list__insertion-point' ); + z-index: z-index(".editor-block-list__insertion-point"); } .editor-block-list__insertion-point-indicator { position: absolute; - top: calc( 50% - #{ $border-width } ); + top: calc(50% - #{ $border-width }); height: 2px; left: 0; right: 0; - background: theme( primary ); + background: theme(primary); } .editor-block-list__insertion-point-inserter { @@ -762,7 +762,7 @@ } // Don't show the sibling inserter before the selected block. -.edit-post-layout:not( .has-fixed-toolbar ) { +.edit-post-layout:not(.has-fixed-toolbar) { // The child selector is necessary for this to work properly in nested contexts. .is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter { opacity: 0; @@ -805,7 +805,7 @@ font-family: $editor-html-font; font-size: $text-editor-font-size; line-height: 150%; - transition: padding .2s linear; + transition: padding 0.2s linear; &:focus { box-shadow: none; @@ -819,7 +819,7 @@ .editor-block-list__block .editor-block-contextual-toolbar { position: sticky; - z-index: z-index( '.editor-block-contextual-toolbar' ); + z-index: z-index(".editor-block-contextual-toolbar"); white-space: nowrap; text-align: left; pointer-events: none; @@ -891,10 +891,10 @@ box-shadow: none; // Move the block toolbar out of the flow using translate. - transform: translateY( -$block-toolbar-height -$block-padding -$border-width ); + transform: translateY(-$block-toolbar-height -$block-padding -$border-width); // IE11 does not support `position: sticky`. - @supports ( position: sticky ) { + @supports (position: sticky) { position: sticky; // Compensate for translate, so the sticky sticks to the top. @@ -959,7 +959,7 @@ .editor-block-list__breadcrumb { position: absolute; line-height: 1; - z-index: z-index( '.editor-block-list__breadcrumb' ); + z-index: z-index(".editor-block-list__breadcrumb"); // Position in the top right of the border. right: -$block-parent-side-ui-clearance; @@ -978,23 +978,23 @@ font-family: $default-font; font-size: 11px; padding: 4px 4px; - background: theme( outlines ); + background: theme(outlines); color: $white; // Animate in .editor-block-list__block:hover & { - @include fade_in( .1s ); + @include fade_in(0.1s); } } } .editor-block-list__descendant-arrow::before { - content: '→'; + content: "→"; display: inline-block; padding: 0 4px; .rtl & { - content: '←'; + content: "←"; } } @@ -1007,7 +1007,7 @@ // the block and select it. (eg. A fuzzy click target.) &::before { bottom: 0; - content: ''; + content: ""; left: -$parent-block-padding - $block-padding; position: absolute; right: -$parent-block-padding - $block-padding; diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss index 84044903c1fce..c9bb11ba20298 100644 --- a/packages/editor/src/components/block-mover/style.scss +++ b/packages/editor/src/components/block-mover/style.scss @@ -42,7 +42,7 @@ svg { width: $block-side-ui-width; height: $block-side-ui-width; - padding: ( $block-side-ui-width - 18px ) / 2; // this makes the SVG fill the whole available area, without scaling the artwork + padding: ($block-side-ui-width - 18px) / 2; // this makes the SVG fill the whole available area, without scaling the artwork } // Apply a background in nested contexts, only on desktop @@ -54,26 +54,26 @@ &:first-child { margin-bottom: -1px; } - + &:hover, &:active, &:focus { // Buttons are stacked with overlapping border to look like a unit, so elevate on interactions. - z-index: z-index( '.editor-block-mover__control' ); + z-index: z-index(".editor-block-mover__control"); } } } // Hover, active and focus styles - &:not( :disabled ):not( [aria-disabled="true"] ):hover { + &:not(:disabled):not([aria-disabled="true"]):hover { @include button-style__hover; } - &:not( :disabled ):not( [aria-disabled="true"] ):active { + &:not(:disabled):not([aria-disabled="true"]):active { @include button-style__active; } - &:not( :disabled ):not( [aria-disabled="true"] ):focus { + &:not(:disabled):not([aria-disabled="true"]):focus { @include button-style__focus-active; } } diff --git a/packages/editor/src/components/block-preview/style.scss b/packages/editor/src/components/block-preview/style.scss index ac96e94342975..b9eb15d1b1eb3 100644 --- a/packages/editor/src/components/block-preview/style.scss +++ b/packages/editor/src/components/block-preview/style.scss @@ -14,7 +14,7 @@ font-family: $editor-font; > div { - transform: scale( 0.9 ); + transform: scale(0.9); transform-origin: center top; font-family: $editor-font; } diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss index cae9acd6a3715..38cc137a4f059 100644 --- a/packages/editor/src/components/block-settings-menu/style.scss +++ b/packages/editor/src/components/block-settings-menu/style.scss @@ -39,20 +39,20 @@ &:hover, &:active, &:focus { - z-index: z-index( '.editor-block-settings-remove' ); + z-index: z-index(".editor-block-settings-remove"); } } } } .editor-block-settings-menu__toggle .dashicon { - transform: rotate( 90deg ); + transform: rotate(90deg); } // Popout menu .editor-block-settings-menu__popover { &::before, - &:after { + &::after { margin-left: 2px; } diff --git a/packages/editor/src/components/block-styles/style.scss b/packages/editor/src/components/block-styles/style.scss index 3c9ea7d3e6145..d95c3c1c42fbb 100644 --- a/packages/editor/src/components/block-styles/style.scss +++ b/packages/editor/src/components/block-styles/style.scss @@ -24,7 +24,7 @@ .editor-block-styles__item-preview { outline: $border-width solid transparent; // Shown in Windows High Contrast mode. - box-shadow: inset 0 0 0 1px rgba( $dark-gray-900, .2 ); + box-shadow: inset 0 0 0 1px rgba($dark-gray-900, 0.2); overflow: hidden; padding: 0; text-align: initial; @@ -33,7 +33,7 @@ height: 60px; > * { - transform: scale( 0.7 ); + transform: scale(0.7); transform-origin: center center; font-family: $editor-font; } diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index f8cc40ac98e49..35fb7c8c96ff8 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -11,8 +11,8 @@ // Unset icon button styles. &:active, - &:not( :disabled ):not( [aria-disabled="true"] ):hover, - &:not( [aria-disabled="true"] ):focus { + &:not(:disabled):not([aria-disabled="true"]):hover, + &:not([aria-disabled="true"]):focus { outline: none; box-shadow: none; background: none; @@ -20,7 +20,7 @@ } // Block hover style. - &:not( :disabled ):hover .editor-block-icon__colors { + &:not(:disabled):hover .editor-block-icon__colors { @include block-style__hover(); } diff --git a/packages/editor/src/components/block-toolbar/style.scss b/packages/editor/src/components/block-toolbar/style.scss index 389659b29aa2d..e0bb8930014a9 100644 --- a/packages/editor/src/components/block-toolbar/style.scss +++ b/packages/editor/src/components/block-toolbar/style.scss @@ -15,7 +15,7 @@ // The component is born with a border, but we only need some of them. .components-toolbar { - border: 0; + border: 0; border-top: $border-width solid $light-gray-500; border-bottom: $border-width solid $light-gray-500; @@ -27,7 +27,7 @@ > div { // IE11 does not support `position: sticky`, or Flex very well, so use block. display: block; - @supports ( position: sticky ) { + @supports (position: sticky) { display: flex; } } diff --git a/packages/editor/src/components/block-types-list/style.scss b/packages/editor/src/components/block-types-list/style.scss index d8cc42279edfc..a17b125934318 100644 --- a/packages/editor/src/components/block-types-list/style.scss +++ b/packages/editor/src/components/block-types-list/style.scss @@ -11,7 +11,7 @@ .editor-block-types-list__item { display: inline-flex; flex-direction: column; - width: calc( 33.3% - 8px ); + width: calc(33.3% - 8px); margin: 0 4px 8px 4px; font-size: $default-font-size; color: $dark-gray-700; @@ -88,7 +88,7 @@ // Show a "stacked card" below an item that has children. .editor-block-types-list__item-icon-stack { display: block; - background: rgba( $dark-gray-900, .3 ); + background: rgba($dark-gray-900, 0.3); width: 100%; height: 100%; position: absolute; diff --git a/packages/editor/src/components/color-palette/control.scss b/packages/editor/src/components/color-palette/control.scss index 48ef166e47516..2fa07064fc419 100644 --- a/packages/editor/src/components/color-palette/control.scss +++ b/packages/editor/src/components/color-palette/control.scss @@ -1,4 +1,4 @@ .editor-color-palette-control__color-palette { - margin-top: .6rem; + margin-top: 0.6rem; margin-bottom: 1.4rem; } diff --git a/packages/editor/src/components/default-block-appender/style.scss b/packages/editor/src/components/default-block-appender/style.scss index 9c781dec8b5ec..36e0431beb3c5 100644 --- a/packages/editor/src/components/default-block-appender/style.scss +++ b/packages/editor/src/components/default-block-appender/style.scss @@ -1,5 +1,5 @@ .editor-default-block-appender { - input[type=text].editor-default-block-appender__content { // needs specificity + input[type="text"].editor-default-block-appender__content { // needs specificity border: none; background: none; box-shadow: none; @@ -25,10 +25,10 @@ // Show quick insertion icons faded until hover. .editor-inserter-with-shortcuts { - opacity: .5; + opacity: 0.5; transition: opacity 0.2s; - .components-icon-button:not( :hover ) { + .components-icon-button:not(:hover) { // use opacity to work in various editor styles color: $dark-opacity-500; @@ -43,8 +43,8 @@ } // Show the inserter if mousing over or there is a tip. - &:not( .has-tip ) { - .editor-inserter__toggle:not( [aria-expanded="true"] ) { + &:not(.has-tip) { + .editor-inserter__toggle:not([aria-expanded="true"]) { opacity: 0; } @@ -97,7 +97,7 @@ padding: 4px; // use opacity to work in various editor styles - &:not( :hover ) { + &:not(:hover) { color: $dark-opacity-500; .is-dark-theme & { @@ -111,7 +111,7 @@ .editor-inserter-with-shortcuts { right: $block-padding; display: none; // Don't show on mobile. - z-index: z-index( '.editor-inserter-with-shortcuts' ); // Elevate above the sibling inserter. + z-index: z-index(".editor-inserter-with-shortcuts"); // Elevate above the sibling inserter. @include break-small { right: 0; diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 784dcf7b03e87..336f53d196687 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -17,23 +17,23 @@ } &.is-h2 .document-outline__emdash::before { - content: '—'; + content: "—"; } &.is-h3 .document-outline__emdash::before { - content: '——'; + content: "——"; } &.is-h4 .document-outline__emdash::before { - content: '———'; + content: "———"; } &.is-h5 .document-outline__emdash::before { - content: '————'; + content: "————"; } &.is-h6 .document-outline__emdash::before { - content: '—————'; + content: "—————"; } } diff --git a/packages/editor/src/components/inner-blocks/style.scss b/packages/editor/src/components/inner-blocks/style.scss index 90190c6afc5a7..36ffe038223e4 100644 --- a/packages/editor/src/components/inner-blocks/style.scss +++ b/packages/editor/src/components/inner-blocks/style.scss @@ -1,9 +1,9 @@ -.editor-inner-blocks.has-overlay:after { - content: ''; +.editor-inner-blocks.has-overlay::after { + content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; - z-index: z-index( '.editor-inner-blocks__small-screen-overlay:after' ); + z-index: z-index(".editor-inner-blocks__small-screen-overlay:after"); } diff --git a/packages/editor/src/components/inserter/style.scss b/packages/editor/src/components/inserter/style.scss index ad0fe6c29bc75..eb801c06bd669 100644 --- a/packages/editor/src/components/inserter/style.scss +++ b/packages/editor/src/components/inserter/style.scss @@ -31,7 +31,7 @@ $block-inserter-search-height: 38px; cursor: pointer; border: none; outline: none; - transition: color .2s ease; + transition: color 0.2s ease; } .editor-inserter__menu { @@ -60,7 +60,7 @@ $block-inserter-search-height: 38px; margin-top: -1px; } -.editor-inserter__menu.is-bottom:after { +.editor-inserter__menu.is-bottom::after { border-bottom-color: $white; } diff --git a/packages/editor/src/components/page-attributes/style.scss b/packages/editor/src/components/page-attributes/style.scss index eaa43a835be6e..afab2266d3e72 100644 --- a/packages/editor/src/components/page-attributes/style.scss +++ b/packages/editor/src/components/page-attributes/style.scss @@ -1,5 +1,6 @@ .editor-page-attributes__template { - label, select { + label, + select { width: 100%; } margin-bottom: 10px; diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index 8dac163deb9ed..54bc23f8971ad 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -24,7 +24,7 @@ display: block; width: 100%; padding: 0; - transition: all .1s ease-out; + transition: all 0.1s ease-out; box-shadow: 0 0 0 0 $blue-medium-500; } diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index cfff0aab7afbb..30e1600bfd6a0 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -44,8 +44,8 @@ position: relative; white-space: nowrap; - &:after { - @include long-content-fade( $size: 20%, $edge: 1px ); + &::after { + @include long-content-fade($size: 20%, $edge: 1px); } } diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss index 01d87bc2cde65..6823668be51a1 100644 --- a/packages/editor/src/components/post-saved-state/style.scss +++ b/packages/editor/src/components/post-saved-state/style.scss @@ -5,12 +5,12 @@ overflow: hidden; &.is-saving { - animation: loading_fade .5s infinite; + animation: loading_fade 0.5s infinite; } .dashicon { display: inline-block; - flex: 0 0 auto; + flex: 0 0 auto; } } diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss index d2a7fa13c2ca6..35fa7a24dc5a1 100644 --- a/packages/editor/src/components/post-taxonomies/style.scss +++ b/packages/editor/src/components/post-taxonomies/style.scss @@ -2,7 +2,7 @@ margin-bottom: 5px; } -.editor-post-taxonomies__hierarchical-terms-input[type=checkbox] { +.editor-post-taxonomies__hierarchical-terms-input[type="checkbox"] { margin-top: 0; } diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index 422bae43e9d3f..4f6e9ac44ceb7 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -58,9 +58,9 @@ .editor-post-text-editor__link { text-decoration: underline; - color: theme( primary ); + color: theme(primary); } .editor-post-text-editor__del { - text-decoration:line-through; + text-decoration: line-through; } diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index ef1e280b0ebe9..35536b6b41fa0 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -1,7 +1,7 @@ .editor-post-title__block { position: relative; padding: 5px 0; - + @include break-small() { padding: 5px $block-parent-side-ui-clearance; } @@ -14,7 +14,7 @@ background: transparent; font-family: $editor-font; line-height: $default-line-height; - transition: border .1s ease-out; + transition: border 0.1s ease-out; // Show wider parent padding on Desktop breakpoints. padding: #{ $block-padding + 5px } $block-padding; @@ -47,7 +47,7 @@ } .editor-post-title__input:hover { - border-color: theme( outlines ); + border-color: theme(outlines); } } diff --git a/packages/editor/src/components/rich-text/core-tokens/image/style.scss b/packages/editor/src/components/rich-text/core-tokens/image/style.scss index fd94d12cab23c..0d5a879e52ce2 100644 --- a/packages/editor/src/components/rich-text/core-tokens/image/style.scss +++ b/packages/editor/src/components/rich-text/core-tokens/image/style.scss @@ -4,7 +4,7 @@ width: 15px !important; height: 15px !important; position: absolute; - background: theme( primary ); + background: theme(primary); padding: 0 3px 3px 0; box-sizing: border-box; cursor: se-resize; diff --git a/packages/editor/src/components/rich-text/format-toolbar/style.scss b/packages/editor/src/components/rich-text/format-toolbar/style.scss index 37f9e6771de58..510b62166ecc7 100644 --- a/packages/editor/src/components/rich-text/format-toolbar/style.scss +++ b/packages/editor/src/components/rich-text/format-toolbar/style.scss @@ -4,7 +4,7 @@ .editor-format-toolbar__link-container { position: absolute; - transform: translateX( -50% ); + transform: translateX(-50%); } .editor-format-toolbar__link-modal-line { diff --git a/packages/editor/src/components/rich-text/style.scss b/packages/editor/src/components/rich-text/style.scss index 7a0cd842f3096..447e8d5640b23 100644 --- a/packages/editor/src/components/rich-text/style.scss +++ b/packages/editor/src/components/rich-text/style.scss @@ -41,7 +41,7 @@ font-size: 14px; .is-multi-selected & { - background: darken( $blue-medium-highlight, 15% ); + background: darken($blue-medium-highlight, 15%); } } @@ -50,7 +50,14 @@ } &:focus { - b, i, strong, em, del, ins, sup, sub { + b, + i, + strong, + em, + del, + ins, + sup, + sub { &[data-mce-selected] { padding: 0 2px; margin: 0 -2px; diff --git a/packages/editor/src/components/rich-text/tokens/ui/style.scss b/packages/editor/src/components/rich-text/tokens/ui/style.scss index 38cfd84fe6915..cbc38140121aa 100644 --- a/packages/editor/src/components/rich-text/tokens/ui/style.scss +++ b/packages/editor/src/components/rich-text/tokens/ui/style.scss @@ -3,5 +3,5 @@ z-index: 1; width: 4px; margin-left: -2px; - background: theme( primary ); + background: theme(primary); } diff --git a/packages/editor/src/components/skip-to-selected-block/style.scss b/packages/editor/src/components/skip-to-selected-block/style.scss index 9fa63f235e947..82195ecadf920 100644 --- a/packages/editor/src/components/skip-to-selected-block/style.scss +++ b/packages/editor/src/components/skip-to-selected-block/style.scss @@ -10,11 +10,11 @@ font-weight: 600; padding: 15px 23px 14px; background: #f1f1f1; - color: theme( secondary ); + color: theme(secondary); line-height: normal; - box-shadow: 0 0 2px 2px rgba(0,0,0,.6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); text-decoration: none; outline: none; - z-index: z-index( '.skip-to-selected-block' ); + z-index: z-index(".skip-to-selected-block"); } } diff --git a/packages/editor/src/components/url-input/style.scss b/packages/editor/src/components/url-input/style.scss index 73f622c5ac7b6..f383e32483f18 100644 --- a/packages/editor/src/components/url-input/style.scss +++ b/packages/editor/src/components/url-input/style.scss @@ -10,7 +10,7 @@ $input-size: 230px; position: relative; padding: 1px; - input[type=text] { + input[type="text"] { width: 100%; padding: $input-padding; border: none; @@ -34,7 +34,7 @@ $input-size: 230px; // Suggestions .editor-url-input__suggestions { max-height: 200px; - transition: all .15s ease-in-out; + transition: all 0.15s ease-in-out; list-style: none; padding: 4px 0; } @@ -66,7 +66,7 @@ $input-size: 230px; &:focus, &.is-selected { - background: color( theme( primary ) shade( 15% ) ); + background: color(theme(primary) shade(15%)); color: $white; outline: none; } @@ -82,7 +82,7 @@ $input-size: 230px; overflow: visible; &::after { - content: ''; + content: ""; position: absolute; display: block; width: 1px; diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss index 20fbdeb67d90d..b9346eb244d11 100644 --- a/packages/editor/src/components/warning/style.scss +++ b/packages/editor/src/components/warning/style.scss @@ -1,5 +1,5 @@ .editor-block-list__block .editor-warning { - z-index: z-index( '.editor-warning' ); + z-index: z-index(".editor-warning"); position: absolute; top: -$block-padding - $border-width; right: -$parent-block-padding - $border-width; @@ -45,9 +45,9 @@ display: flex; margin: 0 0 $block-padding 0; } - + .editor-warning__action { margin: 0 6px 0 0; margin-left: 0; } -} \ No newline at end of file +} diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 840ded74e26f6..1bcd95071a738 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -1,44 +1,44 @@ -@import './components/autocompleters/style.scss'; -@import './components/block-drop-zone/style.scss'; -@import './components/block-icon/style.scss'; -@import './components/block-inspector/style.scss'; -@import './components/block-list/style.scss'; -@import './components/block-mover/style.scss'; -@import './components/block-preview/style.scss'; -@import './components/block-settings-menu/style.scss'; -@import './components/block-styles/style.scss'; -@import './components/block-switcher/style.scss'; -@import './components/block-toolbar/style.scss'; -@import './components/block-types-list/style.scss'; -@import './components/color-palette/control.scss'; -@import './components/contrast-checker/style.scss'; -@import './components/default-block-appender/style.scss'; -@import './components/document-outline/style.scss'; -@import './components/inner-blocks/style.scss'; -@import './components/inserter-with-shortcuts/style.scss'; -@import './components/inserter/style.scss'; -@import './components/media-placeholder/style.scss'; -@import './components/page-attributes/style.scss'; -@import './components/panel-color-settings/style.scss'; -@import './components/plain-text/style.scss'; -@import './components/post-excerpt/style.scss'; -@import './components/post-featured-image/style.scss'; -@import './components/post-format/style.scss'; -@import './components/post-last-revision/style.scss'; -@import './components/post-permalink/style.scss'; -@import './components/post-publish-panel/style.scss'; -@import './components/post-saved-state/style.scss'; -@import './components/post-taxonomies/style.scss'; -@import './components/post-text-editor/style.scss'; -@import './components/post-title/style.scss'; -@import './components/post-trash/style.scss'; -@import './components/rich-text/core-tokens/image/style.scss'; -@import './components/rich-text/format-toolbar/style.scss'; -@import './components/rich-text/style.scss'; -@import './components/rich-text/tokens/ui/style.scss'; -@import './components/skip-to-selected-block/style.scss'; -@import './components/table-of-contents/style.scss'; -@import './components/template-validation-notice/style.scss'; -@import './components/url-input/style.scss'; -@import './components/warning/style.scss'; -@import './components/writing-flow/style.scss'; +@import "./components/autocompleters/style.scss"; +@import "./components/block-drop-zone/style.scss"; +@import "./components/block-icon/style.scss"; +@import "./components/block-inspector/style.scss"; +@import "./components/block-list/style.scss"; +@import "./components/block-mover/style.scss"; +@import "./components/block-preview/style.scss"; +@import "./components/block-settings-menu/style.scss"; +@import "./components/block-styles/style.scss"; +@import "./components/block-switcher/style.scss"; +@import "./components/block-toolbar/style.scss"; +@import "./components/block-types-list/style.scss"; +@import "./components/color-palette/control.scss"; +@import "./components/contrast-checker/style.scss"; +@import "./components/default-block-appender/style.scss"; +@import "./components/document-outline/style.scss"; +@import "./components/inner-blocks/style.scss"; +@import "./components/inserter-with-shortcuts/style.scss"; +@import "./components/inserter/style.scss"; +@import "./components/media-placeholder/style.scss"; +@import "./components/page-attributes/style.scss"; +@import "./components/panel-color-settings/style.scss"; +@import "./components/plain-text/style.scss"; +@import "./components/post-excerpt/style.scss"; +@import "./components/post-featured-image/style.scss"; +@import "./components/post-format/style.scss"; +@import "./components/post-last-revision/style.scss"; +@import "./components/post-permalink/style.scss"; +@import "./components/post-publish-panel/style.scss"; +@import "./components/post-saved-state/style.scss"; +@import "./components/post-taxonomies/style.scss"; +@import "./components/post-text-editor/style.scss"; +@import "./components/post-title/style.scss"; +@import "./components/post-trash/style.scss"; +@import "./components/rich-text/core-tokens/image/style.scss"; +@import "./components/rich-text/format-toolbar/style.scss"; +@import "./components/rich-text/style.scss"; +@import "./components/rich-text/tokens/ui/style.scss"; +@import "./components/skip-to-selected-block/style.scss"; +@import "./components/table-of-contents/style.scss"; +@import "./components/template-validation-notice/style.scss"; +@import "./components/url-input/style.scss"; +@import "./components/warning/style.scss"; +@import "./components/writing-flow/style.scss"; diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss index 95fa90e0d2c34..4d461e0978dab 100644 --- a/packages/nux/src/components/dot-tip/style.scss +++ b/packages/nux/src/components/dot-tip/style.scss @@ -3,24 +3,24 @@ $dot-scale: 3; // How much the pulse animation should scale up by in size .nux-dot-tip { &::before, - &:after { + &::after { border-radius: 100%; - content: ' '; + content: " "; pointer-events: none; position: absolute; } &::before { - animation: nux-pulse 1.6s infinite cubic-bezier( 0.17, 0.67, 0.92, 0.62 ); - background: rgba( $blue-medium-800, 0.9 ); + animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62); + background: rgba($blue-medium-800, 0.9); height: $dot-size * $dot-scale; - left: -( $dot-size * $dot-scale ) / 2; - top: -( $dot-size * $dot-scale ) / 2; - transform: scale( ( 1 / $dot-scale ) ); - width: $dot-size * $dot-scale + left: -($dot-size * $dot-scale) / 2; + top: -($dot-size * $dot-scale) / 2; + transform: scale((1 / $dot-scale)); + width: $dot-size * $dot-scale; } - - &:after { + + &::after { background: $blue-medium-800; height: $dot-size; left: -$dot-size / 2; @@ -30,13 +30,13 @@ $dot-scale: 3; // How much the pulse animation should scale up by in size @keyframes nux-pulse { 100% { - background: rgba( $blue-medium-800, 0 ); - transform: scale( 1 ); + background: rgba($blue-medium-800, 0); + transform: scale(1); } } .components-popover__content { - padding: 5px ( 36px + 5px ) 5px 20px; + padding: 5px (36px + 5px) 5px 20px; width: 350px; @include break-small { @@ -73,15 +73,15 @@ $dot-scale: 3; // How much the pulse animation should scale up by in size } // Extra specificity so that we can override the styles in .component-popover - &:not( .is-mobile ).is-left, - &:not( .is-mobile ).is-center, - &:not( .is-mobile ).is-right { + &:not(.is-mobile).is-left, + &:not(.is-mobile).is-center, + &:not(.is-mobile).is-right { // Position tips above popovers - z-index: z-index( '.nux-dot-tip' ); + z-index: z-index(".nux-dot-tip"); // On mobile, always position the tip below the dot and fill the width of the viewport - @media ( max-width: $break-small ) { + @media (max-width: $break-small) { .components-popover__content { align-self: end; left: 5px; diff --git a/packages/nux/src/style.scss b/packages/nux/src/style.scss index 51dfda92ad72c..0df73ff851e9f 100644 --- a/packages/nux/src/style.scss +++ b/packages/nux/src/style.scss @@ -1 +1 @@ -@import './components/dot-tip/style.scss'; +@import "./components/dot-tip/style.scss";