mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 04:09:12 +00:00
56 lines
No EOL
1.5 KiB
Sass
56 lines
No EOL
1.5 KiB
Sass
.role
|
|
border: 1px solid var(--role-color-rgba)
|
|
border-radius: 32px
|
|
box-sizing: border-box
|
|
height: 32px
|
|
margin: 0 6px 6px 0
|
|
padding: 4px
|
|
display: inline-flex
|
|
font-weight: 600
|
|
align-content: center
|
|
justify-content: center
|
|
font-size: 16px
|
|
vertical-align: baseline
|
|
transition: border-color 0.2s ease-in-out
|
|
|
|
&:hover
|
|
.role__option
|
|
transform: translateY(-1px)
|
|
box-shadow: 0 1px 1px var(--c-dark)
|
|
border-color: var(--role-color-hover)
|
|
background-color: transparent
|
|
&:active
|
|
box-shadow: none
|
|
|
|
&__option
|
|
border-radius: 50%
|
|
height: 22px
|
|
margin-right: 6px
|
|
width: 22px
|
|
box-sizing: border-box
|
|
/* display: inline-block */
|
|
background-color: transparent
|
|
overflow: hidden
|
|
border: 1px solid var(--role-color-hex)
|
|
transition: background-color 0.1s ease-in-out, border-left-width 0.3s ease-in-out, border-right-width 0.5s ease-in-out, border-color 0.1s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-out
|
|
|
|
&.selected
|
|
background-color: var(--role-color-hex)
|
|
|
|
// This **must** be width-1, otherwise blink adds width to the boundaries.
|
|
border-left-width: 21px
|
|
|
|
&:hover
|
|
cursor: pointer
|
|
|
|
|
|
&__name
|
|
margin-right: 6px
|
|
max-width: 200px
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
user-select: none
|
|
|
|
.role__option:active, .role:active .role__option:not(:active)
|
|
transform: translateY(0) !important |