fix(select): change arrow trigger position to absolute #60
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The global stylesheet included in normal applications has the property box-sizing set. The tests do not have those elements. Therefore because the arrow has now position absolution the values have to be adapted.
kyubisation
reviewed
Jun 27, 2019
| } | ||
|
|
||
| @include mq($from: desktop5k) { | ||
| padding-right: 92px; |
There was a problem hiding this comment.
Usually the desktop5k variant is simply calculated with the $scalingFactor5k. Why is this not the case here?
| width: toPx($selectArrowWidthHeight * $scalingFactor4k); | ||
| height: toPx($selectArrowWidthHeight * $scalingFactor4k); | ||
| } | ||
|
|
||
| @include mq($from: desktop5k) { | ||
| right: 28px; |
There was a problem hiding this comment.
Same question as for padding-right.
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| padding-right: $selectTriggerPaddingRight; | ||
| padding-right: toPx($selectTriggerPaddingRight); |
There was a problem hiding this comment.
padding-right should also be applied for native select.
kyubisation
requested changes
Jun 28, 2019
| @@ -78,11 +80,13 @@ | |||
| @include publicOnly() { | |||
| background: url($selectNativeBackground) 97.5% no-repeat; | |||
There was a problem hiding this comment.
The padding-right change displaced the position of the arrow.
This can be solved by removing the percentage from background (and moving it ouside publicOnly/businessOnly) and adding background-position: center right $selectArrowRight (also replace background-position-x from the 4k/5k with background-position: toPx($selectArrowRight * $scalingFactor4k/5k))
|
LGTM. Thanks again. 😃 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR changes the placement of the arrow trigger in the select component from relative to absolute. This is similar to the arrows for the datepicker component. The reason for this change is, that otherwise the icon is higher than a normal field in the business library and therefore form elements are of different height when placed next to each other.
This change affects the public and business library.