Files
signoz/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss
Yunus M feea9e9b36
Some checks failed
build-staging / prepare (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
build-staging / js-build (push) Has been cancelled
build-staging / go-build (push) Has been cancelled
build-staging / staging (push) Has been cancelled
refactor: remove light mode styles from various components and update… (#11080)
* refactor: remove light mode styles from various components and update color variables

* fix: remove hardcoded background in celery
2026-04-25 06:57:25 +00:00

125 lines
2.2 KiB
SCSS

.query-functions-container {
display: flex;
margin: 0 12px;
justify-content: center;
align-items: center;
.function-btn,
.add-function-btn {
display: flex;
gap: 8px;
cursor: pointer;
border-radius: 3px !important;
}
.function-btn {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
.function-icon {
height: 18px;
width: 18px;
}
}
.add-function-btn {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
background-color: var(--l1-border) !important;
opacity: 0.8;
&:disabled {
opacity: 0.4;
}
}
&.hasFunctions {
.function-btn {
border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important;
margin-right: 8px;
}
.add-function-btn {
border-top-left-radius: 3px !important;
border-bottom-left-radius: 3px !important;
margin-left: 8px;
}
}
}
.query-functions-list {
display: flex;
gap: 8px;
.query-function {
position: relative;
&::before {
content: '';
height: 1px;
width: 8px;
position: absolute;
left: -8px;
top: 16px;
z-index: 0;
color: var(--muted-foreground);
background-color: var(--l3-background);
}
&::after {
content: '';
height: 1px;
width: 8px;
position: absolute;
right: -8px;
top: 16px;
z-index: 0;
color: var(--muted-foreground);
background-color: var(--l3-background);
}
.query-function-name-selector {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
.ant-select-selector {
border: none;
background: var(--l3-background);
}
&.showInput {
.ant-select-selector {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.query-function-value {
width: 70px;
border-left: 0;
background: var(--l2-background);
border-radius: 0;
border: 1px solid transparent;
&:focus {
border-color: transparent !important;
}
}
.query-function-delete-btn {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid var(--l2-border);
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
min-width: 24px !important;
}
}
}