95 lines
1.4 KiB
SCSS
Vendored
95 lines
1.4 KiB
SCSS
Vendored
// Elements
|
|
|
|
.text-shadow {
|
|
text-shadow: 1px 1px 2px #000;
|
|
}
|
|
|
|
.left-8 {
|
|
left: 2rem;
|
|
}
|
|
|
|
.left-80 {
|
|
left: 20rem;
|
|
}
|
|
|
|
.-bottom-12 {
|
|
bottom: -3rem;
|
|
}
|
|
|
|
.max-h-64 {
|
|
max-height: 16rem;
|
|
}
|
|
|
|
.page-title {
|
|
@apply text-3xl font-bold text-orange-900;
|
|
}
|
|
|
|
a {
|
|
@apply text-orange-700;
|
|
|
|
&:hover {
|
|
@apply text-orange-900;
|
|
}
|
|
}
|
|
|
|
$modal-duration: 1s;
|
|
|
|
.modal-container {
|
|
@apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
|
|
}
|
|
|
|
.modal {
|
|
@apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 400px;
|
|
animation-name: modalopen;
|
|
animation-duration: $modal-duration;
|
|
}
|
|
|
|
.box-toggle {
|
|
@apply shadow;
|
|
|
|
&-header {
|
|
@apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
|
|
|
|
svg {
|
|
@apply w-8 text-orange-600 fill-current;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
transform: rotate(270deg);
|
|
transition: transform 0.3s;
|
|
|
|
&.open {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@apply bg-orange-300 rounded;
|
|
|
|
svg {
|
|
@apply max-w-full max-h-64 m-auto fill-current;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-2xl text-center font-bold;
|
|
}
|
|
|
|
&:hover {
|
|
@apply bg-orange-500;
|
|
|
|
h2 {
|
|
@apply text-orange-700;
|
|
}
|
|
}
|
|
}
|