Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Master Admin UI

Browse Source
This commit is contained in:
Gagan7900
2026-07-07 18:38:36 +05:30
commit 66e2c15e51
26539 changed files with 789907 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/scss/tailwind/_accordion.scss
+343
View File
@@ -0,0 +1,343 @@
.accordion-button {
@apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
&:not(.collapsed) {
@apply text-defaulttextcolor shadow-none;
}
&:focus {
@apply bg-defaultbackground dark:bg-light text-defaulttextcolor shadow-none;
}
}
.accordion-body {
@apply py-3 px-4 text-[0.8125rem] text-textmuted;
}
.accordion-item {
@apply text-defaulttextcolor bg-white dark:bg-bodybg border border-solid border-defaultborder dark:border-defaultborder/10 dark:text-defaulttextcolor/70;
}
.accordions-items-seperate {
.accordion-item:not(:first-of-type) {
@apply mt-2;
}
.accordion-item {
@apply border-t border-solid border-defaultborder dark:border-defaultborder/10 rounded-md overflow-hidden;
}
}
.accordion-item:last-of-type {
@apply rounded-b-[0.35rem];
}
.accordion-item:first-of-type {
@apply rounded-t-[0.35rem];
}
.accordion {
&.accordion-flush {
.accordion-button {
@apply pe-[2.5rem];
&:after {
@apply start-[98.5rem]!;
}
}
}
}
/* Start:: light colored accordions */
.accordion {
&.accordion-primary {
.accordion-button {
@apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
&:focus {
@apply bg-primary/10 text-primary;
}
&:after,&:not(.collapsed)::after {
@apply bg-none;
}
&:after {
@apply bg-primary text-white;
}
&.collapsed {
@apply bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70;
&:after {
@apply bg-defaultbackground text-defaulttextcolor dark:text-defaulttextcolor/70;
}
}
}
}
&.accordion-secondary {
.accordion-button {
@apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
&:focus {
@apply bg-secondary/10 text-secondary;
}
&:after,&:not(.collapsed)::after {
@apply bg-none;
}
&:after {
@apply bg-secondary text-white;
}
&.collapsed {
@apply bg-white dark:bg-bodybg text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-success {
.accordion-button {
@apply bg-success/10 text-success;
&:after {
@apply bg-success text-white;
}
&.collapsed {
@apply bg-white dark:bg-bodybg text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-danger {
.accordion-button {
@apply bg-danger/10 text-danger;
&:after {
@apply bg-danger text-white;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-warning {
.accordion-button {
@apply bg-warning/10 text-warning;
&:after {
@apply bg-warning text-white;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-info {
.accordion-button {
@apply bg-info/10 text-info;
&:after {
@apply bg-info text-white;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
}
/* End:: light colored accordions */
/* Start:: solid colored accordions */
.accordion {
&.accordion-solid-primary {
.accordion-button {
@apply bg-white text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
&:focus {
@apply bg-primary text-white;
}
&:after {
@apply bg-white text-primary;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-solid-secondary{
.accordion-button {
@apply bg-white text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
&:focus {
@apply bg-secondary text-white;
}
&:after {
@apply bg-white text-secondary;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
&.accordion-solid-success {
@apply bg-success text-white;
&:after {
@apply bg-white text-success;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
&.accordion-solid-danger {
@apply bg-danger text-white;
&:after {
@apply bg-white text-danger;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
&.accordion-solid-warning {
@apply bg-danger text-white;
&:after {
@apply bg-white text-danger;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
&.accordion-solid-info {
@apply bg-info text-white;
&:after {
@apply bg-white text-info;
}
&.collapsed {
@apply bg-white text-defaulttextcolor;
&:after {
@apply bg-defaultbackground text-defaulttextcolor;
}
}
}
}
/* End:: solid colored accordions */
/* Start:: border colors */
.accordion {
&.accordion-border-primary {
.accordion-item {
@apply border border-solid border-primary;
}
.accordion-button {
@apply bg-white dark:bg-bodybg text-primary border-b-0;
&:after {
@apply bg-white text-primary border border-solid border-primary;
}
&:not(.collapsed) {
@apply border-solid border-primary;
}
}
}
&.accordion-border-success {
.accordion-item {
@apply border border-solid border-success;
}
.accordion-button {
@apply bg-white dark:bg-bodybg text-success border-b-0;
&:after {
@apply bg-white dark:bg-bodybg text-success border border-solid border-success;
}
&:not(.collapsed) {
@apply border-solid border-success;
}
}
}
}
/* End:: border colors */
/* Start:: no icon */
.accordion {
&.accordionicon-none {
.accordion-button:after {
@apply hidden;
}
}
}
/* Start:: no icon */
/* Start:: left aligned icon */
.accordion {
&.accordionicon-left {
.accordion-button {
&:after {
@apply absolute start-[1.935rem];
}
}
}
}
/* End:: left aligned icon */
/* Start:: custom icons */
.accordion {
&.accordion-customicon1 {
.accordion-button {
&:after {
@apply content-["\EA13"]!;
}
&:not(.collapsed)::after {
@apply content-["\F1AF"]!;
}
}
}
}
/* End:: custom icons */
/* Start:: customized accordion */
.customized-accordion {
.accordion-item{
&.custom-accordion-primary {
.accordion-button {
@apply bg-primary/10 border-s-[0.25rem] border-solid border-primary/60;
&:after {
@apply bg-primary/60 text-white;
}
}
.accordion-body {
@apply bg-primary/10 pt-0 border-s-[0.25rem] border-solid border-primary/60;
}
}
&.custom-accordion-secondary {
.accordion-button {
@apply bg-secondary/10 border-s-[0.25rem] border-solid border-secondary/60;
&:after {
@apply bg-secondary/60 text-white;
}
}
.accordion-body {
@apply bg-secondary/10 pt-0 border-s-[0.25rem] border-solid border-secondary/60;
}
}
&.custom-accordion-danger {
.accordion-button {
@apply bg-danger/10 border-s-[0.25rem] border-solid border-danger/60;
&:after {
@apply bg-danger/60 text-white;
}
}
.accordion-body {
@apply bg-danger/10 pt-0 border-s-[0.25rem] border-solid border-danger/60;
}
}
}
}
/* End:: customized accordion */
public/assets/scss/tailwind/_alerts.scss
+326
View File
@@ -0,0 +1,326 @@
.alert {
@apply py-[0.625rem] px-[0.85rem] border rounded-md text-[0.8125rem] items-center;
&.alert-dismissible {
@apply py-[0.625rem] px-[0.85rem];
}
.btn-close {
@apply bg-none p-[0.95rem] flex items-center justify-center;
i {
@apply text-[1.5rem] leading-[1.5];
}
}
&:last-child {
@apply mb-0;
}
.alert-link {
@apply font-semibold;
}
}
/* Basic Alerts */
.alert-warning {
@apply bg-warning/10 text-warning border-warning/10;
.alert-link {
@apply text-warning;
}
.btn-close {
@apply text-warning;
&.custom-close {
@apply text-warning opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-primary {
@apply bg-primary/10 text-primary border-primary/10;
.alert-link {
@apply text-primary;
}
.btn-close {
@apply text-primary;
&.custom-close {
@apply text-primary opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-secondary {
@apply bg-secondary/10 text-secondary border-secondary/10;
.alert-link {
@apply text-secondary;
}
.btn-close {
@apply text-secondary;
&.custom-close {
@apply text-secondary opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-success {
@apply bg-success/10 text-success border-success/10;
.alert-link {
@apply text-success;
}
.btn-close {
@apply text-success;
&.custom-close {
@apply text-success opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-info {
@apply bg-info/10 text-info border-info/10;
.alert-link {
@apply text-info;
}
.btn-close {
@apply text-info;
&.custom-close {
@apply text-info opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-danger {
@apply bg-danger/10 text-danger border-danger/10;
.alert-link {
@apply text-danger;
}
.btn-close {
@apply text-danger;
&.custom-close {
@apply text-danger opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-light {
@apply bg-light text-[var(--font-size-defaultsize)] border-light;
.alert-link {
@apply text-[var(--font-size-defaultsize)];
}
.btn-close {
@apply text-[var(--font-size-defaultsize)];
&.custom-close {
@apply text-defaulttextcolor opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
.alert-dark {
@apply bg-black/10 text-black dark:text-defaulttextcolor/70 border-black/10;
.alert-link {
@apply text-black dark:text-defaulttextcolor/70;
}
.btn-close {
@apply text-black dark:text-defaulttextcolor/70;
&.custom-close {
@apply text-black dark:text-defaulttextcolor/70 opacity-[1] rounded-[50px] shadow p-[0.85rem];
}
}
}
/* Basic Alerts */
/* Solid Colored Alerts */
.alert-solid-primary {
@apply bg-primary text-white border-primary;
.btn-close {
@apply text-white;
}
}
.alert-solid-secondary {
@apply bg-secondary text-white border-secondary;
.btn-close {
@apply text-white;
}
}
.alert-solid-warning {
@apply bg-warning text-white border-warning;
.btn-close {
@apply text-white;
}
}
.alert-solid-info {
@apply bg-info text-white border-info;
.btn-close {
@apply text-white;
}
}
.alert-solid-success {
@apply bg-success text-white border-success;
.btn-close {
@apply text-white;
}
}
.alert-solid-danger {
@apply bg-danger text-white border-danger;
.btn-close {
@apply text-white;
}
}
.alert-solid-light {
@apply bg-light text-defaulttextcolor border-light;
.btn-close {
@apply text-defaulttextcolor;
}
}
.alert-solid-dark {
@apply bg-black text-white border-black;
.btn-close {
@apply text-white;
}
}
/* Solid Colored Alerts */
/* Outline Alerts */
.alert-outline-primary {
@apply text-primary border-primary;
.btn-close {
@apply text-primary;
}
}
.alert-outline-secondary {
@apply text-secondary border-secondary;
.btn-close {
@apply text-secondary;
}
}
.alert-outline-info {
@apply text-info border-info;
.btn-close {
@apply text-info;
}
}
.alert-outline-warning {
@apply text-warning border-warning;
.btn-close {
@apply text-warning;
}
}
.alert-outline-success {
@apply text-success border-success;
.btn-close {
@apply text-success;
}
}
.alert-outline-danger {
@apply text-danger border-danger;
.btn-close {
@apply text-danger;
}
}
.alert-outline-light {
@apply text-defaulttextcolor border-light;
.btn-close {
@apply text-light;
}
}
.alert-outline-dark {
@apply text-black dark:text-defaulttextcolor/70 border-black;
.btn-close {
@apply text-light;
}
}
/* Outline Alerts */
/* Customized Alerts */
.alert-primary.custom-alert-icon {
@apply border-s-[0.313rem] border-s-primary border-solid text-[#8c9097] bg-white dark:bg-bodybg border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-secondary.custom-alert-icon {
@apply border-s-[0.313rem] border-s-secondary border-solid text-[#8c9097] bg-white dark:bg-bodybg dark:border-defaultborder/10 border border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-warning.custom-alert-icon {
@apply border-s-[0.313rem] border-s-warning border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-danger.custom-alert-icon {
@apply border-s-[0.313rem] border-s-danger border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-success.custom-alert-icon {
@apply border-s-[0.313rem] border-s-success border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-info.custom-alert-icon {
@apply border-s-[0.313rem] border-s-info border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-light.custom-alert-icon {
@apply border-s-[0.313rem] border-s-light border-solid text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
.alert-dark.custom-alert-icon {
@apply border-s-[0.313rem] border-s-black border-solid text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
.btn-close {
@apply text-[#8c9097];
}
}
/* Customized Alerts */
/* Customized Alerts1 */
.custom-alert1 {
@apply me-0 bg-white dark:bg-bodybg border-0 p-[1.25rem] text-defaulttextcolor;
p {
@apply mb-[2.5rem] text-[#8c9097] text-[0.8rem];
}
.custom-alert-icon {
@apply w-[3.125rem] h-[3.125rem] mb-[0.85rem];
}
.btn-close {
@apply p-0 mb-4;
}
&.alert-primary {
@apply border-t-[0.313rem] border-solid border-primary;
}
&.alert-secondary {
@apply border-t-[0.313rem] border-solid border-secondary;
}
&.alert-warning {
@apply border-t-[0.313rem] border-solid border-warning;
}
&.alert-danger {
@apply border-t-[0.313rem] border-solid border-danger;
}
&.alert-success {
@apply border-t-[0.313rem] border-solid border-success;
}
}
/* Customized Alerts1 */
/* Image alerts */
.alert-img {
@apply flex items-center;
.avatar {
@apply border border-solid border-black/10;
}
}
/* Image alerts */
// .alert-primary {
// @apply bg-primary/10 border-primary/10;
// }
// .alert {
// @apply py-[0.625rem] px-[0.85rem] text-[0.8125rem];
// }
// .alert-light {
// @apply bg-light border-light;
// .alert-link {
// @apply text-defaulttextcolor;
// }
// .btn-close {
// @apply text-defaulttextcolor;
// }
// }
public/assets/scss/tailwind/_avatars.scss
+135
View File
@@ -0,0 +1,135 @@
/* Start Avatar Styles */
.avatar {
@apply relative h-[2.625rem] w-[2.625rem] inline-flex items-center justify-center rounded-md text-white font-medium mb-1;
a.badge:hover {
@apply text-white;
}
img {
@apply w-full h-full rounded-md;
}
.avatar-rounded{
@apply rounded-full!;
img {
@apply rounded-full!;
}
}
&.avatar-radius-0 {
@apply rounded-none;
img {
@apply rounded-none;
}
}
.avatar-badge {
@apply absolute! -top-[4%]! -end-[0.375rem]! w-[1.4rem]! h-[1.4rem]! text-[0.625rem]! border-2! border-solid! border-white! rounded-full! flex! items-center! justify-center!;
}
&.online,
&.offline {
@apply relative before:absolute before:w-[0.75rem] before:h-[0.75rem] before:rounded-full before:end-0 before:bottom-0 before:border-[2px] before:border-solid before:border-white before:dark:border-black;
}
&.online:before {
@apply bg-success;
}
&.offline:before {
@apply bg-gray-500;
}
&.avatar-xs {
@apply w-[1.25rem] h-[1.25rem] leading-[1.25rem] text-[0.65rem];
.avatar-badge {
@apply p-[0.25rem]! w-[1rem]! h-[1rem]! leading-[1rem]! text-[0.5rem]! -top-[25%]! -end-[0.5rem]!;
}
&.online,&.offline {
@apply before:w-[0.5rem] before:h-[0.5rem];
}
}
&.avatar-sm {
@apply w-[1.75rem] h-[1.75rem] leading-[1.75rem] text-[0.65rem];
.avatar-badge {
@apply p-[0.3rem]! w-[1.1rem]! h-[1.1rem]! leading-[1.1rem]! text-[0.5rem]! -top-[38%]! -end-[0.5rem]!;
}
&.online,
&.offline {
@apply before:w-[0.5rem] before:h-[0.5rem];
}
}
&.avatar-md {
@apply w-[2.5rem] h-[2.5rem] leading-[2.5rem] text-[0.8rem];
.avatar-badge {
@apply p-[0.4rem]! w-[1.2rem]! h-[1.2rem]! leading-[1.2rem]! text-[0.65rem]! -top-[6%]! -end-[13%]!;
}
&.online,
&.offline {
@apply before:w-[0.75rem] before:h-[0.75rem];
}
svg {
@apply w-[1.5rem] h-[1.5rem];
}
}
&.avatar-lg {
@apply w-[3rem] h-[3rem] leading-[3rem] text-[1rem];
.avatar-badge {
@apply -top-[15%] -end-[0.25%];
}
&.online,
&.offline {
@apply before:w-[0.8rem] before:h-[0.8rem];
}
svg {
@apply w-[1.8rem] h-[1.8rem];
}
}
&.avatar-xl {
@apply w-[4rem] h-[4rem] leading-[4rem] text-[1.25rem];
.avatar-badge {
@apply -top-[8%] -end-[0.2%];
}
&.online,
&.offline {
@apply before:w-[0.95rem] before:h-[0.95rem];
}
}
&.avatar-xxl {
@apply w-[5rem] h-[5rem] leading-[5rem] text-[1.5rem];
.avatar-badge {
@apply -top-[4%] -end-[0%];
}
&.online,
&.offline {
@apply before:w-[1.05rem] before:h-[1.05rem] bottom-1;
}
}
}
.avatar-rounded{
@apply rounded-full!;
img {
@apply rounded-full!;
}
}
public/assets/scss/tailwind/_breadcrumb.scss
+55
View File
@@ -0,0 +1,55 @@
/* Start:: Breadcrumb Styles */
.breadcrumb {
@apply mb-2;
.breadcrumb-item {
a {
@apply text-primary! ;
}
&.active {
@apply text-defaulttextcolor font-semibold;
}
}
}
.breadcrumb-item+.breadcrumb-item {
@apply ps-2;
}
.breadcrumb-item+.breadcrumb-item{
@apply before:content-["/"] before:text-textmuted before:me-2;
}
.breadcrumb-example1 {
.breadcrumb-item+.breadcrumb-item{
@apply before:!content-[''] before:!text-textmuted before:!me-0 ;
}
}
.breadcrumb-example2 {
.breadcrumb-item+.breadcrumb-item{
@apply before:content-["~"] before:text-textmuted;
}
}
.breadcrumb-style1 {
.breadcrumb-item+.breadcrumb-item::before {
@apply text-textmuted content-["->"];
}
}
.breadcrumb-style2 {
.breadcrumb-item+.breadcrumb-item::before {
@apply text-textmuted content-[''];
}
}
.breadcrumb-style3{
.breadcrumb-item+.breadcrumb-item::before {
@apply text-textmuted content-[''];
}
}
.embedded-breadcrumb:before {
@apply opacity-[0.7] before:content-[''];
}
.dark {
.embedded-breadcrumb:before {
@apply invert-[1];
}
}
/* End:: Breadcrumb Styles */
public/assets/scss/tailwind/_buttons.scss
+411
View File
@@ -0,0 +1,411 @@
/* Start Buttons Styles */
.ti-btn {
@apply py-2 px-3 inline-flex justify-center items-center gap-2 mb-1 rounded-sm border border-transparent font-medium focus:ring-0 focus:outline-none focus:ring-offset-0 transition-all text-sm ms-0;
&.ti-btn-outline {
@apply border;
}
&.ti-btn-disabled {
@apply cursor-not-allowed opacity-[0.65];
}
}
.ti-btn.ti-btn-sm {
@apply w-[1.75rem] h-[1.75rem] text-[0.8rem];
}
.ti-btn.ti-btn-lg {
@apply py-[0.65rem] px-4 text-[0.95rem] rounded-md;
}
.ti-btn {
&.ti-btn-w-xs {
@apply min-w-[5.625rem];
}
&.ti-btn-w-sm {
@apply min-w-[6.975rem];
}
&.ti-btn-w-md {
@apply min-w-[8.125rem];
}
&.ti-btn-w-lg {
@apply min-w-[9.375rem];
}
}
.ti-btn-group {
@apply inline-flex justify-center items-center gap-2 -ms-px first:rounded-s-sm first:ms-0 last:rounded-e-sm font-medium align-middle focus:z-10 transition-all text-sm;
}
.ti-btn-primary-full {
@apply bg-primary text-white;
}
.ti-btn-secondary-full {
@apply bg-secondary text-white;
}
.ti-btn-success-full {
@apply bg-success text-white;
}
.ti-btn-danger-full {
@apply bg-danger text-white;
}
.ti-btn-warning-full {
@apply bg-warning text-white;
}
.ti-btn-info-full {
@apply bg-info text-white;
}
.ti-btn-purple-full {
@apply bg-purple text-white;
}
.ti-btn-orange-full {
@apply bg-orange text-white;
}
.ti-btn-teal-full {
@apply bg-[#12c2c2] text-white;
}
.ti-btn-link {
@apply text-[#0d6efd]! underline! ;
}
.ti-btn-primary {
@apply bg-primary/10 text-primary hover:bg-primary focus:bg-primary hover:text-white focus:text-white;
&.active {
@apply text-white;
}
}
.ti-btn-group:first-child {
@apply ms-0 rounded-s-sm ;
}
.ti-btn-group:last-child {
@apply rounded-e-sm;
}
.ti-btn-secondary {
@apply bg-secondary/10 text-secondary hover:bg-secondary hover:text-white;
}
.ti-btn-warning {
@apply bg-warning/10 text-warning hover:bg-warning hover:text-white;
}
.ti-btn-success {
@apply bg-success/10 text-success hover:bg-success hover:text-white;
}
.ti-btn-light {
@apply bg-light text-defaulttextcolor dark:text-defaulttextcolor/80 hover:bg-light hover:text-defaulttextcolor focus:bg-light/80;
}
.ti-btn-dark {
@apply bg-gray-900! text-gray-100! dark:!text-black hover:!bg-gray-900 hover:!text-white dark:!bg-white;
}
.ti-btn-info {
@apply bg-info/10 text-info hover:text-white hover:bg-info;
}
.ti-btn-danger {
@apply bg-danger/10 text-danger hover:text-white hover:bg-danger focus:ring-danger dark:focus:ring-offset-white/10;
}
.ti-btn-purple {
@apply bg-purple/10 text-purple hover:text-white hover:bg-purple focus:ring-purple dark:focus:ring-offset-white/10;
}
.ti-btn-teal {
@apply bg-[#12c2c2]/10 text-[#12c2c2] hover:text-white hover:bg-[#12c2c2] focus:ring-[#12c2c2] dark:focus:ring-offset-white/10;
}
.ti-btn-orange {
@apply bg-orange/10 text-orange hover:text-white hover:bg-orange focus:ring-orange dark:focus:ring-offset-white/10;
}
.ti-btn-outline-primary {
@apply border-primary! text-primary! hover:!text-white hover:!bg-primary hover:!border-primary focus:!ring-primary dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-secondary {
@apply border-secondary! text-secondary! hover:!text-white hover:!bg-secondary hover:!border-secondary focus:!ring-secondary dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-danger {
@apply border-danger! text-danger! hover:!text-white hover:!bg-danger hover:!border-danger focus:!ring-danger dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-warning {
@apply border-warning! text-warning! hover:!text-white hover:!bg-warning hover:!border-warning focus:!ring-warning dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-info {
@apply border-info! text-info! hover:!text-white hover:!bg-info hover:!border-info focus:!ring-info dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-success {
@apply border-success! text-success! hover:!text-white hover:!bg-success hover:!border-success focus:!ring-success dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-light {
@apply border-light! text-black! dark:!text-defaulttextcolor/70 dark:hover:!bg-bodybg2 hover:!text-defaulttextcolor hover:!bg-gray-200 hover:!border-gray-200 dark:hover:!border-white/10 focus:!ring-gray-100 dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-dark {
@apply border-gray-900! text-gray-900! hover:!text-white hover:!bg-gray-900 hover:!border-gray-900 dark:!border-white/10 dark:!text-white/70 focus:!ring-white/10 dark:focus:!ring-offset-white/10;
}
.ti-btn-outline-teal {
@apply border-[#12c2c2]! text-[#12c2c2]! hover:!text-white hover:!bg-[#12c2c2] hover:!border-[#12c2c2] dark:!border-white/10 dark:!text-white/70 focus:!ring-white/10 dark:focus:!ring-offset-white/10;
}
.ti-btn-ghost-primary {
@apply text-primary hover:bg-primary/10;
}
.ti-btn-ghost-secondary {
@apply text-secondary hover:bg-secondary/10;
}
.ti-btn-ghost-warning {
@apply text-warning hover:bg-warning/10;
}
.ti-btn-ghost-info {
@apply text-info hover:bg-info/10;
}
.ti-btn-ghost-danger {
@apply text-danger hover:bg-danger/10;
}
.ti-btn-ghost-success {
@apply text-success hover:bg-success/10;
}
.ti-btn-ghost-light {
@apply text-defaulttextcolor hover:bg-light/10;
}
.ti-btn-ghost-dark {
@apply text-black hover:bg-black/10;
}
.ti-btn-ghost-orange {
@apply text-orange hover:bg-orange/10;
}
.ti-btn-ghost-purple {
@apply text-purple hover:bg-purple/10;
}
.ti-btn-ghost-teal {
@apply text-[#12c2c2] hover:bg-[#12c2c2]/10;
}
.btn-loader {
@apply pointer-events-none;
}
.ti-btn-primary-gradient {
@apply bg-gradient-to-r from-primary to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-secondary-gradient {
@apply bg-gradient-to-r from-secondary to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-success-gradient {
@apply bg-gradient-to-r from-success to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-danger-gradient {
@apply bg-gradient-to-r from-danger to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-warning-gradient {
@apply bg-gradient-to-r from-warning to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-info-gradient {
@apply bg-gradient-to-r from-info to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-orange-gradient {
@apply bg-gradient-to-r from-orange to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-purple-gradient {
@apply bg-gradient-to-r from-purple to-[#0086ed] text-white border-0 hover:border-0;
}
.ti-btn-teal-gradient {
@apply bg-gradient-to-r from-[#12c2c2] to-[#0086ed] text-white border-0 hover:border-0;
}
.btn-border-down {
&.btn-primary-light {
@apply border-b-[0.1875rem] border-solid border-primary;
}
}
/* End Buttons Styles */
/* Start:: Social Buttons */
.ti-btn-facebook {
@apply bg-facebook text-white border border-solid border-facebook;
&:hover,
&:focus,
&:active {
@apply bg-facebook! text-white! border! border-solid! border-facebook!;
}
}
.ti-btn-google {
@apply bg-google text-white border border-solid border-google;
&:hover,
&:focus,
&:active {
@apply bg-google! text-white! border! border-solid! border-google!;
}
}
.ti-btn-twitter {
@apply bg-twitter text-white border border-solid border-twitter;
&:hover,
&:focus,
&:active {
@apply bg-twitter! text-white! border! border-solid! border-twitter!;
}
}
.ti-btn-github {
@apply bg-github text-white border border-solid border-github;
&:hover,
&:focus,
&:active {
@apply bg-github! text-white! border! border-solid! border-github!;
}
}
.ti-btn-youtube {
@apply bg-youtube text-white border border-solid border-youtube;
&:hover,
&:focus,
&:active {
@apply bg-youtube! text-white! border! border-solid! border-youtube!;
}
}
.ti-btn-instagram {
@apply bg-[#f09433] text-white border border-solid border-transparent;
background: -moz-linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background: -webkit-linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
&:hover,
&:focus,
&:active {
@apply text-white border border-solid border-transparent;
}
}
/* End:: Social Buttons */
.ti-btn-group > .ti-btn-group:not(:first-child) > .ti-btn,
.ti-btn-group > .ti-btn:nth-child(n + 3),
.ti-btn-group > :not(.ti-btn-check) + .ti-btn {
@apply rounded-s-none;
}
.ti-btn-group-vertical {
@apply flex-col items-start justify-center relative inline-block align-middle;
}
.ti-btn-group-vertical > .ti-btn-group:not(:last-child) > .ti-btn,
.ti-btn-group-vertical > .ti-btn:not(:last-child):not(.ti-dropdown-toggle) {
@apply rounded-b-none border-b-0;
}
.ti-btn-group-vertical > .ti-btn-group:not(:first-child) > .ti-btn,
.ti-btn-group-vertical > .ti-btn ~ .ti-btn {
@apply rounded-t-none;
}
.ti-btn-group-vertical {
.ti-btn-info-full {
@apply hover:bg-info/90;
}
.ti-btn-primary-full {
@apply hover:bg-primary/90;
}
}
.ti-btn-check {
@apply absolute pointer-events-none sr-only;
}
.ti-btn-group {
.ti-btn {
@apply py-[0.45rem] px-3;
}
}
.ti-btn-group-lg {
.ti-btn {
@apply py-[0.65rem] px-4;
}
}
.ti-btn-group-sm {
.ti-btn {
@apply py-1 px-2;
}
}
.ti-btn-group-vertical {
@apply flex-col items-start justify-center relative inline-flex align-middle;
}
/* Start:: Label Buttons */
.label-ti-btn {
@apply relative ps-[2.6rem];
}
.label-ti-btn-icon {
@apply absolute w-[2.25rem] text-[1rem] flex items-center justify-center -start-0 -top-0 -bottom-0 bg-white/20;
}
.label-ti-btn.label-end {
@apply ps-4 pe-[2.6rem];
.label-ti-btn-icon {
@apply -end-0 start-auto;
}
}
.custom-button {
@apply relative ps-[2.75rem];
.custom-ti-btn-icons {
@apply shadow-[0_0_1px_0.25rem_rgba(0_0_0_0.1)] absolute -start-[0.125rem] top-0 bg-white flex items-center justify-center overflow-hidden p-[0.375rem] rounded-[3.125rem]
text-[1rem] w-[2.25rem] h-[2.25rem];
i {
@apply absolute;
}
}
}
.ti-btn-border-down.ti-btn-teal {
@apply border-b-[0.1875rem]! border-t-0! border-x-0! border-solid! border-[#12c2c2]!;
}
.ti-btn-border-start.ti-btn-secondary {
@apply border-s-[0.1875rem]! border-t-0! border-b-0! border-e-0! border-solid! border-secondary!;
}
.ti-btn-border-end.ti-btn-purple {
@apply border-e-[0.1875rem]! border-t-0! border-s-0! border-b-0! border-solid! border-purple!;
}
.ti-btn-border-top.ti-btn-warning {
@apply border-t-[0.1875rem]! border-b-0! border-x-0! border-solid! border-warning!;
}
.ti-btn-hover {
@apply relative;
&.ti-btn-hover-animate {
@apply transition-all duration-[0.2s] ease-linear delay-[0s] before:content-["\F417"] before:text-[0.8125rem] before:absolute
before:flex before:items-center before:justify-center before:end-0 before:top-0 before:opacity-0 before:h-full before:w-[2rem] before:transition-all
before:duration-[0.2s] before:ease-linear before:delay-[0s];
&:hover {
@apply pe-8 before:opacity-[1] before:indent-0;
}
}
}
.ti-btn-darken-hover {
@apply relative;
&:hover {
@apply before:absolute before:w-full before:h-full before:bg-black/[0.25] before:top-0 before:start-0;
}
}
.ti-btn-loader i {
@apply animate-spin!;
}
.ti-btn-group-vertical > .ti-btn,
.ti-btn-group > .ti-btn {
@apply relative flex-grow;
}
.btn-check {
@apply absolute! pointer-events-none! sr-only! w-[1px]! h-[1px]! p-0!;
}
/* End:: Label Buttons */
public/assets/scss/tailwind/_cards.scss
+6
View File
@@ -0,0 +1,6 @@
.box.box-bg-primary {
@apply bg-primary! text-white! ;
}
.box.box-bg-success {
@apply bg-secondary! text-white! ;
}
public/assets/scss/tailwind/_carousels.scss
+9
View File
@@ -0,0 +1,9 @@
.mySwiper1{
.swiper-button-next:after,
.swiper-button-prev:after{
@apply text-[1.5rem]! font-[300]! text-white!;
}
.swiper-pagination-bullet {
@apply bg-white text-white w-[30px] h-[3px] rounded-none;
}
}
public/assets/scss/tailwind/_charts.scss
+133
View File
@@ -0,0 +1,133 @@
/* Start Chart Styles */
#pie-basic,
#polararea-basic {
.apexcharts-canvas {
@apply my-0 mx-auto;
}
}
.chartjs-chart {
@apply max-h-[18.75rem]!;
}
.echart-charts {
@apply h-80;
}
.apexcharts-legend-marker {
@apply me-1;
}
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
@apply bg-white dark:bg-bodybg border-gray-200 dark:border-white/10 z-0;
}
.apexcharts-treemap-rect,
.apexcharts-heatmap-rect,
.apexcharts-marker,
#apexcharts-radialbarTrack-0 {
@apply dark:stroke-black/20;
}
.apexcharts-pie-series {
path {
@apply dark:stroke-black/20;
}
}
.apexcharts-legend-text {
@apply dark:text-white;
}
.apexcharts-legend-text,
.apexcharts-datalabel-value {
@apply dark:fill-white dark:text-white;
}
.apexcharts-radar-series.apexcharts-plot-series {
polygon,
line {
@apply dark:stroke-black/20;
}
}
.apexcharts-pie {
line,
circle {
@apply dark:stroke-black/20;
}
}
.apexcharts-toolbar {
@apply hidden! sm:!flex ;
}
.apexcharts-text,
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-menu-icon svg {
@apply dark:!fill-white/80 ;
}
.apexcharts-toolbar {
@apply z-0;
}
.apexcharts-text {
title,
tspan {
@apply text-gray-500 fill-gray-500;
}
}
#area-chart,
#line-chart,
#candlestick-basic,
#boxplot-basic,
#bubble-3d,
#heatmap-basic,
#treemap-basic {
.apexcharts-title-text,
.apexcharts-subtitle-text {
@apply rtl:translate-x-56;
}
}
#bar-chart {
.apexcharts-yaxis-label {
@apply rtl:-translate-x-20;
}
}
#timeline-basic,
#candlestick-basic,
#heatmap-basic {
.apexcharts-yaxis-label {
@apply rtl:-translate-x-12;
}
}
.apexcharts-menu {
@apply dark:dark:bg-bodybg dark:border-white/10;
}
.apexcharts-theme-light .apexcharts-menu-item:hover {
@apply dark:bg-black/20;
}
#boxplot-basic {
.apexcharts-series {
path {
@apply dark:stroke-white/10;
}
}
}
/* End Chart Styles */
public/assets/scss/tailwind/_components.scss
+400
View File
@@ -0,0 +1,400 @@
/* Start Box Styles */
body {
@apply dark:!bg-bodybg2 ;
}
.box {
@apply flex flex-col shadow-sm rounded-md text-defaulttextcolor dark:text-defaulttextcolor/70 bg-white text-[0.813rem] mb-6 relative dark:bg-bodybg;
}
.box-header {
@apply font-medium border-b border-b-defaultborder md:flex items-center gap-[0.25rem] rounded-t-sm px-[1.25rem] py-4 dark:border-white/10 flex-wrap;
}
.box-title {
@apply relative font-[700] text-defaulttextcolor text-[.9375rem] me-auto dark:text-defaulttextcolor/70 before:absolute;
}
.box {
.box-header {
.box-title {
@apply before:absolute before:h-4 before:w-[0.2rem] before:top-[0.15rem] before:-start-[0.65rem] before:bg-gradient-to-b before:from-primary/50 before:to-secondary/50 before:rounded-md;
}
}
}
.box-body {
@apply p-5 text-defaulttextcolor dark:text-defaulttextcolor/70;
}
.box-footer {
@apply border-t border-t-defaultborder rounded-b-sm py-4 px-[1.25rem] text-[var(--font-size-defaultsize)] text-defaulttextcolor md:py-4 md:px-5 dark:border-white/10;
}
.display-1 {
@apply text-[5rem];
}
.display-2 {
@apply text-[4.5rem];
}
.display-3 {
@apply text-[4rem];
}
.display-4 {
@apply text-[3.5rem];
}
.display-5 {
@apply text-[3rem];
}
.display-6 {
@apply text-[2.5rem];
}
.overlay-box {
@apply relative overflow-hidden text-white/90 before:absolute before:bg-black/20 before:inset-0;
.box-header {
@apply border-white/10;
}
.box-footer {
@apply border-white/10;
}
}
.over-content-bottom {
@apply top-auto;
}
.box-anchor {
@apply content-[""] absolute inset-0 z-[1] pointer-events-none;
}
.box.box-fullscreen {
@apply fixed inset-0 z-[9999] m-0 rounded-none;
}
.box-img-overlay {
@apply absolute inset-0 rounded-sm overflow-auto;
}
.card-img-top {
@apply rounded-t-md! ;
}
/* End Box Styles */
.lead {
@apply text-[1.25rem] font-[300];
}
/* Start Alert Styles */
.alert {
@apply text-sm rounded-sm px-4 py-3 mb-5 last:mb-0;
}
.text-badge .badge {
@apply absolute -end-4 -top-4;
}
/* End Alert Styles */
.review-quote {
@apply absolute end-[0.8rem] text-[1.875rem] leading-[0] text-primary/70 bg-transparent p-[0.625rem];
}
/* Start Badge Styles */
.badge {
@apply inline-flex items-center text-[0.75em] py-1 px-[0.45rem] font-semibold;
&:last-child {
@apply mb-0;
}
}
/* End Badge Styles */
/* Start List-Group Styles */
.ti-list-group {
@apply items-center font-normal text-[0.8125rem] border border-solid border-defaultborder rounded-md text-start dark:border-defaultborder/10;
.ti-list-group-item {
@apply py-3 px-[1.25rem] border-b border-solid border-defaultborder dark:border-defaultborder/10 last:border-b-0;
&.active {
@apply text-white! bg-primary! border-primary! rounded-t-md!;
}
&.disabled,
&:disabled {
@apply text-textmuted! bg-light! opacity-[0.5]!;
}
&.ti-list-group-item-action {
@apply w-full;
&:hover,&:focus {
@apply bg-light;
}
}
&.ti-icon-link {
@apply focus:z-10 focus:outline-none py-[0.375rem] px-3 focus:ring-0;
}
}
}
.ti-list-group-flush {
@apply border-0;
}
/* End List-Group Styles */
/* Start Progress Styles */
.ti-main-progress {
@apply flex w-full h-1.5 rounded-full overflow-hidden;
.ti-main-progress-bar {
@apply flex flex-col justify-center overflow-hidden;
}
}
/* End Progress Styles */
/* Start Spinner Styles */
.ti-spinner {
@apply animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent rounded-full;
}
/* End Spinner Styles */
/* Start Toast Styles */
.ti-toast {
@apply max-w-xs border rounded-sm shadow-lg dark:border-white/10;
}
/* End Toast Styles */
.ti-border {
@apply border-[#e5e7eb];
}
/* Start:: Nav-tabs */
.nav-link {
&:focus,
&:hover {
@apply text-primary cursor-pointer;
}
}
.nav-tabs {
@apply border-defaultborder;
.nav-item.show .nav-link,
.nav-link.active {
@apply text-defaulttextcolor bg-light border-defaultborder;
}
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
@apply border-defaultborder;
}
.nav-tabs-header {
@apply border-0;
.nav-item {
@apply me-2;
&:last-child {
@apply me-0;
}
.nav-link {
@apply border border-solid rounded-md border-transparent text-[0.8rem] p-2 font-medium;
&.active {
@apply bg-primary/10 text-primary border border-solid border-transparent;
}
&:hover,
&:focus {
@apply border border-solid border-transparent text-primary;
}
}
}
}
.nav-justified .nav-item,
.nav-justified > .nav-link {
@apply basis-0 flex-grow text-center;
}
.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
@apply w-full;
}
.nav.nav-style-1 {
@apply border-0;
}
.nav.nav-style-3 {
.nav-link {
@apply rounded-none!;
}
.nav-link {
@apply border-b-[3px] border-solid border-transparent;
}
.nav-link.active {
@apply bg-transparent! border-b-[3px]! border-solid! border-primary! text-primary! rounded-none!;
}
}
/* End:: Nav-tabs */
/* Start:: Tab-style-6 */
.tab-style-6 {
@apply border-0 bg-primary/10 rounded-md text-primary p-2;
.nav-item {
@apply border-0 me-2;
&:last-child {
@apply me-0;
}
.nav-link {
@apply text-primary py-2 px-4 text-[var(--font-size-defaultsize)] border-0 font-medium;
&.active {
@apply border-0 bg-primary text-white shadow-sm;
}
&:hover,
&:focus {
@apply border-0;
}
}
}
}
.navbar {
@apply rounded-md;
.navbar-nav {
.nav-link {
@apply leading-none py-[0.4rem] px-4 font-medium;
}
}
.navbar-toggler {
@apply p-[0.4rem] text-[1rem] leading-none text-black border border-solid border-defaultborder rounded-md;
.navbar-toggler-icon {
@apply w-[1rem] h-[1rem] relative bg-none before:content-['\F479'] before:absolute before:text-[1rem] before:text-defaulttextcolor before:start-0;
}
}
.navbar-toggler:focus {
@apply shadow-none;
}
}
// .nav-pills .nav-link.active,
// .nav-pills .show > .nav-link {
// @apply text-white bg-primary py-2 px-4 rounded-md ;
// }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
@apply text-white bg-primary;
}
.navitem {
@apply me-4;
}
/* End:: Tab-style-6 */
/* start::background */
.bg-primary-gradient {
@apply bg-gradient-to-r from-primary to-[#0086ed]! text-white! ;
}
.bg-secondary-gradient {
@apply bg-gradient-to-r from-secondary to-[#0086ed]! text-white!;
}
.bg-warning-gradient {
@apply bg-gradient-to-r from-warning to-[#0086ed]! text-white!;
}
.bg-info-gradient {
@apply bg-gradient-to-r from-info to-[#0086ed]! text-white!;
}
.bg-success-gradient {
@apply bg-gradient-to-r from-success to-[#0086ed]! text-white!;
}
.bg-danger-gradient {
@apply bg-gradient-to-r from-danger to-[#0086ed]! text-white!;
}
.bg-orange-gradient {
@apply bg-gradient-to-r from-orange to-[#0086ed]! text-white!;
}
.bg-purple-gradient {
@apply bg-gradient-to-r from-purple to-[#0086ed]! text-white!;
}
.bg-teal-gradient {
@apply bg-gradient-to-r from-teal to-[#0086ed]! text-white!;
}
.bg-light-gradient {
@apply bg-gradient-to-r from-light to-[#0086ed]! text-white!;
}
.bg-dark-gradient {
@apply bg-gradient-to-r from-black to-[#0086ed]! text-white!;
}
/* End:: backgrounds */
code {
@apply text-[0.675rem]! text-red! break-words!;
}
.color-container {
@apply w-[3rem] h-[3rem] rounded-full flex items-center justify-center leading-[3rem];
}
.bd-example-row [class^="col"],
.bd-example-cssgrid .grid > * {
@apply pt-3 pb-3 bg-light/75 border border-solid border-defaultborder;
}
.bd-example-cssgrid .grid > * {
@apply rounded-sm;
}
.bd-example-row-flex-cols .grid {
@apply min-h-[10rem] bg-light/50;
.col {
@apply p-3;
}
}
.flex-container div {
@apply bg-transparent border-0;
> div {
@apply bg-light border border-solid border-white dark:border-bodybg;
}
}
.ratio {
@apply relative w-full before:block;
}
.bd-example-ratios .ratio {
@apply inline-block w-[10rem] text-textmuted bg-primary/10 border-defaultborder rounded-md;
}
.bd-example-position-utils .position-absolute {
@apply w-8 h-8 bg-primary/10 rounded-[0.375rem] absolute;
}
.bd-example-position-utils .position-relative {
@apply h-[12.5rem] bg-light relative;
}
.border-container {
@apply inline-block w-[5rem] h-[5rem] m-1 bg-light/30;
}
.upcoming-events-list li {
@apply mb-[1.5rem] ps-[1.5rem] relative before:absolute before:h-full before:w-[0.25rem] before:start-0 before:rounded-md;
}
.upcoming-events-list li:nth-child(1) {
@apply before:bg-primary/30;
}
.upcoming-events-list li:nth-child(2) {
@apply before:bg-secondary/30;
}
.upcoming-events-list li:nth-child(3) {
@apply before:bg-success/30;
}
.upcoming-events-list li:nth-child(4) {
@apply before:bg-danger/30;
}
.upcoming-events-list li:nth-child(5) {
@apply before:bg-info/30;
}
.upcoming-events-list li:nth-child(5) {
@apply before:bg-warning/30;
}
.upcoming-events-list li:last-child {
@apply mb-0;
}
#external-events .fc-event {
@apply cursor-move mb-[0.4rem] py-[0.375rem] px-3 text-[0.75rem] rounded-[0.35rem];
}
.glightbox {
@apply overflow-hidden;
}
/* start:: project-list */
.project-list-title {
@apply max-w-[13.375rem];
}
public/assets/scss/tailwind/_custom.scss
+236
View File
@@ -0,0 +1,236 @@
/* Start Custom Styles */
.page-header {
@apply py-5;
}
.main-content {
@apply px-6;
}
.content {
@apply lg:ms-60 mt-[60px] transition-all ms-0;
}
pre {
@apply border-gray-200 border bg-slate-200 text-[0.75rem] p-5;
}
html {
@apply font-inter scroll-smooth text-start;
}
html {
&[dir="rtl"] {
direction:rtl !important;
}
}
body {
@apply scroll-smooth bg-bodybg h-full text-defaulttextcolor dark:text-white m-0 font-inter font-normal text-[0.813rem] relative text-start ;
}
[dir=rtl]{
body {
direction:rtl;
}
}
.page {
@apply flex flex-col h-full min-h-screen;
}
::-webkit-scrollbar {
@apply w-[0px] h-[5px] bg-gray-100;
}
::-webkit-scrollbar-thumb {
@apply w-[0px] h-[2px] bg-gray-300;
}
.dark {
::-webkit-scrollbar {
@apply bg-black/20;
}
::-webkit-scrollbar-thumb {
@apply bg-black/20;
}
}
code {
@apply text-danger text-sm;
}
.icons-list {
@apply list-none mt-0 -me-[1px] -mb-[1px] ms-0 p-0 flex flex-wrap;
}
.icons-list .icons-list-item {
@apply flex flex-col text-center p-2 no-underline relative items-center justify-center border border-gray-200 dark:border-white/10 rounded-md;
&:hover {
i {
@apply scale-150;
}
}
}
.icons-list .icons-list-item i {
@apply text-2xl text-primary;
}
.icon-label {
@apply text-gray-500 dark:text-white/70 text-xs mt-4;
}
.simplebar-scrollbar:before {
@apply bg-gray-200!;
}
.simplebar-track.simplebar-vertical {
@apply w-[10px]!;
}
[data-toggled="icon-overlay-close"] {
.content {
@apply lg:ms-24;
}
}
/* Start:: Back to Top */
.scrollToTop {
@apply fixed bottom-5 end-5 hidden bg-primary text-white flex items-center justify-center text-center z-10 h-10 w-10 bg-no-repeat bg-center transition duration-100 rounded-md shadow-lg;
}
/* Start:: Back to Top */
select option:active,
select option:hover,
select option:focus {
background-color: green !important;
}
/* End Custom Styles */
select {
@apply bg-[start_0.5rem_center] pe-9 ps-2;
}
#drag-right,
#drag-center,
#drag-left {
.box {
@apply touch-none;
}
}
.ti-img-thumbnail{
@apply p-1 rounded-md border border-defaultborder dark:border-defaultborder/10 max-w-full h-auto dark:bg-bodybg2 mx-auto;
}
.ti-img-thumbnail-rounded{
@apply p-1 rounded-full border border-defaultborder dark:border-defaultborder/10 max-w-full h-auto dark:bg-bodybg2 mx-auto;
}
#responsive-overlay {
@apply transition-all duration-100 fixed inset-0 z-[101] bg-[#32325180] dark:bg-[#323251cc] invisible opacity-100;
&.active {
@apply opacity-50 dark:opacity-80 visible;
}
}
.container,
.container-fluid {
@apply w-full px-[calc(1.5rem*0.5)] mx-auto;
}
.container {
@apply sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] 2xl:max-w-[1320px];
}
@media (min-width: 576px) {
.container,
.container-sm {
@apply max-w-[540px] mx-auto;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
@apply max-w-[720px] mx-auto;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
@apply max-w-[960px] mx-auto;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
@apply max-w-[1140px] mx-auto;
}
}
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
@apply max-w-[1320px] mx-auto;
}
}
[class^="ri-"],
[class*=" ri-"] {
@apply inline-flex;
}
@layer utilities {
.aspect-w-16 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 16;
}
.aspect-w-16 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-h-9 {
--tw-aspect-h: 9;
}
.aspect-w-1 {
position: relative;
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
--tw-aspect-w: 1;
}
.aspect-w-1 > * {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect-h-1 {
--tw-aspect-h: 1;
}
}
public/assets/scss/tailwind/_dropdown.scss
+134
View File
@@ -0,0 +1,134 @@
/* Start Dropdown Styles */
.ti-dropdown {
@apply relative inline-flex;
}
.ti-dropdown-toggle {
@apply py-3 px-4 inline-flex justify-center items-center gap-2 rounded-sm border dark:border-defaultborder/10 font-medium shadow-sm align-middle;
}
.ti-dropdown-caret {
@apply w-2.5 h-2.5 text-gray-600 dark:text-white/70;
}
.ti-dropdown-menu {
@apply transition-[opacity,margin] hs-dropdown-open:opacity-100 opacity-0 z-[13] mt-2 min-w-[10rem] bg-white shadow-md border border-gray-200 rounded-sm dark:bg-bodybg dark:border-white/10 dark:divide-white/10;
}
.ti-dropdown-item {
@apply py-2 px-[0.9375rem] text-[0.8125rem] font-medium block text-gray-800 hover:bg-primary/[0.05] hover:text-primary focus:ring-0 focus:ring-primary dark:text-white/70 dark:hover:bg-primary/5 dark:hover:text-primary;
&.active{
@apply bg-primary! text-white!;
}
&.disabled{
@apply text-textmuted bg-transparent pointer-events-none;
}
}
.ti-dropdown-menu-hover {
@apply after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full;
}
.ti-dropdown-divider {
@apply py-2 first:pt-0 last:pb-0 dark:border-defaultborder/10;
}
hr{
@apply dark:!border-defaultborder/10;
}
.ti-dropdown-title {
@apply block py-2 px-3 text-xs font-medium uppercase text-gray-400 dark:text-white/70;
}
.ti-dropdown-header {
@apply py-3 px-5 -m-2 bg-gray-100 rounded-t-sm dark:bg-black/20;
.ti-dropdown-header-title {
@apply text-sm text-gray-500 dark:text-white;
}
.ti-dropdown-header-content {
@apply text-sm font-medium text-gray-800 dark:text-white;
}
}
.ti-dropdowm-profileimg {
@apply w-8 h-auto rounded-full;
}
.ti-dropdowm-profileimg-content {
@apply text-gray-600 font-medium truncate max-w-[7.5rem] dark:text-white/70;
}
.ti-dropdown-icon {
@apply w-4 h-4 text-gray-600 dark:text-white/70;
}
.ti-dropdown-toggle{
@apply relative;
.ti-dropdown-toggle{
@apply after:inline-block after:ms-1 after:align-[0] after:content-["\f282"] after:border-0 after:text-[0.6rem] after:font-semibold;
}
.ti-dropup .ti-dropdown-toggle{
@apply after:inline-block after:ms-1 after:align-[0] after:content-["\F286"] after:border-0 after:text-[0.6rem] after:font-semibold;
}
.dropend .ti-dropdown-toggle{
@apply after:inline-block after:ms-1 after:align-[0] after:content-["\F285"] after:border-0 after:text-[0.6rem] after:font-semibold;
}
.dropstart .ti-dropdown-toggle{
@apply before:inline-block before:ms-1 before:align-[0] before:content-["\F284"] before:border-0 before:text-[0.6rem] before:font-semibold;
}
.dropdown-toggle-split {
@apply opacity-[0.85];
}
}
.dropmenu-item-warning {
.ti-dropdown-item {
&:hover,
&:focus,
&:active,
&.active {
@apply bg-warning/10! text-warning!;
}
}
}
.dropmenu-item-info {
.ti-dropdown-item {
&:hover,
&:focus,
&:active,
&.active {
@apply bg-info/10! text-info!;
}
}
}
.dropmenu-light-success{
@apply bg-success/10 backdrop-blur-3xl;
.ti-dropdown-item {
&:hover,
&:focus,
&:active,
&.active {
@apply text-white! bg-success!;
}
}
}
.dropmenu-light-danger{
@apply bg-danger/10 backdrop-blur-3xl;
.ti-dropdown-item {
&:hover,
&:focus,
&:active,
&.active {
@apply text-white! bg-danger!;
}
}
}
.ti-btn-list a{
@apply me-0;
}
.bd-example>.dropdown-menu {
@apply static block;
}
.dropdown-header {
@apply block py-2 px-4 mb-0 text-[0.875rem];
}
/* End Dropdown Styles */
public/assets/scss/tailwind/_forms.scss
+500
View File
@@ -0,0 +1,500 @@
/* Start Form Styles */
.ti-form-input {
@apply border border-inputborder block w-full text-sm focus:border-gray-200 py-[0.75rem] px-[0.5rem] focus:shadow-sm dark:shadow-white/10 dark:bg-bodybg dark:border-white/10 dark:focus:border-white/10 dark:text-white/70 focus-visible:outline-none;
}
.ti-switch {
@apply relative w-[3.25rem] h-7 bg-gray-200 checked:bg-none checked:bg-primary border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 ring-transparent focus:border-primary focus:shadow-none focus:ring-transparent focus:ring-offset-0 ring-offset-white focus:outline-0 appearance-none dark:bg-black/20 dark:checked:bg-primary dark:focus:ring-offset-white/10 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-white before:translate-x-0 ltr:checked:before:translate-x-full rtl:checked:before:-translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-black/20;
}
.ti-form-select {
@apply py-3 px-4 pe-9 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:dark:bg-bodybg dark:border-white/10 dark:text-white/70;
}
.ti-form-select-label {
@apply block text-sm font-medium mb-2 dark:text-white;
}
.ti-form-label {
@apply block text-sm font-medium mb-2 dark:text-white;
}
.ti-form-control {
@apply border border-inputborder text-defaulttextcolor bg-white dark:bg-bodybg2 dark:border-white/10 text-[0.875rem] font-normal leading-[1.6] rounded-[0.35rem] py-2 px-[0.85rem] placeholder:text-defaulttextcolor dark:placeholder:text-defaulttextcolor/70;
&:focus {
@apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70;
}
&:focus-visible {
@apply outline-none!
}
}
.form-select {
@apply block w-full py-[0.375rem] pe-[2.25rem] ps-[0.75rem] text-[1rem] font-normal leading-[1.5];
}
.form-select {
@apply bg-white dark:bg-bodybg border border-solid border-inputborder dark:border-white/10 text-defaulttextcolor text-[var(--font-size-defaultsize)] rounded-md focus:border focus:border-primary;
option {
@apply bg-white dark:bg-bodybg py-[0.35rem] px-3 rounded-sm border border-primary/10;
}
option:checked {
@apply bg-primary/20 text-primary;
}
}
.form-check-input {
@apply h-[0.9rem] w-[0.9rem] bg-white dark:bg-bodybg dark:border-white/10 border border-solid border-inputborder rounded-sm;
&:focus {
@apply border! border-defaultborder! dark:!border-defaultborder/10 outline-none!;
}
&:checked {
@apply bg-primary border-primary;
}
&.form-checked-outline {
&:checked {
@apply bg-transparent border-primary;
}
}
&.form-checked-secondary {
&:checked {
@apply bg-secondary border-secondary hover:bg-secondary;
}
}
&.form-checked-warning {
&:checked {
@apply bg-warning border-warning hover:bg-warning;
}
}
&.form-checked-info {
&:checked {
@apply bg-info border-info hover:bg-info;
}
}
&.form-checked-success {
&:checked {
@apply bg-success! border-success focus:bg-success! focus:border-success focus:shadow-success focus:ring-0;
}
}
&.form-checked-danger {
&:checked {
@apply bg-danger border-danger hover:bg-danger;
}
}
&.form-checked-light {
&:checked {
@apply bg-light border-light hover:bg-light;
}
}
&.form-checked-dark {
&:checked {
@apply bg-[#232323] border-[#232323] hover:bg-black;
}
}
}
[type="radio"] {
@apply dark:bg-bodybg dark:border-defaultborder/10 ring-primary;
}
.form-check-input {
@apply align-top appearance-none;
}
.form-check-input[type="checkbox"] {
@apply rounded-[0.25rem];
}
.form-check-input[type="radio"] {
@apply rounded-[50%] ring-primary;
}
.form-check-input:active {
@apply brightness-[90%];
}
.form-check-input:focus {
@apply outline-none! ;
}
.form-check-input:checked {
@apply bg-primary border-primary ring-primary;
}
.input-group-text {
@apply border-inputborder text-[0.875rem] rounded-[0.3125rem] bg-light text-defaulttextcolor;
.form-control {
@apply border-0! rounded-s-none! ;
}
}
.input-group-text {
@apply flex items-center py-[0.375rem] px-3 text-[0.875rem] font-normal leading-[1.5] text-center whitespace-nowrap border border-solid border-defaultborder dark:border-defaultborder/10;
}
.input-group {
@apply relative flex flex-wrap items-stretch w-full;
}
.input-group > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
@apply relative w-[1%] min-w-0 flex-grow flex-shrink basis-auto;
}
.form-control {
@apply border border-solid border-inputborder text-defaulttextcolor bg-white dark:border-white/10 dark:!bg-bodybg text-[0.875rem] font-normal leading-[1] rounded-none py-2 px-[0.85rem] placeholder:text-defaulttextcolor dark:placeholder:text-defaulttextcolor/70 placeholder:opacity-40 placeholder:font-medium placeholder:text-[0.8rem] ;
&:focus {
@apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70 outline-none;
}
&:focus-visible{
@apply outline-none
}
}
.form-checked-outline:checked[type="checkbox"] {
@apply bg-none relative bg-transparent hover:bg-transparent before:absolute before:text-primary before:w-[0.625rem] before:h-[0.625rem] before:-top-4 before:start-0 before:text-[0.688rem];
&.form-checked-success {
@apply before:text-success;
}
}
.form-control-lg {
@apply text-[.75rem] py-2 px-4;
}
.form-check-md .form-check-input {
@apply w-[1.15rem] h-[1.15rem];
}
.form-check-lg .form-check-input {
@apply w-[1.35rem] h-[1.35rem];
}
.form-check-reverse {
@apply pr-[1.5rem] rtl:pl-[1.5rem] ps-0 text-end;
}
.form-check-reverse .form-check-input {
@apply ltr:float-right rtl:float-left -me-[1.5em] ms-0;
}
[type="text"]:focus,
input:where(:not([type])):focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
@apply border-defaultborder! dark:!border-defaultborder/10 ring-0!;
}
[type="checkbox"]:checked:hover,
[type="checkbox"]:checked:focus,
[type="radio"]:checked:hover,
[type="radio"]:checked:focus {
@apply bg-primary ring-primary;
}
/* Start:: toggle switches-1 */
.toggle {
@apply w-[3.75rem] h-[1.563rem] bg-light ms-[0.625rem] mb-[0.313rem] p-[0.125rem] rounded-[0.188rem] relative overflow-hidden transition-all duration-[0.2s] ease-linear;
span {
@apply absolute top-[0.188rem] bottom-1 start-[0.188rem] block w-[1.25rem] rounded-[0.125rem] bg-white shadow-sm cursor-pointer transition-all duration-[0.2s] ease-linear
before:-start-[1.563rem] before:content-["on"] after:content-["off"] after:-end-[1.813rem] after:text-textmuted;
&::before,
&::after {
@apply absolute text-[0.625rem] font-medium space-x-2 rtl:space-x-reverse uppercase top-[0.188rem] leading-[1.38] transition-all duration-[0.2s] ease-linear;
}
}
&.on {
@apply bg-primary/30;
span {
@apply bg-primary before:text-primary start-[2.313rem];
}
&.toggle-secondary {
@apply bg-secondary/40;
span {
@apply bg-secondary before:text-secondary;
}
}
&.toggle-warning {
@apply bg-warning/40;
span {
@apply bg-warning before:text-warning;
}
}
&.toggle-info {
@apply bg-info/40;
span {
@apply bg-info before:text-info;
}
}
&.toggle-success {
@apply bg-success/40;
span {
@apply bg-success before:text-success;
}
}
&.toggle-danger {
@apply bg-danger/40;
span {
@apply bg-danger before:text-danger;
}
}
&.toggle-light {
@apply bg-light/40;
span {
@apply bg-light before:text-textmuted;
}
}
&.toggle-dark {
@apply bg-black/40;
span {
@apply bg-black before:text-white;
}
}
span {
@apply start-[2.313rem];
}
&.toggle-sm span {
@apply start-[2.313rem] before:-top-[1px] before:-start-[1.563rem];
}
&.toggle-lg span {
@apply start-[2.563rem] before:top-2 before:-start-[1.75rem];
}
}
&.toggle-sm {
@apply h-[1.063rem] w-[3.125rem];
span {
@apply w-[0.625rem] h-[0.625rem] after:-end-[1.875rem] after:-top-[1px];
}
}
&.toggle-lg {
@apply h-[2.125rem] w-[4.5rem];
span {
@apply w-[1.75rem] after:top-2 after:-end-[1.938rem];
}
}
}
/* Start:: toggle switches-2 */
.custom-toggle-switch > input[type="checkbox"] {
@apply hidden;
}
.custom-toggle-switch > label {
@apply cursor-pointer h-0 relative w-[2.5rem];
}
.label-primary {
@apply bg-primary text-white;
}
.label-secondary {
@apply bg-secondary text-white;
}
.label-warning {
@apply bg-warning text-white;
}
.label-info {
@apply bg-info text-white;
}
.label-success {
@apply bg-success text-white;
}
.label-danger {
@apply bg-danger text-white;
}
.label-light {
@apply bg-light text-white;
}
.label-dark {
@apply bg-black text-white;
}
.custom-toggle-switch > input[type="checkbox"]:checked + label::before {
@apply bg-inherit opacity-[0.5];
}
.custom-toggle-switch > label {
@apply before:bg-textmuted before:rounded-md before:h-4 before:-mt-2 before:absolute before:opacity-[0.3] before:transition-all before:duration-[0.4s] before:ease-in-out before:w-[2.5rem]
after:bg-white after:rounded-[1rem] after:h-[1.5rem] after:shadow-[0_0_0.313rem_rgba(228,229,237,0.8)] after:-start-1 after:-mt-2 after:absolute after:-top-1 after:transition-all after:duration-[0.3s] after:ease-in-out after:w-[1.5rem];
}
.custom-toggle-switch > input[type="checkbox"]:checked + label::after {
@apply bg-inherit start-[50%];
}
.custom-toggle-switch.toggle-sm > label::before {
@apply h-[10px] w-[27px] rounded-[10px];
}
.custom-toggle-switch.toggle-sm input[type="checkbox"]:checked + label::after {
@apply start-[13px];
}
.custom-toggle-switch.toggle-sm > label::after {
@apply h-[17px] w-[17px] rounded-full;
}
.custom-toggle-switch.toggle-lg > label::before {
@apply h-[27px] w-[55px] rounded-[20px];
}
.custom-toggle-switch.toggle-lg input[type="checkbox"]:checked + label::after {
@apply start-[77%];
}
.custom-toggle-switch.toggle-lg > label::after {
@apply h-[35px] w-[35px] -mt-[8px] rounded-full;
}
/* End:: toggle switches-2 */
/* End:: toggle switches-1 */
/* End Form Styles */
.form-control-sm {
@apply text-[0.8rem]! py-1! px-[0.8rem]! border-inputborder! dark:!border-white/10;
}
.form-control {
@apply text-defaulttextcolor bg-white text-[0.875rem] font-normal leading-[1.6] rounded-[0.35rem] py-2 px-[0.85rem] w-full;
&:focus {
@apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor;
}
}
.form-control:disabled,
.form-select:disabled {
@apply bg-light text-defaulttextcolor;
}
.form-control-plaintext {
@apply block w-full p-[0.375rem] mb-0 leading-6 bg-transparent border-transparent border-0;
}
.form-input-color {
@apply h-[2.25rem] w-[2.25rem] rounded-md overflow-hidden p-0;
}
.form-text {
@apply mt-1! text-[0.875em]!;
}
.form-check {
// @apply block min-h-[1.5rem] ps-0 mb-[0.125rem];
@apply block ps-0 mb-[0.125rem];
.form-check-label {
@apply ps-2;
}
}
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
@apply cursor-default opacity-50;
}
.input-group
> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
.valid-feedback
):not(.invalid-tooltip):not(.invalid-feedback) {
@apply rounded-s-none!;
}
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation)
> .form-floating:not(:last-child)
> .form-control,
.input-group:not(.has-validation)
> .form-floating:not(:last-child)
> .form-select,
.input-group:not(.has-validation)
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
.form-floating
) {
@apply rounded-e-none!;
}
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
@apply py-2! px-4! text-[1.25rem]! rounded-md!;
}
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
@apply py-1! px-2! text-[0.875rem]!;
}
.form-range {
@apply w-full h-[0.5rem] p-0 bg-light rounded-md appearance-none;
}
.form-range:focus {
@apply outline-none;
}
.form-range:disabled {
@apply pointer-events-none;
}
.form-control-color {
@apply w-[1.75rem]! h-[1.75rem]! overflow-hidden! p-0! rounded-md! ;
}
input {
&[type="week"],
&[type="month"],
&[type="date"],
&[type="datetime-local"],
&[type="time"] {
&::-webkit-calendar-picker-indicator {
@apply dark:!invert ;
}
}
}
[dir=rtl]{
input {
&[type="week"],
&[type="month"],
&[type="date"],
&[type="datetime-local"],
&[type="time"] {
@apply text-end! ;
&{
direction:rtl !important;
}
&::-webkit-calendar-picker-indicator {
@apply text-end!;
&{
direction:rtl !important;
}
}
}
}
}
public/assets/scss/tailwind/_modal.scss
+29
View File
@@ -0,0 +1,29 @@
/* Start Modal Styles */
.ti-modal {
@apply w-full h-full fixed top-0 start-0 z-[105] overflow-x-hidden overflow-y-auto;
.ti-modal-header {
@apply flex justify-between items-center py-3 px-4 border-b border-defaultborder dark:border-white/10;
}
.ti-modal-box {
@apply hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-md md:max-w-lg sm:w-full m-3 sm:mx-auto;
}
.ti-modal-content {
@apply flex flex-col bg-white border border-defaultborder shadow-sm rounded-sm dark:dark:bg-bodybg dark:border-white/10 dark:shadow-black/[0.05];
}
.ti-modal-title {
@apply font-bold text-gray-800 dark:text-white;
}
.ti-modal-close-btn {
@apply inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 dark:text-white dark:hover:text-white/70 hover:text-gray-400 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-sm dark:focus:ring-white/10 dark:focus:ring-offset-white/10;
}
.ti-modal-body {
@apply p-4;
}
.ti-modal-footer {
@apply flex justify-end items-center gap-x-2 py-3 px-4 border-t border-defaultborder dark:border-white/10;
}
}
/* End Modal Styles */
public/assets/scss/tailwind/_offcanvas.scss
+163
View File
@@ -0,0 +1,163 @@
/* Start Offcanvas Styles */
.ti-offcanvas {
@apply fixed transition-all duration-300 transform h-full bg-white dark:dark:bg-bodybg dark:border-white/10 z-[150] shadow-md;
&.ti-offcanvas-left {
@apply ltr:-translate-x-full rtl:translate-x-full top-0 start-0 max-w-[27.5rem] w-full border-e;
}
&.ti-offcanvas-top {
@apply -translate-y-full top-0 inset-x-0 max-h-40 w-full border-b;
}
&.ti-offcanvas-right {
@apply ltr:translate-x-full rtl:-translate-x-full top-0 end-0 max-w-[27.5rem] w-full border-s;
}
&.ti-offcanvas-bottom {
@apply translate-y-full bottom-0 inset-x-0 max-h-40 w-full border-b;
}
&.open {
@apply translate-x-0! translate-y-0!;
}
.ti-offcanvas-header {
@apply flex justify-between items-center py-3 px-4 border-b border-defaultborder dark:border-white/10;
}
.ti-offcanvas-title {
@apply font-medium text-gray-800 dark:text-white;
}
.ti-offcanvas-body {
@apply overflow-y-auto h-screen px-0 pb-80;
}
.ti-offcanvas-footer {
@apply py-3! px-[1.563rem]! absolute! bottom-0! w-full! bg-white! dark:!bg-bodybg border-t! border-dashed! border-defaultborder! dark:!border-defaultborder/10 shadow-md!;
}
}
/* End Offcanvas Styles */
.switcher-style-head {
@apply text-[0.8rem] font-semibold mb-0 bg-light py-[0.313rem] px-[0.625rem] text-defaulttextcolor;
}
.switcher-style {
@apply py-[0.875rem] px-[1.563rem];
}
[type="radio"] {
@apply text-primary! ;
}
.theme-colors {
&.switcher-style {
@apply py-[0.938rem] px-[1.563rem];
}
[type="radio"]:checked {
@apply bg-none checked:before:content-["\eb7b"] checked:before:font-['remixicon'] checked:before:text-[20px] checked:before:text-success checked:before:relative checked:before:start-[0px] checked:before:top-[0px] checked:before:font-medium checked:ring-transparent focus:border-transparent ring-transparent focus:ring-transparent;
}
.switch-select {
.color-input {
@apply w-8 h-8 rounded-full;
&.form-check-input:checked {
@apply border border-inputborder relative border-solid after:!content-none;
&:before {
@apply absolute content-["\ea5e"] text-success w-full h-full flex items-center justify-center text-[1.35rem] font-normal font-['tabler-icons'];
}
}
&.color-white {
@apply bg-white;
}
&.color-dark {
@apply bg-black;
}
&.color-primary {
@apply bg-primary;
}
&.color-primary-1 {
@apply bg-[#3a5892];
}
&.color-primary-2 {
@apply bg-[#5c90a3];
}
&.color-primary-3 {
@apply bg-[#a15adf];
}
&.color-primary-4 {
@apply bg-[#4eac4c];
}
&.color-primary-5 {
@apply bg-[#df5a5a];
}
&.color-gradient {
@apply bg-gradient-to-tr from-primary to-[#6e72a8];
}
&.color-transparent {
@apply bg-[url('../images/menu-bg-images/transparent.png')]! bg-cover! bg-center!;
}
&.color-bg-1 {
@apply bg-[#141e60];
}
&.color-bg-2 {
@apply bg-[#084e73];
}
&.color-bg-3 {
@apply bg-[#5a2587];
}
&.color-bg-4 {
@apply bg-[#186533];
}
&.color-bg-5 {
@apply bg-[#784214];
}
}
}
}
.menu-image {
.bgimage-input {
@apply w-[3.5rem] h-[5.625rem] rounded-md border-0;
&.form-check-input{
@apply checked:before:!content-none checked:after:!content-none focus:border-transparent focus:shadow-sm
}
&.bg-img1 {
@apply bg-[url('../images/menu-bg-images/bg-img1.jpg')]! bg-center! bg-cover! bg-no-repeat!;
}
&.bg-img2 {
@apply bg-[url('../images/menu-bg-images/bg-img2.jpg')]! bg-center! bg-cover! bg-no-repeat!;
}
&.bg-img3 {
@apply bg-[url('../images/menu-bg-images/bg-img3.jpg')]! bg-center! bg-cover! bg-no-repeat!;
}
&.bg-img4 {
@apply bg-[url('../images/menu-bg-images/bg-img4.jpg')]! bg-center! bg-cover! bg-no-repeat!;
}
&.bg-img5 {
@apply bg-[url('../images/menu-bg-images/bg-img5.jpg')]! bg-center! bg-cover! bg-no-repeat!;
}
}
}
.pickr-container-primary,
.pickr-container-background {
.pickr .pcr-button {
@apply h-8! w-8! overflow-hidden! rounded-full! border! border-solid! bg-primary! border-inputborder! -top-[4px]! after:!text-white/70 after:!text-[1.25rem];
&:focus {
@apply shadow-none;
}
}
}
#hs-overlay-switcher .theme-colors .theme-container-primary button,
#hs-overlay-switcher .theme-colors .theme-container-background button {
@apply hidden!;
}
.pickr-container-primary .pickr .pcr-button,
.pickr-container-background .pickr .pcr-button {
@apply -top-[4px]! h-8! w-8! overflow-hidden! rounded-full! border! border-solid! bg-primary!;
}
.pickr-container-primary .pickr .pcr-button::after,
.pickr-container-background .pickr .pcr-button::after {
@apply content-["\efc3"]! font-['remixicon']! text-white/70!;
}
public/assets/scss/tailwind/_pagination.scss
+121
View File
@@ -0,0 +1,121 @@
/* Start Pagination Styles */
.ti-pagination {
@apply flex items-center px-3 py-[0.375rem];
li {
.page-link {
@apply border text-defaulttextcolor text-[1rem] border-defaultborder dark:bg-transparent dark:border-defaultborder/10 dark:text-defaulttextcolor/70 dark:hover:border-defaultborder/10;
&.active {
@apply bg-primary! text-white! dark:!text-defaulttextcolor/70 dark:!bg-primary ;
}
&.disabled {
@apply pointer-events-none text-gray-500 dark:bg-bodybg;
}
&:focus {
@apply shadow-none bg-light;
}
&:hover {
@apply text-primary bg-light border-defaultborder;
}
}
// &:not(:first-child) .page-link {
// @apply ms-[calc(1px_*_-1)];
// }
&:first-child .page-link {
@apply rounded-s-md;
}
&:last-child .page-link {
@apply rounded-e-md;
}
}
&.pagination-sm {
li {
.page-link {
@apply py-2 px-2 text-xs;
}
&:first-child .page-link {
@apply rounded-s-md;
}
&:last-child .page-link {
@apply rounded-e-md;
}
}
}
&.pagination-lg {
li {
.page-link {
@apply py-3 sm:px-6 px-3 text-lg;
}
&:first-child .page-link {
@apply rounded-s-md;
}
&:last-child .page-link {
@apply rounded-e-md;
}
}
}
}
.pagination-style-1 {
.ti-pagination {
li {
@apply space-x-2 rtl:space-x-reverse;
.page-link {
@apply border-0 rounded-md leading-none sm:px-3 px-3 py-[0.375rem] dark:bg-bodybg;
}
}
}
}
.pagination-style-2 {
.ti-pagination {
li {
@apply space-x-2 rtl:space-x-reverse border-0;
&.active {
.page-link {
@apply border-0! bg-white! rounded-md! leading-none! sm:!px-3 py-[0.375rem]! dark:!bg-bodybg
text-primary! relative! font-bold! before:!absolute before:!h-[0.1rem] before:!w-full before:!inset-x-0 before:!bottom-[-7px] before:!bg-primary;
}
}
}
}
}
.pagination-style-3 {
.ti-pagination {
li {
@apply space-x-2 rtl:space-x-reverse;
.page-link {
@apply border-0! rounded-full! leading-none! px-3! py-[0.375rem]!;
}
}
}
}
.pagination-style-4{
.ti-pagination {
li {
@apply space-x-2! rtl:!space-x-reverse text-[.8125rem]! ;
.page-link {
@apply border-0 rounded-md leading-none px-3 py-[0.375rem] ;
&.active {
@apply bg-primary! text-white!;
.page-link{
@apply hover:!bg-primary hover:!text-white;
}
}
}
}
}
}
/* End Pagination Styles */
public/assets/scss/tailwind/_progress.scss
+177
View File
@@ -0,0 +1,177 @@
.progress {
@apply bg-light h-[0.75rem] rounded-sm flex w-full;
}
/* Start:: progressbar-height */
.progress,
.progress-stacked {
&.progress-xs {
@apply h-[0.3125rem];
}
&.progress-sm {
@apply h-[0.5rem];
}
&.progress-lg {
@apply h-[1rem];
}
&.progress-xl {
@apply h-[1.25rem];
}
}
/* End:: progressbar-height */
.progress-stacked {
@apply bg-light;
}
.progress-bar {
@apply text-white bg-primary flex justify-center items-center rounded-s-full;
}
// @keyframes progress-animate {
// 0% {
// @apply w-0;
// }
// }
.progress-animate {
@apply relative rounded-[0.625rem];
.progress-bar {
@apply relative rounded-[0.625rem];
}
}
/* Start:: custom-progress */
.progress-custom {
@apply overflow-visible relative;
.progress-bar {
@apply relative overflow-visible after:w-[1.15rem] after:h-[1.15rem] after:rounded-[50%] after:bg-white after:absolute after:-end-[0.375rem]
after:-top-[0.375rem] after:border-[0.25rem] after:border-solid after:border-primary;
&.progress-secondary {
@apply bg-secondary! after:!border-secondary;
.progress-bar-value {
@apply after:border-t-secondary;
}
}
&.progress-warning {
@apply bg-warning! after:!border-warning;
.progress-bar-value {
@apply after:border-t-warning;
}
}
&.progress-info {
@apply bg-info! after:!border-info;
.progress-bar-value {
@apply after:border-t-info;
}
}
&.progress-success {
@apply bg-success! after:!border-success;
.progress-bar-value {
@apply after:border-t-success;
}
}
&.progress-danger {
@apply bg-danger! after:!border-danger;
.progress-bar-value {
@apply after:border-t-danger;
}
}
}
.progress-bar-value {
@apply w-[1.875rem] h-[1.25rem] leading-[1.25rem] rounded-[.188rem] bg-primary shadow-[0_0.313rem_0.313rem_rgba(0,0,0,.4)] dark:shadow-[rgba(255,255,255,.4)] text-[.625rem] font-semibold text-white text-center absolute bottom-6 end-[-0.688rem]
after:absolute after:border-x-[0.438rem] after:border-x-transparent after:border-t-[0.438rem] after:border-primary after:bottom-[-0.375rem] after:start-[28%];
}
}
.progress-bar-title {
@apply py-[0.313rem] px-[0.625rem] m-0 bg-primary rounded-s-sm text-[0.625rem] font-semibold text-white uppercase absolute -top-[0.438rem] start-0 z-[1]
after:absolute after:top-0 after:-end-[1.063rem] after:border-t-[.8rem] after:border-b-[.85rem] after:border-transparent after:border-s-[1.063rem] after:border-solid after:border-s-primary;
}
/* Start:: custom-progress-2 */
.progress-item-1,
.progress-item-2,
.progress-item-3 {
@apply absolute -mt-1 z-[1] h-[0.938rem] w-[0.98rem] rounded-[1.563rem] bg-light;
}
.progress-item-1 {
@apply start-[25%];
}
.progress-item-2 {
@apply start-[50%];
}
.progress-item-3 {
@apply start-[75%];
}
/* End:: custom-progress-2 */
/* Start:: custom-progress-3 */
.custom-progress-3 {
@apply visible rounded-[0.625rem];
.progress-bar {
@apply relative visible m-[0.313rem] rounded-sm
before:absolute before:w-1 before:h-1 before:start-[0.125rem] before:bg-white before:rounded-md;
.progress-bar-value {
@apply border-[0.125rem] border-solid border-primary w-[2.5rem] h-[1.563rem] leading-[1.563rem] rounded-[3.125rem] bg-white dark:bg-bodybg text-[0.625rem] font-semibold
text-primary text-center absolute -end-[0.625rem];
&.primary {
@apply border-[0.125rem] border-solid border-primary text-primary;
}
&.secondary {
@apply border-[0.125rem] border-solid border-secondary text-secondary;
}
&.warning {
@apply border-[0.125rem] border-solid border-warning text-warning;
}
&.info {
@apply border-[0.125rem] border-solid border-info text-info;
}
&.success {
@apply border-[0.125rem] border-solid border-success text-success;
}
&.danger {
@apply border-[0.125rem] border-solid border-danger text-danger;
}
}
}
}
/* End:: custom-progress-3 */
/* Start:: custom-progress-4 */
.custom-progress-4 {
&.progress {
@apply bg-primary/10 rounded-sm;
&.secondary {
@apply bg-secondary/10;
.progress-bar-label {
@apply text-secondary;
}
}
&.warning {
@apply bg-warning/10;
.progress-bar-label {
@apply text-warning;
}
}
&.info {
@apply bg-info/10;
.progress-bar-label {
@apply text-info;
}
}
&.success {
@apply bg-success/10;
.progress-bar-label {
@apply text-success;
}
}
&.danger {
@apply bg-danger/10;
.progress-bar-label {
@apply text-danger;
}
}
.progress-bar {
@apply rounded-sm;
}
.progress-bar-label {
@apply absolute end-[0.313rem] font-semibold text-[0.813rem] text-primary;
}
}
}
/* End:: custom-progress-4 */
public/assets/scss/tailwind/_tables.scss
+513
View File
@@ -0,0 +1,513 @@
/* Start Table Styles */
// .table {
// @apply dark:!text-defaulttextcolor/70 ;
// }
.table {
@apply text-defaulttextcolor rounded-md mb-0 text-start;
tr {
@apply dark:border-defaultborder/10;
}
tbody {
tr {
th {
@apply font-medium;
}
}
}
th,
td {
@apply p-[0.75rem] align-middle leading-[1.462] text-[0.813rem] font-medium text-start;
}
thead tr th {
@apply font-semibold text-[0.85rem];
}
&.table-sm> :not(caption)>*>* {
@apply p-[0.3rem];
}
&.table-dark {
@apply text-white/70 border-white/10 dark:border-black/[0.025];
}
&.table-primary {
@apply text-primary/70 border-primary/10;
}
&.table-bordered {
&.table-bordered-primary {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-primary/30!;
}
}
&.table-bordered-info {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-info/30;
}
}
&.table-bordered-secondary {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-secondary/30;
}
}
&.table-bordered-warning {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-warning/30;
}
}
&.table-bordered-success {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-success/30;
}
}
&.table-bordered-danger {
tbody,
td,
tfoot,
th,
thead,
tr {
@apply border-danger/30;
}
}
}
&.table-striped>tbody>tr:nth-of-type(odd)>* {
@apply text-defaulttextcolor;
}
&.table-striped-columns> :not(caption)>tr> :nth-child(2n) {
@apply text-defaulttextcolor;
}
tbody.table-group-divider {
@apply border-t border-solid rounded-md;
}
&.table-hover>tbody>tr:hover>* {
@apply text-defaulttextcolor;
}
.table-active {
@apply text-defaulttextcolor;
}
}
.ti-custom-table-head {
@apply divide-y divide-gray-200 dark:divide-white/10;
}
.table-responsive,
.table {
@apply overflow-y-visible!;
}
.table-responsive {
@apply block w-full overflow-x-auto;
}
.table-responsive {
@apply overflow-x-auto;
}
.ti-custom-table {
@apply min-w-full;
th {
@apply px-6 py-2 text-start leading-[1.462] font-semibold text-xs uppercase bg-gray-50 dark:bg-black/20 dark:text-white;
}
tbody {
@apply divide-y divide-gray-200 dark:divide-white/10;
}
td {
@apply px-6 py-4 whitespace-nowrap text-sm dark:text-gray-200 font-medium;
}
}
.ti-striped-table {
tbody {
tr {
@apply odd:bg-white even:bg-gray-100 dark:odd:dark:bg-bodybg dark:even:bg-black/20;
}
}
}
.ti-custom-table-hover {
tbody {
tr {
@apply hover:bg-gray-100 dark:hover:bg-light;
}
}
}
.table-bordered {
@apply border border-defaultborder dark:border-defaultborder/10;
tr {
@apply divide-x divide-gray-200 dark:divide-white/10;
}
}
.table-bordered-primary {
@apply border border-primary/30 dark:border-primary/30;
.ti-custom-table-head {
@apply divide-y divide-primary/30 dark:divide-primary/30;
}
tbody {
@apply divide-y divide-primary/30 dark:divide-primary/30;
}
tr {
@apply divide-x divide-primary/30 dark:divide-primary/30;
}
}
.table-bordered-secondary {
@apply border border-secondary/30 dark:border-secondary/30;
.ti-custom-table-head {
@apply divide-y divide-secondary/30 dark:divide-secondary/30;
}
tbody {
@apply divide-y divide-secondary/30 dark:divide-secondary/30;
}
tr {
@apply divide-x divide-secondary/30 dark:divide-secondary/30;
}
}
.table-bordered-warning {
@apply border border-warning/30 dark:border-warning/30;
.ti-custom-table-head {
@apply divide-y divide-warning/30 dark:divide-warning/30;
}
tbody {
@apply divide-y divide-warning/30 dark:divide-warning/30;
}
tr {
@apply divide-x divide-warning/30 dark:divide-warning/30;
}
}
.table-bordered-danger {
@apply border border-danger/30 dark:border-danger/30;
.ti-custom-table-head {
@apply divide-y divide-danger/30 dark:divide-danger/30;
}
tbody {
@apply divide-y divide-danger/30 dark:divide-danger/30;
}
tr {
@apply divide-x divide-danger/30 dark:divide-danger/30;
}
}
.table-bordered-info {
@apply border border-info/30 dark:border-info/30;
.ti-custom-table-head {
@apply divide-y divide-info/30 dark:divide-info/30;
}
tbody {
@apply divide-y divide-info/30 dark:divide-info/30;
}
tr {
@apply divide-x divide-info/30 dark:divide-info/30;
}
}
.table-bordered-success {
@apply border border-success/30 dark:border-success/30;
.ti-custom-table-head {
@apply divide-y divide-success/30 dark:divide-success/30;
}
tbody {
@apply divide-y divide-success/30 dark:divide-success/30;
}
tr {
@apply divide-x divide-success/30 dark:divide-success/30;
}
}
.table-primary {
@apply bg-primary/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-primary/10 dark:divide-primary/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-primary/10 dark:divide-primary/10;
}
.ti-custom-table-head {
@apply divide-y divide-primary/10 dark:divide-primary/10;
}
}
.table-dark {
@apply bg-black/10 dark:bg-bodybg2;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-black/10 dark:divide-black/[0.025];
}
td {
@apply text-black dark:text-white;
}
tr {
@apply divide-x divide-black/10 dark:divide-black/[0.025];
}
.ti-custom-table-head {
@apply divide-y divide-black/10 dark:divide-black/[0.025];
}
}
.table-secondary {
@apply bg-secondary/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-secondary/10 dark:divide-secondary/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-secondary/10 dark:divide-secondary/10;
}
.ti-custom-table-head {
@apply divide-y divide-secondary/10 dark:divide-secondary/10;
}
}
.table-warning {
@apply bg-warning/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-warning/10 dark:divide-warning/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-warning/10 dark:divide-warning/10;
}
.ti-custom-table-head {
@apply divide-y divide-warning/10 dark:divide-warning/10;
}
}
.table-info {
@apply bg-info/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-info/10 dark:divide-info/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-info/10 dark:divide-info/10;
}
.ti-custom-table-head {
@apply divide-y divide-info/10 dark:divide-info/10;
}
}
.table-danger {
@apply bg-danger/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-danger/10 dark:divide-danger/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-danger/10 dark:divide-danger/10;
}
.ti-custom-table-head {
@apply divide-y divide-danger/10 dark:divide-danger/10;
}
}
.table-success {
@apply bg-success/10;
th {
@apply text-black dark:text-white;
}
tbody {
@apply divide-y divide-success/10 dark:divide-success/10;
}
td {
@apply text-gray-800 dark:text-gray-200;
}
tr {
@apply divide-x divide-success/10 dark:divide-success/10;
}
.ti-custom-table-head {
@apply divide-y divide-success/10 dark:divide-success/10;
}
}
.ti-head-primary {
th {
@apply bg-primary/20 dark:bg-primary/20;
}
}
.ti-head-secondary {
th {
@apply bg-secondary/20 dark:bg-secondary/20;
}
}
.ti-head-warning {
th {
@apply bg-warning/20 dark:bg-warning/20;
}
}
.ti-head-success {
th {
@apply bg-success/20 dark:bg-success/20;
}
}
.ti-head-info {
th {
@apply bg-info/20 dark:bg-info/20;
}
}
.ti-head-danger {
th {
@apply bg-danger/20 dark:bg-danger/20;
}
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
@apply bg-black/[0.0125] text-defaulttextcolor;
}
.table-striped-columns> :not(caption)>tr> :nth-child(2n) {
@apply text-defaulttextcolor bg-[var(--color-light)];
}
.table.table-success.table-striped>tbody>tr:nth-of-type(odd)>* {
@apply bg-success/20;
}
caption {
@apply text-textmuted pt-2 pb-2 text-start;
}
.table-active {
@apply bg-light;
}
/* End Table Styles */
public/assets/scss/tailwind/_toast.scss
+36
View File
@@ -0,0 +1,36 @@
.toast-container {
@apply z-[1090] max-w-full pointer-events-none;
}
.toast {
@apply bg-white border border-solid border-defaultborder shadow-sm rounded-md;
.toast-header {
@apply bg-light py-[0.375rem] px-3 flex items-center;
img {
@apply w-[1.25rem] h-[1.25rem];
}
}
.toast-header {
@apply border-b border-solid border-defaultborder;
.btn-close {
@apply me-[0.125rem] p-3;
}
}
.toast-body {
@apply text-[0.8rem] p-3;
}
.btn-close {
@apply text-[0.563rem];
}
&.colored-toast {
@apply border-0! backdrop-blur-[20px]!;
.btn-close {
@apply invert-[1];
}
.toast-header {
@apply border-b border-solid border-black/10;
}
}
}
.bd-example-toasts {
@apply min-h-[15rem];
}
public/assets/scss/tailwind/_tooltip.scss
+12
View File
@@ -0,0 +1,12 @@
/* Start Tooltip Styles */
.ti-main-tooltip {
@apply inline-block relative;
.ti-main-tooltip-toggle {
@apply block text-center;
}
}
.ti-main-tooltip-content {
@apply leading-4 hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-50 py-2 px-4 bg-white text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:text-white/70;
}
/* End Tooltip Styles */