travis-web/app/styles/app/layouts/build-job.sass
2015-03-18 12:33:23 +01:00

111 lines
2.1 KiB
Sass

@mixin colorJobs($color, $color-bg)
.job-id
color: $color
&:hover
background-color: $color-bg
.job-env,
.job-lang
background-color: $color-bg
&:after
@include fadeOut(right, -90deg, $color-bg)
.job-anchor
position: relative
.build-title
.icon--question
width: 1.3em;
height: 1.3em;
transform: translate(0.3em, 0.2em);
cursor: pointer
// job matrix
.tile--jobs
padding: 0.5em 0.4em 0.4em 3.5rem
margin-bottom: 0.35rem
p
white-space: normal
a
color: $grey1
.tile-status--job
width: 2em
.jobs-item
padding: .1em 0
.icon
height: 1.2em
margin-right: .1em
.job-os .icon
height: 1.3em
.icon--lang
height: 1em
width: 1.4em
.icon--env
width: 1.1em
@media #{$medium-up}
height: 38px
p
white-space: nowrap
.icon--lang,
.icon--env
margin-right: .4em
.jobs-item
position: relative
float: left
white-space: nowrap
padding: 0
overflow: hidden
.job-id
width: grid-calc(3, 24)
border-right: solid 1px $grey4
// max-width: 82px
.job-os
width: grid-calc(1, 24)
text-align: center
.job-lang
width: grid-calc(6, 24)
// max-width: 180px
&:after
@include fadeOut(right, -90deg, $cream-light)
.job-anchor
width: grid-calc(14, 24)
.job-env
width: grid-calc(14, 24)
// max-width: 395px
&:after
@include fadeOut(right, -90deg, $cream-light)
&:hover
position: absolute
width: auto
padding-right: 1em
z-index: 999
.job-duration
width: grid-calc(9, 24)
max-width: 165px
float: right
@media #{$xlarge-up}
.job-id
width: grid-calc(2, 24)
.job-os
margin: 0 1em
.job-lang
width: grid-calc(4, 24)
margin-right: 2em
&.failed,
&.errored
@include colorJobs($fail-color, #fbebe6)
&.passed
@include colorJobs($pass-color, #e5efe4)
&.started,
&.created,
&.received
@include colorJobs($created-color, #f4efd8)
.is-empty
opacity: .3