diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass index db5c02d..6c8e90a 100644 --- a/src/styles/_app_base.sass +++ b/src/styles/_app_base.sass @@ -4,18 +4,75 @@ body left: 0 right: 0 bottom: 0 + background-color: $color-background-light #app-main display: flex align-items: stretch 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 left: $sidebar-width + 5 top: initial bottom: 40px box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25) + +/* Sidebar */ nav.sidebar position: fixed z-index: 1 @@ -86,62 +143,6 @@ nav.sidebar span 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 display: flex