1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12:00

Panel titles updated

Panel titles updated to represent designs
Further work is required to use global styles to control this
This commit is contained in:
Joe 2020-05-23 13:00:38 +01:00
parent 605451390a
commit e20b65c13b
6 changed files with 30 additions and 39 deletions

View file

@ -81,12 +81,10 @@
.hierarchy-title {
align-items: center;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
opacity: 0.6;
letter-spacing: 1px;
font-size: 18px;
font-weight: 700;
text-rendering: optimizeLegibility;
color: var(--ink);
}
.hierarchy {

View file

@ -125,12 +125,10 @@
.hierarchy-title {
align-items: center;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
opacity: 0.6;
letter-spacing: 1px;
font-size: 18px;
font-weight: 700;
text-rendering: optimizeLegibility;
color: var(--ink);
}
.hierarchy {

View file

@ -24,7 +24,7 @@
<button
class:selected={selected === COMPONENT_SELECTION_TAB}
on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
Components
Add
</button>
<button
@ -59,28 +59,22 @@
.switcher {
display: flex;
justify-content: space-between;
margin: 20px;
margin: 0px 20px 20px 20px;
}
.switcher > button {
text-rendering: optimizeLegibility;
display: inline-block;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0);
font-weight: 500;
color: var(--secondary40);
font-size: 18px;
font-weight: 700;
color: var(--ink-lighter);
margin-right: 20px;
letter-spacing: 1px;
}
.switcher > .selected {
color: var(--secondary100);
font-weight: 600;
color: var(--ink);
}
</style>

View file

@ -110,7 +110,7 @@ h3 {
h4 {
font-family: var(--fontbold);
font-size: 18pt;
color: var(--secondary100);
color: var(--ink);
}
h5 {

View file

@ -37,4 +37,13 @@
width: 275px;
height: 100%;
}
@media only screen and (min-width: 1800px) {
.nav {
overflow: auto;
flex: 0 1 auto;
width: 300px;
height: 100%;
}
}
</style>

View file

@ -54,9 +54,7 @@
<div class="pages-list-container">
<div class="nav-header">
<span class="navigator-title">Navigator</span>
<div class="border-line" />
<span class="navigator-title">Navigate</span>
<span class="components-nav-page">Pages</span>
</div>
@ -131,7 +129,7 @@
grid-template-columns: 275px 1fr 275px;
height: 100%;
width: 100%;
background: #fafafa;
background: var(--grey-light);
}
@media only screen and (min-width: 1800px) {
@ -140,7 +138,7 @@
grid-template-columns: 300px 1fr 300px;
height: 100%;
width: 100%;
background: #fafafa;
background: var(--grey-light);
}
}
@ -159,7 +157,6 @@
margin: 40px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
}
.components-pane {
@ -171,8 +168,7 @@
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
color: var(--ink);
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
@ -182,8 +178,7 @@
.components-nav-header {
font-size: 13px;
color: #000333;
text-transform: uppercase;
color: var(--ink);
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
@ -235,13 +230,10 @@
}
.navigator-title {
font-size: 14px;
color: var(--secondary100);
font-weight: 600;
text-transform: uppercase;
font-size: 18px;
color: var(--ink);
font-weight: bold;
padding: 0 20px 20px 20px;
line-height: 1rem !important;
letter-spacing: 1px;
}
.border-line {