diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index f2579926847..4825b204472 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -220,3 +220,5 @@ $btn-padding-y-lg: .75rem !default; $btn-border-radius: 1px; +// sidemenu +$side-menu-width: 15rem; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 960099cd9fa..e4f94fd1715 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -1,5 +1,3 @@ -$sideMenuWidth: 220px; - .sidemenu-canvas { position: relative; } @@ -8,7 +6,7 @@ $sideMenuWidth: 220px; position: absolute; top: 52px; left: 0; - width: $sideMenuWidth; + width: $side-menu-width; background-color: $body-bg; z-index: 101; transform: translate3d(0, -100%, 0); @@ -32,17 +30,15 @@ $sideMenuWidth: 220px; min-height: calc(100% - 54px); } .dashboard-container { - padding-left: $sideMenuWidth; + padding-left: $side-menu-width; } .page-container { - margin-left: 195px; - padding-left: 77px; + margin-left: $side-menu-width; } .top-nav-menu-btn { a { background-color: $page-bg; - padding-right: 67px; - padding-left: 22px; + width: $side-menu-width; } .icon-gf-grafana_wordmark { display: inline-block; @@ -71,7 +67,7 @@ $sideMenuWidth: 220px; .dropdown-menu { display: block; top: 0px; - left: $sideMenuWidth; + left: $side-menu-width; background-color: $body-bg; } } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index dc64e1b8eb4..48c4e33b5df 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -4,15 +4,11 @@ } .dashboard-container { - padding: 5px 5px; + padding: $spacer / 2; width: 100%; - box-sizing: border-box; } .main-view { - // background-image: url(/img/grafana_pattern.png); - // background-position: 100% -550px; - // background-repeat: no-repeat; height: 100%; } @@ -33,7 +29,7 @@ } .page-header { - padding: $spacer 0; + padding: $spacer 0 $spacer/2 0; display: flex; justify-content: flex-end; @@ -59,7 +55,7 @@ .page-heading { font-size: 1.25rem; margin-top: 0; - margin-bottom: $spacer * 0.6; + margin-bottom: $spacer * 0.7; } .admin-page {