milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make login card scalable on focus (#535)

Browse source 
* Make login card scalable on focus
* Remove focus related classes
This commit is contained in:
Dmitry Lyzo 2019-11-11 12:28:27 +03:00 • committed by Vasily
parent 9c47f8fc1c
commit ad8fe23ef8
17 changed files with 131 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/cardbuilder/card.css
View file

@ -26,7 +26,7 @@ button {
font-weight: inherit !important;
}
.card-nofocustransform {
.card:not(.show-animation) {
contain: layout style paint;
}
@ -98,20 +98,21 @@ button {
contain: layout style;
}
.cardBox-withfocuscontent-large {
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
}
.card-focuscontent-large {
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: .5em solid transparent;
}
.cardBox-focustransform {
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card:focus > .cardBox-focustransform {
.card.show-animation:focus > .cardBox {
transform: scale(1.18, 1.18);
}