138 lines
6.0 KiB
CSS
138 lines
6.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
/* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
|
|
@layer components {
|
|
/* Primary buttons */
|
|
.btn-xs.btn-primary {
|
|
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-sm.btn-primary {
|
|
@apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn.btn-primary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-lg.btn-primary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-xl.btn-primary {
|
|
@apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-wide.btn-primary {
|
|
@apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
/* Secondary buttons */
|
|
.btn-xs.btn-secondary {
|
|
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-sm.btn-secondary {
|
|
@apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn.btn-secondary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-lg.btn-secondary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-xl.btn-secondary {
|
|
@apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-wide.btn-secondary {
|
|
@apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
/* White buttons */
|
|
.btn-xs.btn-white {
|
|
@apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-sm.btn-white {
|
|
@apply inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn.btn-white {
|
|
@apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-lg.btn-white {
|
|
@apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-xl.btn-white {
|
|
@apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-wide.btn-white {
|
|
@apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
}
|
|
}
|
|
|
|
.loader {
|
|
margin: 80px auto;
|
|
border: 8px solid #f3f3f3; /* Light grey */
|
|
border-top: 8px solid #039be5; /* Blue */
|
|
border-radius: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
nav#nav--settings > a {
|
|
@apply border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 border-l-4 px-3 py-2 flex items-center text-sm font-medium;
|
|
}
|
|
|
|
nav#nav--settings > a svg {
|
|
@apply text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6;
|
|
}
|
|
|
|
nav#nav--settings > a.active {
|
|
@apply bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700;
|
|
}
|
|
|
|
nav#nav--settings > a.active svg {
|
|
@apply text-blue-500;
|
|
}
|
|
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
|
|
body {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.text-white-important {
|
|
color: white !important;
|
|
}
|
|
|
|
@layer utilities {
|
|
.transition-max-width {
|
|
-webkit-transition-property: max-width;
|
|
transition-property: max-width;
|
|
}
|
|
}
|
|
|
|
#timeZone input:focus {
|
|
box-shadow: none;
|
|
} |