opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

adds elevation styles

Browse Source
This commit is contained in:
sergeyteleshev
2026-03-16 15:01:44 +01:00
parent e32d078ef3
commit 5b5db8b059
9 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css
+1 -5
View File
@@ -10,12 +10,8 @@
}
.error {
composes: theme-background-surface theme-text-on-surface from global;
composes: theme-background-surface theme-text-on-surface theme-elevation-xlarge from global;
border-radius: 0.25rem;
box-shadow:
0px 6px 6px -3px rgba(0, 0, 0, 0.2),
0px 10px 14px 1px rgba(0, 0, 0, 0.14),
0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}
.backdrop {
webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css
+1 -5
View File
@@ -6,7 +6,7 @@
* you may not use this file except in compliance with the License.
*/
.menu {
composes: theme-text-on-surface theme-background-surface theme-typography--caption from global;
composes: theme-text-on-surface theme-background-surface theme-typography--caption theme-elevation-small from global;
display: flex;
flex-direction: column;
max-height: 300px;
@@ -14,10 +14,6 @@
outline: none;
z-index: 999;
border-radius: var(--theme-form-element-radius);
box-shadow:
0px 3px 3px -2px rgba(0, 0, 0, 0.2),
0px 3px 4px 0px rgba(0, 0, 0, 0.14),
0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
.menuItem {
webapp/packages/core-blocks/src/Menu/MenuPanel.module.css
+1 -5
View File
@@ -10,17 +10,13 @@
z-index: 999;
}
.menuBox {
composes: theme-background-surface theme-text-on-surface theme-group-element-radius theme-typography--body2 from global;
composes: theme-background-surface theme-text-on-surface theme-group-element-radius theme-typography--body2 theme-elevation-medium from global;
composes: menuBox from './MenuItemElement.module.css';
display: flex;
flex-direction: column;
min-width: 140px;
padding: 6px 0;
box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 5px 8px 0px rgba(0, 0, 0, 0.14),
0px 1px 14px 0px rgba(0, 0, 0, 0.12);
& .menuBox {
margin-top: -6px;
webapp/packages/core-blocks/src/Overlay/Overlay.module.css
+31 -35
View File
@@ -6,45 +6,41 @@
* you may not use this file except in compliance with the License.
*/
.overlay {
composes: theme-text-on-primary from global;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: auto;
position: absolute;
margin: auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: none;
composes: theme-text-on-primary from global;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: auto;
position: absolute;
margin: auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: none;
&.active {
display: flex;
}
&.active {
display: flex;
}
&.fill {
background-color: var(--theme-background-surface);
& .box {
box-shadow: none;
}
&.fill {
background-color: var(--theme-background-surface);
& .box {
box-shadow: none;
}
}
}
.box {
composes: theme-background-surface theme-text-on-surface from global;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
border-radius: 0.25rem;
align-items: normal;
max-width: calc(100% - 48px);
max-height: calc(100% - 48px);
box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
composes: theme-background-surface theme-text-on-surface theme-elevation-large from global;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
border-radius: 0.25rem;
align-items: normal;
max-width: calc(100% - 48px);
max-height: calc(100% - 48px);
}
webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.module.css
+1 -5
View File
@@ -6,7 +6,7 @@
* you may not use this file except in compliance with the License.
*/
.notification {
composes: theme-background-surface theme-text-on-surface from global;
composes: theme-background-surface theme-text-on-surface theme-elevation-medium from global;
position: relative;
display: flex;
box-sizing: border-box;
@@ -17,10 +17,6 @@
line-height: 1.5;
opacity: 0;
border-radius: var(--theme-group-element-radius);
box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 5px 8px 0px rgba(0, 0, 0, 0.14),
0px 1px 14px 0px rgba(0, 0, 0, 0.12);
transition:
opacity 0.3s ease-in-out,
transform 0.5s ease-in-out;
webapp/packages/core-theming/src/styles/_elevation.scss
+31
View File
@@ -0,0 +1,31 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
/**
* Elevation Utilities
*
* Provides elevation shadow classes for composable styles.
* Currently used elevations: small (z3), medium (z5), large (z6), xlarge (z10)
*/
// Elevation shadow values from Material Design
$elevation-shadows: (
small: (0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)),
medium: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)),
large: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)),
xlarge: (0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)),
);
@mixin elevation() {
@each $name, $shadow in $elevation-shadows {
&.theme-elevation-#{$name},
.theme-elevation-#{$name} {
box-shadow: $shadow;
}
}
}
webapp/packages/core-theming/src/styles/_mixins.scss
+1
View File
@@ -11,5 +11,6 @@
@import './color-scheme';
@import './branding';
@import './color';
@import './elevation';
@import './form-controls';
@import './link';
webapp/packages/core-theming/src/styles/theme-dark.module.scss
+1
View File
@@ -10,6 +10,7 @@
@include theme-matcher;
@include colors;
@include elevation;
@include form-controls;
@include link;
@include delimiter($mdc-theme-background);
webapp/packages/core-theming/src/styles/theme-light.module.scss
+1
View File
@@ -10,6 +10,7 @@
@include theme-matcher;
@include colors;
@include elevation;
@include form-controls;
@include link;
@include delimiter($mdc-theme-background);