IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Select: Add orange indicator to selected item (#88695)

Browse Source 
* Initial experiment

* Add pill and underline

* Text decoration for hover

* Only set underline on the title

* Remove underline from hover

* Remove underline alltogether
This commit is contained in:
Tobias Skarhed 2024-06-17 10:39:28 +02:00 committed by GitHub
parent ae80ed02e4
commit 0107754da8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Select/getSelectStyles.ts
View File

@ -17,6 +17,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
option: css({
label: 'grafana-select-option',
padding: '8px',
position: 'relative',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
@ -64,6 +65,17 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
}),
optionSelected: css({
background: theme.colors.action.selected,
'&::before': {
backgroundImage: theme.colors.gradients.brandVertical,
borderRadius: theme.shape.radius.default,
content: '" "',
display: 'block',
height: '100%',
position: 'absolute',
transform: 'translateX(-50%)',
width: theme.spacing(0.5),
left: 0,
},
}),
optionDisabled: css({
label: 'grafana-select-option-disabled',