From bceea0f572b23cd07a829961d314881f98e982a6 Mon Sep 17 00:00:00 2001 From: Patrick RoDee Date: Tue, 3 Dec 2019 07:23:05 -0700 Subject: [PATCH 1/5] feat(switch): Update DOM structure --- packages/mdc-switch/README.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md index 62bad8023c6..1712dc5a9c7 100644 --- a/packages/mdc-switch/README.md +++ b/packages/mdc-switch/README.md @@ -42,9 +42,8 @@ npm install @material/switch
-
- -
+ +
@@ -78,9 +77,8 @@ Add the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disab
-
- -
+ +
@@ -94,9 +92,8 @@ Add the `mdc-switch--checked` class to the `mdc-switch` element, and the `checke
-
- -
+ +
From 73f971ab0051c28c798bbe43768ef4b73ce9ef2c Mon Sep 17 00:00:00 2001 From: Patrick RoDee Date: Tue, 3 Dec 2019 14:29:31 -0700 Subject: [PATCH 2/5] WIP update mixins --- packages/mdc-switch/README.md | 6 +++--- packages/mdc-switch/_mixins.scss | 21 +++++---------------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md index 1712dc5a9c7..f316b1fbb32 100644 --- a/packages/mdc-switch/README.md +++ b/packages/mdc-switch/README.md @@ -42,9 +42,9 @@ npm install @material/switch
-
+
``` @@ -77,9 +77,9 @@ Add the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disab
-
+
``` @@ -92,9 +92,9 @@ Add the `mdc-switch--checked` class to the `mdc-switch` element, and the `checke
-
+
``` diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss index d8e355a5e1c..759f1b48092 100644 --- a/packages/mdc-switch/_mixins.scss +++ b/packages/mdc-switch/_mixins.scss @@ -87,10 +87,6 @@ .mdc-switch__thumb-underlay { @include mdc-switch__thumb-underlay-checked_; } - - .mdc-switch__native-control { - @include mdc-switch__native-control-checked_; - } } } @@ -311,11 +307,13 @@ } @mixin mdc-switch__native-control_ { - @include mdc-rtl-reflexive-position(left, 0); - position: absolute; - top: 0; + top: 50%; + right: 50%; + bottom: 50%; + left: 50%; margin: 0; + transform: translate(-50%, -50%); opacity: 0; cursor: pointer; pointer-events: auto; @@ -353,15 +351,6 @@ } } -@mixin mdc-switch__native-control-checked_ { - // Translate the native control the opposite direction so that the tap target stays the same. - transform: translateX(-($mdc-switch-thumb-active-margin)); - - @include mdc-rtl { - transform: translateX($mdc-switch-thumb-active-margin); - } -} - // Disabled state @mixin mdc-switch--disabled-base_ { From d009817e05786b61cdf7b8ba988161e667fcc3bb Mon Sep 17 00:00:00 2001 From: Patrick RoDee Date: Sun, 8 Dec 2019 22:16:02 -0800 Subject: [PATCH 3/5] WIP update tests --- packages/mdc-switch/_mixins.scss | 3 +-- .../spec/mdc-switch/classes/baseline.html | 20 ++++++++----------- .../spec/mdc-switch/mixins/density.html | 12 +++++------ .../spec/mdc-switch/mixins/thumb-color.html | 20 ++++++++----------- .../spec/mdc-switch/mixins/track-color.html | 20 ++++++++----------- 5 files changed, 30 insertions(+), 45 deletions(-) diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss index 759f1b48092..ec409a718df 100644 --- a/packages/mdc-switch/_mixins.scss +++ b/packages/mdc-switch/_mixins.scss @@ -309,8 +309,7 @@ @mixin mdc-switch__native-control_ { position: absolute; top: 50%; - right: 50%; - bottom: 50%; + /* @noflip */ left: 50%; margin: 0; transform: translate(-50%, -50%); diff --git a/test/screenshot/spec/mdc-switch/classes/baseline.html b/test/screenshot/spec/mdc-switch/classes/baseline.html index dd59da25128..61d75fc76e4 100644 --- a/test/screenshot/spec/mdc-switch/classes/baseline.html +++ b/test/screenshot/spec/mdc-switch/classes/baseline.html @@ -46,9 +46,8 @@
-
- -
+
+
@@ -58,9 +57,8 @@
-
- -
+
+
@@ -70,9 +68,8 @@
-
- -
+
+
@@ -82,9 +79,8 @@
-
- -
+
+
diff --git a/test/screenshot/spec/mdc-switch/mixins/density.html b/test/screenshot/spec/mdc-switch/mixins/density.html index 6052b551e69..3908d2f14d4 100644 --- a/test/screenshot/spec/mdc-switch/mixins/density.html +++ b/test/screenshot/spec/mdc-switch/mixins/density.html @@ -47,10 +47,9 @@
-
- -
+
+
@@ -60,9 +59,8 @@
-
- -
+
+
diff --git a/test/screenshot/spec/mdc-switch/mixins/thumb-color.html b/test/screenshot/spec/mdc-switch/mixins/thumb-color.html index 36abbb21a8c..5d1815f9e92 100644 --- a/test/screenshot/spec/mdc-switch/mixins/thumb-color.html +++ b/test/screenshot/spec/mdc-switch/mixins/thumb-color.html @@ -46,9 +46,8 @@
-
- -
+
+
@@ -58,9 +57,8 @@
-
- -
+
+
@@ -70,9 +68,8 @@
-
- -
+
+
@@ -82,9 +79,8 @@
-
- -
+
+
diff --git a/test/screenshot/spec/mdc-switch/mixins/track-color.html b/test/screenshot/spec/mdc-switch/mixins/track-color.html index db1f94f2ba4..511624df772 100644 --- a/test/screenshot/spec/mdc-switch/mixins/track-color.html +++ b/test/screenshot/spec/mdc-switch/mixins/track-color.html @@ -46,9 +46,8 @@
-
- -
+
+
@@ -58,9 +57,8 @@
-
- -
+
+
@@ -70,9 +68,8 @@
-
- -
+
+
@@ -82,9 +79,8 @@
-
- -
+
+
From 312421e69618f129e40428d23cf1862a56e74648 Mon Sep 17 00:00:00 2001 From: Patrick RoDee Date: Sun, 8 Dec 2019 22:17:09 -0800 Subject: [PATCH 4/5] WIP update readme --- packages/mdc-switch/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md index f316b1fbb32..695e3f60c82 100644 --- a/packages/mdc-switch/README.md +++ b/packages/mdc-switch/README.md @@ -43,8 +43,8 @@ npm install @material/switch
+
- ``` @@ -78,8 +78,8 @@ Add the `mdc-switch--disabled` class to the `mdc-switch` element, and the `disab
+
- ``` @@ -93,8 +93,8 @@ Add the `mdc-switch--checked` class to the `mdc-switch` element, and the `checke
+
- ``` From 9bf553d4987eeb4ed3b90cd2dd80665c7ee574e2 Mon Sep 17 00:00:00 2001 From: Patrick RoDee Date: Sun, 8 Dec 2019 22:40:11 -0800 Subject: [PATCH 5/5] WIP update mixins --- packages/mdc-switch/_mixins.scss | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss index ec409a718df..d8e355a5e1c 100644 --- a/packages/mdc-switch/_mixins.scss +++ b/packages/mdc-switch/_mixins.scss @@ -87,6 +87,10 @@ .mdc-switch__thumb-underlay { @include mdc-switch__thumb-underlay-checked_; } + + .mdc-switch__native-control { + @include mdc-switch__native-control-checked_; + } } } @@ -307,12 +311,11 @@ } @mixin mdc-switch__native-control_ { + @include mdc-rtl-reflexive-position(left, 0); + position: absolute; - top: 50%; - /* @noflip */ - left: 50%; + top: 0; margin: 0; - transform: translate(-50%, -50%); opacity: 0; cursor: pointer; pointer-events: auto; @@ -350,6 +353,15 @@ } } +@mixin mdc-switch__native-control-checked_ { + // Translate the native control the opposite direction so that the tap target stays the same. + transform: translateX(-($mdc-switch-thumb-active-margin)); + + @include mdc-rtl { + transform: translateX($mdc-switch-thumb-active-margin); + } +} + // Disabled state @mixin mdc-switch--disabled-base_ {