87 lines
1.9 KiB
SCSS
87 lines
1.9 KiB
SCSS
.uk-card .uk-grid-divider>:not(.uk-first-column)::before {
|
|
border-left: 1px solid currentColor;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.uk-card .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
|
|
border-top: 1px solid currentColor;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.uk-card .uk-button.action, .uk-card .uk-icon-button.action {
|
|
background: #FFFFFF;
|
|
box-shadow: 0 3px 6px #00000029;
|
|
font-family: "Roboto", sans-serif;
|
|
border: none;
|
|
color: #4D4D4D;
|
|
text-transform: none;
|
|
line-height: 19px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.uk-card .uk-button.action {
|
|
border-radius: 40px;
|
|
padding: 12px 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.uk-card .uk-button.action.uk-width-auto {
|
|
width: auto;
|
|
}
|
|
|
|
.uk-card .uk-button.action:disabled, .uk-card .uk-icon-button.action:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.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: 430px;
|
|
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;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.uk-card.disabled {
|
|
box-shadow: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|