Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add overrides for OBW styles (https://github.com/woocommerce/woocommerce-admin/pull/4572)

This commit is contained in:
Paul Sealock 2020-06-16 10:50:22 +12:00 committed by GitHub
parent 701f90cc23
commit 91bd554637
12 changed files with 30 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss
View File

@ -49,12 +49,6 @@
}
}
.woocommerce-setting__options-group {
input[type='checkbox']:checked::before {
content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
}
}
.woocommerce-settings-historical-data__progress-label {
display: inline-block;
font-weight: bold;

33
plugins/woocommerce-admin/client/analytics/settings/setting.js
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import { Button, CheckboxControl } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import PropTypes from 'prop-types';
@ -116,21 +116,24 @@ class Setting extends Component {
const { disabled } = this.state;
return options.map( ( option ) => {
const id = uniqueId( name + '-' + option.value );
return (
<label htmlFor={ id } key={ option.value }>
<input
id={ id }
type="checkbox"
name={ name }
onChange={ handleChange }
aria-label={ option.description }
checked={ value && value.includes( option.value ) }
value={ option.value }
disabled={ disabled }
/>
{ option.label }
</label>
<CheckboxControl
key={ name + '-' + option.value }
label={ option.label }
name={ name }
checked={ value && value.includes( option.value ) }
onChange={ ( checked ) =>
handleChange( {
target: {
checked,
name,
type: 'checkbox',
value: option.value,
},
} )
}
disabled={ disabled }
/>
);
} );
}

8
plugins/woocommerce-admin/client/analytics/settings/setting.scss
View File

@ -40,14 +40,14 @@
margin-bottom: 0;
}
input[type='checkbox'] {
margin-right: $gap-small;
}
button {
margin-bottom: $gap-small;
align-self: flex-start;
}
.components-base-control__field {
display: flex;
}
}
.woocommerce-setting__options-group-label {

31
plugins/woocommerce-admin/client/layout/style.scss
View File

@ -90,7 +90,7 @@
&.is-active,
&.is-complete {
.woocommerce-stepper__step-icon {
background: $studio-woocommerce-purple-60;
background: $blue-medium-focus;
color: $studio-white;
}
@ -100,7 +100,7 @@
}
.woocommerce-spinner {
background: $studio-woocommerce-purple-60;
background: $blue-medium-focus;
}
}
@ -136,39 +136,12 @@
display: inline-block;
}
.components-form-toggle__track {
width: 36px;
max-width: 36px;
height: 18px;
max-height: 18px;
}
.components-base-control__field {
margin-bottom: 0;
}
&.is-checked {
.components-form-toggle__track {
background-color: $studio-woocommerce-purple-60;
border-color: $studio-woocommerce-purple-60;
}
}
}
}
body.woocommerce-page .components-button.is-button.is-primary.is-busy:not(:disabled):focus {
cursor: progress;
/* stylelint-disable function-parentheses-space-inside, function-comma-space-after */
background-image: linear-gradient(
-45deg,
$studio-pink-50 28%,
color($studio-pink-50 shade(30%)) 28%,
color($studio-pink-50 shade(30%)) 72%,
$studio-pink-50 72%
) !important; // Gutenberg & PostCSS Add the gradient late in output, based on the 'primary' color, which in our case is purple. Our busy state should be pink.
/* stylelint-enable */
}
.woocommerce-task-dashboard__container .components-button.is-button,
.woocommerce-profile-wizard__body .components-button.is-button,
.woocommerce-page .components-modal__frame .components-button.is-button {

1
plugins/woocommerce-admin/client/profile-wizard/steps/benefits/index.js
View File

@ -237,7 +237,6 @@ class Benefits extends Component {
isBusy={ isInstallAction }
disabled={ isRequesting || isInstallAction }
onClick={ this.startPluginInstall }
className="woocommerce-profile-wizard__continue"
>
{ __( 'Yes please!', 'woocommerce-admin' ) }
</Button>

1
plugins/woocommerce-admin/client/profile-wizard/steps/business-details.js
View File

@ -654,7 +654,6 @@ class BusinessDetails extends Component {
<div className="woocommerce-profile-wizard__card-actions">
<Button
isPrimary
className="woocommerce-profile-wizard__continue"
onClick={ handleSubmit }
disabled={ ! isValidForm }
isBusy={ isInstallingActivating }

1
plugins/woocommerce-admin/client/profile-wizard/steps/product-types.js
View File

@ -172,7 +172,6 @@ class ProductTypes extends Component {
<Button
isPrimary
className="woocommerce-profile-wizard__continue"
onClick={ this.onContinue }
disabled={ ! selected.length }
>

7
plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss
View File

@ -26,7 +26,6 @@
button {
border: 0;
border-bottom: 1px solid transparent;
color: $studio-gray-50;
display: flex;
align-items: center;
@ -34,16 +33,10 @@
background: transparent;
height: 48px;
width: 100%;
cursor: pointer;
@include font-size(14);
font-weight: 500;
outline: none;
padding: 0 $gap-large;
&.is-active {
border-bottom: 1px solid $studio-woocommerce-purple-60;
color: $studio-woocommerce-purple-60;
}
}
}

18
plugins/woocommerce-admin/client/profile-wizard/style.scss
View File

@ -5,10 +5,6 @@
color: $studio-pink-50;
}
.woocommerce-profile-wizard__continue {
line-height: 32px;
}
.woocommerce-card {
margin-top: $gap;
@ -218,10 +214,6 @@
.woocommerce-profile-wizard__tracking {
.woocommerce-profile-wizard__tracking-checkbox {
margin-top: $gap;
.components-checkbox-control__input[type='checkbox']:checked {
background-color: $studio-woocommerce-purple-60;
border-color: $studio-woocommerce-purple-60;
}
}
.components-form-toggle {
@ -265,12 +257,6 @@
margin: 0;
}
.components-checkbox-control__input {
position: absolute;
top: 0;
left: 3px;
}
label.components-checkbox-control__label {
color: $studio-gray-80;
margin-top: $gap-smallest;
@ -322,10 +308,10 @@
.woocommerce-select-control__control {
margin: $gap 0;
padding-right: $gap + 24px;
box-shadow: $shadow-popover;
&.is-active {
box-shadow: 0 0 0 1px $studio-woocommerce-purple-60;
border-color: $studio-woocommerce-purple-60;
border-color: $blue-medium-focus;
}
.components-base-control__label {

76
plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
View File

@ -50,86 +50,10 @@
box-shadow: 0 0 0 1px $studio-pink, 0 0 2px 1px rgba($studio-pink, 0.8);
}
.components-button.is-primary {
color: $studio-white;
box-shadow: none;
&:not(:disabled) {
&:hover,
&:active,
&:focus {
box-shadow: none;
color: $studio-white;
}
}
}
.components-button:not(.is-primary):not(.woocommerce-chart__type-button) {
color: $gray-text;
fill: currentColor;
&:not(:disabled) {
&:hover,
&:active,
&:focus {
color: $gray-text-hover;
border-color: $button-hover-border;
}
}
}
.components-button:disabled:not(.is-primary) {
color: $button-disabled;
&:hover,
&:active,
&:focus {
color: $button-disabled;
border-color: $button-disabled-border;
background: $button;
}
}
input:focus,
textarea:focus,
select:focus,
button:focus {
color: $core-grey-dark-700;
border-color: $studio-woocommerce-purple-60;
box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
}
select:hover {
color: $core-grey-dark-700;
}
input[type='checkbox'] {
border-radius: 3px;
}
input[type='checkbox'],
input[type='radio'] {
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid $studio-gray-50;
&:focus {
border-color: $studio-woocommerce-purple-60;
box-shadow: 0 0 0 1px $studio-woocommerce-purple-60,
0 0 2px 1px rgba($studio-woocommerce-purple-60, 0.8);
}
}
input[type='checkbox']:checked,
input[type='radio']:checked {
background-color: $studio-woocommerce-purple-60;
border-color: $studio-woocommerce-purple-60;
}
input[type='checkbox']:focus:checked {
border: 2px solid $studio-woocommerce-purple-60;
}
input[type='radio']:checked::before {
font-size: 18px;
background-color: $studio-white;

4
plugins/woocommerce-admin/packages/components/src/search/style.scss
View File

@ -25,10 +25,10 @@
padding: 3px 2px 3px 36px;
border-radius: 4px;
border-color: $core-form-grey;
box-shadow: $shadow-popover;
&.is-active {
border-color: $studio-woocommerce-purple-60;
box-shadow: 0 0 2px rgba($studio-woocommerce-purple-60, 0.8);
border-color: $blue-medium-focus;
}
}

3
plugins/woocommerce-admin/packages/components/src/text-control/style.scss
View File

@ -8,6 +8,7 @@
box-shadow: none;
padding: 12px 12px 4px;
position: relative;
box-shadow: $shadow-popover;
&:hover {
border-color: $studio-gray-40;
@ -38,7 +39,7 @@
}
&.active {
box-shadow: 0 0 0 2px $studio-woocommerce-purple-60;
box-shadow: 0 0 0 2px $blue-medium-focus;
border-color: transparent;
input {