suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor switch styles

Browse Source
This commit is contained in:
Lisa Passing 2015-07-06 20:25:50 +02:00
parent c0b49095b4
commit e75fbc2485
8 changed files with 75 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/hook-switch.coffee
View File

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

2
app/components/settings-switch.coffee
View File

@ -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

10
app/styles/app/layouts/profile.sass
View File

@ -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

11
app/styles/app/layouts/settings.sass
View File

@ -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

4
app/styles/app/modules/icons.sass
View File

@ -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

132
app/styles/app/modules/switch.sass
View File

@ -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

15
app/templates/components/hook-switch.hbs
View File

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

2
app/templates/components/settings-switch.hbs
View File

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