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

nav styules

This commit is contained in:
paul sealock 2024-09-13 15:06:45 +12:00
parent 8aab327feb
commit fb49f0806a
2 changed files with 88 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugins/woocommerce-admin/client/settings/index.js
View File

@ -5,6 +5,7 @@ import { getNewPath } from '@woocommerce/navigation';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import { Icon, chevronLeft } from '@wordpress/icons'; import { Icon, chevronLeft } from '@wordpress/icons';
import { useEffect } from '@wordpress/element'; import { useEffect } from '@wordpress/element';
import { SiteHub } from '~/customize-store/assembler-hub/site-hub';
/** /**
* Internal dependencies * Internal dependencies
@ -93,11 +94,21 @@ const Settings = ( { params, query } ) => {
<> <>
<div className="woocommerce-settings-layout"> <div className="woocommerce-settings-layout">
<div className="woocommerce-settings-layout-navigation"> <div className="woocommerce-settings-layout-navigation">
<Button href={ getNewPath( {}, '/', {} ) }> <SiteHub
<Icon icon={ chevronLeft } /> variants={ {
Settings view: { x: 0 },
</Button> } }
<Tabs data={ settingsData } page={ page } /> isTransparent={ false }
/>
<div className="woocommerce-settings-layout-navigation__content">
<div className="woocommerce-settings-layout-navigation__back">
<Button href={ getNewPath( {}, '/', {} ) }>
<Icon icon={ chevronLeft } />
</Button>
<h1>Settings</h1>
</div>
<Tabs data={ settingsData } page={ page } />
</div>
</div> </div>
{ areas.content && ( { areas.content && (
<div <div

78
plugins/woocommerce-admin/client/settings/style.scss
View File

@ -1,4 +1,7 @@
.woocommerce-admin-page__settings_page { .woocommerce-admin-page__settings_page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.woocommerce-layout__primary { .woocommerce-layout__primary {
margin: 0; margin: 0;
} }
@ -8,6 +11,63 @@
#wpbody-content { #wpbody-content {
background-color: #1e1e1e; background-color: #1e1e1e;
} }
.edit-site-site-hub {
height: 60px;
}
.edit-site-site-hub__view-mode-toggle-container {
height: 60px;
width: 60px;
a {
fill: #fff;
svg {
width: 30px;
height: 30px;
margin: 15px;
}
}
}
.edit-site-site-hub__site-title {
opacity: 1;
color: #e0e0e0;
display: block;
flex-grow: 1;
font-size: 15px;
font-weight: 500;
overflow: hidden;
padding-right: 16px;
position: relative;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.woocommerce-settings-layout-navigation__content {
padding: 48px 12px 0 12px;
}
.woocommerce-settings-layout-navigation__back {
width: 100%;
display: flex;
gap: 12px;
align-items: flex-end;
margin-bottom: 16px;
a {
padding: 6px;
}
h1 {
line-height: 1.2;
margin: 0;
text-wrap: balance;
text-wrap: pretty;
color: #e0e0e0;
font-size: calc((20 / 13) * 13px);
font-weight: 600;
}
} }
.woocommerce-layout__main { .woocommerce-layout__main {
@ -18,12 +78,10 @@
display: flex; display: flex;
background: #1e1e1e; background: #1e1e1e;
height: 100%; height: 100%;
padding: 16px;
gap: 12px;
} }
.woocommerce-settings-layout-navigation { .woocommerce-settings-layout-navigation {
min-width: 300px; width: 300px;
color: white; color: white;
overflow: scroll; overflow: scroll;
@ -34,6 +92,7 @@
} }
.woocommerce-settings-layout-content { .woocommerce-settings-layout-content {
margin: 16px 16px 16px 0;
flex: 1; flex: 1;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
@ -67,13 +126,20 @@
.woocommerce-settings-tabs { .woocommerce-settings-tabs {
.components-tab-panel__tabs { .components-tab-panel__tabs {
padding: 14px 14px 0 14px; color: #ccc;
} }
.components-tab-panel__tabs-item { .components-tab-panel__tabs-item {
color: white; color: #ccc;
font-size: 13px;
height: 40px;
&:hover {
color: #ccc;
background: #2f2f2f;
}
&.active-tab { &.active-tab {
background-color: #2f2f2f; background-color: var(--wp-admin-theme-color);
} }
} }
} }