117 lines
1.8 KiB
SCSS
Vendored
117 lines
1.8 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;
|
|
}
|
|
|
|
@for $i from 1 through 9 {
|
|
|
|
.bg-primary-#{$i}00 {
|
|
@apply bg-green-#{$i}00;
|
|
}
|
|
|
|
.hover:bg-primary-#{$i}00 {
|
|
@apply bg-green-#{$i}00;
|
|
}
|
|
|
|
.bg-secondary-#{$i}00 {
|
|
@apply bg-blue-#{$i}00;
|
|
}
|
|
|
|
.text-primary-#{$i}00 {
|
|
@apply text-gray-#{$i}00;
|
|
}
|
|
|
|
.hover:text-primary-#{$i}00 {
|
|
@apply text-gray-#{$i}00;
|
|
}
|
|
}
|
|
|
|
.page-title {
|
|
@apply text-3xl font-bold text-primary-900;
|
|
}
|
|
|
|
a {
|
|
@apply text-primary-700;
|
|
|
|
&:hover {
|
|
@apply text-primary-900;
|
|
}
|
|
}
|
|
|
|
.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: 0.5s;
|
|
}
|
|
|
|
.box-toggle {
|
|
@apply shadow;
|
|
|
|
&-header {
|
|
@apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
|
|
|
|
svg {
|
|
@apply w-8 text-primary-600 fill-current;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
transform: rotate(270deg);
|
|
transition: transform 0.3s;
|
|
|
|
&.open {
|
|
//@apply rotate-90;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
@apply px-4 py-2;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@apply bg-primary-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-primary-500;
|
|
|
|
h2 {
|
|
@apply text-primary-700;
|
|
}
|
|
}
|
|
}
|