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/tabs";
@import "app/tipsy"; @import "app/tipsy";
// @import "app/components/travis-switch"; @import "app/components/travis-switch";
@import "app/components/sync-button"; @import "app/components/sync-button";
@import "app/modules/section"; @import "app/modules/section";

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

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

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

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