deprecation warning styling
This commit is contained in:
parent
787d397593
commit
209f0ad2fd
1 changed files with 55 additions and 11 deletions
|
@ -18,14 +18,17 @@
|
||||||
|
|
||||||
<div class="deprecation-inner">
|
<div class="deprecation-inner">
|
||||||
<div class="deprecation-text">
|
<div class="deprecation-text">
|
||||||
From the 25th of May, Budibase is moving to a self-hosted web experience in the browser. We will cease development on the current Electron based desktop builder.
|
From the 25th of May, Budibase is moving to a self-hosted web experience in the browser.<br/>
|
||||||
|
We will cease development on the current Electron based desktop builder.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="deprecation-close">
|
<div class="deprecation-actions">
|
||||||
|
|
||||||
<a href="https://github.com/Budibase/budibase/discussions/1487" target="_blank">read more</a>
|
<a href="https://github.com/Budibase/budibase/discussions/1487" target="_blank">read more</a>
|
||||||
<Button secondary small on:click={() => deprecationWarning = false}>
|
|
||||||
|
<button on:click={() => deprecationWarning = false}>
|
||||||
Close
|
Close
|
||||||
</Button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -72,7 +75,7 @@
|
||||||
|
|
||||||
.deprecation-root {
|
.deprecation-root {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: var(--red);
|
background-color: var(--yellow-light);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
@ -85,18 +88,59 @@
|
||||||
|
|
||||||
.deprecation-text {
|
.deprecation-text {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
color: white;
|
color: black;
|
||||||
font-size: 1.1em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deprecation-close {
|
.deprecation-actions {
|
||||||
padding-left: 20px;
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deprecation-close > a {
|
.deprecation-actions > a {
|
||||||
margin-right: 20px;
|
color: white;
|
||||||
|
border-color: black;
|
||||||
|
background-color: black;
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
padding: var(--spacing-xs) var(--spacing-m);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--border-radius-s);
|
||||||
|
transition: all 0.2s ease 0s;
|
||||||
|
display: inline-flex;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
text-decoration: none;
|
||||||
|
min-width: auto;
|
||||||
|
outline: none;
|
||||||
|
font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
user-select: none;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deprecation-actions > a:hover {
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deprecation-actions > button {
|
||||||
|
border-style: none;
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
color: rgb(117, 117, 117);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deprecation-actions > button:hover {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
|
|
Loading…
Reference in a new issue