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
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;
|
||||
}
|
||||
Reference in New Issue
Block a user