CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 11:31:06 +12:00
Code Issues Projects Releases Wiki Activity

Add better theme compatibility to color picker and client app components

Browse source
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%;
position: relative;
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 {
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 {
width: 100%;

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

@ -25,7 +25,7 @@ export default `
flex-direction: column;
justify-content: flex-start;
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 {
flex: 1 1 auto;

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

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

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

@ -138,11 +138,11 @@
padding: 6px 8px;
opacity: 0;
flex-direction: row;
background: var(--background);
background: var(--spectrum-alias-background-color-primary);
justify-content: center;
align-items: center;
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;
transition: opacity 0.13s ease-in-out;
}
@ -155,4 +155,14 @@
margin: 0 4px;
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>

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

@ -135,7 +135,12 @@
align-items: stretch;
background: var(--spectrum-alias-background-color-primary);
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 {
position: sticky;