MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add better theme compatibility to color picker and client app components

This commit is contained in:
Andrew Kingston 2021-06-30 08:30:57 +01:00
parent 9a6a0fded7
commit b4a8a9c160
5 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bbui/src/ColorPicker/ColorPicker.svelte
View File

@ -175,11 +175,11 @@
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
transition: border-color 130ms ease-in-out; transition: border-color 130ms ease-in-out;
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
} }
.preview:hover { .preview:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-400);
} }
.fill { .fill {
width: 100%; width: 100%;

2
packages/builder/src/components/design/AppPreview/iframeTemplate.js
View File

@ -25,7 +25,7 @@ export default `
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
} }
body { body {
flex: 1 1 auto; flex: 1 1 auto;

1
packages/client/src/components/ClientApp.svelte
View File

@ -103,5 +103,6 @@
} }
#app-root { #app-root {
position: relative; position: relative;
border: 1px solid var(--spectrum-global-color-gray-300);
} }
</style> </style>

14
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -138,11 +138,11 @@
padding: 6px 8px; padding: 6px 8px;
opacity: 0; opacity: 0;
flex-direction: row; flex-direction: row;
background: var(--background); background: var(--spectrum-alias-background-color-primary);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
gap: 2px; gap: 2px;
transition: opacity 0.13s ease-in-out; transition: opacity 0.13s ease-in-out;
} }
@ -155,4 +155,14 @@
margin: 0 4px; margin: 0 4px;
background-color: var(--spectrum-global-color-gray-300); background-color: var(--spectrum-global-color-gray-300);
} }
/* Theme overrides */
:global(.spectrum--dark) .bar,
:global(.spectrum--darkest) .bar {
background: var(--spectrum-global-color-gray-200);
}
:global(.spectrum--dark) .divider,
:global(.spectrum--darkest) .divider {
background: var(--spectrum-global-color-gray-400);
}
</style> </style>

7
packages/standard-components/src/Layout.svelte
View File

@ -135,7 +135,12 @@
align-items: stretch; align-items: stretch;
background: var(--spectrum-alias-background-color-primary); background: var(--spectrum-alias-background-color-primary);
z-index: 2; z-index: 2;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075); border-bottom: 1px solid var(--spectrum-global-color-gray-300);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.075);
}
:global(.spectrum--dark) .nav-wrapper,
:global(.spectrum-darkest) .nav-wrapper {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
} }
.layout--top .nav-wrapper.sticky { .layout--top .nav-wrapper.sticky {
position: sticky; position: sticky;