archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

Fix background colors being clipped

Browse Source
This commit is contained in:
Pablo Vazquez
2016-10-20 18:22:58 +02:00
parent 471cbd17ba
commit c50ebfd4b9
1 changed files with 57 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/styles/_app_base.sass
View File

@@ -4,18 +4,75 @@ body
left: 0 left: 0
right: 0 right: 0
bottom: 0 bottom: 0
background-color: $color-background-light
#app-main #app-main
display: flex display: flex
align-items: stretch align-items: stretch
height: 100% height: 100%
#col_sidebar
width: $sidebar-width
min-width: $sidebar-width
#col_left, #col_main, #col_right
display: flex
flex-direction: column
position: relative
flex: 0 0 auto
height: 100%
min-width: 150px
#col_main
background-color: white
border-right: thin solid $color-background-dark
width: 50% // gets overriden by JS, dragging the col-splitter
#col_right
flex: 1 1 auto
.col_header
position: relative
display: flex
align-items: center
width: 100%
min-height: 50px
background-color: white
padding: 10px 15px
font-size: 1.2em
border-bottom: thin solid $color-background
&.scrolled
box-shadow: 0 -2px 20px rgba(black, .2)
.header_text::first-letter
text-transform: capitalize
.col-list-item
display: flex
align-items: center
width: 100%
background-color: white
border-bottom: thin solid $color-background
.col-splitter
flex: 0 0 auto
width: 8px
background-color: $color-background
min-height: 200px
cursor: col-resize
position: relative
z-index: 1
.flyout.notifications .flyout.notifications
left: $sidebar-width + 5 left: $sidebar-width + 5
top: initial top: initial
bottom: 40px bottom: 40px
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25) box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
/* Sidebar */
nav.sidebar nav.sidebar
position: fixed position: fixed
z-index: 1 z-index: 1
@@ -86,62 +143,6 @@ nav.sidebar
span span
top: 1px top: 1px
#col_sidebar
width: $sidebar-width
min-width: $sidebar-width
#col_left, #col_main, #col_right
display: flex
flex-direction: column
position: relative
flex: 0 0 auto
height: 100%
min-width: 150px
#col_main
background-color: white
border-right: thin solid $color-background-dark
width: 50% // gets overriden by JS, dragging the col-splitter
#col_right
background-color: $color-background-light
flex: 1 1 auto
.col_header
position: relative
display: flex
align-items: center
width: 100%
min-height: 50px
background-color: white
padding: 10px 15px
font-size: 1.2em
border-bottom: thin solid $color-background
&.scrolled
box-shadow: 0 -2px 20px rgba(black, .2)
.header_text::first-letter
text-transform: capitalize
.col-list-item
display: flex
align-items: center
width: 100%
background-color: white
border-bottom: thin solid $color-background
.col-splitter
flex: 0 0 auto
width: 8px
background-color: $color-background
min-height: 200px
cursor: col-resize
position: relative
z-index: 1
.input-group-flex .input-group-flex
display: flex display: flex