Fix sidebar elements appearance

This commit is contained in:
Vitor Mateus 2019-02-07 15:49:14 -02:00
parent 6413565b05
commit 1f667c6f59
3 changed files with 37 additions and 31 deletions

View File

@ -1,29 +1,26 @@
@import "../styles.scss";
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/variables/typography";
.chatListItem {
@extend %list-item;
cursor: pointer;
padding: 0;
text-decoration: none;
flex-grow: 1;
line-height: 2;
color: var(--color-gray-dark);
background-color: var(--color-off-white);
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
}
.chatListItemLink {
display: flex;
flex-grow: 1;
align-items: center;
text-decoration: none;
padding-left: calc(var(--sm-padding-x) / 2);
padding-right: var(--sm-padding-x);
padding-top: var(--sm-padding-y);
padding-bottom: var(--sm-padding-y);
width: 100%;
.chatListItem:first-child > & {
padding-top: calc(var(--sm-padding-y) * 1.85);
padding-bottom: calc(var(--sm-padding-y) * 1.85);
}
}
.chatIcon {
@ -31,8 +28,8 @@
}
.chatName {
@extend %flex-column;
@extend %text-elipsis;
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
}
@ -40,14 +37,14 @@
.chatNameMain {
@extend %no-margin;
@extend %text-elipsis;
font-size: 0.9rem;
font-weight: 400;
margin-left: var(--sm-padding-x);
margin-right: var(--sm-padding-x);
position: relative;
top: var(--md-padding-y);
padding: .5rem 0;
margin-top: -.5rem;
font-size: var(--font-size-small);
color: var(--color-gray-dark);
flex-grow: 1;
line-height: 2;
text-align: left;
padding-left: var(--lg-padding-y);
text-overflow: ellipsis;
}
.active {

View File

@ -2,18 +2,20 @@
@import "/imports/ui/stylesheets/mixins/_scrollable";
@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/variables/typography";
.smallTitle {
@extend .smallTitle;
margin-bottom: var(--lg-padding-y);
margin-top: var(--sm-padding-x);
}
.BreakoutRoomsContents {
flex-grow: 0;
display: flex;
flex-flow: row;
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
align-items: center;
}
.BreakoutRoomsIcon {
@ -29,17 +31,23 @@
.BreakoutRoomsText {
@extend %flex-column;
min-width: 0;
flex-grow: 1;
margin-left: var(--sm-padding-x);
justify-content: center;
@extend %no-margin;
@extend %text-elipsis;
font-weight: 400;
font-size: var(--font-size-small);
color: var(--color-gray-dark);
flex-grow: 1;
line-height: 2;
text-align: left;
padding-left: var(--lg-padding-y);
text-overflow: ellipsis;
}
.BreakoutRoomsItem {
@extend %list-item;
margin-left: 0.375rem;
margin-left: var(--md-padding-y);
padding-top: var(--lg-padding-y);
padding-bottom: var(--lg-padding-y);
padding-left: var(--lg-padding-y);
}

View File

@ -1,5 +1,6 @@
@import "../../styles.scss";
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/variables/typography";
.smallTitle {
font-size: var(--font-size-small);
@ -7,18 +8,18 @@
text-transform: uppercase;
padding: 0 var(--sm-padding-x);
color: var(--color-gray-light);
margin-bottom: var(--sm-padding-x);
margin-bottom: var(--lg-padding-y);
margin-top: var(--sm-padding-x);
}
.scrollableList {
margin-left: 0.45rem;
margin-bottom: 1px;
margin-left: var(--md-padding-y);
outline: none;
}
.noteLink {
@extend %list-item;
align-items: center;
cursor: pointer;
display: flex;
@ -41,9 +42,9 @@
}
> span {
font-size: 0.9rem;
font-weight: 400;
color: black;
font-size: var(--font-size-small);
color: var(--color-gray-dark);
position: relative;
flex-grow: 1;
line-height: 2;