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

Update helper css to use admin theme color

This commit is contained in:
Panos (Panagiotis) Synetos 2023-07-14 15:10:29 +03:00 committed by Kyle Nel
parent bf95490ade
commit 35c1592d8b
No known key found for this signature in database
3 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -477,7 +477,7 @@
.addon-product-group-see-more, .addon-product-group-see-more,
.addon-product-group-see-more:visited { .addon-product-group-see-more:visited {
color: #007cba; color: var(--wp-admin-theme-color);
/* Primary / Blue */ /* Primary / Blue */
display: block; display: block;
font-size: 13px; font-size: 13px;
@ -582,7 +582,7 @@
h2, h2,
h3 { h3 {
color: #007cba; color: var(--wp-admin-theme-color);
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
letter-spacing: -0.32px; letter-spacing: -0.32px;
@ -620,7 +620,7 @@
} }
h2 { h2 {
color: #2c3338; color: var(--wp-admin-theme-color);
} }
} }
@ -718,8 +718,8 @@
.button { .button {
background-color: #fff; background-color: #fff;
border-color: #007cba; border-color: var(--wp-admin-theme-color);
color: #007cba; color: var(--wp-admin-theme-color);
float: right; float: right;
font-size: 13px; font-size: 13px;
height: 36px; height: 36px;
@ -857,7 +857,7 @@
max-width: 1200px; max-width: 1200px;
.update-plugins .update-count { .update-plugins .update-count {
background-color: #d54e21; background-color: var(--wp-admin-theme-color);
border-radius: 10px; border-radius: 10px;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
@ -7874,8 +7874,8 @@ table.bar_chart {
margin: 12px 12px 0 0; margin: 12px 12px 0 0;
&.current { &.current {
background: #007cba; background: var(--wp-admin-theme-color);
border: 1px solid #007cba; border: 1px solid var(--wp-admin-theme-color);
a { a {
color: #fff; color: #fff;

46
plugins/woocommerce/client/legacy/css/helper.scss
View File

@ -14,13 +14,7 @@ $gray-dark: darken($gray, 38%); //#2e4453
$gray-text: $gray-dark; $gray-text: $gray-dark;
$gray-text-min: darken($gray, 18%); //#537994 $gray-text-min: darken($gray, 18%); //#537994
$woo_pink1: #955a89; $admin-theme-color: var(--wp-admin-theme-color);
$woo_pink2: #bb77ae;
$color_text_blue: #0073aa;
$color_button_primary: $woo_pink1;
$color_button_secondary: $woo_pink2;
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
Tab navigation Tab navigation
@ -52,7 +46,7 @@ $color_button_secondary: $woo_pink2;
.button:hover, .button:hover,
.button:focus, .button:focus,
.button:active { .button:active {
background-color: $color_button_primary; background-color: $admin-theme-color;
border-width: 0; border-width: 0;
box-shadow: none; box-shadow: none;
border-radius: 3px; border-radius: 3px;
@ -79,7 +73,6 @@ $color_button_secondary: $woo_pink2;
} }
.wc-helper .subscription-filter { .wc-helper .subscription-filter {
color: #2e4453;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
margin: 22px 0; margin: 22px 0;
@ -100,7 +93,6 @@ $color_button_secondary: $woo_pink2;
} }
li { li {
color: #0073aa;
display: inline-block; display: inline-block;
padding: 0 4px 0 8px; padding: 0 4px 0 8px;
position: relative; position: relative;
@ -124,7 +116,6 @@ $color_button_secondary: $woo_pink2;
} }
a { a {
color: #0073aa;
text-decoration: none; text-decoration: none;
&.current { &.current {
@ -315,7 +306,6 @@ $color_button_secondary: $woo_pink2;
} }
a { a {
color: #a26897;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
line-height: 38px; line-height: 38px;
@ -335,7 +325,7 @@ $color_button_secondary: $woo_pink2;
} }
&:hover { &:hover {
background-color: #a26897; background-color: $admin-theme-color;
color: #fff; color: #fff;
} }
} }
@ -494,7 +484,7 @@ $color_button_secondary: $woo_pink2;
} }
.wp-list-table__ext-title { .wp-list-table__ext-title {
color: $color_text_blue; color: $admin-theme-color;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
width: 60%; width: 60%;
@ -797,7 +787,7 @@ $color_button_secondary: $woo_pink2;
display: none; display: none;
&:hover { &:hover {
color: $woo_pink1; color: $admin-theme-color;
cursor: pointer; cursor: pointer;
} }
} }
@ -856,7 +846,7 @@ $color_button_secondary: $woo_pink2;
.start-container { .start-container {
background-color: #fff; background-color: #fff;
border-left: 4px solid #cc99c2; border-left: 4px solid $admin-theme-color;
padding: 45px 20px 20px 30px; padding: 45px 20px 20px 30px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -868,7 +858,7 @@ $color_button_secondary: $woo_pink2;
} }
.start-container::before { .start-container::before {
color: #eee2ec; color: #e9e9e9;
content: "\e01C"; content: "\e01C";
display: block; display: block;
font-family: WooCommerce; font-family: WooCommerce;
@ -944,7 +934,7 @@ $color_button_secondary: $woo_pink2;
.form-toggle__switch { .form-toggle__switch {
align-self: flex-start; align-self: flex-start;
background: lighten($gray, 20%); background: #999;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -977,7 +967,7 @@ $color_button_secondary: $woo_pink2;
} }
.accessible-focus &:focus { .accessible-focus &:focus {
box-shadow: 0 0 0 2px $woo_pink1; box-shadow: 0 0 0 2px $admin-theme-color;
} }
@ -988,7 +978,7 @@ $color_button_secondary: $woo_pink2;
z-index: 1; z-index: 1;
.form-toggle__label-content { .form-toggle__label-content {
color: #87a6bc; color: $gray-dark;
flex: 0 1 100%; flex: 0 1 100%;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
@ -1008,29 +998,29 @@ $color_button_secondary: $woo_pink2;
.accessible-focus &:focus { .accessible-focus &:focus {
+ .form-toggle__label .form-toggle__switch { + .form-toggle__label .form-toggle__switch {
box-shadow: 0 0 0 2px $woo_pink1; box-shadow: 0 0 0 2px $admin-theme-color;
} }
&:checked + .form-toggle__label .form-toggle__switch { &:checked + .form-toggle__label .form-toggle__switch {
box-shadow: 0 0 0 2px $woo_pink2; box-shadow: 0 0 0 2px $admin-theme-color;
} }
} }
& + .form-toggle__label .form-toggle__switch { & + .form-toggle__label .form-toggle__switch {
background: lighten($gray, 10%); background: #999;
} }
&:not(:disabled) { &:not(:disabled) {
+ .form-toggle__label:hover .form-toggle__switch { + .form-toggle__label:hover .form-toggle__switch {
background: lighten($gray, 20%); background: #999;
} }
} }
&.active { &.active {
+ .form-toggle__label .form-toggle__switch { + .form-toggle__label .form-toggle__switch {
background: $woo_pink1; background: $admin-theme-color;
&::after { &::after {
left: 8px; left: 8px;
@ -1038,7 +1028,7 @@ $color_button_secondary: $woo_pink2;
} }
+ .form-toggle__label:hover .form-toggle__switch { + .form-toggle__label:hover .form-toggle__switch {
background: $woo_pink2; background: $admin-theme-color;
} }
} }
@ -1054,13 +1044,13 @@ $color_button_secondary: $woo_pink2;
.form-toggle.is-toggling { .form-toggle.is-toggling {
+ .form-toggle__label .form-toggle__switch { + .form-toggle__label .form-toggle__switch {
background: $woo_pink1; background: $admin-theme-color;
} }
&:checked { &:checked {
+ .form-toggle__label .form-toggle__switch { + .form-toggle__label .form-toggle__switch {
background: lighten($gray, 20%); background: #999;
} }
} }
} }

3
plugins/woocommerce/includes/admin/helper/views/html-main.php
View File

@ -60,7 +60,8 @@
$class_html = $current_filter === $key ? 'class="current"' : ''; $class_html = $current_filter === $key ? 'class="current"' : '';
?> ?>
<li> <li>
<a <?php echo esc_html( $class_html ); ?> href="<?php echo esc_url( $url ); ?>"> <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<a <?php echo $class_html; ?> href="<?php echo esc_url( $url ); ?>">
<?php echo esc_html( $label ); ?> <?php echo esc_html( $label ); ?>
<span class="count">(<?php echo absint( $counts[ $key ] ); ?>)</span> <span class="count">(<?php echo absint( $counts[ $key ] ); ?>)</span>
</a> </a>