Skip to content

Commit

Permalink
fix(switch): Fix switch RTL (#2645)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rlfriedman @williamernest
rlfriedman authored and williamernest committed May 15, 2018
1 parent d9d695a commit e5ad26a
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 35 deletions.
98 changes: 64 additions & 34 deletions demos/switch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,54 +60,84 @@
<main>
<div class="mdc-toolbar-fixed-adjust"></div>

<section class="hero">
<div class="mdc-switch">
<input type="checkbox" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
</section>

<section class="example">
<h2>Enabled</h2>
<div class="demo-switch-wrapper">
<div class="demo-wrapper">
<section class="hero">
<div class="mdc-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
<input type="checkbox" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">off/on</label>
</div>
<div class="demo-switch-wrapper">
<div class="mdc-switch demo-switch--custom">
<input type="checkbox" id="basic-switch-custom" class="mdc-switch__native-control" role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</section>

<section class="example">
<h2>Enabled</h2>
<div class="demo-switch-wrapper">
<div class="mdc-switch">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch" class="mdc-switch-label">off/on</label>
</div>
<label for="basic-switch-custom" class="mdc-switch-label">custom color</label>
</div>
</section>
<section class="example">
<h2>Disabled</h2>
<div class="demo-switch-wrapper">
<div class="mdc-switch">
<div class="demo-switch-wrapper">
<div class="mdc-switch demo-switch--custom">
<input type="checkbox"
id="basic-switch-custom"
class="mdc-switch__native-control"
role="switch" checked>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch-custom" class="mdc-switch-label">custom color</label>
</div>
</section>
<section class="example">
<h2>Disabled</h2>
<div class="demo-switch-wrapper">
<div class="mdc-switch">
<input type="checkbox"
id="basic-switch--disabled"
class="mdc-switch__native-control"
role="switch"
disabled>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
</div>
</div>
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
</div>
</section>
</div>

<section class="rtl-toggle">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
id="basic-switch--disabled"
class="mdc-switch__native-control"
role="switch"
disabled>
<div class="mdc-switch__background">
<div class="mdc-switch__knob"></div>
class="mdc-checkbox__native-control"
id="toggle-rtl"
aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
<label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
</div>
</section>
</main>

<script src="/assets/material-components-web.js" async></script>
<script>
const demoWrapper = document.querySelector('.demo-wrapper');
document.getElementById('toggle-rtl').addEventListener('change', function() {
this.checked ? demoWrapper.setAttribute('dir', 'rtl') : demoWrapper.removeAttribute('dir');
});
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions demos/switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
//

@import "./common";
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-switch/mdc-switch";
@import "../packages/mdc-theme/color-palette";

Expand All @@ -30,3 +32,7 @@
@include mdc-switch-knob-color($color);
@include mdc-switch-focus-indicator-color($color);
}

.rtl-toggle {
margin: 16px;
}
11 changes: 10 additions & 1 deletion packages/mdc-switch/mdc-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
//

@import "@material/elevation/mixins";
@import "@material/rtl/mixins";
@import "./functions";
@import "./mixins";
@import "./variables";
Expand All @@ -36,6 +37,10 @@

&:checked {
transform: translateX($mdc-switch-knob-active-margin);

@include mdc-rtl {
transform: translateX(-($mdc-switch-knob-active-margin));
}
}
}
}
Expand Down Expand Up @@ -77,11 +82,11 @@

.mdc-switch__knob {
@include mdc-elevation(2);
@include mdc-rtl-reflexive-position(left, 0);

display: block;
position: absolute;
top: $mdc-switch-knob-vertical-offset_;
left: 0;
width: $mdc-switch-knob-diameter;
height: $mdc-switch-knob-diameter;
transform: translateX(0);
Expand Down Expand Up @@ -119,6 +124,10 @@
.mdc-switch__knob {
transform: translateX($mdc-switch-knob-active-margin);

@include mdc-rtl {
transform: translateX(-($mdc-switch-knob-active-margin));
}

// Focus indicator
&::before {
opacity: .15;
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-switch/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"dependencies": {
"@material/animation": "^0.34.0",
"@material/elevation": "^0.35.0",
"@material/rtl": "^0.35.0",
"@material/theme": "^0.35.0"
},
"publishConfig": {
Expand Down

0 comments on commit e5ad26a

Please sign in to comment.