forked from OpenNeo/impress
Copy selected/focus face picker styles from Impress 2020
This commit is contained in:
parent
a88fc14bd7
commit
77ff55353c
1 changed files with 37 additions and 3 deletions
|
@ -165,9 +165,41 @@ body.items-show
|
||||||
display: block
|
display: block
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
|
species-face-picker-options
|
||||||
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
|
|
||||||
img
|
img
|
||||||
width: 50px
|
width: 50px
|
||||||
height: 50px
|
height: 50px
|
||||||
|
transition: all 0.2s
|
||||||
|
|
||||||
|
// Calm down the default color, just a smidge! There's a lot of color
|
||||||
|
// on this page already, y'know?
|
||||||
|
opacity: .9
|
||||||
|
filter: saturate(90%)
|
||||||
|
|
||||||
|
label
|
||||||
|
display: flex
|
||||||
|
overflow: hidden
|
||||||
|
transition: all 0.2s
|
||||||
|
position: relative
|
||||||
|
line-height: 1
|
||||||
|
|
||||||
|
// NOTE: The box-shadows here were copy-pasted from Impress 2020, which uses
|
||||||
|
// Chakra UI's styling system to generate them! (The colors are from their
|
||||||
|
// color palette, too.)
|
||||||
|
&:has(input:checked)
|
||||||
|
border-radius: 6px
|
||||||
|
z-index: 1
|
||||||
|
background: #9AE6B4
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #2F855A 0 0 2px 2px
|
||||||
|
transform: scale(1.1)
|
||||||
|
|
||||||
|
&:has(input:focus)
|
||||||
|
background: #BEE3F8
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #4299e1 0 0 0 3px
|
||||||
|
transform: scale(1.2)
|
||||||
|
|
||||||
input[type=radio]
|
input[type=radio]
|
||||||
position: absolute
|
position: absolute
|
||||||
|
@ -177,11 +209,13 @@ body.items-show
|
||||||
height: 1px
|
height: 1px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
&:not(:checked) + img
|
&:checked + img
|
||||||
opacity: .5
|
opacity: 1
|
||||||
|
filter: saturate(110%)
|
||||||
|
|
||||||
&:disabled + img
|
&:disabled + img
|
||||||
filter: grayscale(1)
|
opacity: .6
|
||||||
|
filter: saturate(0%)
|
||||||
|
|
||||||
label:has(input[type=radio]:disabled)
|
label:has(input[type=radio]:disabled)
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
|
|
Loading…
Reference in a new issue