MaDgIK
/
openaire-assets
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
library-css/card.scss
View File

@ -36,3 +36,42 @@
.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);
}
/* --- 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);
}

8
library-css/portal.scss
View File

@ -55,13 +55,17 @@
/* 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;
}
.portal-link.uk-icon-link:hover, .portal-link.uk-icon-link:active, .portal-link.uk-icon-link:focus {
color: var(--portal-dark-color);
}
/* Icon */
.portal-icon svg > * {
fill: var(--portal-main-color);