Carbon/src/sass/components/groups.sass

100 lines
2.0 KiB
Sass

@use "../colors" as c
@use "./rooms" as rooms
$icon-size: 48px
$icon-padding: 8px
$base-width: $icon-size + $icon_padding * 4
$out-width: $base-width + rooms.$list-width
.c-groups
position: relative
width: $base-width
flex-shrink: 0
font-size: 22px
font-weight: 500
&__display
background-color: c.$darkest
overflow: hidden
width: $base-width
position: absolute
left: 0
top: 0
bottom: 0
right: 0
transition: width ease-out 0.12s
scrollbar-width: thin
scrollbar-color: c.$milder c.$darkest
&:not(&--closed):hover
width: $out-width
overflow-y: auto
&__container
width: $out-width
padding: $icon-padding
box-sizing: border-box
.c-group
position: relative
display: flex
align-items: center
padding: $icon-padding / 2 $icon-padding
cursor: pointer
border-radius: 8px
background-color: c.$darkest
&:hover
background-color: c.$darker
&__icon
width: $icon-size
height: $icon-size
background-color: c.$mild
border-radius: 50%
margin-right: $icon-padding * 2
flex-shrink: 0
transition: border-radius ease-out 0.12s
&--active &__icon
border-radius: 28%
&__name
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
&__number
position: absolute
right: 240px
bottom: 0px
background: #ddd
color: #000
font-size: 14px
line-height: 1
padding: 3px 4px
border-radius: 7px
border: 3px solid c.$darkest
opacity: 0
transform: translate(6px, 6px)
transition: transform 0.15s ease-out, opacity 0.15s ease-out
pointer-events: none
@at-root .c-group:hover &
border-color: c.$darker
&--active
opacity: 1
transform: translate(0px, 0px)
.c-group-marker
position: absolute
top: 5px
opacity: 0
transform: translateY(8px)
transition: transform ease 0.12s, opacity ease-out 0.12s
height: $icon-size - 2px
width: 6px
background-color: #ccc
border-radius: 0px 6px 6px 0px