43 lines
1.2 KiB
CSS
43 lines
1.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply m-0 flex h-screen items-center justify-center bg-purple-50 font-sans;
|
|
}
|
|
|
|
button {
|
|
@apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.calculator {
|
|
@apply grid grid-cols-4 gap-2 rounded-xl bg-slate-950 p-4 shadow-lg;
|
|
}
|
|
|
|
.number {
|
|
@apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
|
|
&[data-value='0'] {
|
|
@apply col-span-3;
|
|
}
|
|
}
|
|
|
|
.operator {
|
|
@apply bg-orange-500 hover:bg-orange-600 active:bg-orange-700;
|
|
}
|
|
|
|
#equals {
|
|
@apply col-span-2 col-start-3 bg-green-500 hover:bg-green-600 active:bg-green-700;
|
|
}
|
|
|
|
#clear {
|
|
@apply bg-red-500 hover:bg-red-600 active:bg-red-700;
|
|
}
|
|
|
|
.display {
|
|
@apply col-span-4 block rounded-md border-cyan-200 bg-cyan-100 p-4 text-right text-2xl font-semibold text-cyan-800 outline outline-2 outline-transparent;
|
|
}
|
|
}
|