cadence
/
Carbon
3
9
Fork 1
Code Issues 14 Pull Requests 1 Releases Wiki Activity
Carbon/src/sass/components/rooms.sass

66 lines
1.1 KiB
Sass
Raw Normal View History

Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
@use "../colors" as c
$list-width: 240px
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
$icon-size: 32px
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
$icon-padding: 8px
.c-rooms
background-color: c.$darker
padding: $icon-padding
width: $list-width
Sync with matrix and populate rooms list
2020-10-15 09:06:41 +00:00
font-size: 18px
Add messages, chat, and room list animation
2020-10-12 11:19:10 +00:00
font-weight: 500
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
overflow-y: auto
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
scrollbar-width: thin
Add messages, chat, and room list animation
2020-10-12 11:19:10 +00:00
scrollbar-color: c.$darkest c.$darker
flex-shrink: 0
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
.c-room
display: flex
align-items: center
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
padding: $icon-padding * 0.75 $icon-padding
margin: $icon-padding * 0.25 0
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
cursor: pointer
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
border-radius: 8px
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
&:not(&--active):hover
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
background-color: c.$mild
Reactive state for groups and rooms
2020-10-15 03:43:37 +00:00
&--active
background-color: c.$milder
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
&__icon
width: $icon-size
height: $icon-size
margin-right: $icon-padding
border-radius: 50%
flex-shrink: 0
Sync with matrix and populate rooms list
2020-10-15 09:06:41 +00:00
&--no-icon
background-color: #bbb
Groups and rooms list first draft
2020-10-11 13:26:24 +00:00
&__name
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
Display unread/notification counters on rooms
2020-11-24 12:27:41 +00:00
flex: 1
&__number
flex-shrink: 0
line-height: 1
padding: 4px 5px
border-radius: 5px
font-size: 14px
Read marker lines in chat, badges on groups Also fixed stopping typing after sending a message.
2020-11-25 06:54:09 +00:00
pointer-events: none
Display unread/notification counters on rooms
2020-11-24 12:27:41 +00:00
&--none
display: none
&--unreads
background-color: #ddd
color: #111
&--notifications
background-color: #ffac4b
color: #000