diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss index 7cb5a94..438191b 100644 --- a/gadjo/static/css/gadjo.scss +++ b/gadjo/static/css/gadjo.scss @@ -7,8 +7,9 @@ $sidepage-background: #23282d url(texture.png); $sidepage-background: white; $sidepage-left-space: 36px; $sidepage-icon-width: 36px; -$sidepage-width: 16rem; +$sidepage-width: 210px; $header-height: 60px; +$sidepage-border-width: 4px; // bleus @@ -175,7 +176,7 @@ div#header { div#header h1 { height: $header-height; line-height: $header-height; - padding: 0 0 0 calc(#{$sidepage-width} + 5px + 1rem); + padding: 0 0 0 $sidepage-width + $sidepage-left-space; margin: 0; font-weight: normal; color: white; @@ -786,7 +787,7 @@ body[data-has-sidepage] #main { } body.sidepage-expanded #main { - margin-left: calc(#{$sidepage-left-space} + #{$sidepage-width}); + margin-left: calc(#{$sidepage-icon-width} + #{$sidepage-width}); } body.enable-transitions { @@ -804,7 +805,7 @@ body.enable-transitions { body.sidepage-expanded #sidepage { height: 100%; overflow: initial; - width: calc(#{$sidepage-width} + 3px); + width: $sidepage-width + $sidepage-icon-width - $sidepage-left-space + $sidepage-border-width / 2; } #sidepage ul#sidepage-menu { @@ -853,7 +854,7 @@ body.sidepage-expanded #sidepage { padding-right: 0; position: absolute; top: 50px; - left: 60px; + right: $sidepage-width - $sidepage-left-space - 10px + $sidepage-border-width / 2; background: $primary-color; color: white; height: 20px; @@ -867,7 +868,7 @@ body.sidepage-expanded #sidepage { } body.sidepage-expanded #sidepage span#applabel::before { - left: calc(27px + #{$sidepage-width}); + right: -10px; transform: rotate(180deg); } @@ -885,7 +886,7 @@ body.sidepage-expanded #sidepage span#applabel { min-height: 100%; min-height: calc(100% - $header-height - 1px); /* #top 40px + border 1px */ box-sizing: border-box; - border-right: 5px solid $primary-color; + border-right: $sidepage-border-width solid $primary-color; @include vendor-prefix('transition', 'all 0ms ease'); &::before { content: ""; @@ -915,12 +916,12 @@ body.sidepage-expanded #sidepage span#applabel { #sidepage ul#sidepage-menu li { position: relative; - line-height: 24px; + line-height: $sidepage-icon-width * 2 / 3; } ul#sidepage-menu li a { - background: transparent no-repeat 6px 50%; - padding: 5px 0 5px 37px; + background: transparent no-repeat $sidepage-icon-width / 2 - 12px 50%; + padding: 5px 0 5px $sidepage-icon-width + 1px; } #sidepage ul#sidepage-menu li:hover a,