Fix sidebar elements appearance
This commit is contained in:
parent
6413565b05
commit
1f667c6f59
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user