diff --git a/library-css/card.scss b/library-css/card.scss index e8c06f3..1f89ed0 100644 --- a/library-css/card.scss +++ b/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); +} diff --git a/library-css/portal.scss b/library-css/portal.scss index ae38662..22dca2f 100644 --- a/library-css/portal.scss +++ b/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);