fix scrollpageheader, make min-, sidebar- and navigation-width into variables

This commit is contained in:
Felix Niklas 2015-06-01 17:08:38 +02:00
parent 8c651959a8
commit 731338edc7

View file

@ -4,6 +4,10 @@ $ok-color: hsl(41,100%,49%);
$bad-color: hsl(30,93%,50%); $bad-color: hsl(30,93%,50%);
$superbad-color: hsl(19,90%,51%); $superbad-color: hsl(19,90%,51%);
$minWidth: 1024px;
$sidebarWidth: 280px;
$navigationWidth: 260px;
html { html {
height: 100%; height: 100%;
} }
@ -46,7 +50,7 @@ blockquote {
#app { #app {
display: flex; display: flex;
min-width: 1024px; min-width: $minWidth;
height: 100%; height: 100%;
} }
@ -1516,7 +1520,7 @@ footer {
} }
.navigation { .navigation {
width: 260px; width: $navigationWidth;
background: hsl(232,10%,16%); background: hsl(232,10%,16%);
position: relative; position: relative;
} }
@ -2096,7 +2100,7 @@ footer {
.NavBarAdmin.sidebar { .NavBarAdmin.sidebar {
padding-top: 1px; padding-top: 1px;
width: 280px; width: $sidebarWidth;
} }
.NavBarAdmin h2 { .NavBarAdmin h2 {
margin: 21px 0 12px; margin: 21px 0 12px;
@ -3420,7 +3424,7 @@ footer {
} }
.tabsSidebar-sidebarSpacer { .tabsSidebar-sidebarSpacer {
margin-right: 280px; margin-right: $sidebarWidth;
transition: margin 500ms; transition: margin 500ms;
} }
@ -3429,7 +3433,7 @@ footer {
} }
.tabsSidebar-sidebarSpacer.is-closed .scrollPageHeader { .tabsSidebar-sidebarSpacer.is-closed .scrollPageHeader {
@extend .tabsSidebar-sidebarSpacer.is-closed; margin-right: 0;
} }
.tabsSidebar-holder { .tabsSidebar-holder {
@ -3441,7 +3445,7 @@ footer {
} }
.tabsSidebar .sidebar { .tabsSidebar .sidebar {
width: 280px; width: $sidebarWidth;
border-left: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;
padding: 0; padding: 0;
} }
@ -3524,7 +3528,7 @@ footer {
} }
.tabsSidebar.is-closed { .tabsSidebar.is-closed {
transform: translateX(280px); transform: translateX($sidebarWidth);
} }
.tabsSidebar-tabs { .tabsSidebar-tabs {
@ -4381,17 +4385,18 @@ footer {
} }
.scrollPageHeader { .scrollPageHeader {
@extend .tabsSidebar-sidebarSpacer, .zIndex-6; @extend .zIndex-6;
display: flex; display: flex;
align-items: center; align-items: center;
background: white; background: white;
border-bottom: 1px solid hsl(0,0%,78%); border-bottom: 1px solid hsl(0,0%,78%);
height: 64px; height: 64px;
left: 260px; top: 0;
left: $navigationWidth;
right: $sidebarWidth;
padding: 0 22px; padding: 0 22px;
position: fixed; position: fixed;
right: 0; min-width: $minWidth - $navigationWidth - $sidebarWidth;
top: 0;
transform: translateY(-64px); transform: translateY(-64px);
} }