mirror of
https://github.com/SigNoz/signoz.git
synced 2025-12-22 18:06:35 +00:00
2a5fb9fd6f
* feat: date picker v2 * feat: custom date time range history * feat: light mode updates and interaction fixes * fix: improve usability * chore: add calendar, input and popover to transformIgnorePatterns * chore: add date-fns to transformIgnorePatterns * chore: add @signozhq/button to transformIgnorePatterns * feat: update css variables
115 lines
2.0 KiB
SCSS
115 lines
2.0 KiB
SCSS
.date-picker-v2-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.custom-date-time-picker-v2 {
|
|
padding: 12px;
|
|
|
|
.periscope-calendar {
|
|
border-radius: 4px;
|
|
border: none !important;
|
|
background: none !important;
|
|
padding: 8px 0 !important;
|
|
}
|
|
|
|
.periscope-calendar-day {
|
|
background: none !important;
|
|
|
|
&.periscope-calendar-today {
|
|
&.text-accent-foreground {
|
|
color: var(--bg-vanilla-100) !important;
|
|
}
|
|
}
|
|
|
|
button {
|
|
&:hover {
|
|
background-color: var(--bg-robin-500) !important;
|
|
color: var(--bg-vanilla-100) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-time-selector {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 16px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.time-input {
|
|
border-radius: 4px;
|
|
border: none !important;
|
|
background: none !important;
|
|
padding: 8px 4px !important;
|
|
color: var(--bg-vanilla-100) !important;
|
|
|
|
&::-webkit-calendar-picker-indicator {
|
|
display: none !important;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
&:focus {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&:focus-visible {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-date-time-picker-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
|
|
.next-btn {
|
|
width: 80px;
|
|
}
|
|
|
|
.clear-btn {
|
|
width: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.invalid-date-range-tooltip {
|
|
.ant-tooltip-inner {
|
|
color: var(--bg-sakura-500) !important;
|
|
}
|
|
}
|
|
|
|
.lightMode {
|
|
.custom-date-time-picker-v2 {
|
|
.periscope-calendar-day {
|
|
&.periscope-calendar-today {
|
|
&.text-accent-foreground {
|
|
color: var(--bg-ink-500) !important;
|
|
}
|
|
}
|
|
|
|
button {
|
|
&:hover {
|
|
background-color: var(--bg-robin-500) !important;
|
|
color: var(--bg-ink-500) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-time-selector {
|
|
.time-input {
|
|
color: var(--bg-ink-500) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|