Fix #76 issue codeclimate in app/javascript/src/assets/scss/widgets/_sidemenu.scss

This commit is contained in:
Kirill Arutyunov 2019-10-06 16:02:59 +03:00
parent 9b9aee4657
commit 426ac33acf

View file

@ -4,57 +4,36 @@
} }
} }
.sidebar { .sidebar {
width: $nav-bar-width;
z-index: 1024 - 1;
overflow-x: hidden;
@include border-normal-right; @include border-normal-right;
@include background-white; @include background-white;
@include full-height; @include full-height;
@include margin(0); @include margin(0);
@include space-between-column; @include space-between-column;
overflow-x: hidden;
width: $nav-bar-width;
z-index: 1024 - 1;
//logo //logo
.logo { .logo {
img { img {
@include padding($woot-logo-padding);
// width: $woot-logo-width; // width: $woot-logo-width;
// height: $woot-logo-height; // height: $woot-logo-height;
@include padding($woot-logo-padding);
} }
} }
.main-nav { .main-nav {
@include flex-weight(1);
padding: 0 $space-medium - $space-one;
@include scroll-on-hover;
a { a {
border-radius: $space-smaller;
color: $color-gray; color: $color-gray;
font-size: $font-size-default; font-size: $font-size-default;
border-radius: $space-smaller;
&:before {
margin-right: $space-slab;
} }
} }
}
.menu-title { // bottom-nav
font-size: $font-size-medium; .bottom-nav {
color: $color-gray;
margin-top: $space-medium;
> span {
margin-left: auto;
}
& + ul > li > a{
@include padding($space-micro null);
line-height: $global-lineheight;
color: $medium-gray;
}
}
}
// bottom-nav
.bottom-nav {
@include flex; @include flex;
@include space-between-column; @include space-between-column;
@include padding($space-one $space-normal $space-one $space-one); @include padding($space-one $space-normal $space-one $space-one);
@ -62,59 +41,92 @@
@include border-normal-top; @include border-normal-top;
position: relative; position: relative;
.current-user { .dropdown-pane {
@include elegant-card;
@include border-light;
left: 18%;
top: -160%;
visibility: visible;
width: 80%;
z-index: 999;
&::before {
@include arrow(bottom, $color-white, $space-slab);
bottom: -$space-slab;
position: absolute;
right: $space-slab;
}
}
.active {
border-bottom: 2px solid $medium-gray;
}
}
.main-nav {
@include flex-weight(1);
@include scroll-on-hover;
padding: 0 $space-medium - $space-one;
a {
&::before {
margin-right: $space-slab;
}
}
.menu-title {
color: $color-gray;
font-size: $font-size-medium;
margin-top: $space-medium;
> span {
margin-left: auto;
}
}
}
.menu-title + ul > li > a {
@include padding($space-micro null);
color: $medium-gray;
line-height: $global-lineheight;
}
.current-user {
@include flex; @include flex;
@include flex-direction(row); @include flex-direction(row);
cursor: pointer; cursor: pointer;
.current-user--thumbnail { .current-user--thumbnail {
width: $space-large;
height: $space-large;
@include round-corner(); @include round-corner();
height: $space-large;
width: $space-large;
} }
.current-user--data { .current-user--data {
@include flex; @include flex;
@include flex-direction(column); @include flex-direction(column);
.current-user--name { .current-user--name {
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
line-height: 1;
margin-bottom: $zero; margin-bottom: $zero;
margin-left: $space-one; margin-left: $space-one;
margin-top: $space-micro; margin-top: $space-micro;
line-height: 1;
} }
.current-user--role { .current-user--role {
font-size: $font-size-mini;
margin-left: $space-one;
margin-bottom: $zero;
color: $color-gray; color: $color-gray;
} font-size: $font-size-mini;
} margin-bottom: $zero;
.current-user--options { margin-left: $space-one;
margin-left: auto;
font-size: $font-size-big;
margin-top: auto;
margin-bottom: auto;
} }
} }
.dropdown-pane { .current-user--options {
@include elegant-card; font-size: $font-size-big;
top: -160%; margin-bottom: auto;
left: 18%; margin-left: auto;
width: 80%; margin-top: auto;
@include border-light;
z-index: 999;
visibility: visible;
&:before {
position: absolute;
bottom: -$space-slab;
right: $space-slab;
@include arrow(bottom, $color-white, $space-slab);
}
}
.active {
border-bottom: 2px solid $medium-gray;
}
} }
} }