Gaboule/chat
1
0
Fork 0
Code Issues Pull requests Activity

Add rooms category component

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-03 18:36:09 +05:30
commit 699f67aa75
2 changed files with 146 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/app/organisms/navigation/RoomsCategory.scss Normal file
View file

@ -0,0 +1,54 @@
@use '../../partials/flex';
@use '../../partials/dir';
@use '../../partials/text';
.room-category {
&__header,
&__toggle {
display: flex;
align-items: center;
}
&__header {
margin-top: var(--sp-extra-tight);
& .ic-btn {
padding: var(--sp-ultra-tight);
border-radius: 4px;
@include dir.side(margin, 0, 5px);
& .ic-raw {
width: 16px;
height: 16px;
background-color: var(--ic-surface-low);
}
}
}
&__toggle {
@extend .cp-fx__item-one;
padding: var(--sp-extra-tight) var(--sp-tight);
cursor: pointer;
& .ic-raw {
flex-shrink: 0;
width: 12px;
height: 12px;
background-color: var(--ic-surface-low);
@include dir.side(margin, 0, var(--sp-ultra-tight));
}
& .text {
text-transform: uppercase;
@extend .cp-txt__ellipsis;
}
&:hover .text {
color: var(--tc-surface-normal);
}
}
&__content:first-child {
margin-top: var(--sp-extra-tight);
}
& .room-selector {
width: calc(100% - var(--sp-extra-tight));
@include dir.side(margin, auto, 0);
}
}