v1/UI/src/components/role-picker/RolePicker.sass

72 lines
No EOL
1.3 KiB
Sass

.role-picker
transition: opacity 0.3s ease-in-out
opacity: 1
&.hidden
opacity: 0
&__categories
display: flex
align-items: flex-start
flex-wrap: wrap
flex-direction: row
margin-top: -5px;
padding-top: 5px;
&__category
// flex: 1 3 33%
box-sizing: border-box
background-color: var(--c-1)
padding: 15px
margin: 10px
min-width: 220px - 30px
&__header
display: flex
align-items: center
justify-content: left
color: var(--c-7)
&.sticky
position: sticky
top: 0px
background-color: var(--c-3)
z-index: 10
svg
transition: transform 0.05s ease-in-out
transform: translateZ(0)
&:hover
transform: translateZ(0) scale(1.1)
color: var(--c-9)
h3
margin: 0
margin-right: 10px
&__spacer
flex: 1
&__actions
opacity: 1
transition: opacity 0.3s ease-in-out
padding: 10px
button
margin-left: 5px
&.hidden
opacity: 0
// display: none
&__msg-editor
background-color: rgba(0,0,0,0.2)
border-color: rgba(0,0,0,0.1)
color: var(--c-white)
margin: 10px 0
&:focus, &:active
color: var(--c-white)
background-color: rgba(0,0,0,0.2)
border-color: var(--c-7)