Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.
This commit is contained in:
Haqeem Solehan
119
assets/css/menu-levels.css
Normal file
119
assets/css/menu-levels.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* Multi-level menu styling */
|
||||
.multi-level-menu {
|
||||
border-left: 2px solid rgba(var(--color-primary), 0.3);
|
||||
}
|
||||
|
||||
/* Common styles for all menu levels */
|
||||
.navigation-item-wrapper a {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Long menu text handling */
|
||||
.navigation-item-wrapper span {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Show full text on hover */
|
||||
.navigation-item-wrapper a:hover span {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Enhanced tooltip effect for very long menu items */
|
||||
.deepest-menu-item a:hover span {
|
||||
background-color: rgba(var(--sidebar-menu), 0.95);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* Level-specific styles */
|
||||
.second-level-menu {
|
||||
font-weight: 500;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.second-level-menu .mx-3,
|
||||
.second-level-menu .mx-4 {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.third-level-menu {
|
||||
font-style: italic;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.third-level-menu .mx-3,
|
||||
.third-level-menu .mx-4 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.95rem;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.deepest-menu-item {
|
||||
padding-left: 0.75rem;
|
||||
border-left: 2px solid rgba(var(--color-primary), 0.6);
|
||||
}
|
||||
|
||||
.deepest-menu-item .mx-3,
|
||||
.deepest-menu-item .mx-4 {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.9rem;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
/* Add visual indicators for each level */
|
||||
.second-level-menu a::before,
|
||||
.third-level-menu a::before,
|
||||
.deepest-menu-item a::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.second-level-menu a::before {
|
||||
background-color: rgba(var(--color-primary), 0.8);
|
||||
}
|
||||
|
||||
.third-level-menu a::before {
|
||||
background-color: rgba(var(--color-accent), 0.8);
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.deepest-menu-item a::before {
|
||||
background-color: rgba(var(--color-secondary), 0.8);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Resonsive adjustments for different screen sizes */
|
||||
@media (max-width: 1200px) {
|
||||
.second-level-menu .mx-3,
|
||||
.second-level-menu .mx-4,
|
||||
.third-level-menu .mx-3,
|
||||
.third-level-menu .mx-4,
|
||||
.deepest-menu-item .mx-3,
|
||||
.deepest-menu-item .mx-4 {
|
||||
max-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navigation-item-wrapper span {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
20
assets/js/formkit-custom.js
Normal file
20
assets/js/formkit-custom.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import { createInput } from "@formkit/vue";
|
||||
import OneTimePassword from "~/components/formkit/OneTimePassword.vue";
|
||||
import MaskText from "~/components/formkit/TextMask.vue";
|
||||
import FileDropzone from "~/components/formkit/FileDropzone.vue";
|
||||
import Toggle from "~/components/formkit/Toggle.vue";
|
||||
|
||||
export default {
|
||||
otp: createInput(OneTimePassword, {
|
||||
props: ["digits"],
|
||||
}),
|
||||
mask: createInput(MaskText, {
|
||||
props: ["mask"],
|
||||
}),
|
||||
dropzone: createInput(FileDropzone, {
|
||||
props: ["accept", "multiple", "maxSize", "minSize", "maxFiles", "disabled"],
|
||||
}),
|
||||
toggle: createInput(Toggle, {
|
||||
props: ["onLabel", "offLabel"],
|
||||
}),
|
||||
};
|
||||
94
assets/js/formkit-theme.js
Normal file
94
assets/js/formkit-theme.js
Normal file
@@ -0,0 +1,94 @@
|
||||
// Create some re-useable definitions because
|
||||
// many input types are identical in how
|
||||
// we want to style them.
|
||||
const textClassification = {
|
||||
label: "formkit-outer-text",
|
||||
inner: "formkit-inner-text",
|
||||
input: "formkit-input-text",
|
||||
prefix: "formkit-prefix-text",
|
||||
message: "formkit-message-text",
|
||||
};
|
||||
const boxClassification = {
|
||||
inner: "formkit-inner-box",
|
||||
fieldset: "formkit-fieldset-box",
|
||||
legend: "formkit-legend-box",
|
||||
wrapper: "formkit-wrapper-box",
|
||||
help: "formkit-help-box",
|
||||
input: "formkit-input-box",
|
||||
label: "formkit-label-box",
|
||||
message: "formkit-message-box",
|
||||
};
|
||||
const buttonClassification = {
|
||||
wrapper: "formkit-wrapper-button",
|
||||
input: "formkit-input-button",
|
||||
};
|
||||
const OtpClassification = {
|
||||
label: "formkit-label-otp",
|
||||
inner: "formkit-inner-otp",
|
||||
digit: "formkit-digit-otp",
|
||||
message: "formkit-message-otp",
|
||||
};
|
||||
|
||||
const colorClassification = {
|
||||
label: "formkit-label-color",
|
||||
input: "formkit-input-color",
|
||||
};
|
||||
|
||||
const fileClassification = {
|
||||
label: "formkit-label-file",
|
||||
inner: "formkit-inner-file",
|
||||
input: "formkit-input-file",
|
||||
};
|
||||
|
||||
const rangeClassification = {
|
||||
input: "formkit-input-range",
|
||||
};
|
||||
|
||||
// export our definitions using our above
|
||||
// templates and declare one-offs and
|
||||
// overrides as needed.
|
||||
export default {
|
||||
// the global key will apply to all inputs
|
||||
global: {
|
||||
label: "formkit-label-global",
|
||||
outer: "formkit-outer-global",
|
||||
help: "formkit-help-global",
|
||||
messages: "formkit-messages-global",
|
||||
message: "formkit-message-global",
|
||||
wrapper: "formkit-wrapper-global",
|
||||
},
|
||||
button: buttonClassification,
|
||||
color: colorClassification,
|
||||
date: textClassification,
|
||||
"datetime-local": textClassification,
|
||||
checkbox: boxClassification,
|
||||
email: textClassification,
|
||||
file: fileClassification,
|
||||
month: textClassification,
|
||||
number: textClassification,
|
||||
password: textClassification,
|
||||
radio: {
|
||||
...boxClassification,
|
||||
input: "formkit-input-radio",
|
||||
},
|
||||
range: rangeClassification,
|
||||
search: textClassification,
|
||||
select: { ...textClassification, option: "p-2" },
|
||||
submit: buttonClassification,
|
||||
tel: textClassification,
|
||||
text: textClassification,
|
||||
textarea: {
|
||||
...textClassification,
|
||||
input: "formkit-input-textarea",
|
||||
},
|
||||
time: textClassification,
|
||||
url: textClassification,
|
||||
week: textClassification,
|
||||
otp: OtpClassification,
|
||||
mask: textClassification,
|
||||
dropzone: {
|
||||
...textClassification,
|
||||
inner: "formkit-inner-dropzone",
|
||||
dropzone: "formkit-dropzone",
|
||||
},
|
||||
};
|
||||
92
assets/json/data.json
Normal file
92
assets/json/data.json
Normal file
@@ -0,0 +1,92 @@
|
||||
[
|
||||
{
|
||||
"id": "#001",
|
||||
"firstName": "John",
|
||||
"lastName": "Doe",
|
||||
"email": "johndoe@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Active",
|
||||
"age": 34
|
||||
},
|
||||
{
|
||||
"id": "#002",
|
||||
"firstName": "Jane",
|
||||
"lastName": "Smith",
|
||||
"email": "janesmith@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Inactive",
|
||||
"age": 28
|
||||
},
|
||||
{
|
||||
"id": "#003",
|
||||
"firstName": "Robert",
|
||||
"lastName": "Brown",
|
||||
"email": "robertbrown@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Banned",
|
||||
"age": 45
|
||||
},
|
||||
{
|
||||
"id": "#004",
|
||||
"firstName": "Emily",
|
||||
"lastName": "White",
|
||||
"email": "emilywhite@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Active",
|
||||
"age": 37
|
||||
},
|
||||
{
|
||||
"id": "#005",
|
||||
"firstName": "Michael",
|
||||
"lastName": "Johnson",
|
||||
"email": "michaeljohnson@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Inactive",
|
||||
"age": 50
|
||||
},
|
||||
{
|
||||
"id": "#006",
|
||||
"firstName": "Linda",
|
||||
"lastName": "Williams",
|
||||
"email": "lindawilliams@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Active",
|
||||
"age": 32
|
||||
},
|
||||
{
|
||||
"id": "#007",
|
||||
"firstName": "James",
|
||||
"lastName": "Taylor",
|
||||
"email": "jamestaylor@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Banned",
|
||||
"age": 40
|
||||
},
|
||||
{
|
||||
"id": "#008",
|
||||
"firstName": "Patricia",
|
||||
"lastName": "Brown",
|
||||
"email": "patriciabrown@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Inactive",
|
||||
"age": 29
|
||||
},
|
||||
{
|
||||
"id": "#009",
|
||||
"firstName": "David",
|
||||
"lastName": "Wilson",
|
||||
"email": "davidwilson@example.com",
|
||||
"gender": "Male",
|
||||
"status": "Active",
|
||||
"age": 38
|
||||
},
|
||||
{
|
||||
"id": "#010",
|
||||
"firstName": "Elizabeth",
|
||||
"lastName": "Garcia",
|
||||
"email": "elizabethgarcia@example.com",
|
||||
"gender": "Female",
|
||||
"status": "Banned",
|
||||
"age": 42
|
||||
}
|
||||
]
|
||||
7126
assets/json/iconamoon.json
Normal file
7126
assets/json/iconamoon.json
Normal file
File diff suppressed because it is too large
Load Diff
268
assets/style/css/base/theme.css
Normal file
268
assets/style/css/base/theme.css
Normal file
@@ -0,0 +1,268 @@
|
||||
html[data-theme="biasa"] {
|
||||
--color-primary: 0, 165, 154;
|
||||
--color-secondary: 97, 176, 183;
|
||||
--color-accent: 243, 244, 246;
|
||||
--color-success: 79, 192, 103;
|
||||
--color-info: 65, 133, 242;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 229, 83, 69;
|
||||
--text-color: 9, 9, 11;
|
||||
--border-color: 228, 228, 231;
|
||||
--bg-1: 243, 244, 246;
|
||||
--bg-2: 255, 255, 255;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 170, 170, 170;
|
||||
--scroll-hover-color: 155, 155, 155;
|
||||
--fk-border-color: 228, 228, 231;
|
||||
--fk-placeholder-color: 146, 146, 153;
|
||||
--box-shadow: rgba(36, 35, 71, 0.05) 0px 1px 1px,
|
||||
rgba(36, 35, 71, 0.05) 0px 0px 1px 1px;
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.2rem;
|
||||
--rounded-btn: 0.2rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="gelap"] {
|
||||
--color-primary: 97, 176, 183;
|
||||
--color-secondary: 13, 27, 42;
|
||||
--color-accent: 15, 23, 42;
|
||||
--color-success: 79, 192, 103;
|
||||
--color-info: 65, 133, 242;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 229, 83, 69;
|
||||
--text-color: 209, 213, 219;
|
||||
--border-color: 30, 41, 59;
|
||||
--bg-1: 15, 23, 42;
|
||||
--bg-2: 30, 41, 59;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 170, 170, 170;
|
||||
--scroll-hover-color: 155, 155, 155;
|
||||
--fk-border-color: 71, 85, 105;
|
||||
--fk-placeholder-color: 71, 85, 105;
|
||||
--box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="biru"] {
|
||||
--color-primary: 0, 102, 204;
|
||||
--color-secondary: 51, 153, 255;
|
||||
--color-accent: 255, 204, 0;
|
||||
--color-success: 46, 204, 113;
|
||||
--color-info: 52, 152, 219;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 231, 76, 60;
|
||||
--text-color: 0, 0, 0;
|
||||
--border-color: 200, 200, 200;
|
||||
--bg-1: 240, 248, 255;
|
||||
--bg-2: 230, 240, 250;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 180, 180, 180;
|
||||
--scroll-hover-color: 150, 150, 150;
|
||||
--fk-border-color: 200, 200, 200;
|
||||
--fk-placeholder-color: 150, 150, 150;
|
||||
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="merah"] {
|
||||
--color-primary: 204, 0, 0;
|
||||
--color-secondary: 255, 102, 102;
|
||||
--color-accent: 255, 255, 153;
|
||||
--color-success: 46, 204, 113;
|
||||
--color-info: 52, 152, 219;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 231, 76, 60;
|
||||
--text-color: 0, 0, 0;
|
||||
--border-color: 200, 200, 200;
|
||||
--bg-1: 255, 240, 240;
|
||||
--bg-2: 255, 230, 230;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 180, 180, 180;
|
||||
--scroll-hover-color: 150, 150, 150;
|
||||
--fk-border-color: 200, 200, 200;
|
||||
--fk-placeholder-color: 150, 150, 150;
|
||||
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="ungu"] {
|
||||
--color-primary: 75, 0, 130;
|
||||
--color-secondary: 138, 43, 226;
|
||||
--color-accent: 255, 215, 0;
|
||||
--color-success: 46, 204, 113;
|
||||
--color-info: 52, 152, 219;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 231, 76, 60;
|
||||
--text-color: 0, 0, 0;
|
||||
--border-color: 200, 200, 200;
|
||||
--bg-1: 240, 248, 255;
|
||||
--bg-2: 230, 240, 250;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 180, 180, 180;
|
||||
--scroll-hover-color: 150, 150, 150;
|
||||
--fk-border-color: 200, 200, 200;
|
||||
--fk-placeholder-color: 150, 150, 150;
|
||||
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="oren"] {
|
||||
--color-primary: 255, 103, 0;
|
||||
--color-secondary: 255, 159, 64;
|
||||
--color-accent: 0, 128, 128;
|
||||
--color-success: 46, 204, 113;
|
||||
--color-info: 52, 152, 219;
|
||||
--color-warning: 246, 141, 32;
|
||||
--color-danger: 231, 76, 60;
|
||||
--text-color: 0, 0, 0;
|
||||
--border-color: 200, 200, 200;
|
||||
--bg-1: 255, 250, 240;
|
||||
--bg-2: 255, 245, 230;
|
||||
--sidebar: 38, 50, 55;
|
||||
--sidebar-menu: 26, 35, 38;
|
||||
--sidebar-text: 255, 255, 255;
|
||||
--header: 49, 65, 71;
|
||||
--header-text: 255, 255, 255;
|
||||
--scroll-color: 180, 180, 180;
|
||||
--scroll-hover-color: 150, 150, 150;
|
||||
--fk-border-color: 200, 200, 200;
|
||||
--fk-placeholder-color: 150, 150, 150;
|
||||
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--cp-bg: 255, 255, 255;
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
|
||||
html[data-theme="LZS"] {
|
||||
--color-primary: 0, 90, 173; /* #005AAD - Blue */
|
||||
--color-secondary: 141, 199, 61; /* #8DC73D - Green */
|
||||
--color-accent: 255, 242, 0; /* #FFF200 - Yellow */
|
||||
--color-success: 141, 199, 61; /* Using the green for success */
|
||||
--color-info: 0, 90, 173; /* Using the blue for info */
|
||||
--color-warning: 246, 141, 32; /* Using consistent orange for warning */
|
||||
--color-danger: 229, 83, 69; /* Keeping original red for danger */
|
||||
--text-color: 0, 0, 0; /* Black text */
|
||||
--border-color: 220, 220, 220; /* Light gray for borders */
|
||||
--bg-1: 245, 250, 255; /* Very light blue background */
|
||||
--bg-2: 255, 255, 255; /* White background */
|
||||
--sidebar: 0, 58, 112; /* Darker blue for sidebar - #003A70 */
|
||||
--sidebar-menu: 0, 40, 77; /* Even darker blue for sidebar menu - #00284D */
|
||||
--sidebar-text: 255, 255, 255; /* White text for sidebar */
|
||||
--header: 0, 90, 173; /* Blue header - #005AAD */
|
||||
--header-text: 255, 255, 255; /* White text for header */
|
||||
--scroll-color: 180, 180, 180; /* Gray scrollbar */
|
||||
--scroll-hover-color: 150, 150, 150; /* Darker gray on hover */
|
||||
--fk-border-color: 220, 220, 220; /* Light gray for form borders */
|
||||
--fk-placeholder-color: 150, 150, 150; /* Gray for placeholders */
|
||||
--box-shadow: rgba(0, 90, 173, 0.1) 0px 1px 2px,
|
||||
rgba(0, 90, 173, 0.08) 0px 0px 2px; /* Blue-tinted shadow */
|
||||
--cp-bg: 255, 255, 255; /* White background */
|
||||
--rounded-box: 0.5rem;
|
||||
--rounded-btn: 0.5rem;
|
||||
--rounded-badge: 1.9rem;
|
||||
--animation-btn: 0.25s;
|
||||
--animation-input: 0.2s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--padding-btn: 0.625rem 1.5rem;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
/* Yellow accents in specific UI elements */
|
||||
--active-menu-bg: 255, 242, 0, 0.1; /* Subtle yellow background for active menu items */
|
||||
--active-menu-border: 255, 242, 0; /* Yellow border for active menu items */
|
||||
--focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */
|
||||
--tw-shadow: #e5eaf2;
|
||||
}
|
||||
28
assets/style/css/component/alert.css
Normal file
28
assets/style/css/component/alert.css
Normal file
@@ -0,0 +1,28 @@
|
||||
/* RS Alert Component */
|
||||
.alert {
|
||||
@apply visible flex items-center justify-between py-3 px-3 rounded-lg;
|
||||
}
|
||||
|
||||
.alert.alert-primary {
|
||||
@apply bg-primary/20 text-primary;
|
||||
}
|
||||
|
||||
.alert.alert-secondary {
|
||||
@apply bg-secondary/20 text-secondary;
|
||||
}
|
||||
|
||||
.alert.alert-success {
|
||||
@apply bg-success/20 text-success;
|
||||
}
|
||||
|
||||
.alert.alert-info {
|
||||
@apply bg-info/20 text-info;
|
||||
}
|
||||
|
||||
.alert.alert-warning {
|
||||
@apply bg-warning/20 text-warning;
|
||||
}
|
||||
|
||||
.alert.alert-danger {
|
||||
@apply bg-danger/20 text-danger;
|
||||
}
|
||||
32
assets/style/css/component/badge.css
Normal file
32
assets/style/css/component/badge.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* RS Badge Component */
|
||||
.badge {
|
||||
@apply inline-flex items-center justify-center px-2 py-1 rounded-full text-xs font-semibold leading-none;
|
||||
}
|
||||
|
||||
.badge.badge-primary {
|
||||
@apply bg-primary text-white;
|
||||
}
|
||||
|
||||
.badge.badge-secondary {
|
||||
@apply bg-secondary text-white;
|
||||
}
|
||||
|
||||
.badge.badge-success {
|
||||
@apply bg-success text-white;
|
||||
}
|
||||
|
||||
.badge.badge-info {
|
||||
@apply bg-info text-white;
|
||||
}
|
||||
|
||||
.badge.badge-warning {
|
||||
@apply bg-warning text-white;
|
||||
}
|
||||
|
||||
.badge.badge-danger {
|
||||
@apply bg-danger text-white;
|
||||
}
|
||||
|
||||
.badge.badge-disabled {
|
||||
@apply bg-gray-300 text-gray-600;
|
||||
}
|
||||
323
assets/style/css/component/button.css
Normal file
323
assets/style/css/component/button.css
Normal file
@@ -0,0 +1,323 @@
|
||||
/* RS Button */
|
||||
.button {
|
||||
@apply w-fit rounded-lg flex justify-center items-center h-fit;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced hover effect with slight 3D transition */
|
||||
.button[class*="button-"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.button[class*="button-"]:active {
|
||||
transform: translateY(0px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button[class*="button-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Primary Button - Blue with yellow accent */
|
||||
.button.button-primary {
|
||||
@apply bg-primary text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-primary), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-primary), 0.8);
|
||||
}
|
||||
|
||||
.button.button-primary:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
animation: slide-in 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% { transform: scaleX(0); opacity: 0; }
|
||||
100% { transform: scaleX(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.button.button-secondary {
|
||||
@apply bg-secondary text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-secondary), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-secondary), 0.8);
|
||||
}
|
||||
|
||||
.button.button-success {
|
||||
@apply bg-success text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-success), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-success), 0.8);
|
||||
}
|
||||
|
||||
.button.button-info {
|
||||
@apply bg-info text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-info), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-info), 0.8);
|
||||
}
|
||||
|
||||
.button.button-warning {
|
||||
@apply bg-warning text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-warning), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-warning), 0.8);
|
||||
}
|
||||
|
||||
.button.button-danger {
|
||||
@apply bg-danger text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-danger), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-danger), 0.8);
|
||||
}
|
||||
|
||||
/* Updated outline buttons */
|
||||
.button[class*="outline-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button.outline-primary {
|
||||
@apply border border-primary text-primary;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-primary:hover {
|
||||
@apply bg-primary/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-primary), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-secondary {
|
||||
@apply border border-secondary text-secondary;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-secondary), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-secondary:hover {
|
||||
@apply bg-secondary/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-secondary), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-success {
|
||||
@apply border border-success text-success;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-success), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-success:hover {
|
||||
@apply bg-success/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-success), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-info {
|
||||
@apply border border-info text-info;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-info), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-info:hover {
|
||||
@apply bg-info/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-info), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-warning {
|
||||
@apply border border-warning text-warning;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-warning), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-warning:hover {
|
||||
@apply bg-warning/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-warning), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-danger {
|
||||
@apply border border-danger text-danger;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-danger), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-danger:hover {
|
||||
@apply bg-danger/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-danger), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button[class*="text-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button.texts-primary {
|
||||
@apply text-primary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-primary:hover {
|
||||
@apply bg-primary/10;
|
||||
}
|
||||
|
||||
.button.texts-primary:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-primary:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-secondary {
|
||||
@apply text-secondary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-secondary:hover {
|
||||
@apply bg-secondary/10;
|
||||
}
|
||||
|
||||
.button.texts-secondary:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-secondary));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-secondary:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-success {
|
||||
@apply text-success;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-success:hover {
|
||||
@apply bg-success/10;
|
||||
}
|
||||
|
||||
.button.texts-success:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-success));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-success:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-info {
|
||||
@apply text-info;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-info:hover {
|
||||
@apply bg-info/10;
|
||||
}
|
||||
|
||||
.button.texts-info:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-info));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-info:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-warning {
|
||||
@apply text-warning;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-warning:hover {
|
||||
@apply bg-warning/10;
|
||||
}
|
||||
|
||||
.button.texts-warning:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-warning));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-warning:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-danger {
|
||||
@apply text-danger;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-danger:hover {
|
||||
@apply bg-danger/10;
|
||||
}
|
||||
|
||||
.button.texts-danger:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-danger));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-danger:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
@apply text-xs;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.button-md {
|
||||
@apply text-sm;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.button-lg {
|
||||
@apply text-base;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.6;
|
||||
}
|
||||
24
assets/style/css/component/card.css
Normal file
24
assets/style/css/component/card.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/* RS Card Component */
|
||||
.card {
|
||||
@apply mb-6;
|
||||
background-color: rgb(var(--bg-2));
|
||||
border-radius: var(--rounded-box);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.card .card-header {
|
||||
@apply text-xl px-6 py-4 font-medium;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
@apply px-6 py-5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card .card-footer {
|
||||
@apply px-6 py-4;
|
||||
line-height: 1.5;
|
||||
border-top: 1px solid rgb(var(--border-color));
|
||||
}
|
||||
61
assets/style/css/component/collapse.css
Normal file
61
assets/style/css/component/collapse.css
Normal file
@@ -0,0 +1,61 @@
|
||||
/* RS Collapse Component */
|
||||
.accordion {
|
||||
@apply w-full mb-4 visible;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.accordion.accordion-border {
|
||||
@apply border-t border-x rounded-lg;
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group {
|
||||
@apply overflow-hidden duration-300 dark:border-slate-700;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.accordion .accordion-group.accordion-default {
|
||||
@apply border-b;
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group.accordion-border {
|
||||
@apply border-b last:rounded-b-lg;
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.accordion .accordion-group.accordion-card {
|
||||
@apply my-4;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.accordion .accordion-group .accordion-header {
|
||||
@apply text-lg font-medium px-5 pr-10 py-4 cursor-pointer;
|
||||
}
|
||||
|
||||
.accordion .accordion-group .accordion-body {
|
||||
@apply px-5 pb-4 pt-2;
|
||||
}
|
||||
|
||||
.accordion-group .accordion-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.accordion-group .accordion-header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
top: 50%;
|
||||
right: 0%;
|
||||
transform: translate(-100%, -50%) rotate(0deg);
|
||||
background: url("/assets/img/icon/chevron-right.svg");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.accordion-group--open .accordion-header::after {
|
||||
transform: translate(-100%, -50%) rotate(90deg);
|
||||
}
|
||||
40
assets/style/css/component/common.css
Normal file
40
assets/style/css/component/common.css
Normal file
@@ -0,0 +1,40 @@
|
||||
body {
|
||||
color: rgb(var(--text-color));
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
|
||||
.w-header {
|
||||
@apply z-20 fixed top-0 right-0 px-5 py-3 duration-300 shadow-md;
|
||||
background-color: rgb(var(--header));
|
||||
color: rgb(var(--header-text));
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.w-header-search {
|
||||
@apply px-4 z-40 duration-300 shadow-md -top-20 focus-within:top-0 right-0;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
@apply text-base h-screen fixed w-64 top-0 z-50 duration-300 border-l-0 shadow-md;
|
||||
background-color: rgb(var(--sidebar));
|
||||
color: rgb(var(--sidebar-text));
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply flex
|
||||
items-center
|
||||
justify-center
|
||||
transition-colors
|
||||
duration-300;
|
||||
color: rgb(var(--header-text));
|
||||
}
|
||||
|
||||
.icon-btn.profile {
|
||||
color: rgb(var(--header-text));
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background-color: rgb(var(--sidebar));
|
||||
}
|
||||
53
assets/style/css/component/dropdown.css
Normal file
53
assets/style/css/component/dropdown.css
Normal file
@@ -0,0 +1,53 @@
|
||||
/* RS Dropdown Component */
|
||||
.dropdown {
|
||||
@apply relative inline-flex;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-section {
|
||||
@apply absolute z-10 shadow-md rounded-lg py-1 whitespace-nowrap;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.dropdown-section.list-bottom-sm {
|
||||
@apply top-10;
|
||||
}
|
||||
|
||||
.dropdown-section.list-bottom-md {
|
||||
@apply top-12;
|
||||
}
|
||||
|
||||
.dropdown-section.list-bottom-lg {
|
||||
@apply top-16;
|
||||
}
|
||||
|
||||
.dropdown-section.list-top-sm {
|
||||
@apply bottom-10;
|
||||
}
|
||||
|
||||
.dropdown-section.list-top-md {
|
||||
@apply bottom-12;
|
||||
}
|
||||
|
||||
.dropdown-section.list-top-lg {
|
||||
@apply bottom-16;
|
||||
}
|
||||
|
||||
.dropdown-section.list-left {
|
||||
@apply top-0 -left-[10.5rem];
|
||||
}
|
||||
|
||||
.dropdown-section.list-right {
|
||||
@apply top-0 -right-[10.5rem];
|
||||
}
|
||||
|
||||
.dropdown-section.list-align-right {
|
||||
@apply right-0;
|
||||
}
|
||||
|
||||
.dropdown-section .dropdown-item {
|
||||
@apply flex items-center cursor-pointer px-4 py-2;
|
||||
}
|
||||
|
||||
.dropdown-section .dropdown-item:hover {
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
50
assets/style/css/component/modal.css
Normal file
50
assets/style/css/component/modal.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/* RS Modal Component */
|
||||
.modal {
|
||||
@apply fixed top-0 left-0 w-full h-full overflow-hidden z-[1000] duration-300;
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
}
|
||||
|
||||
.modal.modal-top {
|
||||
@apply flex items-start;
|
||||
}
|
||||
|
||||
.modal.modal-center {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.modal.modal-end {
|
||||
@apply flex items-end;
|
||||
}
|
||||
|
||||
.modal.modal-hide-overlay {
|
||||
@apply !bg-transparent;
|
||||
}
|
||||
|
||||
.modal .modal-dialog {
|
||||
@apply w-full md:w-auto relative z-[9999];
|
||||
margin: 1.75rem auto;
|
||||
}
|
||||
|
||||
.modal .modal-dialog .modal-content {
|
||||
@apply border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-clip-padding rounded-md outline-none text-current;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.modal .modal-dialog .modal-content .modal-header {
|
||||
@apply flex flex-shrink-0 items-center justify-between p-4 border-b rounded-t-md;
|
||||
border-color: rgb(var(--border-color));
|
||||
}
|
||||
|
||||
.modal .modal-dialog .modal-content .modal-body {
|
||||
@apply relative p-4;
|
||||
}
|
||||
|
||||
.modal .modal-dialog .modal-content .modal-footer {
|
||||
@apply flex flex-shrink-0 flex-wrap items-center justify-end px-4 pb-4 rounded-b-md gap-x-3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.modal-dialog {
|
||||
margin: 1.75rem 1rem;
|
||||
}
|
||||
}
|
||||
80
assets/style/css/component/progress.css
Normal file
80
assets/style/css/component/progress.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* RS Progress Component */
|
||||
.progress-wrapper {
|
||||
@apply w-full mb-4;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress-label {
|
||||
@apply text-sm mb-1;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress {
|
||||
@apply flex rounded-full;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-sm {
|
||||
@apply h-3;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-md {
|
||||
@apply h-4;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-lg {
|
||||
@apply h-5;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-sm {
|
||||
@apply h-3;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-primary {
|
||||
@apply bg-primary/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-secondary {
|
||||
@apply bg-secondary/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-success {
|
||||
@apply bg-success/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-info {
|
||||
@apply bg-info/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-warning {
|
||||
@apply bg-warning/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress.progress-danger {
|
||||
@apply bg-danger/20;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar {
|
||||
@apply flex items-center justify-center rounded-full text-white;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.primary {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.secondary {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.success {
|
||||
@apply bg-success;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.info {
|
||||
@apply bg-info;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.warning {
|
||||
@apply bg-warning;
|
||||
}
|
||||
|
||||
.progress-wrapper .progress .progress-bar.danger {
|
||||
@apply bg-danger;
|
||||
}
|
||||
322
assets/style/css/component/tab.css
Normal file
322
assets/style/css/component/tab.css
Normal file
@@ -0,0 +1,322 @@
|
||||
/* RS Tab Component */
|
||||
.tab {
|
||||
@apply rounded-md;
|
||||
}
|
||||
|
||||
.tab.vertical {
|
||||
@apply flex flex-col md:flex-row;
|
||||
}
|
||||
|
||||
.tab.tab-card {
|
||||
@apply shadow-md pt-4;
|
||||
}
|
||||
|
||||
.tab.card-vertical {
|
||||
@apply shadow-md;
|
||||
}
|
||||
|
||||
.tab.card-primary {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
.tab.card-secondary {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
|
||||
.tab.card-success {
|
||||
@apply bg-success;
|
||||
}
|
||||
|
||||
.tab.card-info {
|
||||
@apply bg-info;
|
||||
}
|
||||
|
||||
.tab.card-warning {
|
||||
@apply bg-warning;
|
||||
}
|
||||
|
||||
.tab.card-danger {
|
||||
@apply bg-danger;
|
||||
}
|
||||
|
||||
.tab .tab-nav {
|
||||
@apply flex flex-wrap list-none pl-0;
|
||||
}
|
||||
|
||||
.tab .tab-nav.tab-nav-card {
|
||||
@apply mx-4 mb-0;
|
||||
}
|
||||
|
||||
.tab .tab-nav.card-vertical {
|
||||
@apply py-0 pt-4 md:py-4;
|
||||
}
|
||||
|
||||
.tab .tab-nav.vertical {
|
||||
@apply flex-row md:flex-col gap-2;
|
||||
}
|
||||
|
||||
.tab .tab-nav.vertical-fill {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.fill {
|
||||
@apply flex-1 w-full;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-horizontal {
|
||||
@apply border-0 hover:border hover:border-b-0 rounded-t-md px-6;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-horizontal-active {
|
||||
@apply border rounded-t-md border-b-0;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-vertical {
|
||||
@apply border-0 hover:border hover:border-r-0 rounded-l-md px-6;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-vertical-active {
|
||||
@apply border rounded-t-md rounded-bl-none md:rounded-r-none md:rounded-l-md border-r border-b-0 md:border-b md:border-r-0;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-primary {
|
||||
@apply hover:border-primary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-secondary {
|
||||
@apply hover:border-secondary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-success {
|
||||
@apply hover:border-success;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-info {
|
||||
@apply hover:border-info;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-warning {
|
||||
@apply hover:border-warning;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-hover-danger {
|
||||
@apply hover:border-danger;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-primary {
|
||||
@apply border-primary text-primary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-secondary {
|
||||
@apply border-secondary text-secondary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-success {
|
||||
@apply border-success text-success;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-info {
|
||||
@apply border-info text-info;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-warning {
|
||||
@apply border-warning text-warning;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item.border-active-danger {
|
||||
@apply border-danger text-danger;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link {
|
||||
@apply block font-medium text-base leading-tight capitalize border-x-0 border-t-0 py-3;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default {
|
||||
@apply hover:border-b-2 mx-2 px-4;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-vertical {
|
||||
@apply hover:border-l-2 mx-2 px-4;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-active {
|
||||
@apply border-b-2;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-vertical-active {
|
||||
@apply border-l-2;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-primary {
|
||||
@apply hover:border-primary hover:text-primary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-secondary {
|
||||
@apply hover:border-secondary hover:text-secondary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-success {
|
||||
@apply hover:border-success hover:text-success;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-info {
|
||||
@apply hover:border-info hover:text-info;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-warning {
|
||||
@apply hover:border-warning hover:text-warning;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-hover-danger {
|
||||
@apply hover:border-danger hover:text-danger;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-primary {
|
||||
@apply text-primary border-primary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-secondary {
|
||||
@apply text-secondary border-secondary;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-success {
|
||||
@apply text-success border-success;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-info {
|
||||
@apply text-info border-info;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-warning {
|
||||
@apply text-warning border-warning;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.default-danger {
|
||||
@apply text-danger border-danger;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card {
|
||||
@apply px-5 mx-1 text-white rounded-t-md;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-vertical {
|
||||
@apply px-5 my-0 text-white rounded-bl-none rounded-t-md md:rounded-tr-none md:rounded-l-md;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-primary {
|
||||
@apply bg-primary/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-secondary {
|
||||
@apply bg-secondary/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-success {
|
||||
@apply bg-success/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-info {
|
||||
@apply bg-info/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-warning {
|
||||
@apply bg-warning/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-danger {
|
||||
@apply bg-danger/90;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-primary-active {
|
||||
@apply text-primary/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-secondary-active {
|
||||
@apply text-secondary/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-success-active {
|
||||
@apply text-success/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-info-active {
|
||||
@apply text-info/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-warning-active {
|
||||
@apply text-warning/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-card-danger-active {
|
||||
@apply text-danger/90;
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-justify-left {
|
||||
@apply flex flex-wrap justify-start;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-justify-center {
|
||||
@apply flex flex-wrap justify-center;
|
||||
}
|
||||
|
||||
.tab .tab-nav .tab-item .tab-item-link.link-justify-right {
|
||||
@apply flex flex-wrap justify-end;
|
||||
}
|
||||
|
||||
.tab .tab-content {
|
||||
background-color: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.tab .tab-content.content-vertical {
|
||||
@apply flex-grow;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-vertical-fill {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border {
|
||||
@apply border rounded-b-md;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-vertical {
|
||||
@apply border rounded-md rounded-l-none;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-primary {
|
||||
@apply border-primary;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-secondary {
|
||||
@apply border-secondary;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-success {
|
||||
@apply border-success;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-info {
|
||||
@apply border-info;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-warning {
|
||||
@apply border-warning;
|
||||
}
|
||||
|
||||
.tab .tab-content.content-border-danger {
|
||||
@apply border-danger;
|
||||
}
|
||||
|
||||
.tab .tab-content .tab-pane {
|
||||
@apply py-4 px-4;
|
||||
}
|
||||
32
assets/style/css/component/table.css
Normal file
32
assets/style/css/component/table.css
Normal file
@@ -0,0 +1,32 @@
|
||||
/* Table Component */
|
||||
.table-wrapper {
|
||||
@apply w-full border-0 rounded-md border-gray-200 dark:border-slate-700;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@apply m-4 overflow-hidden;
|
||||
transition: max-height 0.25s cubic-bezier(0, 1, 0, 1);
|
||||
max-height: 42px;
|
||||
}
|
||||
|
||||
.table-header.open {
|
||||
@apply overflow-visible;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
max-height: 9999px;
|
||||
}
|
||||
|
||||
.table-header-filter {
|
||||
@apply flex flex-col md:flex-row justify-start md:justify-between items-start md:items-center gap-4;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
@apply flex justify-center md:justify-between items-center m-4;
|
||||
}
|
||||
|
||||
.table-footer-page {
|
||||
@apply flex justify-center gap-x-2;
|
||||
}
|
||||
65
assets/style/css/example-theme.css
Normal file
65
assets/style/css/example-theme.css
Normal file
@@ -0,0 +1,65 @@
|
||||
/* Example Custom Theme for corradAF Base Project */
|
||||
/* This file demonstrates how custom themes should be structured */
|
||||
/* Define your custom theme variables here */
|
||||
/* For example:
|
||||
:root {
|
||||
--primary-color: #yourColor;
|
||||
}
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Custom color variables */
|
||||
--color-primary: 46, 125, 50; /* Green theme */
|
||||
--color-secondary: 117, 117, 117;
|
||||
--color-success: 76, 175, 80;
|
||||
--color-info: 33, 150, 243;
|
||||
--color-warning: 255, 152, 0;
|
||||
--color-danger: 244, 67, 54;
|
||||
|
||||
/* Custom background colors */
|
||||
--bg-primary: 245, 245, 245;
|
||||
--bg-secondary: 255, 255, 255;
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
.dark {
|
||||
--bg-primary: 18, 18, 18;
|
||||
--bg-secondary: 30, 30, 30;
|
||||
}
|
||||
|
||||
/* Custom component styles */
|
||||
.btn-primary {
|
||||
background-color: rgb(var(--color-primary));
|
||||
border-color: rgb(var(--color-primary));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: rgba(var(--color-primary), 0.8);
|
||||
border-color: rgba(var(--color-primary), 0.8);
|
||||
}
|
||||
|
||||
/* Header customizations */
|
||||
.w-header {
|
||||
background: linear-gradient(135deg, rgb(var(--color-primary)), rgba(var(--color-primary), 0.8));
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Sidebar customizations */
|
||||
.vertical-menu {
|
||||
background-color: rgb(var(--bg-secondary));
|
||||
border-right: 1px solid rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
|
||||
/* Card customizations */
|
||||
.card {
|
||||
background-color: rgb(var(--bg-secondary));
|
||||
border: 1px solid rgba(var(--color-primary), 0.1);
|
||||
box-shadow: 0 2px 4px rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
|
||||
/* Example of responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.w-header {
|
||||
background: rgb(var(--color-primary));
|
||||
}
|
||||
}
|
||||
63
assets/style/css/form/box.css
Normal file
63
assets/style/css/form/box.css
Normal file
@@ -0,0 +1,63 @@
|
||||
.formkit-inner-box {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.formkit-label {
|
||||
@apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
|
||||
}
|
||||
|
||||
.formkit-fieldset-box {
|
||||
@apply max-w-md border border-[rgb(var(--fk-border-color))] rounded-lg px-4 py-2;
|
||||
}
|
||||
|
||||
.formkit-legend-box {
|
||||
@apply font-bold text-sm;
|
||||
}
|
||||
|
||||
.formkit-wrapper-box {
|
||||
@apply flex items-center mb-3 cursor-pointer;
|
||||
}
|
||||
|
||||
.formkit-help-box {
|
||||
@apply mb-3;
|
||||
}
|
||||
|
||||
.formkit-input-box {
|
||||
@apply flex
|
||||
items-center
|
||||
hover:cursor-pointer
|
||||
appearance-none
|
||||
h-5 w-5 mr-2
|
||||
border-2
|
||||
border-[rgb(var(--fk-border-color))]
|
||||
checked:bg-primary
|
||||
checked:border-transparent
|
||||
bg-[rgb(var(--bg-2))]
|
||||
rounded-md
|
||||
checked:shadow-sm checked:shadow-primary/40
|
||||
focus:outline-none focus:ring-0 transition duration-200;
|
||||
}
|
||||
|
||||
.formkit-input-radio {
|
||||
@apply flex
|
||||
items-center
|
||||
hover:cursor-pointer
|
||||
appearance-none
|
||||
h-5 w-5 mr-2
|
||||
border-2
|
||||
border-[rgb(var(--fk-border-color))]
|
||||
checked:bg-primary
|
||||
checked:border-transparent
|
||||
bg-[rgb(var(--bg-2))]
|
||||
rounded-full
|
||||
checked:shadow-sm checked:shadow-primary/40
|
||||
focus:outline-none focus:ring-0 transition duration-200;
|
||||
}
|
||||
|
||||
.formkit-label-box {
|
||||
@apply text-sm formkit-disabled:text-gray-300;
|
||||
}
|
||||
|
||||
.formkit-message-box {
|
||||
@apply formkit-invalid:text-red-500;
|
||||
}
|
||||
7
assets/style/css/form/button.css
Normal file
7
assets/style/css/form/button.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.formkit-wrapper-button {
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
.formkit-input-button {
|
||||
@apply bg-primary hover:bg-primary/90 text-white text-sm font-normal py-2 px-5 rounded-lg;
|
||||
}
|
||||
18
assets/style/css/form/color.css
Normal file
18
assets/style/css/form/color.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.formkit-label-color {
|
||||
@apply block mb-1 font-bold text-sm;
|
||||
}
|
||||
|
||||
.formkit-input-color {
|
||||
@apply w-16 h-10 cursor-pointer rounded-lg mb-2 border-none appearance-none bg-transparent;
|
||||
}
|
||||
|
||||
.formkit-input-color::-webkit-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.formkit-input-color::-moz-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
7
assets/style/css/form/dropzone.css
Normal file
7
assets/style/css/form/dropzone.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.formkit-inner-dropzone {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.formkit-dropzone {
|
||||
@apply border-2 border-[rgb(var(--fk-border-color))] border-dashed p-6 active:bg-[rgb(var(--bg-1))];
|
||||
}
|
||||
32
assets/style/css/form/file.css
Normal file
32
assets/style/css/form/file.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.formkit-label-file {
|
||||
@apply block mb-1 font-bold text-sm;
|
||||
}
|
||||
|
||||
.formkit-inner-file {
|
||||
@apply w-full cursor-pointer;
|
||||
}
|
||||
|
||||
.formkit-input-file {
|
||||
@apply w-full cursor-pointer border rounded-lg text-gray-600 text-sm mb-1 file:cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-l-lg file:border-0 file:text-sm file:bg-primary file:text-white hover:file:bg-primary/90;
|
||||
border-color: rgb(var(--fk-border-color));
|
||||
}
|
||||
|
||||
.formkit-file-list {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.formkit-file-item {
|
||||
@apply flex items-center py-2 px-4 rounded-lg border border-gray-200 mb-1 mt-1;
|
||||
}
|
||||
|
||||
.formkit-file-name {
|
||||
@apply text-[rgb(var(--text-color))] text-sm;
|
||||
}
|
||||
|
||||
.formkit-file-remove {
|
||||
@apply ml-auto text-primary text-sm;
|
||||
}
|
||||
|
||||
.formkit-no-files {
|
||||
@apply text-[rgb(var(--text-color))] text-sm;
|
||||
}
|
||||
23
assets/style/css/form/global.css
Normal file
23
assets/style/css/form/global.css
Normal file
@@ -0,0 +1,23 @@
|
||||
.formkit-label-global {
|
||||
@apply text-[rgb(var(--text-color))];
|
||||
}
|
||||
|
||||
.formkit-outer-global {
|
||||
@apply mb-4 text-[rgb(var(--text-color))] formkit-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.formkit-help-global {
|
||||
@apply text-xs mt-1;
|
||||
}
|
||||
|
||||
.formkit-messages-global {
|
||||
@apply list-none p-0 mt-1 mb-0;
|
||||
}
|
||||
|
||||
.formkit-message-global {
|
||||
@apply text-red-500 mb-1 text-xs;
|
||||
}
|
||||
|
||||
.formkit-wrapper-global {
|
||||
@apply relative;
|
||||
}
|
||||
29
assets/style/css/form/otp.css
Normal file
29
assets/style/css/form/otp.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.formkit-label-otp {
|
||||
@apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
|
||||
}
|
||||
|
||||
.formkit-inner-otp {
|
||||
@apply flex
|
||||
items-center
|
||||
justify-start
|
||||
align-middle
|
||||
rounded-lg mb-1
|
||||
overflow-hidden;
|
||||
}
|
||||
|
||||
.formkit-digit-otp {
|
||||
@apply w-10 h-10 mr-2
|
||||
text-center
|
||||
rounded-lg
|
||||
border
|
||||
border-[rgb(var(--fk-border-color))]
|
||||
text-sm
|
||||
bg-[rgb(var(--bg-2))]
|
||||
placeholder-secondary
|
||||
focus-within:border-primary
|
||||
focus:outline-none;
|
||||
}
|
||||
|
||||
.formkit-message-otp {
|
||||
@apply formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
|
||||
}
|
||||
3
assets/style/css/form/range.css
Normal file
3
assets/style/css/form/range.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.formkit-input-range {
|
||||
@apply appearance-none w-full h-2 p-0 bg-[rgb(var(--bg-1))] rounded-full focus:outline-none focus:ring-0 focus:shadow-none;
|
||||
}
|
||||
39
assets/style/css/form/text.css
Normal file
39
assets/style/css/form/text.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.formkit-inner-text {
|
||||
@apply flex
|
||||
items-center
|
||||
justify-center
|
||||
align-middle
|
||||
w-full
|
||||
border
|
||||
border-[rgb(var(--fk-border-color))]
|
||||
formkit-invalid:border-red-500
|
||||
rounded-lg
|
||||
overflow-hidden
|
||||
focus-within:border-primary
|
||||
mb-0;
|
||||
}
|
||||
|
||||
.formkit-input-text {
|
||||
@apply w-full
|
||||
h-10
|
||||
px-3
|
||||
border-none
|
||||
text-sm
|
||||
bg-[rgb(var(--bg-2))]
|
||||
placeholder-[rgb(var(--fk-placeholder-color))]
|
||||
focus:outline-none
|
||||
disabled:bg-[rgb(var(--bg-1))]
|
||||
disabled:border-[rgb(var(--bg-1))]
|
||||
disabled:placeholder-[rgb(var(--bg-1))]
|
||||
read-only:bg-[rgb(var(--bg-1))]
|
||||
read-only:border-[rgb(var(--bg-1))]
|
||||
read-only:placeholder-[rgb(var(--bg-1))];
|
||||
}
|
||||
|
||||
.formkit-prefix-text {
|
||||
@apply ml-2;
|
||||
}
|
||||
|
||||
.formkit-message-text {
|
||||
@apply formkit-invalid:text-red-500;
|
||||
}
|
||||
8
assets/style/css/form/textarea.css
Normal file
8
assets/style/css/form/textarea.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.formkit-input-textarea {
|
||||
@apply block
|
||||
w-full
|
||||
px-3 py-2
|
||||
placeholder-[rgb(var(--fk-placeholder-color))]
|
||||
bg-[rgb(var(--bg-2))]
|
||||
focus:outline-none;
|
||||
}
|
||||
33
assets/style/css/tailwind.css
Normal file
33
assets/style/css/tailwind.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* Base Import Tailwind CSS */
|
||||
@import "tailwindcss/base";
|
||||
@import "./base/theme";
|
||||
|
||||
/* Components Import Tailwind CSS */
|
||||
@import "tailwindcss/components";
|
||||
@import "./component/common";
|
||||
@import "./component/alert";
|
||||
@import "./component/badge";
|
||||
@import "./component/button";
|
||||
@import "./component/card";
|
||||
@import "./component/collapse";
|
||||
@import "./component/dropdown";
|
||||
@import "./component/modal";
|
||||
@import "./component/progress";
|
||||
@import "./component/tab";
|
||||
@import "./component/table";
|
||||
|
||||
/* Form Import Tailwind CSS */
|
||||
@import "./form/global";
|
||||
@import "./form/text";
|
||||
@import "./form/textarea";
|
||||
@import "./form/box";
|
||||
@import "./form/button";
|
||||
@import "./form/otp";
|
||||
@import "./form/color";
|
||||
@import "./form/file";
|
||||
@import "./form/range";
|
||||
@import "./form/dropzone";
|
||||
|
||||
/* Utilities Import Tailwind CSS */
|
||||
@import "tailwindcss/utilities";
|
||||
@import "./utility/typography";
|
||||
29
assets/style/css/utility/typography.css
Normal file
29
assets/style/css/utility/typography.css
Normal file
@@ -0,0 +1,29 @@
|
||||
h1 {
|
||||
@apply text-4xl
|
||||
font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl
|
||||
font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl
|
||||
font-bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl
|
||||
font-bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-lg
|
||||
font-bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-base
|
||||
font-bold;
|
||||
}
|
||||
49
assets/style/scss/custom/apps/products.scss
Normal file
49
assets/style/scss/custom/apps/products.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.filter-wrapper {
|
||||
&.filter-wrapper-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.filter-wrapper-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
.filter-wrapper {
|
||||
transition: right 0.25s ease;
|
||||
&.filter-wrapper-show {
|
||||
display: block;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
&.filter-wrapper-hide {
|
||||
display: block;
|
||||
right: -260px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: -50;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
assets/style/scss/custom/layout/horizontal.scss
Normal file
18
assets/style/scss/custom/layout/horizontal.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.h-layout {
|
||||
.content-page {
|
||||
padding: 10.5rem 2rem 0 2rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.w-header,
|
||||
.w-header-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-header-search {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
166
assets/style/scss/custom/layout/vertical.scss
Normal file
166
assets/style/scss/custom/layout/vertical.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
body:has(.menu-overlay:not(.hide)) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 120vh;
|
||||
z-index: 45;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease;
|
||||
background-color: rgba(34, 41, 47, 0.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layout Vertical CSS
|
||||
.v-layout {
|
||||
.content-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w-header-search {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.w-header,
|
||||
.w-header-search {
|
||||
width: calc(100% - 256px);
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 256px;
|
||||
padding: 6rem 2rem 10px 2rem;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
margin-left: 0px;
|
||||
padding: 6rem 1.25rem 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-hide {
|
||||
.w-header {
|
||||
width: calc(100% - 0px);
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
left: -260px;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content,
|
||||
.menu-content-child {
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
|
||||
&.hide {
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content-max,
|
||||
.menu-content-child-max {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
svg.side-menu-arrow {
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-open {
|
||||
svg.side-menu-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom styles for LZS theme
|
||||
html[data-theme="LZS"] {
|
||||
.v-layout {
|
||||
.active-menu {
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
// Yellow glow on active menu items
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
}
|
||||
|
||||
// Icon color for active menu
|
||||
svg {
|
||||
color: rgb(var(--active-menu-border));
|
||||
}
|
||||
}
|
||||
|
||||
// Form focus states with yellow accent
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: 2px solid rgba(var(--focus-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Button hover with yellow accent
|
||||
.btn-primary:hover, button.bg-primary:hover {
|
||||
box-shadow: 0 0 0 2px rgba(var(--active-menu-border), 0.3);
|
||||
}
|
||||
|
||||
// Card headers with subtle yellow accent
|
||||
.rs-card {
|
||||
.card-header {
|
||||
border-bottom: 1px solid rgba(var(--border-color));
|
||||
|
||||
h2, h3, h4 {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
assets/style/scss/custom/library/_dropdown.scss
Normal file
27
assets/style/scss/custom/library/_dropdown.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.s-dropdown {
|
||||
background-color: white;
|
||||
padding: 10px 0;
|
||||
border-radius: 5px;
|
||||
top: 65px !important;
|
||||
border: 1px solid rgb(229, 231, 235);
|
||||
box-shadow: 0px 0px 10px rgba(226, 232, 240, 0.2);
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
left: 0px !important;
|
||||
width: 100% !important;
|
||||
margin: 0px 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.s-dropdown {
|
||||
background-color: #1e293b;
|
||||
box-shadow: 0px 0px 10px rgba(15, 23, 42, 0.2);
|
||||
border: 1px solid #182130;
|
||||
}
|
||||
}
|
||||
19
assets/style/scss/custom/library/_floatingvue.scss
Normal file
19
assets/style/scss/custom/library/_floatingvue.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.v-popper--theme-dropdown .v-popper__inner {
|
||||
background: rgb(var(--bg-2)) !important;
|
||||
border: 0px !important;
|
||||
color: rgb(var(--text-color)) !important;
|
||||
}
|
||||
|
||||
// Disable arrow
|
||||
.v-popper__arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .v-popper--theme-my-theme .v-popper__inner {
|
||||
// background: #fff000;
|
||||
// color: black;
|
||||
// padding: 24px;
|
||||
// border-radius: 6px;
|
||||
// border: 1px solid #ddd;
|
||||
// box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
|
||||
// }
|
||||
237
assets/style/scss/custom/library/_formkit.scss
Normal file
237
assets/style/scss/custom/library/_formkit.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.formkit-form {
|
||||
.form-wizard {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&.top-form {
|
||||
.formkit-actions {
|
||||
button[type="submit"] {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
ul.top-steps {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.25s ease-in;
|
||||
}
|
||||
|
||||
.step--errors {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #f23131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
|
||||
&[data-step-active="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-active="false"] {
|
||||
color: rgb(var(--bg-1));
|
||||
.progress {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-completed="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 230px auto;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 0rem;
|
||||
}
|
||||
|
||||
.formkit-actions {
|
||||
grid-column: span 2 / span 2;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
ul.left-steps {
|
||||
display: block;
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
.progress {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.25s ease-in;
|
||||
}
|
||||
|
||||
.step--errors {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #f23131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
|
||||
&[data-step-active="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-active="false"] {
|
||||
color: rgb(var(--bg-1));
|
||||
.progress {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-completed="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Formkit Input for VSelect
|
||||
.formkit-vselect {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.vs__dropdown-menu {
|
||||
background: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.vs__dropdown-menu li {
|
||||
background: rgb(var(--bg-1));
|
||||
color: rgb(var(--text-color));
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
min-height: 2.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(var(--color-primary));
|
||||
|
||||
border-width: 1px;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0px;
|
||||
border-color: rgb(var(--fk-border-color));
|
||||
|
||||
.vs__selected {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
|
||||
background-color: rgb(var(--color-primary));
|
||||
color: white;
|
||||
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
gap: 0.25rem;
|
||||
margin-right: 0.35rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Decorator
|
||||
input[type="checkbox"]:checked.icon-check + .formkit-decorator::before {
|
||||
content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
114
assets/style/scss/custom/library/_fullcalendar.scss
Normal file
114
assets/style/scss/custom/library/_fullcalendar.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border-color: rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
// Overwrite fullcalendar styles light
|
||||
.fc {
|
||||
.fc-scrollgrid {
|
||||
border: 1px solid rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
@media screen and (max-width: $medium) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
padding: 0.75rem 1rem !important;
|
||||
|
||||
&.fc-button-primary {
|
||||
background-color: transparent !important;
|
||||
color: rgb(var(--color-primary));
|
||||
border-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.05rem rgba(255, 113, 133, 0.5) !important;
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-view-harness {
|
||||
table {
|
||||
&.fc-col-header {
|
||||
td,
|
||||
th {
|
||||
border-color: rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
.fc-col-header-cell {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgb(var(--bg-1));
|
||||
background: rgb(var(--bg-1));
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day-top {
|
||||
color: #6b727f !important;
|
||||
}
|
||||
|
||||
.fc-more-link {
|
||||
color: rgb(var(--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-harness {
|
||||
.fc-daygrid-event {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.fc-h-event {
|
||||
&.fc-event-start {
|
||||
border-color: rgb(var(--color-primary));
|
||||
background-color: rgb(var(--color-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-list {
|
||||
.fc-list-event-dot {
|
||||
background-color: rgb(var(--color-primary));
|
||||
border: 5px solid #f3f4f6;
|
||||
border-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
.fc-list-day-cushion {
|
||||
background-color: #f3f4f6;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-popover-header {
|
||||
padding: 0.5rem !important;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
}
|
||||
81
assets/style/scss/custom/library/_nprogress.scss
Normal file
81
assets/style/scss/custom/library/_nprogress.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #fb7185;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #fb7185, 0 0 5px #fb7185;
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #fb7185;
|
||||
border-left-color: #fb7185;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
18
assets/style/scss/custom/library/_swiper.scss
Normal file
18
assets/style/scss/custom/library/_swiper.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
color: #4B5563 !important;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background-color: #8b98a9 !important;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background: #4B5563 !important;
|
||||
}
|
||||
7
assets/style/scss/custom/library/_vuecountryflag.scss
Normal file
7
assets/style/scss/custom/library/_vuecountryflag.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.flag.normal-flag {
|
||||
margin: 0em -1em -0em -1em !important;
|
||||
transform: scale(0.38) !important;
|
||||
-ms-transform: scale(0.38) !important;
|
||||
-webkit-transform: scale(0.38) !important;
|
||||
-moz-transform: scale(0.38) !important;
|
||||
}
|
||||
3
assets/style/scss/custom/library/_vuetoastification.scss
Normal file
3
assets/style/scss/custom/library/_vuetoastification.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.Vue-Toastification__toast {
|
||||
padding: 18px 21px;
|
||||
}
|
||||
21
assets/style/scss/custom/scrollbar/scrollbar.scss
Normal file
21
assets/style/scss/custom/scrollbar/scrollbar.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(var(--scroll-color));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--scroll-hover-color));
|
||||
}
|
||||
12
assets/style/scss/custom/transition/fade-up.scss
Normal file
12
assets/style/scss/custom/transition/fade-up.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// Animation for transition fade
|
||||
.fade-up-enter-active,
|
||||
.fade-up-leave-active {
|
||||
transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.84, 0.79),
|
||||
opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.fade-up-enter-from,
|
||||
.fade-up-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
10
assets/style/scss/custom/transition/fade.scss
Normal file
10
assets/style/scss/custom/transition/fade.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// Animation for transition fade
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
11
assets/style/scss/custom/transition/page.scss
Normal file
11
assets/style/scss/custom/transition/page.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Animation for transition fade
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
transform: scale(1.02);
|
||||
opacity: 0;
|
||||
}
|
||||
17
assets/style/scss/custom/transition/slide-fade.scss
Normal file
17
assets/style/scss/custom/transition/slide-fade.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
Enter and leave animations can use different
|
||||
durations and timing functions.
|
||||
*/
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
10
assets/style/scss/custom/transition/slide.scss
Normal file
10
assets/style/scss/custom/transition/slide.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: translateY, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
transform: translateY(0px);
|
||||
opacity: 0;
|
||||
}
|
||||
57
assets/style/scss/main.scss
Normal file
57
assets/style/scss/main.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
/*================================================================================
|
||||
Notes: This file is the main entry point for the SCSS stylesheet.
|
||||
================================================================================*/
|
||||
|
||||
/* Import DM Sans font from Google Fonts */
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.5px; /* Changed from -2px to -0.5px for better readability */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// svg.icon{
|
||||
// width: 1.3rem;
|
||||
// height: 1.3rem;
|
||||
// vertical-align: middle;
|
||||
// fill: currentColor;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
code {
|
||||
color: rgb(233, 74, 74);
|
||||
background-color: rgba(146, 146, 146, 0.1);
|
||||
}
|
||||
|
||||
// Custom Layout SCSS
|
||||
@import "./custom/layout/vertical";
|
||||
@import "./custom/layout/horizontal";
|
||||
|
||||
// Transition SCSS
|
||||
@import "./custom/transition/page";
|
||||
@import "./custom/transition/fade";
|
||||
@import "./custom/transition/fade-up";
|
||||
@import "./custom/transition/slide";
|
||||
@import "./custom/transition/slide-fade";
|
||||
|
||||
// Scrollbar SCSS
|
||||
@import "./custom/scrollbar/scrollbar";
|
||||
|
||||
// Custom SCSS library
|
||||
@import "./custom/library/dropdown";
|
||||
@import "./custom/library/nprogress";
|
||||
@import "./custom/library/formkit";
|
||||
@import "./custom/library/vuetoastification";
|
||||
@import "./custom/library/swiper";
|
||||
@import "./custom/library/fullcalendar";
|
||||
@import "./custom/library/floatingvue";
|
||||
@import "./custom/library/vuecountryflag";
|
||||
Reference in New Issue
Block a user