Files
soft_usite/resources/src/sass/vendor.scss
T
2025-04-24 02:07:47 +00:00

97 lines
1.7 KiB
SCSS
Executable File

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
.bg-accent {
background-color: #f3f5f9;
}
.bg-primary {
background-color: #006aff;
}
.transition-basic {
@apply transition-colors duration-200 ease-in;
}
.shadow-primary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.shadow-dropdown {
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 1px rgba(0, 0, 0, 0.15);
}
@tailwind utilities;
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.2s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* used for dropdown */
.slide-in-up-enter-active,
.slide-in-up-leave-active {
transition-duration: 250ms;
transition-property: transform, visibility, opacity;
transition-timing-function: ease-in;
transform: translate3d(0, 0, 0);
}
.slide-in-up-enter,
.slide-in-up-leave-active {
transform: translate3d(0, 50%, 0);
opacity: 0;
}
/* bounce in up */
.bounce-in-up-enter-active {
animation: bounceInUp 1s;
}
/* .bounce-in-up-leave-active { */
/* animation: bounceInUp 0.5s reverse; */
/* } */
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}