Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274)
* 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
This commit is contained in:
parent
a4267202c5
commit
ddeacb84e5
|
@ -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(
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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';
|
|
@ -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';
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -65,7 +65,7 @@ const webpackConfig = {
|
|||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [ 'client/stylesheets' ],
|
||||
includePaths: [ 'client/stylesheets/abstracts' ],
|
||||
data:
|
||||
'@import "_colors"; ' +
|
||||
'@import "_variables"; ' +
|
||||
|
|
Loading…
Reference in New Issue