Selected pseudo class removed, workflow panels updated
This commit is contained in:
Joe
parent
28fadac7f7
commit
d95c4c7a54
18 changed files with 52 additions and 56 deletions
|
|
@ -57,9 +57,9 @@
|
|||
.budibase__nav-item {
|
||||
cursor: pointer;
|
||||
padding: 0 4px 0 2px;
|
||||
height: 35px;
|
||||
margin: 5px 0px 4px 0px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
height: 40px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
:global(.uk-notification-message-danger) {
|
||||
background: var(--grey-7) !important;
|
||||
background: var(--grey-9) !important;
|
||||
color: #fff !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,16 +38,16 @@
|
|||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin: 0px 0px 0px 1px;
|
||||
margin: 0px 0px 0px 2px;
|
||||
color: var(--ink);
|
||||
opacity: 0.7;
|
||||
padding: 0px 4px;
|
||||
line-height: 1.3;
|
||||
/* padding: 12px; */
|
||||
width: 164px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--grey-2);
|
||||
border-radius: 2px;
|
||||
background-color: var(--grey-3);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--grey-3);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,8 +77,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
margin-left: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -87,8 +86,7 @@
|
|||
display: inline-block;
|
||||
transition: 0.2s;
|
||||
font-size: 24px;
|
||||
width: 20px;
|
||||
margin-top: 2px;
|
||||
width: 18px;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<div
|
||||
class="budibase__nav-item item"
|
||||
class:selected={currentComponent === component}
|
||||
style="padding-left: {level * 20 + 53}px">
|
||||
style="padding-left: {level * 16 + 32}px">
|
||||
<div class="nav-item">
|
||||
<i class="icon ri-arrow-right-circle-fill" />
|
||||
{get_capitalised_name(component._component)}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
{ value: "normal", text: "Normal" },
|
||||
{ value: "hover", text: "Hover" },
|
||||
{ value: "active", text: "Active" },
|
||||
{ value: "selected", text: "Selected" },
|
||||
]
|
||||
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
|
|
|
|||
|
|
@ -3,18 +3,14 @@
|
|||
export let value = ""
|
||||
export let text = ""
|
||||
export let icon = ""
|
||||
export let padding = "8px 5px;"
|
||||
export let onClick = value => {}
|
||||
export let selected = false
|
||||
export let fontWeight = ""
|
||||
|
||||
$: style = buildStyle({ padding, fontWeight })
|
||||
$: useIcon = !!icon
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flatbutton"
|
||||
{style}
|
||||
class:selected
|
||||
on:click={() => onClick(value || text)}>
|
||||
{#if useIcon}
|
||||
|
|
@ -29,7 +25,11 @@
|
|||
<style>
|
||||
.flatbutton {
|
||||
cursor: pointer;
|
||||
max-height: 36px;
|
||||
padding: 8px 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: var(--grey-7);
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s;
|
||||
margin-left: 5px;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
<style>
|
||||
.flatbutton-group {
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.button-container {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
<PagesList />
|
||||
|
||||
<button class="newscreen" on:click={newScreen}>
|
||||
<i class="icon ri-add-circle-fill" />
|
||||
Create New Screen
|
||||
</button>
|
||||
|
||||
|
|
@ -30,23 +29,26 @@
|
|||
<style>
|
||||
.newscreen {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--purple);
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 8px 16px;
|
||||
margin: 20px 0px 12px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
background: var(--purple);
|
||||
color: var(--white);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
transition: all 3ms;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.newscreen:hover {
|
||||
background: var(--grey-1);
|
||||
background: var(--purple-light);
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -142,15 +142,16 @@
|
|||
position: relative;
|
||||
outline: none;
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bb-select-anchor {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
padding: 0px 12px;
|
||||
height: 36px;
|
||||
background-color: var(--grey-2);
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
|
||||
.icon-big {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@
|
|||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
padding: 0px 16px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: var(--grey-7);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
flex: 0 0 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -262,15 +262,10 @@ export const typography = [
|
|||
key: "text-transform",
|
||||
control: FlatButtonGroup,
|
||||
buttonProps: [
|
||||
{ text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
|
||||
{ text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
|
||||
{ text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
|
||||
{
|
||||
text: "×",
|
||||
padding: "0px 5px",
|
||||
fontWeight: 500,
|
||||
value: "none",
|
||||
},
|
||||
{ text: "BB", value: "uppercase" },
|
||||
{ text: "Bb", value: "capitalize" },
|
||||
{ text: "bb", value: "lowercase" },
|
||||
{ text: "×", value: "none" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -180,15 +180,15 @@
|
|||
|
||||
.config-item {
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 12px;
|
||||
background: var(--grey-1);
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.budibase_input {
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
width: 244px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-4);
|
||||
background-color: var(--grey-2);
|
||||
border: 1px solid var(--grey-2);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -53,29 +53,31 @@
|
|||
|
||||
<style>
|
||||
.subtabs {
|
||||
margin-top: 27px;
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.subtabs span {
|
||||
transition: 0.3s all;
|
||||
text-align: center;
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
font-weight: 400;
|
||||
padding: 8px 16px;
|
||||
text-rendering: optimizeLegibility;
|
||||
border: none !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.subtabs span.selected {
|
||||
background: var(--grey-7);
|
||||
color: var(--white);
|
||||
border-radius: 2px;
|
||||
background: var(--grey-3);
|
||||
color: var(--ink);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.subtabs span:not(.selected) {
|
||||
color: var(--grey-7);
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
<Link icon={DocumentationIcon} title="Documentation" href="/" />
|
||||
<Link icon={TutorialsIcon} title="Tutorials" href="/" />
|
||||
<Link icon={CommunityIcon} title="Community" href="/" />
|
||||
<Link icon={ContributionIcon} title="Contact" href="/" />
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
.welcome {
|
||||
font-size: 42px;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
margin: 40px 0px 0px 80px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue