fix(range): update tick styling and border radius#31080
fix(range): update tick styling and border radius#31080OS-giulianasilva wants to merge 9 commits intonextfrom
Conversation
- set the `--bar-border-radius` to 0 when `ion-range` has `.ticks`. previously, the bar border radius 0 was only set to the active bar. - updated the tick's width and height - updated the tick brackground to match the bar background
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
OS-giulianasilva
changed the title
| z-index: globals.$ion-z-index-100; | ||
| } | ||
|
|
||
| :host(.ticks) { |
There was a problem hiding this comment.
How is .ticks being added to range? I couldn't find it under Host.
There was a problem hiding this comment.
thetaPC
changed the title
|
|
||
| <div class="range-bar-container"> | ||
| <div class="range-bar" role="presentation" part="bar" /> | ||
| <div |
There was a problem hiding this comment.
Why are these changes being applied? These are already in next. You might need to sync with next to get them.
There was a problem hiding this comment.
The permalink you attached refers to the bar-active part of the range bar. What I changed was the bar part that was missing this logic.
There was a problem hiding this comment.
Thank you! I completely missed that. It might be better to have a class on host then. But we can make that decision during ionic modular so this PR can move faster.
| } | ||
|
|
||
| width: auto; | ||
| &.range-bar-active { |
There was a problem hiding this comment.
Please revert this to be .range-bar.range-bar-active. Nested styles like these can get hard to read.
| @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5)); | ||
| background: var(--bar-background-active); | ||
|
|
||
| &.has-ticks { |
There was a problem hiding this comment.
Please revert this to be .range-bar-active.has-ticks. Nested styles like these can get hard to read.
| .range-bar.range-bar-active { | ||
| bottom: 0; | ||
| .range-bar { | ||
| &.has-ticks { |
There was a problem hiding this comment.
Please revert this to be .range-bar.has-ticks. Nested styles like these can get hard to read.
…am/ionic-framework into ROU-12467-ticks-styling
| } | ||
|
|
||
| .range-bar.range-bar-active.has-ticks { | ||
| @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5)); |
There was a problem hiding this comment.
Is this style needed? I had to zoom in a lot to see it being applied and it doesn't seem like it really does much.
3 participants
Issue number: resolves internal
What is the current behavior?
ticks="true",the active bar segment is forced to a 0 border radius, while the inactive segment remains rounded.What is the new behavior?
has-ticksclass to thebarpart of the range bar, replicating the behavior found in thebar-activepart.barandbar-activeparts..range-tickfrom a hardcoded neutral value to a CSS variable--bar-background, ensuring the ticks and bar share the same color.Does this introduce a breaking change?
Other information
Before:
After: