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: Adds labels to select styles (#27698)

Browse Source
This commit is contained in:
Hugo Häggmark 2020-09-22 10:35:26 +02:00 committed by GitHub
parent 0de926b1ac
commit 5f2deb2497
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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

@ -11,6 +11,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
return {
menu: css`
label: grafana-select-menu;
background: ${bgColor};
box-shadow: 0px 4px 4px ${menuShadowColor};
position: relative;
@ -18,6 +19,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
z-index: 1;
`,
option: css`
label: grafana-select-option;
padding: 8px;
display: flex;
align-items: center;
@ -31,22 +33,26 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
}
`,
optionImage: css`
label: grafana-select-option-image;
width: 16px;
margin-right: 10px;
`,
optionDescription: css`
label: grafana-select-option-description;
font-weight: normal;
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textWeak};
white-space: normal;
`,
optionBody: css`
label: grafana-select-option-body;
display: flex;
font-weight: ${theme.typography.weight.semibold};
flex-direction: column;
flex-grow: 1;
`,
optionFocused: css`
label: grafana-select-option-focused;
background: ${optionBgHover};
border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1;
@ -57,6 +63,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
border-left-width: 2px;
`,
singleValue: css`
label: grafana-select-single-value;
color: ${theme.colors.formInputText};
white-space: nowrap;
overflow: hidden;
@ -65,6 +72,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
max-width: 100%;
`,
valueContainer: css`
label: grafana-select-value-container;
align-items: center;
display: flex;
position: relative;
@ -74,14 +82,17 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
overflow: hidden;
`,
valueContainerMulti: css`
label: grafana-select-value-container-multi;
flex-wrap: wrap;
`,
loadingMessage: css`
label: grafana-select-loading-message;
padding: ${theme.spacing.sm};
text-align: center;
width: 100%;
`,
multiValueContainer: css`
label: grafana-select-multi-value-container;
display: flex;
align-items: center;
line-height: 1;
@ -93,6 +104,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
font-size: ${theme.typography.size.sm};
`,
multiValueRemove: css`
label: grafana-select-multi-value-remove;
margin: 0 ${theme.spacing.xs};
cursor: pointer;
`,