Files
mwitnessing/styles/global.css
Dobromir Popov ffcfb6b15c UI changes;
availability form prettify
2024-03-02 22:49:11 +02:00

59 lines
2.1 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-gray-100;
}
.max-w-250 {
max-width: 250px;
}
.min-w-250 {
min-width: 250px;
}
@layer base {
.sidemenu-item {
@apply: flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700;
}
}
@layer components {
/* .custom-outline {
@apply outline outline-2 outline-offset-2 focus:outline-none focus:shadow-outline;
} */
.button {
@apply m-2 text-white font-bold py-2 px-4 rounded bg-blue-500 hover:bg-blue-700;
}
.panel-actions {
@apply flex justify-end items-center justify-between;
}
.action-button {
@apply inline-block align-baseline font-bold text-blue-500 hover:text-blue-800;
}
.label {
@apply block mb-5 text-gray-700 dark:text-white text-sm font-bold mb-2;
}
.checkbox {
@apply appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
}
.textbox {
/* shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline */
@apply appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500;
}
.form {
@apply flex flex-col p-5 max-w-2xl mx-auto mt-2 mb-10 bg-white dark:bg-gray-800 shadow-md rounded;
}
.form-caption {
@apply text-gray-600 dark:text-gray-400 text-sm font-bold mb-2;
}
.sidemenu-item {
@apply flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700;
}
.sidemenu-item:hover .sub-menu {
display: block; /* display the sub-menu when the menu item is hovered over */
}
}