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

moves theme ripple

Browse Source
This commit is contained in:
sergeyteleshev
2026-03-16 15:19:49 +01:00
parent ca00d605c7
commit dad8a28791
3 changed files with 51 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-theming/src/ThemeService.ts
+1
View File
@@ -18,6 +18,7 @@ import './styles/main/fonts.pure.css';
// TODO: important to keep normalize first
import './styles/main/normalize.pure.css';
import './styles/utilities/typography.css';
import './styles/utilities/ripple.css';
import './styles/UiIconButton.css';
import './styles/UiSpinner.css';
import './styles/UiInput.css';
webapp/packages/core-theming/src/styles/_color.scss
-107
View File
@@ -91,113 +91,6 @@
background-color: var(--theme-#{$color-name});
}
}
// Ripple effect classes (hover/focus/active feedback)
&.theme-ripple,
.theme-ripple {
position: relative;
&::before {
position: absolute;
content: '';
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: currentColor;
border-radius: inherit;
pointer-events: none;
transition: opacity 150ms linear;
}
&:hover::before {
opacity: 0.04;
}
&:focus::before {
opacity: 0.1;
}
&:active::before {
opacity: 0.1;
}
&[aria-expanded='true']::before {
opacity: 0.14;
}
}
&.theme-ripple-selectable,
.theme-ripple-selectable {
&[aria-selected='true']::before {
opacity: 0.14;
}
}
&.theme-ripple-background,
.theme-ripple-background {
background-color: var(--theme-background);
color: var(--theme-text-hint-on-light);
&.theme-ripple-selectable {
&:hover {
color: var(--theme-text-primary-on-light);
}
&[aria-selected='true'] {
background-color: var(--theme-surface);
color: var(--theme-text-primary-on-light);
&::before {
opacity: 0 !important;
}
}
}
}
&.theme-ripple-secondary,
.theme-ripple-secondary {
background-color: var(--theme-secondary);
color: var(--theme-text-hint-on-light);
&.theme-ripple-selectable {
&:hover {
color: var(--theme-text-primary-on-light);
}
&[aria-selected='true'] {
background-color: var(--theme-surface);
color: var(--theme-text-primary-on-light);
&::before {
opacity: 0 !important;
}
}
}
}
&.theme-ripple-surface,
.theme-ripple-surface {
background-color: var(--theme-surface);
color: var(--theme-text-hint-on-light);
&.theme-ripple-selectable {
&:hover {
color: var(--theme-text-primary-on-light);
}
&[aria-selected='true'] {
background-color: var(--theme-surface);
color: var(--theme-text-primary-on-light);
&::before {
opacity: 0 !important;
}
}
}
}
}
@layer components {
webapp/packages/core-theming/src/styles/utilities/ripple.css
+50
View File
@@ -0,0 +1,50 @@
/**
* Ripple Effect Utilities
*
* Provides hover/focus/active feedback using a pseudo-element overlay.
* Uses currentColor so it adapts to the parent's text color.
*/
@layer components {
/* Base ripple effect */
.theme-ripple {
position: relative;
&::before {
position: absolute;
content: '';
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: currentColor;
border-radius: inherit;
pointer-events: none;
transition: opacity 150ms linear;
}
&:hover::before {
opacity: 0.04;
}
&:focus::before {
opacity: 0.1;
}
&:active::before {
opacity: 0.1;
}
&[aria-expanded='true']::before {
opacity: 0.14;
}
}
.theme-ripple-selectable {
&[aria-selected='true']::before {
opacity: 0.14;
}
}
}