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

fix switches

Browse Source
This commit is contained in:
Lisa Passing 2015-03-25 17:50:52 +01:00
parent a9ad4fb70a
commit 125f230ea1
3 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/styles/app.scss
View File

@ -37,7 +37,7 @@
// @import "app/tabs";
@import "app/tipsy";
// @import "app/components/travis-switch";
@import "app/components/travis-switch";
@import "app/components/sync-button";
@import "app/modules/section";

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

@ -1,48 +1,56 @@
$switch-height: 28px
$switch-inner-height: 22px
$switch-width: 62px
$switch-inner-width: 27px
.profile-main
.switch
position: relative
width: $switch-width
height: $switch-height
background-color: #d1d1d1
border: none
cursor: pointer
@extend %border-radius-4px
&: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
$switch-height: 28px
$switch-inner-height: 22px
$switch-width: 62px
$switch-inner-width: 27px
span
display: none
.switch
box-sizing: border-box
position: relative
width: $switch-width
height: $switch-height
background-color: #d1d1d1
border: none
cursor: pointer
@extend %border-radius-4px
&.active
background-color: #b6d5b6
&:before
content: none
&:after
right: $switch-width - $switch-inner-width - (($switch-width - ($switch-inner-width * 2)) / 2)
background-color: #39a85b
@extend .icon-hook-on
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
&.disabled
cursor: default
pointer-events: none
opacity: .5
&.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
.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
&.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

7
app/templates/components/travis-switch.hbs
View File

@ -0,0 +1,7 @@
<span class="on">
ON
</span>
<span class="off">
OFF
</span>