Port Angular time-range slider styling to the filter sidebars
Angular's `page-time-selector.scss` paints the whole filter slider in brand blues — pale $blue-light2 track, solid $blue-light range, and solid $blue-light thumbs with a 2px white ring — and thickens the horizontal track from PrimeReact's 4px default to 6px. React carried the stock gray/white PrimeReact theme, which read as a dead, low- contrast control next to the blue chevrons and calendar icon. Add the same overrides scoped under `.wrapper--time-selector` so both OnlineBoard and Schedule (the two sidebars that render the range slider) pick them up.
This commit is contained in:
@@ -1658,6 +1658,39 @@ body .p-slider.p-slider-animate .p-slider-handle {
|
||||
transition: box-shadow 0.2s, left 0.2s;
|
||||
}
|
||||
|
||||
// Filter time-range slider inside `.wrapper--time-selector` (OnlineBoard /
|
||||
// Schedule sidebars): Angular's `page-time-selector.scss` paints the
|
||||
// whole track in blue-light2 pale blue, the range in blue-light, and
|
||||
// draws solid blue-light thumbs with a 2px white ring. Default PrimeReact
|
||||
// leaves the track grey and the handles white with a dark-gray border.
|
||||
.wrapper--time-selector .p-slider {
|
||||
background-color: $blue-light2;
|
||||
|
||||
&.p-slider-horizontal {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background-color: $blue-light;
|
||||
}
|
||||
|
||||
.p-slider-handle {
|
||||
background-color: $blue-light;
|
||||
height: $slider-handle-size;
|
||||
width: $slider-handle-size;
|
||||
border: 2px solid $white;
|
||||
margin-top: calc(-1 * $slider-handle-size / 2);
|
||||
transition-duration: 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body .p-spinner .p-spinner-input {
|
||||
padding-right: 2.429em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user