travis-web/app/styles/app/layouts/dashboard.sass

127 lines
2.8 KiB
Sass

.fade-out
@media #{$medium-up}
white-space: nowrap
position:relative
overflow: hidden
&:after
content: ""
@include fadeOut(right, -90deg, $white)
@mixin colorDashboardTiles($color, $status, $color2: $color)
&.#{$status}
.row-request
color: $color
.row-name a,
.row-request a
color: $color
.dashboard
.centered
margin: auto
max-width: 1024px
.dashboard-filter
padding: 0 $column-gutter/2
font-size: 16px
font-weight: $font-weight-normal
@media #{$medium-up}
padding: 0
.dashboard-active
padding: 0
margin: 3rem 0 5rem
list-style-type: none
.dashboard-active li
border: 1px solid $cream-dark
font-size: 16px
text-align: left
margin-bottom: .3rem
color: $grey-dark
background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 9px, white 100%) no-repeat
.icon
width: 1.3em
height: 1.3em
margin-right: .2em
display: inline-block
vertical-align: middle
h2, h3
margin: 0
font-weight: $font-weight-normal
h3
font-size: 16px
h2
font-size: 18px
.one-line
margin-left: 2em
.two-line
padding: .1em 0
.row-item
margin: .2em
font-size: 16px
font-weight: $font-weight-normal
white-space: nowrap
overflow: hidden
a
color: $grey-dark
text-decoration: none
&:hover
text-decoration: underline
@media #{$medium-up}
& > div:first-of-type
width: 27%
position: relative
padding-left: 1em
&:after
content: ""
@include fadeOut(right, -90deg, $white)
& > div:nth-of-type(2)
width: 25%
& > div:nth-of-type(3)
width: 18%
& > div:nth-of-type(4)
width: 18%
& > div:nth-of-type(5)
width: 10%
h2
padding-left: 1.5em
.one-line
margin-left: 0
.dropup--blue
li
border: none
transform: translate(-19%, -170%)
@include statusColors($green-dark, 'passed')
@include statusColors($red-dark, 'failed')
@include statusColors($red-dark, 'errored')
@include statusColors($grey-medium, 'canceled')
@include statusColors(#bfb502, 'started', #e5da3f)
@include statusColors(#bfb502, 'queued', #e5da3f)
@include statusColors(#bfb502, 'booting', #e5da3f)
@include statusColors(#bfb502, 'received', #e5da3f)
@include statusColors(#bfb502, 'created', #e5da3f)
@include colorDashboardTiles($green-dark, 'passed')
@include colorDashboardTiles($red-dark, 'failed')
@include colorDashboardTiles($red-dark, 'errored')
@include colorDashboardTiles($grey-medium, 'canceled')
@include colorDashboardTiles(#bfb502, 'started', #e5da3f)
@include colorDashboardTiles(#bfb502, 'queued', #e5da3f)
@include colorDashboardTiles(#bfb502, 'booting', #e5da3f)
@include colorDashboardTiles(#bfb502, 'received', #e5da3f)
@include colorDashboardTiles(#bfb502, 'created', #e5da3f)