[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

library-css/card.scss

@@ -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);
+}

library-css/portal.scss

@@ -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);