dealposbooks 1.0.0

package/assets/scss/layouts/dark/_dark.scss

@@ -0,0 +1,431 @@
+// --------------------------------------------------
+// Css Variables with class
+// --------------------------------------------------
+
+.table-primary {
+    --bs-table-bg: #253662 !important;
+}
+
+.table-success {
+    --bs-table-bg: #1b3c48 !important;
+}
+
+.table-info {
+    --bs-table-bg: #223662 !important;
+}
+
+.table-warning {
+    --bs-table-bg: #4d3a2a !important;
+}
+
+.table-danger {
+    --bs-table-bg: #4b313d !important;
+}
+
+.table-dark {
+    --bs-table-bg: #1d2228 !important;
+}
+
+hr {
+    border-top: 1px solid #ebf1f6;
+    opacity: 0.1;
+    border-color: $border-color-dark;
+}
+
+.bg-white {
+    background-color: $bg-dark !important;
+}
+
+.text-dark {
+    color: $heading-color !important;
+}
+
+.text-muted{
+    color: $body-color-dark !important;
+}
+
+.table {
+    --bs-table-border-color: #303841;
+    --bs-table-color: #fff;
+    --bs-table-bg: #1d2228;
+
+    th,
+    td {
+        --bs-table-color: rgb(234 239 244 / 60%);
+    }
+}
+
+.table> :not(caption)>*>* {
+    color: $body-color-dark !important;
+}
+
+.table-hover>tbody>tr:hover>* {
+    --bs-table-bg-state: $body-bg-dark;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+    --bs-table-bg-type: #313642;
+}
+
+a,
+.nav-link:hover,
+.nav-link:focus {
+    color: rgba(var(--bs-link-color-rgb), 0.85);
+}
+
+.list-group {
+    --bs-list-group-bg: #1d2228;
+}
+
+.dropdown-menu {
+    --bs-dropdown-bg: #1d2228;
+    --bs-dropdown-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
+}
+
+.accordion {
+    --bs-accordion-bg: $bg-dark;
+}
+
+.accordion-button:not(.collapsed) {
+    background-color: $bg-dark !important;
+}
+
+.accordion-item,
+.accordion-item:focus {
+    --bs-accordion-btn-color: #eaeff4;
+    --bs-accordion-border-color: #333f55;
+}
+
+.accordion-button {
+    --bs-accordion-btn-bg: $bg-dark;
+}
+
+.accordion-button:not(.collapsed) {
+    color: #eaeff4;
+}
+
+.list-group-item {
+    --bs-list-group-color: #fff;
+}
+
+// --------------------------------------------------
+// Font Colors
+// --------------------------------------------------
+
+label,
+.text-dark,
+.form-label,
+.col-form-label {
+    color: $body-color-dark !important;
+}
+
+.nav-tabs .nav-link,
+.nav-pills .nav-link,
+.breadcrumb-item+.breadcrumb-item::before {
+    color: $link-color-dark;
+}
+
+.text-bg-light,
+.bg-light,
+.striped-rows .row:nth-child(odd),
+.bg-hover-light-black:hover,
+.list-group-item-action:hover,
+.list-group-item-action:focus {
+    background-color: $light-bg-subtle-dark !important;
+    color: var(--bs-card-title-color) !important;
+}
+
+// --------------------------------------------------
+// Background Colors
+// --------------------------------------------------
+
+.comment-widgets {
+    .comment-row {
+        &:hover {
+            background: rgba(0, 0, 0, 0.4);
+        }
+    }
+}
+
+.offcanvas {
+    background-color: $bg-dark;
+}
+
+.left-part, .right-part, .offcanvas{
+    background-color: $body-bg-dark !important;
+}
+
+.taskboard .taskboard-task,
+.notes-item.selected,
+.notes-item:hover,
+.contact-list .contact-item.active,
+.contact-list .contact-item:hover,
+.tasklist .task-item.active,
+.tasklist .task-item:hover,
+.bg-hover-active,
+.mailbox .message-center .message-item.active,
+.mail-center-part .message-item.active{
+    background-color: #292f37 !important;
+}
+
+.wizard-navbar li .round-tabs{
+    background-color: $dark-bg-variant;
+}
+
+.ng-select .ng-select-container {
+    background-color: $dark-bg-variant;
+    border: 1px solid $border-color-dark;
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{
+    background-color: $dark-bg-variant;
+    color: $white;
+}
+
+.ng-select .ng-select-container{
+    color: $white;
+}
+
+.flatpickr-calendar{
+    background: #1a2537;
+    box-shadow: none;
+}
+
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+    border-bottom-color: $border-color-dark;
+}
+
+.flatpickr-months .flatpickr-prev-month, 
+.flatpickr-months .flatpickr-next-month,
+.flatpickr-months .flatpickr-month,
+.flatpickr-weekdaycontainer span.flatpickr-weekday,
+.flatpickr-time input{
+    color: $body-color-dark;
+    fill: $body-color-dark;
+}
+
+.flatpickr-day.inRange, 
+.flatpickr-day.prevMonthDay.inRange, 
+.flatpickr-day.nextMonthDay.inRange, 
+.flatpickr-day.today.inRange, 
+.flatpickr-day.prevMonthDay.today.inRange, 
+.flatpickr-day.nextMonthDay.today.inRange, 
+.flatpickr-day:hover, 
+.flatpickr-day.prevMonthDay:hover, 
+.flatpickr-day.nextMonthDay:hover, 
+.flatpickr-day:focus, 
+.flatpickr-day.prevMonthDay:focus, 
+.flatpickr-day.nextMonthDay:focus,
+.flatpickr-time input:hover, 
+.flatpickr-time .flatpickr-am-pm:hover, 
+.flatpickr-time input:focus, 
+.flatpickr-time .flatpickr-am-pm:focus{
+    background: #1a2537;
+    border-color: $border-color-dark;
+}
+
+.flatpickr-calendar.hasTime .flatpickr-time{
+    border-top: 1px solid $border-color-dark;
+}
+
+.NgxEditor__MenuBar,
+.NgxEditor,
+.NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu,
+.ngx-datatable.material .datatable-header .datatable-header-cell,
+.ngx-datatable.material .datatable-header .datatable-row-left,
+.ngx-datatable.material .datatable-body .datatable-row-left,
+.auth-wrapper .auth-box,
+.cal-month-view,
+.cal-week-view, 
+.cal-week-view .cal-hour-odd,
+.cal-month-view .cal-cell-row:hover {
+    background-color: #1d2228;
+}  
+
+.cal-month-view .cal-days,
+.cal-month-view .cal-days .cal-cell-row,
+.cal-month-view .cal-day-cell:not(:last-child) {
+    border-color: $border-color-dark;
+}
+
+.cal-month-view .cal-open-day-events{
+    background-color: $dark-bg-variant;
+    box-shadow: none;
+}
+
+.cal-week-view{
+    border-top: solid 1px $border-color-dark;
+}
+
+.cal-week-view .cal-time-events,
+.cal-week-view .cal-all-day-events,
+.cal-week-view .cal-day-column,
+.cal-week-view .cal-day-headers,
+.cal-week-view .cal-day-headers .cal-header:not(:last-child),
+.cal-week-view .cal-hour:not(:last-child) .cal-hour-segment, 
+.cal-week-view .cal-hour:last-child :not(:last-child) .cal-hour-segment{
+    border-color: $border-color-dark;
+}
+
+.cal-week-view .cal-header.cal-today,
+.cal-month-view .cal-cell.cal-has-events.cal-open{
+    background-color: var(--bs-primary-bg-subtle);
+}
+
+.cal-week-view .cal-day-headers .cal-header:hover,
+.cal-week-view .cal-time-events .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover{
+    background-color: $dark-bg-variant;
+}
+
+.NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,
+.NgxEditor__Dropdown .NgxEditor__Dropdown--Open,
+.NgxEditor__MenuItem:hover,
+.NgxEditor__Dropdown:hover,
+.NgxEditor__MenuItem .NgxEditor__MenuItem--Icon:hover,
+.NgxEditor__Dropdown .NgxEditor__Dropdown--Item:hover {
+    color: $white;
+    background-color: $primary;
+}
+
+.NgxEditor,
+.ngx-datatable.material .datatable-header .datatable-header-cell,
+.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell,
+.ngx-datatable.material .datatable-footer .datatable-pager a,
+.ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
+    color: $body-color-dark;
+}
+
+.ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
+    color: rgb(255 255 255 / 0.26) !important;
+}
+
+.ngx-datatable.material .datatable-footer .datatable-pager a:hover {
+    color: rgb(255 255 255 / 0.75);
+}
+
+.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
+.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group,
+.cal-month-view .cal-cell-row .cal-cell:hover{
+    background-color: #1a2537;
+}
+
+.ngx-datatable.material .datatable-header .resize-handle {
+    border-right: solid 1px $border-color-dark;
+}
+
+.ngx-datatable.material .datatable-header {
+    border-bottom: 1px solid $border-color-dark;
+}
+
+.ngx-datatable.material .datatable-footer {
+    border-top: 1px solid $border-color-dark;
+    color: $body-color-dark;
+}
+
+.ngx-datatable.material {
+    background: $dark-bg-variant;
+}
+
+.left-part,
+.ng-dropdown-panel.ng-select-bottom{
+    border-color: $border-color-dark;
+}
+
+.modal-content {
+    background-color: $bg-dark !important;
+    box-shadow: none;
+}
+
+.customizer {
+    background: $dark-bg-variant;
+}
+
+.ng-select .ng-select-container {
+    background-color: $dark-bg-variant;
+    border: 1px solid $border-color-dark;
+}
+
+.progress {
+    --bs-progress-bg: #161b22;
+}
+
+.pagination {
+    --bs-pagination-bg: $dark-bg-variant;
+}
+
+.topbar .top-navbar .navbar-collapse {
+    background: #1d2228 !important;
+}
+
+.body-wrapper {
+    background: $dark-bg-variant !important;
+}
+
+.form-control:disabled,
+.bg-white,
+.topbar,
+.left-sidebar,
+.topbar .top-navbar .navbar-header {
+    background-color: $dark-bg-variant !important;
+}
+
+.sidebar-nav #sidebarnav>.sidebar-item ul {
+    background: #1d2228 !important;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+    background-color: $dark-bg-subtle-dark;
+}
+
+// --------------------------------------------------
+// Border Colors
+// --------------------------------------------------
+.border-white,
+.border-muted {
+    border-color: $border-color-dark !important;
+}
+
+.form-check-input {
+    --bs-form-check-bg: transparent;
+    border: 1px solid $border-color-dark;
+}
+
+.timeline > .timeline-item > .timeline-panel:after,
+.timeline > .timeline-item > .timeline-panel:before{
+    border-right: 0 solid $border-color-dark;
+    border-left: 7px solid $border-color-dark;
+}
+
+// ----------------------------------
+// form components
+// ----------------------------------
+
+.form-select,
+.form-control {
+    border-color: $border-color-dark !important;
+    color: $body-color-dark;
+    background-color: $bg-dark !important;
+}
+
+.form-floating>.form-control:focus~label::after {
+    background-color: #1d2228 !important;
+}
+
+.form-select:focus,
+.form-control:focus {
+    border-color: $primary !important;
+    background-color: $body-bg-dark;
+}
+
+input::file-selector-button {
+    background-color: $body-bg-dark;
+    color: $body-color-dark;
+}
+
+.input-group-text {
+    background-color: $light-bg-subtle-dark;
+    border: var(--bs-table-border-color);
+    color: $body-color-dark;
+}

package/assets/scss/layouts/rtl/_horizontal-rtl.scss

@@ -0,0 +1,94 @@
+#main-wrapper[data-layout="horizontal"] {
+  .sidebar-nav {
+    #sidebarnav>.sidebar-item {
+      border-left: 1px solid rgba(0, 0, 0, 0.1);
+      border-right: none;
+
+      &:last-child {
+        border-left: none;
+
+        >.first-level {
+          left: 0;
+          right: auto;
+        }
+      }
+
+      ul {
+        left: auto;
+        right: 0;
+
+        &.second-level {
+          left: auto;
+          right: 220px;
+        }
+      }
+
+      &:last-child>.first-level ul.second-level,
+      .first-level .right-side-dd ul.second-level {
+        right: auto;
+        left: 220px;
+      }
+    }
+  }
+}
+
+&#main-wrapper[data-layout="horizontal"] {
+  &[data-sidebar-position="fixed"][data-sidebartype="full"] {
+    .topbar .top-navbar .navbar-collapse {
+      margin-right: 0;
+    }
+  }
+
+  &[data-sidebartype="full"] {
+    .page-wrapper {
+      margin: 0 auto;
+    }
+  }
+
+  &[data-sidebartype="full"][data-boxed-layout="full"] {
+    .page-wrapper {
+      margin: 0 auto;
+    }
+  }
+
+  .sidebar-nav ul .sidebar-item .sidebar-link i-feather {
+    margin: 0 5px 2px 8px;
+  }
+
+  .sidebar-nav {
+    #sidebarnav>.sidebar-item {
+      border-left: 1px solid rgba(0, 0, 0, 0.1);
+      border-right: none;
+
+      &:last-child {
+        border-left: none;
+
+        >.first-level {
+          left: 0;
+          right: auto;
+        }
+      }
+
+      ul {
+        left: auto;
+        right: 0;
+
+        &.second-level {
+          left: 220px;
+          right: auto;
+        }
+      }
+
+      &:last-child>.first-level ul.second-level,
+      .first-level .right-side-dd ul.second-level {
+        right: auto;
+        left: 220px;
+      }
+    }
+  }
+
+  .hide-menu {
+    margin-left: 35px;
+    margin-right: 0;
+  }
+}