KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #122 from kirillarutyunov/codeclimate-76-issue-sidemenu-scss

Browse source 
Codeclimate #76 issue _sidemenu.scss
@kirillarutyunov Thanks for the PR's. We are sending stickers to our lovely contributors.
Please drop your details here for us to get in touch with you. We will start shipping it by the end of October.
This commit is contained in:
Nithin David Thomas 2019-10-07 20:41:47 +05:30 committed by GitHub
commit 0daeeb1361
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 105 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

198
app/javascript/src/assets/scss/widgets/_sidemenu.scss
View file

@ -1,120 +1,132 @@
.side-menu {
i {
min-width: 2rem;
min-width: 2rem;
}
}
.sidebar {
width: $nav-bar-width;
z-index: 1024 - 1;
overflow-x: hidden;
@include border-normal-right;
@include background-white;
@include full-height;
@include margin(0);
@include space-between-column;
overflow-x: hidden;
width: $nav-bar-width;
z-index: 1024 - 1;
//logo
.logo {
img {
@include padding($woot-logo-padding);
// width: $woot-logo-width;
// height: $woot-logo-height;
@include padding($woot-logo-padding);
}
}
.main-nav {
@include flex-weight(1);
padding: 0 $space-medium - $space-one;
@include scroll-on-hover;
a {
border-radius: $space-smaller;
color: $color-gray;
font-size: $font-size-default;
border-radius: $space-smaller;
&:before {
margin-right: $space-slab;
}
}
.menu-title {
font-size: $font-size-medium;
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 space-between-column;
@include padding($space-one $space-normal $space-one $space-one);
@include flex-direction(column);
@include border-normal-top;
position: relative;
.current-user {
@include flex;
@include flex-direction(row);
cursor: pointer;
.current-user--thumbnail {
width: $space-large;
height: $space-large;
@include round-corner();
}
.current-user--data {
@include flex;
@include flex-direction(column);
.current-user--name {
font-size: $font-size-small;
font-weight: $font-weight-medium;
margin-bottom: $zero;
margin-left: $space-one;
margin-top: $space-micro;
line-height: 1;
}
.current-user--role {
font-size: $font-size-mini;
margin-left: $space-one;
margin-bottom: $zero;
color: $color-gray;
}
}
.current-user--options {
margin-left: auto;
font-size: $font-size-big;
margin-top: auto;
margin-bottom: auto;
}
}
.dropdown-pane {
@include elegant-card;
top: -160%;
left: 18%;
width: 80%;
@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;
}
}
}
// bottom-nav
.bottom-nav {
@include flex;
@include space-between-column;
@include padding($space-one $space-normal $space-one $space-one);
@include flex-direction(column);
@include border-normal-top;
position: relative;
.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-direction(row);
cursor: pointer;
.current-user--thumbnail {
@include round-corner();
height: $space-large;
width: $space-large;
}
.current-user--data {
@include flex;
@include flex-direction(column);
.current-user--name {
font-size: $font-size-small;
font-weight: $font-weight-medium;
line-height: 1;
margin-bottom: $zero;
margin-left: $space-one;
margin-top: $space-micro;
}
.current-user--role {
color: $color-gray;
font-size: $font-size-mini;
margin-bottom: $zero;
margin-left: $space-one;
}
}
.current-user--options {
font-size: $font-size-big;
margin-bottom: auto;
margin-left: auto;
margin-top: auto;
}
}