143 lines
2.1 KiB
SCSS
143 lines
2.1 KiB
SCSS
/* Animations blob pour le fond */
|
|
.view-switcher {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 4px;
|
|
background: #f3f4f6;
|
|
border-radius: 10px;
|
|
|
|
.view-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
color: #374151;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
&.active {
|
|
color: #6366f1;
|
|
background: white;
|
|
box-shadow:
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
|
0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@media (max-width: 768px) {
|
|
.view-switcher {
|
|
.view-btn {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes blob {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(20px, -50px) scale(1.1);
|
|
}
|
|
50% {
|
|
transform: translate(-20px, 20px) scale(0.9);
|
|
}
|
|
75% {
|
|
transform: translate(50px, 50px) scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spinSlow {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-blob {
|
|
animation: blob 7s infinite;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.6s ease-out;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spinSlow 3s linear infinite;
|
|
}
|
|
|
|
.animation-delay-100 {
|
|
animation-delay: 0.1s;
|
|
opacity: 0;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.animation-delay-200 {
|
|
animation-delay: 0.2s;
|
|
opacity: 0;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.animation-delay-300 {
|
|
animation-delay: 0.3s;
|
|
opacity: 0;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|