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 "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 name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><%= title %></title>
|
||||
<link rel="stylesheet" href="/public/generated/css/tailwind.css">
|
||||
<link rel="stylesheet" href="/public/generated/css/main.css">
|
||||
</head>
|
||||
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 min-h-screen font-[Inter]">
|
||||
<%- include("sidebar") -%>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user