From a69193fa7092565ea66c7dbec0040d8c884cbbee Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Tue, 16 Oct 2018 11:31:27 +0800
Subject: [PATCH] MDL-63303 theme_boost: add switch styling for checkbox

---
 theme/boost/scss/moodle/core.scss | 96 +++++++++++++++++++++++++++++++
 theme/boost/style/moodle.css      | 60 +++++++++++++++++++
 2 files changed, 156 insertions(+)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 7fc00a8717e..02208db7c63 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2149,3 +2149,99 @@ div.editor_atto_toolbar button .icon {
         display: none;
     }
 }
+
+$switch-height: ($input-height-inner * .8) !default;
+$switch-height-half: ($switch-height / 2) !default;
+$switch-border-radius: $switch-height !default;
+$switch-bg: $custom-control-indicator-bg !default;
+$switch-checked-bg: map-get($theme-colors, 'primary') !default;
+$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
+$switch-disabled-color: $custom-control-label-disabled-color !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-transition: .2s all !default;
+
+.switch {
+    position: relative;
+
+    input {
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        background: none;
+        border: 0;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+
+        + label {
+            position: relative;
+            min-height: $switch-height;
+            min-width: $switch-height * 2;
+            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);
+        }
+
+        + 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;
+            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});
+            border-radius: $switch-thumb-border-radius;
+            background-color: $switch-thumb-bg;
+            transition: $switch-transition;
+        }
+
+        &:checked + label::before {
+            background-color: $switch-checked-bg;
+        }
+
+        &:checked + label::after {
+            margin-left: $switch-height;
+        }
+
+        &:focus + label::before {
+            outline: none;
+            box-shadow: $switch-focus-box-shadow;
+        }
+
+        &:disabled + label {
+            color: $switch-disabled-color;
+            cursor: not-allowed;
+        }
+
+        &:disabled + label::before {
+            background-color: $switch-disabled-bg;
+        }
+    }
+}
+
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 68dc4d76694..b45f320579e 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -10468,6 +10468,66 @@ div.editor_atto_toolbar button .icon {
 .dir-ltr .dir-ltr-hide {
   display: none; }
 
+.switch {
+  position: relative; }
+  .switch input {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0; }
+    .switch input + label {
+      position: relative;
+      min-height: 1.725rem;
+      min-width: 3.45rem;
+      line-height: 1.725rem;
+      border-radius: 1.725rem;
+      display: inline-block;
+      cursor: pointer;
+      outline: none;
+      user-select: none;
+      vertical-align: middle;
+      padding-left: 3.95rem; }
+    .switch input + label::before,
+    .switch input + label::after {
+      content: '';
+      position: absolute;
+      top: calc(50% - 0.8625rem);
+      left: 0;
+      width: 3.45rem;
+      height: 1.725rem;
+      bottom: 0;
+      display: block; }
+    .switch input + label::before {
+      right: 0;
+      background-color: #dee2e6;
+      border-radius: 1.725rem;
+      transition: 0.2s all; }
+    .switch input + label::after {
+      margin-top: 2px;
+      left: 2px;
+      width: calc(1.725rem - 4px);
+      height: calc(1.725rem - 4px);
+      border-radius: 50%;
+      background-color: #fff;
+      transition: 0.2s all; }
+    .switch input:checked + label::before {
+      background-color: #1177d1; }
+    .switch input:checked + label::after {
+      margin-left: 1.725rem; }
+    .switch input:focus + label::before {
+      outline: none;
+      box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
+    .switch input:disabled + label {
+      color: #868e96;
+      cursor: not-allowed; }
+    .switch input:disabled + label::before {
+      background-color: #e9ecef; }
+
 .icon {
   font-size: 16px;
   width: 16px;