I stand defeated to UIKit and its CSS shackles
This commit is contained in:
Joe 2020-06-02 20:55:15 +01:00
parent 8e8a1e8f4b
commit 780f791048
6 changed files with 28 additions and 18 deletions

View File

@ -117,7 +117,7 @@
} }
.budibase__table tr { .budibase__table tr {
border-bottom: 1px solid var(--blue-light); border-bottom: 1px solid var(--grey-light);
} }
.button--toggled { .button--toggled {

View File

@ -42,13 +42,13 @@
.secondary { .secondary {
color: var(--ink); color: var(--ink);
border: solid 1px var(--grey-dark); border: solid 1px var(--grey-dark);
background: none; background: white;
} }
.button { .button {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-radius: 5px; border-radius: 3px;
padding: 10px 20px; padding: 10px 20px;
height: 40px; height: 40px;
} }

View File

@ -20,11 +20,9 @@
<style> <style>
.select-container { .select-container {
font-size: 14px; font-size: 14px;
color: var(--secondary60);
font-weight: bold;
position: relative; position: relative;
max-width: 400px; border: var(--grey-dark) 1px solid;
min-width: 275px; max-width: 256px;
} }
.adjusted { .adjusted {
@ -43,7 +41,7 @@
font-family: sans-serif; font-family: sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #000333; color: var(--ink);
padding: 0 40px 0px 20px; padding: 0 40px 0px 20px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -63,6 +61,6 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
pointer-events: none; pointer-events: none;
color: var(--secondary100); color: var(--ink);
} }
</style> </style>

View File

@ -128,7 +128,7 @@
} }
tbody > tr:hover { tbody > tr:hover {
background-color: var(--blue-light); background-color: var(--grey-light);
} }
.table-controls { .table-controls {
@ -154,10 +154,12 @@
} }
footer { footer {
margin: 40px 40px 0px 40px;
background-color: var(--grey-light); background-color: var(--grey-light);
padding: 20px 0px; margin-top: 40px;
padding: 20px 40px 20px 40px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
</style> </style>

View File

@ -79,19 +79,28 @@
</form> </form>
</div> </div>
<footer> <footer>
<div class="button">
<ActionButton secondary on:click={goBack}>Cancel</ActionButton>
</div>
<ActionButton primary on:click={save}>Save</ActionButton> <ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={goBack}>Cancel</ActionButton>
</footer> </footer>
<style> <style>
.root { .root {
margin: 20px; margin: 40px;
} }
footer { footer {
padding: 20px; padding: 20px 40px;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #fafafa; background: var(--grey-light);
display: flex;
align-items: center;
justify-content: flex-end;
}
.button {
margin-right: 20px;
} }
</style> </style>

View File

@ -96,6 +96,7 @@
.snippet-selector__heading { .snippet-selector__heading {
margin-right: 20px; margin-right: 20px;
font-size: 14px; font-size: 14px;
color: var(--ink-lighter);
} }
.header { .header {