travis-web/assets/styles/layout.sass
Piotr Sarnacki 803c7d0278 Fix flex CSS
We used flex CSS features from both old and new specification.
Furthermore, we weren't using moz and ms prefixes for a new model, which
may have also made it worse in IE and Firefox.

This commit changes CSS to use new flexbox implementation with all the
prefixes (which should not be needed for current versions, but it won't
hurt to keep them for a while).
2014-01-29 14:35:59 +01:00

76 lines
1.4 KiB
Sass

@import "_mixins/all"
$left-width: 250px
@mixin display-flex
display: -webkit-flex
display: -moz-flex
display: -ms-flexbox
display: flex
@mixin flex($grow, $shrink, $size)
-ms-flex: $grow $shrink $size
-webkit-flex: $grow $shrink $size
-moz-flex: $grow $shrink $size
flex: $grow $shrink $size
html, body
height: 100%
.application
position: relative
width: 100%
min-height: 100%
margin-top: 40px
@include display-flex
#top
position: absolute
top: -40px
left: 0
width: 100%
min-width: 930px
height: 55px
z-index: 1000
#left, #right
position: relative
min-height: 100%
@include flex(0, 0, 25em)
#left
padding: 0 0 110px 0
background-color: #fbfbfa
border-right: 1px solid $color-border-normal
@media screen and (max-width: 980px)
#left
max-width: 300px
#main
-webkit-flex: 1
-moz-flex: 1
-ms-flex: 1
flex: 1
position: relative
min-width: 539px
padding: 20px 40px 80px 30px
@media screen and (max-width: 1400px)
#left .duration_label
display: inline-block
width: 11px
height: 14px
margin-right: 1px
text-indent: -200px
overflow: hidden
background: inline-image('ui/clock.png') no-repeat 0px 3px
@media screen and (max-width: 1310px)
#left .finished_at_label
display: none
@media screen and (max-width: 1310px)
table#builds .committer
display: none