travis-web/assets/styles/app/layouts/dashboard.sass
2015-02-03 13:00:50 +01:00

347 lines
6.9 KiB
Sass

/*
* Dashboard
* @todo: split into components: filter, search, tiles
*/
@import "app/_mixins/all"
.current-org-avatar
display : inline-block
height : 20px
width : 20px
vertical-align: top
margin : -5px 5px 0 0
#filters-search
background : $white
font-size : 14px
padding : 5px 0 5px 0
max-height : 44px
#filters
float : left
#filters ul
text-align : left
display : inline
margin : 0
padding : 0
list-style : none
z-index : 1000
#filters ul li
background : $white
position : relative
display : inline-block
padding : 10px 0 10px 0
margin-right : -4px
margin-top : 0
cursor : pointer
border-radius : 0px
#filters li.filters-start:hover
background-color : #fff
#filters ul li ul
padding : 0
position : absolute
top : 35px
left : 0
width : 200px
display : none
opacity : 0
visibility : hidden
box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
#filters ul li ul li
display : block
line-height : 23px
padding-left : 20px
#filters ul li ul li:first-child
border-top-left-radius : 4px
border-top-right-radius : 4px
#filters ul li ul li:last-child
border-bottom-left-radius : 4px
border-bottom-right-radius : 4px
#filters ul li ul li div
display : inline-block
width : 20px
height : 20px
margin-right : 5px
text-indent : -9999px
border-radius : 100px
// .org-travisci
// background : url('/images/dashboard/orgs-travisci.png') no-repeat
// background-size : contain
// .org-saltinejustine
// background : url('/images/dashboard/orgs-saltinejustine.png') no-repeat
// background-size : contain
// .org-openkarma
// background : url('/images/dashboard/orgs-openkarma.png') no-repeat
// background-size : contain
// .org-eurucamp
// background : url('/images/dashboard/orgs-eurucamp.png') no-repeat
// background-size : contain
#filters ul li ul li:hover
background : #5e869a
color : $white
#filters ul li:hover ul
display : block
opacity : 1
visibility : visible
#views
float : left
#views ul
text-align : left
display : inline
margin : 0
padding : 0
list-style : none
z-index : 1000
#views ul li
background : $white
position : relative
display : inline-block
padding : 10px 0 10px 0
margin-right : -4px
margin-top : 0
cursor : pointer
border-radius : 0px
-webkit-border-radius : 0px
-moz-border-radius : 0px
#views li.views-start:hover
background-color : #fff
#views ul li ul
padding : 0
position : absolute
top : 35px
left : 0
width : 200px
display : none
opacity : 0
visibility : hidden
box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
#views ul li ul li
display : block
line-height : 23px
padding-left : 20px
#views ul li ul li:first-child
border-top-left-radius : 4px
border-top-right-radius : 4px
#views ul li ul li:last-child
border-bottom-left-radius : 4px
border-bottom-right-radius : 4px
#views ul li ul li:hover
background : #5e869a
color : $white
#views ul li:hover ul
display : block
opacity : 1
visibility : visible
.currently-selected
font-weight : 600
.arrow-down
width : 0
height : 0
display : inline-block
padding-top : 2px
margin-left : 5px
border-left : 5px solid transparent
border-right : 5px solid transparent
border-top : 5px solid #9d9fa1
#search
float : right
#search ul
text-align : left
margin : 0
padding-left : 0
list-style : none
#search ul li
position : relative
display : inline-block
padding : 9px 0 8px 0
margin-top : 0
width : 158px
line-height : 17px
.search-field
background-image : url('/images/dashboard/search-icon.svg')
background-repeat : no-repeat
background-position: right 5px center
display : inline-block
float : right
border : 1px solid #666
padding : 0.5em
width : 300px
background-size : 16px 16px
.tiles
background : #f4f3ea
padding : 30px 0 10px 0
.tile
background : $white
min-height : 125px
color : #9d9fa1
font-size : 14px
margin-bottom : 20px
padding : 0 10px 0 0
border-radius : 4px
.duration
background-image: url('/images/dashboard/time.svg')
background-size : 11px 11px
text-indent : 15px
line-height : 13px
.duration, .finished
margin-top : 8px
background-repeat: no-repeat
background-position: 0 1px
.finished
background-image: url('/images/dashboard/cal.svg')
background-size : 11px 11px
text-indent : 15px
line-height : 14px
.build-status
position: absolute
bottom: 25px
margin-bottom: 0
.build-bar
position: absolute
background:
repeat: no-repeat
position: 7px 10px
size: 20px 20px
min-height : 125px
width : 33px
border-radius : 4px 0 0 4px
.repo a:hover,
.build-status a:hover,
.repo a:active,
.build-status a:active
text-decoration: underline
.repo a:focus,
.build-status a:focus
outline: 1px dotted
.passed
.build-bar
background:
color: $pass-color
image: url('/images/dashboard/status-passed.svg')
.org,
.repo a,
.build-status a
color: $pass-color
.failed
.build-bar
background:
color: $fail-color
image: url('/images/dashboard/status-failed.svg')
.org,
.repo a,
.build-status a
color: $fail-color
.started
.build-bar
background:
color: $start-bg-color
image: url('/images/dashboard/status-pending.svg')
.org,
.repo a,
.build-status a
color: $start-color
.errored
.build-bar
background:
color: $error-color
image: url('/images/dashboard/status-errored.svg')
.org,
.repo a,
.build-status a
color: $error-color
.tile .build-information
padding-left : 45px
padding-top : 8px
.tile .org
margin : 0
.tile .repo
font-size : 20px
display : inline-block
margin : 0
max-width : 250px
white-space : nowrap
line-height : 20px
text-overflow : ellipsis
.tile .star-feature
position : absolute
top : 0
right : 0
background : url('/images/dashboard/star-on.svg') no-repeat 7px 10px
background-size : 20px 20px
.if_private
display : inline-block
background : url('/images/dashboard/private-icon.svg') no-repeat 0 0
background-size : contain
height : 12px
width : 9px
margin-left : 5px
text-indent : -9999px
@media only screen and (min-width: 64.063em)
#top img
margin : -7px 0 0 10px
@media only screen and (min-width: 640px)
#top #status li
display : inline-block
#user p
display : inline-block
#search
float : right