Mamalizz
328 lines
8.7 KiB
CSS
328 lines
8.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import "./animations.css";
|
|
@import "./other.utils.css";
|
|
@import "./typo.utils.css";
|
|
@import "./button.comp.css";
|
|
@import "./input.comp.css";
|
|
@import "./fonts/iran-yekan-x.css";
|
|
@import "./fonts/morabba.css";
|
|
@import "./fonts/yekan-bakh.css";
|
|
|
|
@theme {
|
|
/* CONTAINER */
|
|
|
|
--app-container-padding: 1rem;
|
|
|
|
/* COLORS */
|
|
--color-slate-50: hsl(210, 40%, 98%);
|
|
--color-slate-100: hsl(210, 40%, 96%);
|
|
--color-slate-200: hsl(214, 32%, 91%);
|
|
--color-slate-300: hsl(213, 27%, 84%);
|
|
--color-slate-400: hsl(215, 20%, 65%);
|
|
--color-slate-500: hsl(215, 16%, 47%);
|
|
--color-slate-600: hsl(215, 19%, 35%);
|
|
--color-slate-700: hsl(215, 25%, 27%);
|
|
--color-slate-800: hsl(217, 33%, 17%);
|
|
--color-slate-900: hsl(222, 47%, 11%);
|
|
--color-slate-950: hsl(229, 84%, 5%);
|
|
|
|
--color-blue-50: hsl(214, 100%, 97%);
|
|
--color-blue-100: hsl(214, 95%, 93%);
|
|
--color-blue-200: hsl(213, 97%, 87%);
|
|
--color-blue-300: hsl(212, 96%, 78%);
|
|
--color-blue-400: hsl(213, 94%, 68%);
|
|
--color-blue-500: hsl(217, 91%, 60%);
|
|
--color-blue-600: hsl(221, 83%, 53%);
|
|
--color-blue-700: hsl(224, 76%, 48%);
|
|
--color-blue-800: hsl(226, 71%, 40%);
|
|
--color-blue-900: hsl(224, 64%, 33%);
|
|
--color-blue-950: hsl(226, 57%, 21%);
|
|
|
|
--color-cyan-50: hsl(183, 100%, 96%);
|
|
--color-cyan-100: hsl(185, 96%, 90%);
|
|
--color-cyan-200: hsl(185, 96%, 90%);
|
|
--color-cyan-300: hsl(187, 92%, 69%);
|
|
--color-cyan-400: hsl(188, 86%, 53%);
|
|
--color-cyan-500: hsl(189, 94%, 43%);
|
|
--color-cyan-600: hsl(192, 91%, 36%);
|
|
--color-cyan-700: hsl(193, 82%, 31%);
|
|
--color-cyan-800: hsl(194, 70%, 27%);
|
|
--color-cyan-900: hsl(196, 64%, 24%);
|
|
--color-cyan-950: hsl(197, 79%, 15%);
|
|
|
|
--color-orange-50: hsl(33, 100%, 96%);
|
|
--color-orange-100: hsl(34, 100%, 92%);
|
|
--color-orange-200: hsl(32, 98%, 83%);
|
|
--color-orange-300: hsl(31, 97%, 72%);
|
|
--color-orange-400: hsl(27, 96%, 61%);
|
|
--color-orange-500: hsl(25, 95%, 53%);
|
|
--color-orange-600: hsl(21, 90%, 48%);
|
|
--color-orange-700: hsl(17, 88%, 40%);
|
|
--color-orange-800: hsl(15, 79%, 34%);
|
|
--color-orange-900: hsl(15, 75%, 28%);
|
|
--color-orange-950: hsl(13, 81%, 15%);
|
|
|
|
--color-success-50: hsl(138, 76%, 97%);
|
|
--color-success-100: hsl(141, 84%, 93%);
|
|
--color-success-200: hsl(141, 79%, 85%);
|
|
--color-success-300: hsl(142, 77%, 73%);
|
|
--color-success-400: hsl(142, 69%, 58%);
|
|
--color-success-500: hsl(142, 71%, 45%);
|
|
--color-success-600: hsl(142, 76%, 36%);
|
|
--color-success-700: hsl(142, 72%, 29%);
|
|
--color-success-800: hsl(143, 64%, 24%);
|
|
--color-success-900: hsl(144, 61%, 20%);
|
|
--color-success-950: hsl(145, 80%, 10%);
|
|
|
|
--color-warning-50: hsl(55, 92%, 95%);
|
|
--color-warning-100: hsl(55, 97%, 88%);
|
|
--color-warning-200: hsl(53, 98%, 77%);
|
|
--color-warning-300: hsl(50, 98%, 64%);
|
|
--color-warning-400: hsl(48, 96%, 53%);
|
|
--color-warning-500: hsl(45, 93%, 47%);
|
|
--color-warning-600: hsl(41, 96%, 40%);
|
|
--color-warning-700: hsl(35, 92%, 33%);
|
|
--color-warning-800: hsl(32, 81%, 29%);
|
|
--color-warning-900: hsl(28, 73%, 26%);
|
|
--color-warning-950: hsl(26, 83%, 14%);
|
|
|
|
--color-danger-50: hsl(0, 86%, 97%);
|
|
--color-danger-100: hsl(0, 93%, 94%);
|
|
--color-danger-200: hsl(0, 96%, 89%);
|
|
--color-danger-300: hsl(0, 94%, 82%);
|
|
--color-danger-400: hsl(0, 91%, 71%);
|
|
--color-danger-500: hsl(0, 84%, 60%);
|
|
--color-danger-600: hsl(0, 72%, 51%);
|
|
--color-danger-700: hsl(0, 74%, 42%);
|
|
--color-danger-800: hsl(0, 70%, 35%);
|
|
--color-danger-900: hsl(0, 63%, 31%);
|
|
--color-danger-950: hsl(0, 75%, 15%);
|
|
|
|
/* BORDER RADIUS */
|
|
--radius-50: 5px;
|
|
--radius-100: 10px;
|
|
--radius-150: 15px;
|
|
--radius-200: 20px;
|
|
--radius-250: 25px;
|
|
--radius-360: 99999999px;
|
|
|
|
/* FONT WEIGHT */
|
|
--font-weight-extrablack: 950;
|
|
--font-weight-heavy: 1000;
|
|
|
|
/* FONT FAMILY */
|
|
--font-lato: "Lato", sans-serif;
|
|
--font-inter: "Inter", sans-serif;
|
|
--font-dmsans: "DM Sans", sans-serif;
|
|
--font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
|
|
--font-yekan-bakh: "YekanBakh", "sans-serif";
|
|
--font-morabba: "Morabba", "sans-serif";
|
|
|
|
/* BREAKPOINTS */
|
|
--breakpoint-3xl: 1700px;
|
|
--breakpoint-2xs: 400px;
|
|
--breakpoint-xs: 480px;
|
|
--breakpoint-sm: 640px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-xl: 1280px;
|
|
--breakpoint-2xl: 1536px;
|
|
|
|
/* ANIMATIONS */
|
|
--animate-marquee: marquee 20s linear infinite;
|
|
--animate-marquee-reverse: marquee 20s linear infinite reverse;
|
|
--animate-fade-in: fadeIn 350ms ease-in-out;
|
|
|
|
--animate-slide-down: slideDown 300ms ease-out;
|
|
--animate-slide-up: slideUp 300ms ease-out;
|
|
--animate-overlay-show: overlayShow 150ms ease-in;
|
|
--animate-content-show: contentShow 150ms ease-in;
|
|
|
|
--animate-slide-down-fade: slideDownAndFade 300ms ease-out;
|
|
--animate-slide-left-fade: slideLeftAndFade 300ms ease-out;
|
|
--animate-slide-up-fade: slideUpAndFade 300ms ease-out;
|
|
--animate-slide-right-fade: slideRightAndFade 300ms ease-out;
|
|
|
|
--animate-toast-hide: toastHide 100ms ease-in;
|
|
--animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
--animate-toast-out: toastSlideOut 200ms ease-out;
|
|
|
|
@keyframes marquee {
|
|
to {
|
|
transform: translateX(50%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
height: 0;
|
|
}
|
|
to {
|
|
height: var(--reka-accordion-content-height);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
height: var(--reka-accordion-content-height);
|
|
}
|
|
to {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes overlayShow {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes contentShow {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes toastHide {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes toastSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(calc(100% + var(--viewport-padding)));
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes toastSlideOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(var(--reka-toast-swipe-end-x));
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(calc(100% + var(--viewport-padding)));
|
|
}
|
|
}
|
|
|
|
@keyframes slideDownAndFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideLeftAndFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUpAndFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideRightAndFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-2px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CONTAINER */
|
|
|
|
@utility container {
|
|
@apply mx-auto px-[var(--app-container-padding)] w-full max-sm:max-w-[var(--breakpoint-xs)] max-md:max-w-[var(--breakpoint-sm)] max-lg:max-w-[var(--breakpoint-md)] max-xl:max-w-[var(--breakpoint-lg)] max-w-[var(--breakpoint-2xl)];
|
|
}
|
|
|
|
@layer {
|
|
button {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.vpd-main {
|
|
@apply !w-full !border-none !p-0;
|
|
}
|
|
|
|
.vpd-input-group {
|
|
@apply !flex-row-reverse;
|
|
}
|
|
|
|
.vpd-input-group > input {
|
|
@apply !border-e-0 !rounded-none !rounded-s-100 !px-4;
|
|
}
|
|
|
|
.vpd-input-group > label {
|
|
@apply !rounded-e-100;
|
|
}
|
|
|
|
.vpd-main > .vpd-wrapper > .vpd-container {
|
|
@apply !rounded-xl !overflow-hidden;
|
|
}
|
|
|
|
.vpd-main.error > .vpd-input-group > #vpd-vpd-date-picker {
|
|
@apply border-danger-600 border-2;
|
|
}
|
|
|
|
.vpd-main > .vpd-input-group > .vpd-icon-btn {
|
|
@apply !bg-black;
|
|
}
|
|
|
|
.vpd-main.error > .vpd-input-group > .vpd-icon-btn {
|
|
@apply bg-danger-600 border-danger-600 border-t-2 border-r-2 border-b;
|
|
}
|
|
|
|
.vpd-controls button {
|
|
@apply flex justify-center items-center;
|
|
}
|
|
}
|