Skip to content

Commit

Permalink
FormToggle: component styles for external use (#12385)
Browse files Browse the repository at this point in the history
* FormToggle wrapper class needs inline-block styling.

Necessary for proper positioning of elements within .components-form-toggle.

* Elements within FormToggle component need to have border-box box-sizing.

This styling occurs within the block-editor on the post edit screen but does not exist outside of it. Moving this box-sizing value to the component resolves #8871.
  • Loading branch information
jrtashjian authored and youknowriad committed Mar 6, 2019
1 parent 6b018f0 commit 3052f9e
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/components/src/form-toggle/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ $toggle-border-width: 2px;

.components-form-toggle {
position: relative;
display: inline-block;

// On/Off icon indicators.
.components-form-toggle__on,
.components-form-toggle__off {
position: absolute;
top: $toggle-border-width * 3;
box-sizing: border-box;
}

.components-form-toggle__off {
Expand All @@ -26,6 +28,7 @@ $toggle-border-width: 2px;
.components-form-toggle__track {
content: "";
display: inline-block;
box-sizing: border-box;
vertical-align: top;
background-color: $white;
border: $toggle-border-width solid $dark-gray-300;
Expand All @@ -38,6 +41,7 @@ $toggle-border-width: 2px;
.components-form-toggle__thumb {
display: block;
position: absolute;
box-sizing: border-box;
top: $toggle-border-width * 2;
left: $toggle-border-width * 2;
width: $toggle-height - ($toggle-border-width * 4);
Expand Down

0 comments on commit 3052f9e

Please sign in to comment.