[Library | Assets]: Add flip card css

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/assets@60865 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-04-15 14:39:04 +00:00
parent 1d649f56e4
commit b2c080580e
2 changed files with 45 additions and 2 deletions

View File

@ -36,3 +36,42 @@
.uk-card .uk-button.action:hover:not(:disabled), .uk-card .uk-icon-button.action:hover:not(:disabled) { .uk-card .uk-button.action:hover:not(:disabled), .uk-card .uk-icon-button.action:hover:not(:disabled) {
box-shadow: 0 3px 6px rgba(71, 135, 230, 0.5); box-shadow: 0 3px 6px rgba(71, 135, 230, 0.5);
} }
/* --- Flip Card --- */
.uk-card.uk-card-flip {
background-color: transparent;
height: 420px;
perspective: 1000px;
}
/* This container is needed to position the front and back side */
.uk-card-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.uk-card.uk-card-flip.uk-active .uk-card-flip-inner {
transform: rotateY(-180deg);
}
/* Position the front and back side */
.uk-card.uk-card-flip .front, .uk-card.uk-card-flip .back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.uk-card.uk-card-flip .front {
background-color: white;
}
/* Style the back side */
.uk-card.uk-card-flip .back {
background-color: white;
transform: rotateY(180deg);
}

View File

@ -55,13 +55,17 @@
/* Link */ /* Link */
.portal-link { .portal-link {
color: var(--portal-main-color) !important; color: var(--portal-main-color);
} }
.portal-link:hover { .portal-link:hover:not(.uk-icon-link), .portal-link:active:not(.uk-icon-link), .portal-link:focus:not(.uk-icon-link) {
text-decoration: underline !important; text-decoration: underline !important;
} }
.portal-link.uk-icon-link:hover, .portal-link.uk-icon-link:active, .portal-link.uk-icon-link:focus {
color: var(--portal-dark-color);
}
/* Icon */ /* Icon */
.portal-icon svg > * { .portal-icon svg > * {
fill: var(--portal-main-color); fill: var(--portal-main-color);