refactor switch styles

app/components/hook-switch.coffee

@@ -2,7 +2,7 @@
 
 HookSwitchComponent = Ember.Component.extend
   tagName: 'a'
-  classNames: ['travis-switch', 'switch']
+  classNames: ['switch--icon']
   classNameBindings: ['active']
   activeBinding: "hook.active"
 

app/components/settings-switch.coffee

@@ -3,7 +3,7 @@
 SettingsSwitchComponent = Ember.Component.extend
 
   tagName: 'a'
-  classNames: ['settings-switch']
+  classNames: ['switch']
   classNameBindings: ['_active:active']
 
   # TODO: how to handle overriding properties to

app/styles/app/layouts/profile.sass

@@ -135,16 +135,12 @@ p.profile-user-last
     @media #{$medium-up}
       width: grid-calc(7, 24)
     @media #{$large-up}
-      width: grid-calc(5, 24)
+      width: grid-calc(6, 24)
-  .switch
-    display: inline-block
-    vertical-align: middle
   .profile-settings
     display: inline-block
-    margin-left: 1rem;
     padding: .2em .2em .2em .5em;
     height: 28px;
-    vertical-align: bottom;
+    vertical-align: middle;
     .icon
       width: 14px
       height: 14px
@@ -188,7 +184,7 @@ p.profile-user-last
       span
         display: inline-block
   @media #{$large-up}
-    width: grid-calc(19, 24)
+    width: grid-calc(18, 24)
 
 
 .profile-additional

app/styles/app/layouts/settings.sass

@@ -191,10 +191,12 @@ $input-main-height: 30px
 .ssh-key-value
   display: inline-block
   vertical-align: middle
-  width: grid-calc(3, 12)
+  width: 48%
   text-align: right
   white-space: nowrap
   overflow: hidden
+  @media #{$medium-up}
+    width: grid-calc(3, 12)
   .icon-fingerprint
     @extend %icon
     @extend .icon-fingerprint
@@ -273,13 +275,6 @@ $input-main-height: 30px
     &:hover
       background-color: #3BA85D
       cursor: pointer
-  //refactor into switch component
-  .settings-switch
-    .label
-      display: inline-block
-      width: 7em
-      font-size: 12px
-      line-height: 1.3
 
 .form--sshkey
 

app/styles/app/modules/icons.sass

@@ -172,9 +172,9 @@
 .icon--dismiss-grey
   background-image: inline-image('svg/dismiss.svg')
 
-.icon-hook-on
+%icon-hook-on
   background-image: inline-image('svg/hooks-on.svg')
-.icon-hook-off
+%icon-hook-off
   background-image: inline-image('svg/hooks-off.svg')
 
 .icon-delete

app/styles/app/modules/switch.sass

@@ -1,95 +1,48 @@
 
 %switch
-  $switch-height: 28px
-  $switch-inner-height: 22px
-  $switch-width: 62px
-  $switch-inner-width: 27px
-
-  box-sizing: border-box
-  position: relative
-  width: $switch-width
-  height: $switch-height
-  background-color: #d1d1d1
-  border: none
-  cursor: pointer
-  @extend %border-radius-4px
-  &:before
-    content: none
-  &:after
-    content: ""
-    display: block
-    position: absolute
-    top: ($switch-height - $switch-inner-height) / 2
-    right: ($switch-width - ($switch-inner-width * 2)) / 2
-    height: $switch-inner-height
-    width: $switch-inner-width
-    background-color: #919191
-    background-repeat: no-repeat
-    background-size: 14px 14px
-    background-position: 6px
-    transition: right 200ms ease
-    @extend .icon-hook-off
-    @extend %border-radius-4px
-
-  &.active
-    background-color: #b6d5b6
-    &:after
-      right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
-      background-color: #39a85b
-      @extend .icon-hook-on
-
-  &.disabled
-    cursor: default
-    pointer-events: none
-    opacity: .5
-
-  .active &.disabled
-    background-color: #b6d5b6
-    &:after
-      right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
-      background-color: #39a85b
-      @extend .icon-hook-on
-
-
-
-.profile-switch
-  span
-    display: none
-
-  .switch
-    @extend %switch
-
-
-// NEW SWITCH
-.settings-switch
-  $switch-width: 80px
   $switch-height: 32px
+  $switch-width: 80px
 
-  div
+  $switch-inner-width: 36px
+  $switch-inner-heigth: 26px
+
+  .switch-inner
     display: inline-block
-    height: $switch-height
     width: $switch-width
+    height: $switch-height
     margin-right: 1em
     padding: 3px 3px 3px 4px
-    vertical-align: middle;
+    vertical-align: middle
-    font-size: $font-size-s
+    overflow: visible
-    border-radius: 4px
     background-color: #E2E1E2
+    border-radius: 4px
+    border: none
+    cursor: pointer
     span
-      display: inline-block
+      width: $switch-inner-width
-      width: 36px
+      height: $switch-inner-heigth
-      height: 26px
-      vertical-align: middle;
       border-radius: 4px
       background-color: #A5A4A4
       color: $white
-      text-align: center;
+      text-align: center
-      font-weight: 300;
+      font-weight: 300
-      line-height: 2.2;
+      font-size: 12px
+      line-height: 2.2
+
+  span
+    display: inline-block
+    vertical-align: middle
+  
   .label
-    vertical-align: middle;
+    vertical-align: middle
     font-size: $font-size-m
     color: $grey-medium
+    display: inline-block
+  &.label--small .label
+    width: 7em
+    font-size: 12px
+    line-height: 1.3
+
   .on
     display: none
     margin-left: 0
@@ -97,7 +50,7 @@
     margin-left: 36px
 
   &.active
-    div
+    .switch-inner
       background-color: #B8D6B9
       span
         background-color: #3BA85D
@@ -105,3 +58,28 @@
       display: inline-block
     .off
       display: none
+
+  &.disabled
+    cursor: default
+    pointer-events: none
+    opacity: .5
+
+
+.switch
+  @extend %switch
+
+.switch--icon
+  @extend %switch
+
+  .on,
+  .off
+    text-indent: 99%;
+    overflow: hidden;
+    white-space: nowrap;
+    background-size: 1.1em
+    background-position: 50%
+    background-repeat: no-repeat
+  .off
+    @extend %icon-hook-off
+  .on
+    @extend %icon-hook-on

app/templates/components/hook-switch.hbs

@@ -1,6 +1,9 @@
-<span class="on">
+<div class="switch-inner">
-  ON
+  <span class="on">
-</span>
+    ON
-<span class="off">
+  </span>
-  OFF
+  <span class="off">
-</span>
+    OFF
+  </span>
+</div>
+

app/templates/components/settings-switch.hbs

@@ -1,4 +1,4 @@
-<div>
+<div class="switch-inner">
   <span class="on">
     ON
   </span>