Merge pull request #194 from Budibase/page-layout-nav-redesigned
Changes to page layout in navbar
This commit is contained in:
commit
38cc711718
|
@ -37,7 +37,7 @@
|
|||
|
||||
.budibase__label--medium {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
@ -64,7 +64,7 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.budibase__nav-item.selected {
|
||||
|
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
:global(.refresh-page-button) {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
input {
|
||||
width: 83px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.7;
|
||||
|
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.breadcrumb {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--secondary60);
|
||||
}
|
||||
|
|
|
@ -63,7 +63,7 @@
|
|||
.hierarchy-title {
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 1px;
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
<style>
|
||||
.root {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--secondary100);
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
|
@ -85,7 +85,7 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
font-family: Roboto;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
<style>
|
||||
.hierarchy-item {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
.hierarchy-title {
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 1px;
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
font-family: Roboto;
|
||||
font-size: 0.8rem;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
|
|
@ -86,14 +86,14 @@
|
|||
<style>
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #8997ab;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
@ -120,11 +120,11 @@
|
|||
|
||||
.detail-prop label {
|
||||
word-wrap: break-word;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
padding-top: 12px;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -258,7 +258,7 @@
|
|||
.component > .name {
|
||||
color: #000333;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
@ -282,7 +282,7 @@
|
|||
}
|
||||
|
||||
.preset-menu > span {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
@ -308,7 +308,7 @@
|
|||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 12px;
|
||||
padding: 13px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
|
|
@ -98,12 +98,13 @@
|
|||
<style>
|
||||
.root {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
color: #000333;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
@ -95,6 +95,7 @@
|
|||
height: 35px;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item button {
|
||||
|
|
|
@ -85,6 +85,6 @@
|
|||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 12px;
|
||||
padding: 13px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
a {
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -88,7 +88,7 @@
|
|||
<style>
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #8997ab;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -131,7 +131,7 @@
|
|||
<style>
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #000333;
|
||||
opacity: 0.6;
|
||||
|
@ -149,11 +149,11 @@
|
|||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
opacity: 0.8;
|
||||
padding-top: 12px;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -50,7 +50,8 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="pagelayoutSection">
|
||||
<div class="components-nav-page">Page Layout</div>
|
||||
<div
|
||||
class="budibase__nav-item root"
|
||||
class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
|
||||
|
@ -88,12 +89,27 @@
|
|||
onOk={() => store.deleteComponent(componentToDelete)} />
|
||||
|
||||
<style>
|
||||
.components-nav-page {
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
.pagelayoutSection {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
.root {
|
||||
|
||||
|
||||
}
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
@ -101,7 +117,7 @@
|
|||
transition: 0.2s;
|
||||
width: 20px;
|
||||
margin-top: 2px;
|
||||
color: #333;
|
||||
color: #000333;
|
||||
}
|
||||
|
||||
.icon:nth-of-type(2) {
|
||||
|
|
|
@ -39,11 +39,11 @@
|
|||
|
||||
h5 {
|
||||
word-wrap: break-word;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
opacity: 0.8;
|
||||
padding-top: 12px;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
.name {
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5px;
|
||||
|
|
|
@ -157,7 +157,7 @@
|
|||
}
|
||||
|
||||
.components-nav-page {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
padding-left: 20px;
|
||||
|
@ -168,7 +168,7 @@
|
|||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
|
|
Loading…
Reference in New Issue