refactor: rearrange files for postcss & made custom preline variants.css to work with postcss
This commit is contained in:
parent
5e8fc3c8aa
commit
8aedc84280
@ -1,178 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
@import "preline/variants.css";
|
|
||||||
|
|
||||||
@config "../../../../tailwind.config.js";
|
|
||||||
|
|
||||||
/*
|
|
||||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
||||||
so we've added these compatibility styles to make sure everything still
|
|
||||||
looks the same as it did with Tailwind CSS v3.
|
|
||||||
|
|
||||||
If we ever want to remove these styles, we need to add an explicit border
|
|
||||||
color utility to any element that depends on these defaults.
|
|
||||||
*/
|
|
||||||
@layer base {
|
|
||||||
*,
|
|
||||||
::after,
|
|
||||||
::before,
|
|
||||||
::backdrop,
|
|
||||||
::file-selector-button {
|
|
||||||
border-color: var(--color-gray-200, currentColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Inter";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 200, 700;
|
|
||||||
font-display: swap;
|
|
||||||
src: url("/public/fonts/inter-variablefont.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Datatables */
|
|
||||||
|
|
||||||
.dt-layout-row:has(.dt-search),
|
|
||||||
.dt-layout-row:has(.dt-length),
|
|
||||||
.dt-layout-row:has(.dt-paging) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table {
|
|
||||||
@apply min-w-full divide-y divide-gray-200 dark:divide-neutral-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-thead {
|
|
||||||
@apply border-none bg-gray-50 dark:bg-neutral-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header {
|
|
||||||
@apply px-6 py-3 text-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header-content {
|
|
||||||
@apply flex justify-between items-center gap-x-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header-content > span {
|
|
||||||
@apply text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header-content > svg {
|
|
||||||
@apply size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header-content > svg > path:nth-child(1) {
|
|
||||||
@apply hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-header-content > svg > path:nth-child(2) {
|
|
||||||
@apply hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-footer {
|
|
||||||
@apply px-6 py-4 gap-3 flex justify-between items-center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-paging-btn {
|
|
||||||
@apply py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium
|
|
||||||
rounded-lg border border-gray-200 bg-white text-gray-800
|
|
||||||
shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
|
|
||||||
disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800
|
|
||||||
dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700
|
|
||||||
dark:focus:bg-neutral-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-checkbox {
|
|
||||||
@apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm
|
|
||||||
text-blue-600 focus:ring-blue-500 border-gray-300
|
|
||||||
dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500
|
|
||||||
dark:checked:border-blue-500 dark:focus:ring-offset-gray-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-link {
|
|
||||||
@apply block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600
|
|
||||||
dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500
|
|
||||||
text-nowrap cursor-pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-table-text {
|
|
||||||
@apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Select Box */
|
|
||||||
|
|
||||||
.cj-select-toggle {
|
|
||||||
@apply form-select hs-select-disabled:pointer-events-none
|
|
||||||
hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
|
|
||||||
cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm
|
|
||||||
text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
|
|
||||||
before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700
|
|
||||||
dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-select-dropdown {
|
|
||||||
@apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200
|
|
||||||
rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2
|
|
||||||
[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100
|
|
||||||
[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700
|
|
||||||
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900
|
|
||||||
dark:border-neutral-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cj-select-option {
|
|
||||||
@apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
|
|
||||||
rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
|
|
||||||
dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Layout Sidebar */
|
|
||||||
|
|
||||||
.sidebar-btn {
|
|
||||||
@apply
|
|
||||||
w-full
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
gap-x-3.5
|
|
||||||
py-2
|
|
||||||
px-2.5
|
|
||||||
text-sm
|
|
||||||
rounded-lg
|
|
||||||
focus:outline-hidden
|
|
||||||
text-gray-800
|
|
||||||
hover:bg-gray-100
|
|
||||||
focus:bg-gray-100
|
|
||||||
dark:bg-neutral-800
|
|
||||||
dark:hover:bg-neutral-700
|
|
||||||
dark:focus:bg-neutral-700
|
|
||||||
dark:text-neutral-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Controls */
|
|
||||||
|
|
||||||
.text-input-label {
|
|
||||||
@apply block text-sm font-medium mb-2 dark:text-white
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-input {
|
|
||||||
@apply
|
|
||||||
py-3
|
|
||||||
px-4
|
|
||||||
block
|
|
||||||
w-full
|
|
||||||
rounded-lg
|
|
||||||
text-sm
|
|
||||||
disabled:opacity-50
|
|
||||||
disabled:pointer-events-none
|
|
||||||
border-gray-200
|
|
||||||
focus:border-blue-500
|
|
||||||
focus:ring-blue-500
|
|
||||||
dark:bg-neutral-900
|
|
||||||
dark:border-neutral-700
|
|
||||||
dark:text-neutral-400
|
|
||||||
dark:placeholder-neutral-500
|
|
||||||
dark:focus:ring-neutral-600
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-input-help {
|
|
||||||
@apply mt-2 text-sm text-gray-500 dark:text-neutral-500
|
|
||||||
}
|
|
||||||
@ -1,4 +1,178 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "preline/variants.css";
|
@import "./preline";
|
||||||
|
|
||||||
@config "../../../../tailwind.config.js";
|
@config "../../../../tailwind.config.js";
|
||||||
|
|
||||||
|
/*
|
||||||
|
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||||
|
so we've added these compatibility styles to make sure everything still
|
||||||
|
looks the same as it did with Tailwind CSS v3.
|
||||||
|
|
||||||
|
If we ever want to remove these styles, we need to add an explicit border
|
||||||
|
color utility to any element that depends on these defaults.
|
||||||
|
*/
|
||||||
|
@layer base {
|
||||||
|
*,
|
||||||
|
::after,
|
||||||
|
::before,
|
||||||
|
::backdrop,
|
||||||
|
::file-selector-button {
|
||||||
|
border-color: var(--color-gray-200, currentColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200, 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url("/public/fonts/inter-variablefont.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Datatables */
|
||||||
|
|
||||||
|
.dt-layout-row:has(.dt-search),
|
||||||
|
.dt-layout-row:has(.dt-length),
|
||||||
|
.dt-layout-row:has(.dt-paging) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table {
|
||||||
|
@apply min-w-full divide-y divide-gray-200 dark:divide-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-thead {
|
||||||
|
@apply border-none bg-gray-50 dark:bg-neutral-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header {
|
||||||
|
@apply px-6 py-3 text-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header-content {
|
||||||
|
@apply flex justify-between items-center gap-x-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header-content > span {
|
||||||
|
@apply text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header-content > svg {
|
||||||
|
@apply size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header-content > svg > path:nth-child(1) {
|
||||||
|
@apply hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-header-content > svg > path:nth-child(2) {
|
||||||
|
@apply hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-footer {
|
||||||
|
@apply px-6 py-4 gap-3 flex justify-between items-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-paging-btn {
|
||||||
|
@apply py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium
|
||||||
|
rounded-lg border border-gray-200 bg-white text-gray-800
|
||||||
|
shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
|
||||||
|
disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800
|
||||||
|
dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700
|
||||||
|
dark:focus:bg-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-checkbox {
|
||||||
|
@apply form-checkbox shrink-0 disabled:opacity-50 rounded-sm
|
||||||
|
text-blue-600 focus:ring-blue-500 border-gray-300
|
||||||
|
dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500
|
||||||
|
dark:checked:border-blue-500 dark:focus:ring-offset-gray-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-link {
|
||||||
|
@apply block px-6 py-4 text-blue-500 hover:text-blue-600 focus:text-blue-600
|
||||||
|
dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500
|
||||||
|
text-nowrap cursor-pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-table-text {
|
||||||
|
@apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Select Box */
|
||||||
|
|
||||||
|
.cj-select-toggle {
|
||||||
|
@apply form-select hs-select-disabled:pointer-events-none
|
||||||
|
hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
|
||||||
|
cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm
|
||||||
|
text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50
|
||||||
|
before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700
|
||||||
|
dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-select-dropdown {
|
||||||
|
@apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200
|
||||||
|
rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2
|
||||||
|
[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100
|
||||||
|
[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700
|
||||||
|
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900
|
||||||
|
dark:border-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cj-select-option {
|
||||||
|
@apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
|
||||||
|
rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
|
||||||
|
dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout Sidebar */
|
||||||
|
|
||||||
|
.sidebar-btn {
|
||||||
|
@apply
|
||||||
|
w-full
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
gap-x-3.5
|
||||||
|
py-2
|
||||||
|
px-2.5
|
||||||
|
text-sm
|
||||||
|
rounded-lg
|
||||||
|
focus:outline-hidden
|
||||||
|
text-gray-800
|
||||||
|
hover:bg-gray-100
|
||||||
|
focus:bg-gray-100
|
||||||
|
dark:bg-neutral-800
|
||||||
|
dark:hover:bg-neutral-700
|
||||||
|
dark:focus:bg-neutral-700
|
||||||
|
dark:text-neutral-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Controls */
|
||||||
|
|
||||||
|
.text-input-label {
|
||||||
|
@apply block text-sm font-medium mb-2 dark:text-white
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
@apply
|
||||||
|
py-3
|
||||||
|
px-4
|
||||||
|
block
|
||||||
|
w-full
|
||||||
|
rounded-lg
|
||||||
|
text-sm
|
||||||
|
disabled:opacity-50
|
||||||
|
disabled:pointer-events-none
|
||||||
|
border-gray-200
|
||||||
|
focus:border-blue-500
|
||||||
|
focus:ring-blue-500
|
||||||
|
dark:bg-neutral-900
|
||||||
|
dark:border-neutral-700
|
||||||
|
dark:text-neutral-400
|
||||||
|
dark:placeholder-neutral-500
|
||||||
|
dark:focus:ring-neutral-600
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input-help {
|
||||||
|
@apply mt-2 text-sm text-gray-500 dark:text-neutral-500
|
||||||
|
}
|
||||||
76
src/client/src/css/preline.css
Normal file
76
src/client/src/css/preline.css
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
/* Custom written preline variants file */
|
||||||
|
/* The actual file in preline/variants has '@import' statements out of order, which fail with postcss. */
|
||||||
|
|
||||||
|
/* Preline */
|
||||||
|
@import 'preline/src/plugins/dropdown/variants.css';
|
||||||
|
@import 'preline/src/plugins/remove-element/variants.css';
|
||||||
|
@import 'preline/src/plugins/tooltip/variants.css';
|
||||||
|
@import 'preline/src/plugins/accordion/variants.css';
|
||||||
|
@import 'preline/src/plugins/tree-view/variants.css';
|
||||||
|
@import 'preline/src/plugins/collapse/variants.css';
|
||||||
|
@import 'preline/src/plugins/tabs/variants.css';
|
||||||
|
@import 'preline/src/plugins/overlay/variants.css';
|
||||||
|
@import 'preline/src/plugins/scrollspy/variants.css';
|
||||||
|
@import 'preline/src/plugins/carousel/variants.css';
|
||||||
|
@import 'preline/src/plugins/select/variants.css';
|
||||||
|
@import 'preline/src/plugins/input-number/variants.css';
|
||||||
|
@import 'preline/src/plugins/pin-input/variants.css';
|
||||||
|
@import 'preline/src/plugins/strong-password/variants.css';
|
||||||
|
@import 'preline/src/plugins/stepper/variants.css';
|
||||||
|
@import 'preline/src/plugins/combobox/variants.css';
|
||||||
|
@import 'preline/src/plugins/layout-splitter/variants.css';
|
||||||
|
@import 'preline/src/plugins/scroll-nav/variants.css';
|
||||||
|
@import 'preline/src/plugins/datatable/variants.css';
|
||||||
|
@import 'preline/src/plugins/range-slider/variants.css';
|
||||||
|
@import 'preline/src/plugins/file-upload/variants.css';
|
||||||
|
@import 'preline/src/plugins/datepicker/variants.css';
|
||||||
|
@import 'preline/src/plugins/theme-switch/variants.css';
|
||||||
|
|
||||||
|
/* States */
|
||||||
|
@custom-variant hs-success {
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success & {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@custom-variant hs-error {
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error & {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apexcharts */
|
||||||
|
@custom-variant hs-apexcharts-tooltip-dark {
|
||||||
|
&.dark {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sortable.js */
|
||||||
|
@custom-variant hs-dragged {
|
||||||
|
&.dragged {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toastify */
|
||||||
|
@custom-variant hs-toastify-on {
|
||||||
|
|
||||||
|
&.toastify.on {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify.on & {
|
||||||
|
@slot;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title><%= title %></title>
|
<title><%= title %></title>
|
||||||
<link rel="stylesheet" href="/public/generated/css/tailwind.css">
|
<link rel="stylesheet" href="/public/generated/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 min-h-screen font-[Inter]">
|
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 min-h-screen font-[Inter]">
|
||||||
<%- include("sidebar") -%>
|
<%- include("sidebar") -%>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user