Adds SCSS color variables and breakpoints (https://github.com/woocommerce/woocommerce-admin/pull/39)
* Adds SCSS color variables and breakpoint mixins * Use webpack to pull in shared CSS * Move notices reset rule to wpadmin-reset * Prefix breakpoints, colors, and wpadmin reset
This commit is contained in:
Justin Shreve
GitHub
parent
1dbf44ef55
commit
d7df8ed76e
|
|
@ -1,12 +1,14 @@
|
|||
/** @format */
|
||||
|
||||
.woo-dash__card {
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border: 1px solid rgba( black, 0.2 );
|
||||
border: 1px solid $gray;
|
||||
}
|
||||
|
||||
.woo-dash__card-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba( black, 0.2 );
|
||||
border-bottom: 1px solid $gray;
|
||||
display: grid;
|
||||
|
||||
.has-action & {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ const Header = ( { sections, showTimeline } ) => {
|
|||
const crumbs = _sections.map( ( subSection, i ) => <span key={ i }>{ subSection }</span> );
|
||||
return (
|
||||
<h1>
|
||||
<span><a href={ getAdminLink( 'admin.php?page=woodash' ) }>WooCommerce</a></span>
|
||||
<span>
|
||||
<a href={ getAdminLink( 'admin.php?page=woodash' ) }>WooCommerce</a>
|
||||
</span>
|
||||
{ crumbs }
|
||||
</h1>
|
||||
);
|
||||
|
|
@ -28,9 +30,7 @@ const Header = ( { sections, showTimeline } ) => {
|
|||
return (
|
||||
<div className="woo-dash__header">
|
||||
{ renderBreadcrumbs() }
|
||||
{ showTimeline && (
|
||||
<div />
|
||||
) }
|
||||
{ showTimeline && <div /> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
/** @format */
|
||||
|
||||
.woo-dash__header {
|
||||
background: #ffffff;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
min-height: 47px;
|
||||
margin: 0 0 8px;
|
||||
|
|
@ -9,8 +11,8 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid rgba( black, 0.2 );
|
||||
background: $white;
|
||||
border-bottom: 1px solid $gray;
|
||||
|
||||
h1 {
|
||||
font-size: 13px;
|
||||
|
|
@ -21,8 +23,8 @@
|
|||
|
||||
span + span::before {
|
||||
content: ' / ';
|
||||
color: #cccccc;
|
||||
margin: 0 2px 0 4px;
|
||||
color: $gray-text;
|
||||
margin: 0 2px 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,4 @@
|
|||
.woocommerce-page {
|
||||
.wrap {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-dashboard__admin-notice-list-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** @format */
|
||||
.woo-dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: auto 300px;
|
||||
|
|
@ -21,8 +8,8 @@
|
|||
}
|
||||
|
||||
.woo-dash__secondary {
|
||||
background: white;
|
||||
border: 1px solid rgba( black, 0.2 );
|
||||
background: $white;
|
||||
border: 1px solid $gray;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,14 @@ import { pick } from 'lodash';
|
|||
import Dashboard from './dashboard';
|
||||
|
||||
render(
|
||||
createElement( APIProvider, {
|
||||
...wpApiSettings,
|
||||
...pick( wp.api, [
|
||||
'postTypeRestBaseMapping',
|
||||
'taxonomyRestBaseMapping',
|
||||
] ),
|
||||
}, createElement( Dashboard ) ),
|
||||
createElement(
|
||||
APIProvider,
|
||||
{
|
||||
...wpApiSettings,
|
||||
...pick( wp.api, [ 'postTypeRestBaseMapping', 'taxonomyRestBaseMapping' ] ),
|
||||
},
|
||||
createElement( Dashboard )
|
||||
),
|
||||
document.getElementById( 'root' )
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
// Breakpoints
|
||||
// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
|
||||
|
||||
$breakpoints: 480px, 660px, 800px, 960px, 1040px, 1280px, 1400px; // Think very carefully before adding a new breakpoint
|
||||
|
||||
@mixin breakpoint( $sizes... ) {
|
||||
@each $size in $sizes {
|
||||
@if type-of( $size ) == string {
|
||||
$approved-value: 0;
|
||||
@each $breakpoint in $breakpoints {
|
||||
$and-larger: '>' + $breakpoint;
|
||||
$and-smaller: '<' + $breakpoint;
|
||||
|
||||
@if $size == $and-smaller {
|
||||
$approved-value: 1;
|
||||
@media (max-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@if $size == $and-larger {
|
||||
$approved-value: 2;
|
||||
@media (min-width: $breakpoint + 1) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@each $breakpoint-end in $breakpoints {
|
||||
$range: $breakpoint + '-' + $breakpoint-end;
|
||||
@if $size == $range {
|
||||
$approved-value: 3;
|
||||
@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $approved-value == 0 {
|
||||
$sizes: '';
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + ' ' + $breakpoint;
|
||||
}
|
||||
@warn "ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
|
||||
}
|
||||
} @else {
|
||||
$sizes: '';
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + ' ' + $breakpoint;
|
||||
}
|
||||
@error "ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$white: rgba(255, 255, 255, 1);
|
||||
|
||||
// Grays
|
||||
$gray: #ccc;
|
||||
$gray-text: darken($gray, 38%);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/** @format */
|
||||
|
||||
// css resets some wp-admin specific rules so that the app fits better in the extension container
|
||||
|
||||
.woocommerce-page {
|
||||
.wrap {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-dashboard__admin-notice-list-hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -74,7 +74,16 @@ const webpackConfig = {
|
|||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract( {
|
||||
fallback: 'style-loader',
|
||||
use: [ 'css-loader', 'sass-loader' ],
|
||||
use: [
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [ 'client/stylesheets' ],
|
||||
data: '@import "_colors"; @import "_breakpoints"; @import "_wpadmin-reset";',
|
||||
},
|
||||
},
|
||||
],
|
||||
} ),
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue