From 1dced2a410d5fa75dc6798351d67e4eb260afa84 Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Fri, 11 Oct 2019 13:28:42 +0800
Subject: [PATCH] MDL-66770 theme: change switch styling from iOS to Material
 Design

---
 mod/forum/templates/discussion_list.mustache |  4 +-
 theme/boost/scss/moodle/core.scss            | 55 +++++++++++++++-----
 theme/boost/style/moodle.css                 | 39 +++++++++-----
 theme/classic/style/moodle.css               | 39 +++++++++-----
 4 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/mod/forum/templates/discussion_list.mustache b/mod/forum/templates/discussion_list.mustache
index 8ae2552a39c..a7a958689ec 100644
--- a/mod/forum/templates/discussion_list.mustache
+++ b/mod/forum/templates/discussion_list.mustache
@@ -290,7 +290,7 @@
                             {{#forum.capabilities.subscribe}}
                                 <td class="text-center align-middle fit-content px-2">
                                     {{#discussion}}
-                                        <span class="switch">
+                                        <span class="switch sr-only-label">
                                             <input
                                                 type="checkbox"
                                                 id="subscription-toggle-{{id}}"
@@ -301,7 +301,7 @@
                                                 {{#userstate.subscribed}}data-targetstate="0" checked{{/userstate.subscribed}}
                                                 {{^userstate.subscribed}}data-targetstate="1"{{/userstate.subscribed}}
                                             >
-                                            <label for="subscription-toggle-{{id}}" class="sr-only">
+                                            <label for="subscription-toggle-{{id}}">
                                                 {{#userstate.subscribed}}
                                                     {{#str}}unsubscribediscussion, forum{{/str}}
                                                 {{/userstate.subscribed}}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index de1e6f36887..cba39e9cd05 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2160,20 +2160,26 @@ div.editor_atto_toolbar button .icon {
 
 $switch-height: 1.25rem !default;
 $switch-height-half: ($switch-height / 2) !default;
+$switch-width: ($switch-height * 2) !default;
 $switch-border-radius: $switch-height !default;
 $switch-bg: $gray-300 !default;
-$switch-checked-bg: map-get($theme-colors, 'primary') !default;
+$switch-bg-height: 1rem !default;
+$switch-bg-height-half: ($switch-bg-height / 2) !default;
+$switch-checked-bg: rgba(map-get($theme-colors, 'primary'), .4) !default;
+$switch-checked-thumb-bg: map-get($theme-colors, 'primary') !default;
 $switch-disabled-bg: $gray-200 !default;
 $switch-disabled-color: $gray-600 !default;
+$switch-disabled-thumb-bg: $gray-600 !default;
 $switch-thumb-bg: $white !default;
 $switch-thumb-border-radius: 50% !default;
-$switch-thumb-padding: 2px !default;
-$switch-thumb-padding-double: ($switch-thumb-padding * 2) !default;
-$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
+$switch-thumb-size: $switch-height !default;
+$switch-thumb-size-half: $switch-height-half !default;
+$switch-focus-box-shadow: 0 0 0 ($input-btn-focus-width * 2) rgba(map-get($theme-colors, 'primary'), .25);
 $switch-transition: .2s all !default;
 
 .switch {
     position: relative;
+    display: inline-block;
 
     input {
         float: left;
@@ -2182,48 +2188,52 @@ $switch-transition: .2s all !default;
         padding: 0;
         margin: 0;
         opacity: 0;
+        line-height: $switch-height;
 
         + label {
             position: relative;
             min-height: $switch-height;
-            min-width: $switch-height * 2;
+            min-width: $switch-width;
             line-height: $switch-height;
             border-radius: $switch-border-radius;
             display: inline-block;
             cursor: pointer;
             outline: none;
             user-select: none;
-            vertical-align: middle;
-            padding-left: (($switch-height * 2) + .5rem);
+            padding-left: ($switch-width + .5rem);
         }
 
         + label::before,
         + label::after {
             content: '';
             position: absolute;
-            top: calc(50% - #{$switch-height-half});
             left: 0;
-            width: ($switch-height * 2);
-            height: $switch-height;
             bottom: 0;
             display: block;
         }
 
         + label::before {
             right: 0;
+            height: $switch-bg-height;
+            width: $switch-width;
+            top: calc(50% - #{$switch-bg-height-half});
             background-color: $switch-bg;
             border-radius: $switch-border-radius;
             transition: $switch-transition;
         }
 
         + label::after {
-            margin-top: $switch-thumb-padding;
-            left: $switch-thumb-padding;
-            width: calc(#{$switch-height} - #{$switch-thumb-padding-double});
-            height: calc(#{$switch-height} - #{$switch-thumb-padding-double});
+            left: 0;
+            width: $switch-thumb-size;
+            height: $switch-thumb-size;
+            top: calc(50% - #{$switch-thumb-size-half});
             border-radius: $switch-thumb-border-radius;
             background-color: $switch-thumb-bg;
             transition: $switch-transition;
+            box-shadow:
+                0 1px 3px 0 rgba(0, 0, 0, 0.2),
+                0 1px 1px 0 rgba(0, 0, 0, 0.14),
+                0 2px 1px -1px rgba(0, 0, 0, 0.12);
         }
 
         &:checked + label::before {
@@ -2232,10 +2242,15 @@ $switch-transition: .2s all !default;
 
         &:checked + label::after {
             margin-left: $switch-height;
+            background-color: $switch-checked-thumb-bg;
         }
 
         &:focus + label::before {
             outline: none;
+        }
+
+        &:focus + label::after {
+            outline: none;
             box-shadow: $switch-focus-box-shadow;
         }
 
@@ -2247,6 +2262,18 @@ $switch-transition: .2s all !default;
         &:disabled + label::before {
             background-color: $switch-disabled-bg;
         }
+
+        &:disabled + label::after {
+            background-color: $switch-disabled-thumb-bg;
+        }
+    }
+
+    &.sr-only-label {
+        input + label {
+            text-indent: -9999px;
+            margin-bottom: 0;
+            padding-left: 0;
+        }
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 8a7532858d7..65c0bd46af2 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11405,14 +11405,16 @@ div.editor_atto_toolbar button .icon {
   display: none; }
 
 .switch {
-  position: relative; }
+  position: relative;
+  display: inline-block; }
   .switch input {
     float: left;
     width: 1px;
     transform: translateX(1px);
     padding: 0;
     margin: 0;
-    opacity: 0; }
+    opacity: 0;
+    line-height: 1.25rem; }
     .switch input + label {
       position: relative;
       min-height: 1.25rem;
@@ -11423,43 +11425,52 @@ div.editor_atto_toolbar button .icon {
       cursor: pointer;
       outline: none;
       user-select: none;
-      vertical-align: middle;
       padding-left: 3rem; }
     .switch input + label::before,
     .switch input + label::after {
       content: '';
       position: absolute;
-      top: calc(50% - 0.625rem);
       left: 0;
-      width: 2.5rem;
-      height: 1.25rem;
       bottom: 0;
       display: block; }
     .switch input + label::before {
       right: 0;
+      height: 1rem;
+      width: 2.5rem;
+      top: calc(50% - 0.5rem);
       background-color: #dee2e6;
       border-radius: 1.25rem;
       transition: 0.2s all; }
     .switch input + label::after {
-      margin-top: 2px;
-      left: 2px;
-      width: calc(1.25rem - 4px);
-      height: calc(1.25rem - 4px);
+      left: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      top: calc(50% - 0.625rem);
       border-radius: 50%;
       background-color: #fff;
-      transition: 0.2s all; }
+      transition: 0.2s all;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
     .switch input:checked + label::before {
-      background-color: #1177d1; }
+      background-color: rgba(17, 119, 209, 0.4); }
     .switch input:checked + label::after {
-      margin-left: 1.25rem; }
+      margin-left: 1.25rem;
+      background-color: #1177d1; }
     .switch input:focus + label::before {
+      outline: none; }
+    .switch input:focus + label::after {
       outline: none;
-      box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 0.4rem rgba(17, 119, 209, 0.25); }
     .switch input:disabled + label {
       color: #868e96;
       cursor: not-allowed; }
     .switch input:disabled + label::before {
       background-color: #e9ecef; }
+    .switch input:disabled + label::after {
+      background-color: #868e96; }
+  .switch.sr-only-label input + label {
+    text-indent: -9999px;
+    margin-bottom: 0;
+    padding-left: 0; }
 
 .paged-content-page-container {
   min-height: 3.125rem; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 0a47e472861..fa3161f8561 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11660,14 +11660,16 @@ div.editor_atto_toolbar button .icon {
   display: none; }
 
 .switch {
-  position: relative; }
+  position: relative;
+  display: inline-block; }
   .switch input {
     float: left;
     width: 1px;
     transform: translateX(1px);
     padding: 0;
     margin: 0;
-    opacity: 0; }
+    opacity: 0;
+    line-height: 1.25rem; }
     .switch input + label {
       position: relative;
       min-height: 1.25rem;
@@ -11678,43 +11680,52 @@ div.editor_atto_toolbar button .icon {
       cursor: pointer;
       outline: none;
       user-select: none;
-      vertical-align: middle;
       padding-left: 3rem; }
     .switch input + label::before,
     .switch input + label::after {
       content: '';
       position: absolute;
-      top: calc(50% - 0.625rem);
       left: 0;
-      width: 2.5rem;
-      height: 1.25rem;
       bottom: 0;
       display: block; }
     .switch input + label::before {
       right: 0;
+      height: 1rem;
+      width: 2.5rem;
+      top: calc(50% - 0.5rem);
       background-color: #dee2e6;
       border-radius: 1.25rem;
       transition: 0.2s all; }
     .switch input + label::after {
-      margin-top: 2px;
-      left: 2px;
-      width: calc(1.25rem - 4px);
-      height: calc(1.25rem - 4px);
+      left: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      top: calc(50% - 0.625rem);
       border-radius: 50%;
       background-color: #fff;
-      transition: 0.2s all; }
+      transition: 0.2s all;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
     .switch input:checked + label::before {
-      background-color: #1177d1; }
+      background-color: rgba(17, 119, 209, 0.4); }
     .switch input:checked + label::after {
-      margin-left: 1.25rem; }
+      margin-left: 1.25rem;
+      background-color: #1177d1; }
     .switch input:focus + label::before {
+      outline: none; }
+    .switch input:focus + label::after {
       outline: none;
-      box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+      box-shadow: 0 0 0 0.4rem rgba(17, 119, 209, 0.25); }
     .switch input:disabled + label {
       color: #868e96;
       cursor: not-allowed; }
     .switch input:disabled + label::before {
       background-color: #e9ecef; }
+    .switch input:disabled + label::after {
+      background-color: #868e96; }
+  .switch.sr-only-label input + label {
+    text-indent: -9999px;
+    margin-bottom: 0;
+    padding-left: 0; }
 
 .paged-content-page-container {
   min-height: 3.125rem; }