Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix border-radius on radio-switch #38884

Merged
merged 11 commits into from
Sep 14, 2023
Merged

fix border-radius on radio-switch #38884

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a37db80
fix border-radius on radio-switch
jonnysp Jul 10, 2023
ee7427d
Update _form-check.scss
jonnysp Jul 10, 2023
70c24fd
lint
jonnysp Jul 10, 2023
a2073be
Update _form-check.scss
jonnysp Jul 10, 2023
360ab50
Update _form-check.scss
jonnysp Jul 10, 2023
cbef9d0
Merge branch 'main' into fix-radio-switch-when-roundet-disable
julien-deramond Jul 10, 2023
eb6bbdb
Update scss/forms/_form-check.scss
julien-deramond Jul 10, 2023
6cd5c2e
remove example
jonnysp Jul 18, 2023
af800e0
Merge branch 'main' into fix-radio-switch-when-roundet-disable
patrickhlauke Jul 18, 2023
d7268cb
Merge branch 'main' into fix-radio-switch-when-roundet-disable
XhmikosR Aug 21, 2023
1d59b0c
Merge branch 'main' into fix-radio-switch-when-roundet-disable
julien-deramond Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/forms/_form-check.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include border-radius($form-switch-border-radius, 0);
@include transition($form-switch-transition);

&:focus {
Expand Down
16 changes: 16 additions & 0 deletions site/content/docs/5.3/forms/checks-radios.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,22 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
</div>
{{< /example >}}

{{< example >}}
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
<div class="form-check form-switch">
<input class="form-check-input" type="radio" name="flexRadioDefault1" id="flexRadioDefault3">
<label class="form-check-label" for="flexRadioDefault3">
Radio switch
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="radio" name="flexRadioDefault1" id="flexRadioDefault4" checked>
<label class="form-check-label" for="flexRadioDefault4">
Checked radio switch
</label>
</div>
{{< /example >}}


## Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
Expand Down