9baadcfd9e
fix white ghosting on api icon check requests for existing branch tweak cc icon tweak settings fields try hover over settigns menu
236 lines
4.2 KiB
Sass
236 lines
4.2 KiB
Sass
/*
|
|
* Buttons
|
|
*/
|
|
|
|
$button-border-color: #d4d4d4
|
|
|
|
.button,
|
|
.btn
|
|
font-family: $font-family-sans-serif
|
|
position: relative
|
|
overflow: visible
|
|
display: inline-block
|
|
padding: 5px 10px
|
|
cursor: pointer
|
|
outline: none
|
|
text-decoration: none
|
|
text-align: center
|
|
color: $white
|
|
white-space: nowrap
|
|
border-radius: 2px
|
|
background-color: $grey-lighter
|
|
|
|
.button:hover,
|
|
.button:focus,
|
|
.button:active,
|
|
.button.active
|
|
border-color: $button-border-color
|
|
background-color: $grey-medium
|
|
text-decoration: none
|
|
color: #fff
|
|
|
|
.button:active,
|
|
.button.active
|
|
border-color: #2a65a0
|
|
border-bottom-color: #2356c4
|
|
background-color: #40454f
|
|
|
|
.button--signin,
|
|
.button--signingin
|
|
display: inline-block
|
|
color: $white
|
|
font-size: $font-size-small
|
|
line-height: 1
|
|
text-decoration: none
|
|
border-radius: 4px
|
|
border: none
|
|
vertical-align: middle
|
|
background:
|
|
color: $pass-color
|
|
|
|
.button--signin
|
|
padding: 0.6em 2em 0.55em 0.6em
|
|
cursor: pointer
|
|
background:
|
|
image: inline-image('ui/github-signin.svg')
|
|
repeat: no-repeat
|
|
position: 95.5% 45%
|
|
&:hover
|
|
background-color: #73c78d
|
|
text-decoration: none
|
|
|
|
.button--signingin
|
|
padding: 0.6em 0.6em 0.45em
|
|
span
|
|
display: inline-block
|
|
padding: 0 .2em
|
|
position: relative
|
|
top: -0.15em
|
|
|
|
.button--green
|
|
border: none
|
|
font-size: $font-size-small
|
|
color: $white
|
|
background-color: $pass-color
|
|
&:hover
|
|
background-color: #73c78d
|
|
.button--fixedwidth
|
|
width: 8em
|
|
|
|
.btn-activate,
|
|
.btn-activated
|
|
font-size: $font-size-sm
|
|
border: none
|
|
&:hover
|
|
background-color: $grey-medium
|
|
|
|
.btn-activated
|
|
background-color: #39a85b
|
|
color: $white
|
|
&:hover
|
|
background-color: darken(#39a85b, 10)
|
|
|
|
#auth #navigation .button--signin,
|
|
#auth #navigation .button--signingin
|
|
display: none
|
|
|
|
.button--grey
|
|
height: 22px
|
|
padding: 0 10px 0 10px
|
|
background-color: #696867
|
|
color: #f2f2f2
|
|
font-size: $font-size-small
|
|
border: none
|
|
border-radius: 2px
|
|
&:hover,
|
|
&:active
|
|
border: none
|
|
background-color: lighten(#696867, 10)
|
|
&:focus
|
|
background-color: #696867
|
|
|
|
.button--delete
|
|
@extend .button
|
|
border-radius: 2px
|
|
border: none
|
|
font-size: $font-size-small
|
|
color: $white
|
|
background-color: #CD3A36
|
|
font-weight: 300
|
|
padding: 4px 10px 2px
|
|
&:focus,
|
|
&:hover
|
|
background-color: lighten(#CD3A36, 10)
|
|
|
|
|
|
|
|
// new stuff
|
|
|
|
%circle-button
|
|
display: block
|
|
text-indent: 999%
|
|
overflow: hidden
|
|
width: 28px
|
|
height: 28px
|
|
border: solid 1px #E4E6E6
|
|
border-radius: 50%
|
|
&:hover
|
|
border-color: $teal
|
|
|
|
float: left
|
|
margin-right: 1rem
|
|
@media #{$medium-up}
|
|
float: none
|
|
margin-right: 0
|
|
margin-bottom: .5em
|
|
|
|
.button-circle-codeclimate
|
|
@extend %circle-button
|
|
@extend %icon-line-codeclimate
|
|
background:
|
|
repeat: no-repeat
|
|
size: auto 9px
|
|
position: 4px 8px
|
|
&:hover
|
|
@extend %icon-line-codeclimate-teal
|
|
|
|
.button-circle-cancel
|
|
@extend %circle-button
|
|
@extend %icon-line-cross
|
|
background:
|
|
repeat: no-repeat
|
|
size: auto 100%
|
|
&:hover
|
|
@extend %icon-line-cross-teal
|
|
|
|
.button-circle-trigger
|
|
@extend %circle-button
|
|
@extend %icon-line-trigger
|
|
background:
|
|
position: 2px 1px
|
|
repeat: no-repeat
|
|
size: 24px 24px
|
|
&:hover
|
|
@extend %icon-line-trigger-teal
|
|
|
|
%log-button
|
|
display: inline-block
|
|
height: 28px
|
|
padding: 0 0.8em 0 2.3em
|
|
border: 1px solid #f1f1f1
|
|
color: #f1f1f1
|
|
border-radius: 2px
|
|
text-align: center
|
|
line-height: 1.9
|
|
font-size: 14px
|
|
font-weight: 300
|
|
background:
|
|
repeat: no-repeat
|
|
size: auto 14px
|
|
position: 7px 6px
|
|
|
|
// log buttons
|
|
.remove-log-button
|
|
@extend %log-button
|
|
@extend %icon-remove-log
|
|
&:hover,
|
|
&:active
|
|
background-color: #d94341
|
|
|
|
.download-log-button
|
|
@extend %log-button
|
|
@extend %icon-download-log
|
|
&:hover,
|
|
&:active
|
|
background-color: #999a98
|
|
|
|
// popup buttons
|
|
@mixin buttons($bg-color)
|
|
display: inline-block
|
|
padding: .3em 1em
|
|
font-size: 20px
|
|
color: white
|
|
font-weight: $font-weight-light
|
|
border-radius: 2px
|
|
background-color: $bg-color
|
|
&:hover,
|
|
&:active
|
|
background-color: lighten($bg-color, 10)
|
|
|
|
.button-delete
|
|
@include buttons($red)
|
|
|
|
.button-cancel
|
|
@include buttons(#A0A8A8)
|
|
|
|
.showmore-button
|
|
padding-left: 2em
|
|
background:
|
|
repeat: no-repeat
|
|
size: auto 20px
|
|
position: 4px 1px
|
|
cursor: pointer
|
|
@extend .button--grey
|
|
@extend %icon-line-eye
|
|
|