From ddeacb84e5438a0d48126f54733000ee78af6fa9 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 6 Aug 2018 11:30:43 -0400 Subject: [PATCH] Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Move non-reset SCSS to a new file * Split shared files and “meta” files into two folders This also creates two new base scss files for the different app vs embedded CSS files * Move notice & embed-specific css out of reset * Update README with folder structure notes --- plugins/woocommerce-admin/client/embedded.js | 2 +- plugins/woocommerce-admin/client/index.js | 2 +- .../client/layout/activity-panel/style.scss | 44 +++ .../client/stylesheets/README.md | 7 + .../client/stylesheets/_embedded.scss | 13 + .../client/stylesheets/_index.scss | 10 + .../client/stylesheets/_wpadmin-reset.scss | 273 ------------------ .../{ => abstracts}/_breakpoints.scss | 0 .../stylesheets/{ => abstracts}/_colors.scss | 2 +- .../stylesheets/{ => abstracts}/_mixins.scss | 0 .../{ => abstracts}/_variables.scss | 0 .../client/stylesheets/shared/_embed.scss | 83 ++++++ .../client/stylesheets/shared/_global.scss | 24 ++ .../{ => shared}/_gutenberg-components.scss | 0 .../client/stylesheets/shared/_reset.scss | 119 ++++++++ plugins/woocommerce-admin/webpack.config.js | 2 +- 16 files changed, 304 insertions(+), 277 deletions(-) create mode 100644 plugins/woocommerce-admin/client/stylesheets/_embedded.scss create mode 100644 plugins/woocommerce-admin/client/stylesheets/_index.scss delete mode 100644 plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss rename plugins/woocommerce-admin/client/stylesheets/{ => abstracts}/_breakpoints.scss (100%) rename plugins/woocommerce-admin/client/stylesheets/{ => abstracts}/_colors.scss (97%) rename plugins/woocommerce-admin/client/stylesheets/{ => abstracts}/_mixins.scss (100%) rename plugins/woocommerce-admin/client/stylesheets/{ => abstracts}/_variables.scss (100%) create mode 100644 plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss create mode 100644 plugins/woocommerce-admin/client/stylesheets/shared/_global.scss rename plugins/woocommerce-admin/client/stylesheets/{ => shared}/_gutenberg-components.scss (100%) create mode 100644 plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js index ee9fb53d079..744a3a7c474 100644 --- a/plugins/woocommerce-admin/client/embedded.js +++ b/plugins/woocommerce-admin/client/embedded.js @@ -10,7 +10,7 @@ import { Provider as SlotFillProvider } from 'react-slot-fill'; /** * Internal dependencies */ -import './stylesheets/_wpadmin-reset.scss'; +import './stylesheets/_embedded.scss'; import { EmbedLayout } from './layout'; render( diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index 6b8883286ba..c62c96202e7 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -11,7 +11,7 @@ import 'react-dates/initialize'; /** * Internal dependencies */ -import './stylesheets/_wpadmin-reset.scss'; +import './stylesheets/_index.scss'; import { PageLayout } from './layout'; import 'store'; diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/style.scss b/plugins/woocommerce-admin/client/layout/activity-panel/style.scss index b3159446cf4..53006fd40d5 100644 --- a/plugins/woocommerce-admin/client/layout/activity-panel/style.scss +++ b/plugins/woocommerce-admin/client/layout/activity-panel/style.scss @@ -312,3 +312,47 @@ } } } + +.woocommerce-layout__notice-list-hide { + display: none; +} + +@keyframes slideDown { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.woocommerce-layout__notice-list-show { + margin-top: 100px; + animation: slideDown; + animation-duration: 1s; + + &.has-screen-meta-links { + display: inline-block; + width: 100%; + } + + @include breakpoint( '<782px' ) { + margin-top: 115px; + } +} + +#wp__notice-list-uncollapsed { + visibility: hidden; + margin: -2px 0 0; +} + +#wp__notice-list { + padding-right: 20px; +} + +.woocommerce-layout__notice-list .jitm-card { + margin: 5px 15px 2px; + padding: 1px 12px; +} diff --git a/plugins/woocommerce-admin/client/stylesheets/README.md b/plugins/woocommerce-admin/client/stylesheets/README.md index 476ed0d52c4..b39cde57eb9 100644 --- a/plugins/woocommerce-admin/client/stylesheets/README.md +++ b/plugins/woocommerce-admin/client/stylesheets/README.md @@ -1,5 +1,12 @@ # CSS +## Folder/File Structure + +- `/abstracts/*` – this contains all mixins/variables/etc, things that won't appear in compiled CSS +- `/shared/*` – these are the styles that will appear in compiled CSS - the reset, gutenberg components import, etc +- `/_embedded.scss` – this file is used for the embed pages CSS, and is imported in `embedded.js` only +- `/_index.scss` – this file is used for the app's CSS, and is imported in `index.js` only + ## Naming: Component classes To avoid class name collisions between elements of the woo app and to the enclosing WordPress dashboard, class names **must** adhere to the following guidelines: diff --git a/plugins/woocommerce-admin/client/stylesheets/_embedded.scss b/plugins/woocommerce-admin/client/stylesheets/_embedded.scss new file mode 100644 index 00000000000..ccbc7fae363 --- /dev/null +++ b/plugins/woocommerce-admin/client/stylesheets/_embedded.scss @@ -0,0 +1,13 @@ +/** @format */ + +// Import our wp-admin reset. +@import './shared/_reset.scss'; + +// Import any global styles. +@import './shared/_global.scss'; + +// Import the embed-specific styles. +@import './shared/_embed.scss'; + +// Import gutenberg SCSS so that we can apply our theme colors. +@import './shared/gutenberg-components.scss'; diff --git a/plugins/woocommerce-admin/client/stylesheets/_index.scss b/plugins/woocommerce-admin/client/stylesheets/_index.scss new file mode 100644 index 00000000000..7bed1f73c5d --- /dev/null +++ b/plugins/woocommerce-admin/client/stylesheets/_index.scss @@ -0,0 +1,10 @@ +/** @format */ + +// Import our wp-admin reset. +@import './shared/_reset.scss'; + +// Import any global styles. +@import './shared/_global.scss'; + +// Import gutenberg SCSS so that we can apply our theme colors. +@import './shared/gutenberg-components.scss'; diff --git a/plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss b/plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss deleted file mode 100644 index b6efdad6d80..00000000000 --- a/plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss +++ /dev/null @@ -1,273 +0,0 @@ -/** @format */ - -@import './gutenberg-components.scss'; - -// By using CSS variables, we can switch the spacing rhythm using a single media query -:root { - --main-gap: 24px; -} -@media (max-width: 782px) { - :root { - --main-gap: 16px; - } -} - -// Set up animation -@keyframes loading-fade { - 0% { - opacity: 0.7; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0.7; - } -} - -// css resets some wp-admin specific rules so that the app fits better in the extension container -.woocommerce-page { - .wrap { - margin: 0; - } - - #wpcontent, - #wpbody-content { - padding: 0; - overflow-x: hidden !important; - } - - @include breakpoint( '<782px' ) { - // WP breakpoint for mobile menu - .wp-responsive-open #wpbody { - right: -14.5em; - } - } - - @include breakpoint( '>960px' ) { - #toplevel_page_woocommerce.menu-top > a:focus, - #toplevel_page_wcadmin--analytics.menu-top > a:focus { - padding-bottom: 1px; - } - } - - .wp-has-current-submenu:after { - right: 0; - border: 8px solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-right-color: #f1f1f1; - top: 0; - margin-top: 10px; - - @include breakpoint( '<960px' ) { - border-width: 4px; - margin-top: 14px; - } - } -} - -.woocommerce-embed-page { - #wpcontent, - #wpbody-content { - overflow-x: initial !important; - } - - #wpbody-content .notice { - margin-top: 15px; - } - - .wrap { - padding: 20px; - } - - #screen-meta { - border-right: 0; - margin: 0; - } - - .notice { - margin: 5px 15px 2px; - padding: 1px 12px; - } - - .woocommerce-layout__header { - &.is-scrolled { - box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3); - } - - .woocommerce-layout__header-breadcrumbs { - margin-top: 0; - margin-bottom: 0; - } - } - - /** - * Hides screen meta and links when notices are open since the elements get moved around. - * The !important overwrites an inline wp-admin style. - */ - #screen-meta.is-hidden-by-notices, - #screen-meta-links.is-hidden-by-notices { - display: none !important; - } - - .woocommerce-layout__primary { - margin: 0; - padding-top: 80px; - - @include breakpoint( '782px-1100px' ) { - padding-top: 60px; - } - } - - @keyframes isLoaded { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - .woocommerce-layout__activity-panel-tabs { - animation: isLoaded; - animation-duration: 2000ms; - } -} - -.woocommerce-layout * { - box-sizing: border-box; -} - -.woocommerce-layout__notice-list-hide { - display: none; -} - -@keyframes slideDown { - 0% { - transform: translateY(-100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - -.woocommerce-layout__notice-list-show { - margin-top: 100px; - animation: slideDown; - animation-duration: 1s; - - &.has-screen-meta-links { - display: inline-block; - width: 100%; - } - - @include breakpoint( '<782px' ) { - margin-top: 115px; - } -} - -.woocommerce-embed-page { - .woocommerce-layout__notice-list-show { - margin-top: 10px; - margin-bottom: 16px; - - @include breakpoint( '<600px' ) { - margin-top: 80px; - margin-bottom: -16px; - } - - @include breakpoint( '600px-782px' ) { - margin-top: 32px; - } - } -} - -#wp__notice-list-uncollapsed { - visibility: hidden; - margin: -2px 0 0; -} - -#wp__notice-list { - padding-right: 20px; -} - -.woocommerce-layout__notice-list .jitm-card { - margin: 5px 15px 2px; - padding: 1px 12px; -} - -#wpfooter { - display: none; -} - -.wp-responsive-open { - .woocommerce-layout__header { - margin-left: 2px; - } - - @include breakpoint( '<782px' ) { - .woocommerce-layout__activity-panel-wrapper.is-open, - .woocommerce-layout__activity-panel-tabs { - width: calc(100vw - 190px); - } - } -} - -@include breakpoint( '<600px' ) { - #wpadminbar, - .jetpack-masterbar #wpadminbar { - position: fixed; - } -} - -// Temporary fix for compability with the Jetpack masterbar -// See https://github.com/Automattic/jetpack/issues/9608 -// !important rules overwrite some existing !important rules -.jetpack-masterbar { - @include breakpoint( '<782px' ) { - &.wp-admin .wrap h1 { - padding-left: 0; - } - - #wpadminbar li.menupop.my-sites { - margin-left: 55px; - } - - #wpadminbar #wp-admin-bar-menu-toggle { - top: -5px; - left: -5px; - width: 60px; - - .ab-icon:before { - color: $white; - } - - a { - padding: 0 8px 4px 8px !important; - } - - a:hover { - background: #333; - } - } - - .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle { - left: -5px; - width: 60px; - - .ab-icon:before { - color: $white !important; - } - - a { - background: #333; - } - } - } -} diff --git a/plugins/woocommerce-admin/client/stylesheets/_breakpoints.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss similarity index 100% rename from plugins/woocommerce-admin/client/stylesheets/_breakpoints.scss rename to plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss similarity index 97% rename from plugins/woocommerce-admin/client/stylesheets/_colors.scss rename to plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss index d0a8f7ca1dd..d3a8444fce2 100644 --- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss +++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss @@ -33,7 +33,6 @@ $core-grey-dark-900: #191e23; $gray-text: $core-grey-dark-500; // WooCommerce Purples -$woocommerce: #95588a; $woocommerce-100: #ffd7ff; $woocommerce-200: #e2a5d7; $woocommerce-300: #c88bbd; @@ -43,6 +42,7 @@ $woocommerce-600: #7c3f71; $woocommerce-700: #622557; $woocommerce-800: #490c3e; $woocommerce-900: #2f0024; +$woocommerce: $woocommerce-500; // Gutenberg $button-hover: #fafafa; diff --git a/plugins/woocommerce-admin/client/stylesheets/_mixins.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss similarity index 100% rename from plugins/woocommerce-admin/client/stylesheets/_mixins.scss rename to plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss diff --git a/plugins/woocommerce-admin/client/stylesheets/_variables.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss similarity index 100% rename from plugins/woocommerce-admin/client/stylesheets/_variables.scss rename to plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss new file mode 100644 index 00000000000..61a0fb83f7e --- /dev/null +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -0,0 +1,83 @@ +/** @format */ + +.woocommerce-embed-page { + #wpcontent, + #wpbody-content { + overflow-x: initial !important; + } + + #wpbody-content .notice { + margin-top: 15px; + } + + .wrap { + padding: 20px; + } + + #screen-meta { + border-right: 0; + margin: 0; + } + + .notice { + margin: 5px 15px 2px; + padding: 1px 12px; + } + + .woocommerce-layout__header { + &.is-scrolled { + box-shadow: 0 8px 16px 0 rgba(85, 93, 102, 0.3); + } + + .woocommerce-layout__header-breadcrumbs { + margin-top: 0; + margin-bottom: 0; + } + } + + /** + * Hides screen meta and links when notices are open since the elements get moved around. + * The !important overwrites an inline wp-admin style. + */ + #screen-meta.is-hidden-by-notices, + #screen-meta-links.is-hidden-by-notices { + display: none !important; + } + + .woocommerce-layout__primary { + margin: 0; + padding-top: 80px; + + @include breakpoint( '782px-1100px' ) { + padding-top: 60px; + } + } + + @keyframes isLoaded { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + .woocommerce-layout__activity-panel-tabs { + animation: isLoaded; + animation-duration: 2000ms; + } + + .woocommerce-layout__notice-list-show { + margin-top: 10px; + margin-bottom: 16px; + + @include breakpoint( '<600px' ) { + margin-top: 80px; + margin-bottom: -16px; + } + + @include breakpoint( '600px-782px' ) { + margin-top: 32px; + } + } +} diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss new file mode 100644 index 00000000000..fd4a0f4d7ad --- /dev/null +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss @@ -0,0 +1,24 @@ +/** @format */ + +// By using CSS variables, we can switch the spacing rhythm using a single media query. +:root { + --main-gap: 24px; +} +@media (max-width: 782px) { + :root { + --main-gap: 16px; + } +} + +// Set up animation +@keyframes loading-fade { + 0% { + opacity: 0.7; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.7; + } +} diff --git a/plugins/woocommerce-admin/client/stylesheets/_gutenberg-components.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_gutenberg-components.scss similarity index 100% rename from plugins/woocommerce-admin/client/stylesheets/_gutenberg-components.scss rename to plugins/woocommerce-admin/client/stylesheets/shared/_gutenberg-components.scss diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss new file mode 100644 index 00000000000..1d9030f180c --- /dev/null +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss @@ -0,0 +1,119 @@ +/** @format */ +// css resets some wp-admin specific rules so that the app fits better in the extension container +.woocommerce-page { + .wrap { + margin: 0; + } + + #wpcontent, + #wpbody-content { + padding: 0; + overflow-x: hidden !important; + } + + @include breakpoint( '<782px' ) { + // WP breakpoint for mobile menu + .wp-responsive-open #wpbody { + right: -14.5em; + } + } + + @include breakpoint( '>960px' ) { + #toplevel_page_woocommerce.menu-top > a:focus, + #toplevel_page_wcadmin--analytics.menu-top > a:focus { + padding-bottom: 1px; + } + } + + .wp-has-current-submenu:after { + right: 0; + border: 8px solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: #f1f1f1; + top: 0; + margin-top: 10px; + + @include breakpoint( '<960px' ) { + border-width: 4px; + margin-top: 14px; + } + } +} + +.woocommerce-layout * { + box-sizing: border-box; +} + +#wpfooter { + display: none; +} + +.wp-responsive-open { + .woocommerce-layout__header { + margin-left: 2px; + } + + @include breakpoint( '<782px' ) { + .woocommerce-layout__activity-panel-wrapper.is-open, + .woocommerce-layout__activity-panel-tabs { + width: calc(100vw - 190px); + } + } +} + +@include breakpoint( '<600px' ) { + #wpadminbar, + .jetpack-masterbar #wpadminbar { + position: fixed; + } +} + +// Temporary fix for compability with the Jetpack masterbar +// See https://github.com/Automattic/jetpack/issues/9608 +// !important rules overwrite some existing !important rules +.jetpack-masterbar { + @include breakpoint( '<782px' ) { + &.wp-admin .wrap h1 { + padding-left: 0; + } + + #wpadminbar li.menupop.my-sites { + margin-left: 55px; + } + + #wpadminbar #wp-admin-bar-menu-toggle { + top: -5px; + left: -5px; + width: 60px; + + .ab-icon:before { + color: $white; + } + + a { + padding: 0 8px 4px 8px !important; + } + + a:hover { + background: #333; + } + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle { + left: -5px; + width: 60px; + + .ab-icon:before { + color: $white !important; + } + + a { + background: #333; + } + } + } +} diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 96e8f3e8253..bf1a85234b7 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -65,7 +65,7 @@ const webpackConfig = { { loader: 'sass-loader', query: { - includePaths: [ 'client/stylesheets' ], + includePaths: [ 'client/stylesheets/abstracts' ], data: '@import "_colors"; ' + '@import "_variables"; ' +