Revamped toggle switch CSS #1198

CHANGELOG.md

@@ -2,6 +2,7 @@
 ## 08/18/2017
 
 1. [](#improved)
+    * Revamped the toggle switch CSS so it's more flexible and works better [#1198](https://github.com/getgrav/grav-plugin-admin/issues/1198)
     * Improved toggle/button alignment on Page edit view
 1. [](#bugfix)
     * Fixed an issue where iconpicker style was hiding field elements [#1199](https://github.com/getgrav/grav-plugin-admin/issues/1199)

themes/grav/scss/preset.scss

@@ -958,30 +958,19 @@ form {
 
     label {
         color: $content-text;
+        transition: background-color 0.5s ease;
     }
 
-    a {
-        background: $content-tabs-bg;
-        color: $content-tabs-text;
+    &.switch-toggle input.highlight:checked + label {
+        background: $button-bg;
+        color: $button-text;
     }
 
-    &.switch-toggle input.highlight:checked {
-        ~ a {
-            background: $button-bg;
-        }
-    }
-
-    /* Selected ON switch-light
-     */
-    &.switch-light input:checked {
-        ~ a {
-            background-color: #777;
-        }
-    }
-
-    input:checked + label {
+    &.switch-toggle input:checked + label {
+        background: #777;
         color: #fff;
     }
+
 }
 
 // Toaster
@@ -1479,10 +1468,8 @@ form {
             color: $content-tabs-text;
         }
 
-        input.highlight:checked {
-            ~ a {
-                background: $notice-bg;
-            }
+        input.highlight:checked + label {
+            background: $notice-bg;
         }
     }
 }

themes/grav/scss/template/_pages.scss

@@ -300,11 +300,7 @@
 
     .switch-grav {
         border: 0;
-        height: 38px;
-
-        label {
-            line-height: 38px;
-        }
+        line-height: 38px;
 
     }
 

themes/grav/scss/template/modules/_toggle-switch.scss

@@ -1,286 +1,21 @@
-/*
- * CSS TOGGLE SWITCHES
- * Unlicense
- *
- * Ionuț Colceriu - ghinda.net
- * https://github.com/ghinda/css-toggle-switch
- *
- */
 
-/* Toggle Switches
- */
-
-$switch-height: 43px;
-
-/* Shared
- */
-.switch-wrapper {
-     height: $switch-height;
-}
-
-[data-grav-field="toggle"] {
-    height: $switch-height;
-}
-
-@mixin switch-shared() {
-
-    display: inline-block;
-    height: $switch-height;
-
-    * {
-        @include box-sizing(border-box);
-    }
-
-    a {
-        display: block;
-
-        @include transition(all 0.1s ease-out);
-    }
-
-    label,
-    > span {
-        line-height: $switch-height;
-        vertical-align: middle;
-    }
-
-    /* Outline the toggles when the inputs are focused
-     */
-    input:focus ~ a,
-    input:focus + label {
-        outline: 1px dotted #888;
-    }
-
-}
-
-/* Checkbox
- */
-@mixin switch-light() {
-
-    @include switch-shared();
-
-    position: relative;
-    overflow: visible;
-    padding: 0;
-    margin-left: 100px;
-
-    /* Position the label over all the elements, except the slide-button (<a>)
-     * Clicking anywhere on the label will change the switch-state
-     */
-    label {
-        position: relative;
-        z-index: 3;
-
-        display: block;
-        width: 100%;
-    }
-
-    /* Don't hide the input from screen-readers and keyboard access
-     */
-    input {
-        position: absolute;
-        opacity: 0;
-        z-index: 5;
-
-        &:checked ~ a {
-            right: 0%;
-        }
-
-    }
-
-    > span {
-        position: absolute;
-        left: -100px;
-
-        width: 100%;
-        margin: 0;
-        padding-right: 100px;
-
-        text-align: left;
-
-        span {
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 5;
-
-            display: block;
-            width: 50%;
-            margin-left: 100px;
-
-            text-align: center;
-
-            &:last-child {
-                left: 50%;
-            }
-        }
-
-    }
-
-    a {
-        position: absolute;
-        right: 50%;
-        top: 0;
-        z-index: 4;
-
-        display: block;
-        width: 50%;
-        height: 100%;
-        padding: 0;
-    }
-
-}
-
-/* Radio Switch
- */
-@mixin switch-toggle() {
-
-    @include switch-shared();
-
-    position: relative;
-
-    /* For callout panels in foundation
-     */
-    padding: 0 !important;
-
-    input {
-        position: absolute;
-        opacity: 0;
-    }
-
-    input + label {
-        position: relative;
-        z-index: 1;
-
-        float: left;
-        height: 100%;
-
-        margin: 0;
-        text-align: center;
-    }
-
-    a {
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding: 0;
-
-        width: 50%;
-        height: 100%;
-    }
-
-    input:last-of-type:checked ~ a {
-        left: 50%;
-    }
-
-    /* Generate styles for the multiple states */
-    @for $i from 1 through 3 {
-        $state: $i + 2;
-        $width: 100 / ($i + 2);
-
-        &.switch-#{$state} {
-            label,
-            a {
-                width: $width * 1%;
-            }
-        }
-
-        @for $j from 2 through ($i + 1) {
-            &.switch-#{$state} input:checked:nth-of-type(#{$j}) ~ a {
-                left: $width * ($j - 1) * 1%;
-            }
-        }
-
-        &.switch-#{$state} input:checked:last-of-type ~ a {
-            left: 100 - $width * 1%;
-        }
-    }
-
-}
-
-/* Hide by default
- */
-.switch-toggle a,
-.switch-light span span {
-    display: none;
-}
-
-/* We can't test for a specific feature,
- * so we only target browsers with support for media queries.
- */
-@media only screen {
-
-    /* Checkbox switch
-     */
-    .switch-light {
-        @include switch-light();
-    }
-
-    /* Radio switch
-     */
-    .switch-toggle {
-        @include switch-toggle();
-    }
-
-    /* Standalone Themes */
-
-    /* Grav Theme
-     */
-    .switch-grav {
-        border-radius: $form-border-radius;
-
-        label {
-            @include transition(color 0.2s ease-out);
-            padding: 0 20px;
-
-        }
-
-        > span span {
-            opacity: 0;
-
-            @include transition(all 0.1s);
-
-            &:first-of-type {
-                opacity: 1;
-            }
-        }
-
-        a {
-            border-radius: $form-border-radius - 1px;
-        }
-
-        /* Selected ON switch-light
-         */
-        &.switch-light input:checked {
-
-            ~ span span {
-                &:first-of-type {
-                    opacity: 0;
-                }
-
-                &:last-of-type {
-                    opacity: 1;
-                }
-            }
-
-
-        }
-    }
-}
-
-/* Bugfix for older Webkit, including mobile Webkit. Adapted from
- * http://css-tricks.com/webkit-sibling-bug/
- */
-.switch-light,
 .switch-toggle {
-    @media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 1280px) {
-        -webkit-animation: webkitSiblingBugfix infinite 1s;
-    }
-}
+    display: inline-block;
+    display: inline-flex;
+    overflow: hidden;
+    border-radius: $form-border-radius;
+    line-height: 41px;
 
-@-webkit-keyframes webkitSiblingBugfix {
-    from {
-        -webkit-transform: translate3d(0,0,0);
-    } to {
-        -webkit-transform: translate3d(0,0,0);
+    input[type=radio] {
+        position: absolute;
+        visibility: hidden;
+        display: none;
     }
+
+    label {
+        display: inline-block;
+        cursor: pointer;
+        padding: 0 15px;
+    }
+
 }

themes/grav/templates/forms/fields/toggle/toggle.html.twig

@@ -56,6 +56,5 @@
             />
             <label for="{{ id }}">{{ (_self.spanToggle(translation, maxLen)|trim)|raw }}</label>
         {% endfor %}
-        <a></a>
     </div>
 {% endblock %}