
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).
76 lines
1.4 KiB
Sass
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
|