diff --git a/app/components/hook-switch.coffee b/app/components/hook-switch.coffee
index 18468089..7f76944f 100644
--- a/app/components/hook-switch.coffee
+++ b/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"
diff --git a/app/components/settings-switch.coffee b/app/components/settings-switch.coffee
index 2381b68c..4f21d6ab 100644
--- a/app/components/settings-switch.coffee
+++ b/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
diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index 49df720b..fb644ec0 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/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)
- .switch
- display: inline-block
- vertical-align: middle
+ width: grid-calc(6, 24)
.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
diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass
index d14b8bf2..eaddbc9a 100644
--- a/app/styles/app/layouts/settings.sass
+++ b/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
diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass
index 07a7aece..9293f89e 100644
--- a/app/styles/app/modules/icons.sass
+++ b/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
diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass
index aa233826..07079dfe 100644
--- a/app/styles/app/modules/switch.sass
+++ b/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;
- font-size: $font-size-s
- border-radius: 4px
+ vertical-align: middle
+ overflow: visible
background-color: #E2E1E2
+ border-radius: 4px
+ border: none
+ cursor: pointer
span
- display: inline-block
- width: 36px
- height: 26px
- vertical-align: middle;
+ width: $switch-inner-width
+ height: $switch-inner-heigth
border-radius: 4px
background-color: #A5A4A4
color: $white
- text-align: center;
- font-weight: 300;
- line-height: 2.2;
+ text-align: center
+ font-weight: 300
+ 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
diff --git a/app/templates/components/hook-switch.hbs b/app/templates/components/hook-switch.hbs
index dbed063c..4c13ab83 100644
--- a/app/templates/components/hook-switch.hbs
+++ b/app/templates/components/hook-switch.hbs
@@ -1,6 +1,9 @@
-
- ON
-
-
- OFF
-
+
+
+ ON
+
+
+ OFF
+
+
+
diff --git a/app/templates/components/settings-switch.hbs b/app/templates/components/settings-switch.hbs
index beb759a1..8ebee2b5 100644
--- a/app/templates/components/settings-switch.hbs
+++ b/app/templates/components/settings-switch.hbs
@@ -1,4 +1,4 @@
-