Add is-outlined & is-rounded modifiers

Wikiki · Aug 20, 2017 · 60fffe1 · 60fffe1
1 parent 8ccd5ee
commit 60fffe1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,15 @@ Usage
 </div>
 ```
 
-You can display the label text at bottom by adding the modifier ```has-label-bottom```to the switch element (useful if you want to display the checkbox centered for example)
+Modifiers
+---
+You can use following modifiers:
+
+Name | Description
+-----|------------
+is-outlined | No background - just borders
+is-rounded | rounded borders
+has-label-bottom | Display the label text at bottom
 
 Variables
 ---

diff --git a/switch-example.png b/switch-example.png
diff --git a/switch.sass b/switch.sass
@@ -1,7 +1,9 @@
 $switch-background: $grey-light !default
+$switch-border: .1rem solid transparent !default
 $switch-background-active: $primary !default
 $switch-radius: $radius !default
 $switch-paddle-background: $white !default
+$switch-paddle-background-active: $primary !default
 $switch-paddle-offset: 0.25rem !default
 $switch-paddle-transition: all 0.25s ease-out !default
 
@@ -11,26 +13,19 @@ $switch-paddle-transition: all 0.25s ease-out !default
   $switch-width: $switch-height * 2
   $paddle-height: $switch-height - ($switch-paddle-offset * 2)
   $paddle-width: $switch-height - ($switch-paddle-offset * 2)
-  $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset
+  $paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5)
 
   &.has-label-bottom
     label
       text-indent: -50%
       padding-top: $size * 2
 
-  // Change the visual style when the switch is active
-  input
-    &:checked ~ label
-      background: $switch-background-active
-
-      &::before
-        left: $paddle-active-offest
-
   label
     position: relative
     display: block
     width: $switch-width
     height: $switch-height
+    border: $switch-border
     border-radius: $switch-radius
     background: $switch-background
     transition: $switch-paddle-transition
@@ -45,7 +40,7 @@ $switch-paddle-transition: all 0.25s ease-out !default
 
     &::before
       position: absolute
-      top: $switch-paddle-offset
+      top: calc(50% - (#{$paddle-height}  / 2))
       left: $switch-paddle-offset
 
       display: block
@@ -59,11 +54,36 @@ $switch-paddle-transition: all 0.25s ease-out !default
       content: ''
 
   input
+    &:checked
+      ~ label
+        background: $switch-background-active
+
     &:checked
       ~ label
         &::before
           left: $paddle-active-offest
 
+  &.is-outlined
+    input
+      ~ label
+        background-color: transparent
+        border-color: $switch-background
+        &::before
+          background: $switch-background
+      &:checked
+        ~ label
+          background-color: transparent
+          border-color: $switch-background-active
+          &::before
+            background: $switch-paddle-background-active
+  &.is-rounded
+    input
+      ~ label
+        border-radius: $radius-large * 4
+        &::before
+          border-radius: 50%
+
+
 .switch
   position: relative
   outline: 0
@@ -91,5 +111,14 @@ $switch-paddle-transition: all 0.25s ease-out !default
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       input
-        &:checked ~ label
-          background: $color
+        &:checked
+          ~ label
+            background: $color
+      &.is-outlined
+        input
+          &:checked
+            ~ label
+              background-color: transparent
+              border-color: $color !important
+              &::before
+                background: $color