Updates the native and custom checks to use flexbox #25184
Conversation
- Removes absolute positioning and relies on flexbox for input+label layout and spacing - Adjusts the gutter variables to be true gutters, not gutters plus space for input - Updates inline variants accordingly This is an implementation of #25174, and a more complete attempt than #25175 at implementing it across all our checks.
|
Please add
|
| display: block; | ||
| min-height: (1rem * $line-height-base); | ||
| padding-left: $custom-control-gutter; | ||
| display: flex; |
There was a problem hiding this comment.
I had the same display: flex in my pull request, but now I'm trying to remember the reason for even having it. Does removing this cause any negative effect? Or does it have a purpose for inclusion? I fiddled around a bit and didn't see a reason for just leaving the display property off... what do you think?
| margin-right: $form-check-inline-margin-x; | ||
|
|
||
| // Undo .form-check-input defaults and add some `margin-right`. | ||
| .form-check-input { | ||
| position: static; | ||
| margin-top: 0; | ||
| margin-right: $form-check-inline-input-margin-x; |
There was a problem hiding this comment.
should $form-check-inline-input-margin-x be consolidated with $form-check-input-gutter?
If not, should the default value in _variables be changed so that they are equal?
| @@ -87,6 +84,10 @@ | |||
| background-position: center center; | |||
| background-size: $custom-control-indicator-bg-size; | |||
| } | |||
|
|
|||
| &:not(:empty)::before { | |||
| margin-right: $custom-control-gutter; | |||
There was a problem hiding this comment.
.custom-control-label will never be empty because of the before and after pseudo-elements. It will always have margin-right.
|
Note to myself, check #25337. |
|
@mdo, To allow the indicator to scale with the text size of the label, I would suggest that the indicator width/height (and possibly padding/gutter) be switched to This would then allow easy support for |
|
Punting on this per #25174 (comment). Using flex on these checks isn't really doable without more complications—we'd need |
This is an implementation of #25174, and a more complete attempt than #25175 at implementing it across all our checks.