@open-rlb/ng-bootstrap 2.2.17

package/assets/scss/_custom.scss

@@ -0,0 +1,455 @@
+// Lightbox
+//@import "~ngx-lightbox/lightbox.css";
+
+// Select 2 
+//@import "~@ng-select/ng-select/themes/default.theme.css";
+
+// Date Picker
+//@import '~flatpickr/dist/flatpickr.css';
+
+// LeafLet Chart
+//@import 'leaflet/dist/leaflet.css';
+
+// Emoji Picker
+// @import '~@ctrl/ngx-emoji-mart/picker';
+.emoji-mart {
+  position: absolute;
+  bottom: 20px;
+  left: -80px;
+}
+
+.emoji-mart-preview {
+  display: none;
+}
+
+
+
+// dropdown
+.dropdown-toggle {
+  &:after {
+    display: none;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1002 !important;
+}
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropzone .dz-message {
+  font-size: 24px;
+  min-height: 150px !important;
+  border: none !important;
+  // background: #fff !important;
+  color: #495057 !important;
+}
+
+// ----- Advance Ui --------//
+// Rating
+.stars {
+  font-size: 30px;
+  color: var(--bs-gray-600);
+}
+
+.star {
+  position: relative;
+  display: inline-block;
+}
+
+.star_fill {
+  color: $gray-500;
+}
+
+.full {
+  color: #b0c4de;
+}
+
+.half {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  color: var(--bs-gray-600);
+}
+
+.filled {
+  color: #1e90ff;
+}
+
+.bad {
+  color: #deb0b0;
+}
+
+.filled.bad {
+  color: #ff1e1e;
+}
+
+.halfHeart {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  color: red;
+}
+
+// Calendar
+.flatpickr-calendar.open {
+  z-index: 1061;
+}
+
+// Swich Btn
+.switch.switch-small.checked>.switch-pane>span {
+  color: #fff;
+}
+
+.switch.switch-small>.switch-pane>span {
+  font-size: 14px;
+}
+
+// Ck Editer
+.ck-editor__editable {
+  min-height: 245px !important;
+}
+
+.custom-accordion {
+  .accordion-list {
+    padding: 0px;
+    background-color: transparent;
+    margin-bottom: 20px
+  }
+}
+
+[data-bs-theme="dark"] {
+  .ng-select .ng-select-container {
+    background-color: #2a3042 !important;
+    color: #c3cbe4 !important;
+    border-color: #353d55 !important;
+  }
+
+  .ng-dropdown-panel {
+    background-color: #2a3042 !important;
+    border-color: #353d55 !important;
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    background-color: #2a3042 !important;
+    border-color: #353d55 !important;
+
+    color: #c3cbe4 !important;
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: #393f55 !important;
+    color: #d6dbeb !important;
+  }
+}
+
+//dropzone
+.dropzone>.dropzone.dz-wrapper .dz-message {
+  background: var(--#{$prefix}custom-white) !important;
+  color: var(--#{$prefix}body-color) !important;
+}
+
+// ck editor
+.ck.ck-toolbar {
+  background-color: var(--#{$prefix}light) !important;
+  border: 1px solid $input-border-color !important;
+}
+
+.ck-reset_all :not(.ck-reset_all-excluded *),
+.ck.ck-reset_all {
+  color: var(--#{$prefix}body-color) !important;
+}
+
+.ck.ck-editor__main>.ck-editor__editable {
+  background-color: var(--#{$prefix}custom-white) !important;
+  color: var(--#{$prefix}body-color) !important;
+}
+
+.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
+  border-color: $input-border-color !important;
+}
+
+.ck.ck-button:not(.ck-disabled):hover,
+a.ck.ck-button:not(.ck-disabled):hover,
+.ck.ck-button.ck-on,
+a.ck.ck-button.ck-on {
+  background-color: var(--#{$prefix}light) !important;
+}
+
+.ck.ck-toolbar .ck.ck-toolbar__separator {
+  background: $input-border-color !important;
+}
+
+
+// Dark Mode Css
+[data-bs-theme="dark"] {
+  .bs-datepicker {
+    box-shadow: none !important;
+  }
+
+  .bs-datepicker-container {
+    background-color: #32394e !important;
+
+  }
+
+  .bs-datepicker-head button {
+    color: #c3cbe4 !important;
+  }
+
+  .bs-datepicker-body {
+    border: 1px solid transparent;
+  }
+
+  .auth-logo .auth-logo-light {
+    display: block;
+  }
+
+  .auth-logo .auth-logo-dark {
+    display: none;
+  }
+
+  // Accordion
+  .accordion {
+    --bs-accordion-color: #fff;
+    --bs-accordion-bg: transparent;
+  }
+
+  .accordion-button {
+    color: var(--bs-body-color);
+  }
+}
+
+.page-link {
+  display: inline-table;
+}
+
+
+//   vertical tab
+
+.vertical-tab {
+  ul {
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    border: 0;
+
+    @media (max-width: 1024px) {
+      display: block;
+    }
+
+    li {
+      a {
+        padding: 8px 50px;
+
+        @media (max-width: 1440px) {
+          padding: 8px 30px;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    position: absolute;
+    top: 0;
+
+    @media (max-width: 1024px) {
+      position: inherit;
+    }
+
+  }
+}
+
+
+.ecommerce-checkout-tab {
+  ul {
+    display: inline-block;
+    float: left;
+    margin-right: 20px;
+    border: 0;
+
+    @media (max-width: 600px) {
+      display: block;
+      float: inherit;
+    }
+  }
+
+  li {
+    a {
+      padding: 1px 80px;
+    }
+  }
+}
+
+.product-detai-imgs {
+  ul {
+    border: 0;
+
+    a {
+      border: 0 !important;
+      width: 130px;
+
+      @media (max-width: 425px) {
+        width: 50px;
+      }
+    }
+  }
+}
+
+.tooltip,
+.tooltip-arrow {
+  position: absolute;
+}
+
+[data-layout-size="boxed"] {
+  .vertical-tab {
+    ul {
+      display: inline-block;
+      position: relative;
+      z-index: 1;
+      border: 0;
+
+      @media (max-width: 1024px) {
+        display: block;
+      }
+
+      li {
+        a {
+          padding: 8px 50px;
+        }
+      }
+    }
+  }
+
+}
+
+.bs-datepicker-head {
+  background-color: transparent !important;
+
+}
+
+.bs-datepicker-head button {
+  color: black !important;
+}
+
+.owl-theme .owl-nav [class*=owl-] {
+  width: 30px;
+  height: 30px;
+  line-height: 28px !important;
+  font-size: 30px !important;
+  border-radius: 50% !important;
+  background-color: transparent !important;
+  color: #ffff !important;
+  justify-content: center !important;
+  margin: 4px 8px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+.tab-bg {
+  .nav-tabs {
+    background-color: var(--#{$prefix}light);
+    margin-bottom: 20px;
+  }
+
+}
+
+
+// popover
+.bs-popover-top,
+.bs-popover-bottom {
+  margin-left: -8px !important;
+}
+
+.bs-popover-left .arrow,
+.bs-popover-right .arrow {
+  margin-top: -8px !important;
+}
+
+.custom-widget-nav {
+  .nav-tabs {
+    justify-content: flex-end;
+    margin-top: -1.5rem;
+  }
+}
+
+.custom-vertical-tabs {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+
+
+  .nav-tabs {
+    flex-direction: column;
+
+    @media (min-width: 992px) {
+      flex-shrink: 0;
+    }
+  }
+
+  .tab-content {
+    @media (min-width: 992px) {
+      flex-grow: 1;
+    }
+  }
+
+  @media (max-width: 991px) {
+    flex-direction: column;
+    gap: 16px;
+
+    .nav-tabs,
+    .tab-content {
+      width: 100%;
+    }
+  }
+}
+
+
+// nav-justify-center
+
+.nav-justify-center {
+  .nav-tabs {
+    justify-content: center;
+  }
+}
+
+.ngx-slider .ngx-slider-bar {
+  background-color: var(--#{$prefix}tertiary-bg) !important;
+}
+
+#backdrop {
+  &.offcanvas-backdrop {
+    display: none;
+
+    &.show {
+      display: inline-block;
+    }
+  }
+}
+
+// infinite progress bar
+
+
+.infinite-progress {
+  background-color: #f0f0f0;
+  position: relative;
+  overflow: hidden;
+
+  .inner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: move-bar 2s linear infinite;
+  }
+}
+
+@keyframes move-bar {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}

package/assets/scss/_variables-dark.scss

@@ -0,0 +1,111 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%);
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
+$success-text-emphasis-dark:        tint-color($success, 40%);
+$info-text-emphasis-dark:           tint-color($info, 40%);
+$warning-text-emphasis-dark:        tint-color($warning, 40%);
+$danger-text-emphasis-dark:         tint-color($danger, 40%);
+$light-text-emphasis-dark:          $gray-100;
+$dark-text-emphasis-dark:           $gray-300;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            rgba($primary, 0.25);
+$secondary-bg-subtle-dark:          rgba($secondary, 0.25);
+$success-bg-subtle-dark:            rgba($success, 0.25);
+$info-bg-subtle-dark:               rgba($info, 0.25);
+$warning-bg-subtle-dark:            rgba($warning, 0.25);
+$danger-bg-subtle-dark:             rgba($danger, 0.25);
+$light-bg-subtle-dark:              $gray-800;
+$dark-bg-subtle-dark:               rgba($dark, 0.25);
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%);
+$secondary-border-subtle-dark:      shade-color($secondary, 40%);
+$success-border-subtle-dark:        shade-color($success, 40%);
+$info-border-subtle-dark:           shade-color($info, 40%);
+$warning-border-subtle-dark:        shade-color($warning, 40%);
+$danger-border-subtle-dark:         shade-color($danger, 40%);
+$light-border-subtle-dark:          $gray-700;
+$dark-border-subtle-dark:           $gray-800;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   #a6b0cf;
+$body-bg-dark:                      #222736;
+$body-secondary-color-dark:         #c3cbe4;
+$body-secondary-bg-dark:            #2a3042;
+$body-tertiary-color-dark:          #f6f6f6;
+$body-tertiary-bg-dark:             #32394e;
+$body-emphasis-color-dark:          $white;
+$border-color-dark:                 #32394e;
+$border-color-translucent-dark:     #353d55;
+$headings-color-dark:               #f6f6f6;
+$link-color-dark:                   $primary;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage);
+$code-color-dark:                   $code-color;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+$form-switch-color-dark:            rgba($white, .25);
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
+
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark:             $green-300;
+$form-valid-border-color-dark:      $green-300;
+$form-invalid-color-dark:           $red-300;
+$form-invalid-border-color-dark:    $red-300;
+// scss-docs-end form-validation-colors-dark
+
+
+//
+// Accordion
+//
+
+$accordion-icon-color-dark:         $primary-text-emphasis-dark;
+$accordion-icon-active-color-dark:  $primary-text-emphasis-dark;
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+// scss-docs-end sass-dark-mode-vars
+
+/* =============================Custom Variables========================== */
+
+$header-bg-dark:                        #262b3c;
+$header-item-color-dark:                #a6b0cf;
+
+//topbra dark
+$header-dark-bg-dark:                   $primary;
+$header-dark-item-color-dark:           #e9ecef;
+$topbar-search-bg-dark:                 #2a3042;
+
+// Footer
+$footer-bg-dark:                        #262b3c;
+$footer-color-dark:                     #a6b0cf;
+
+// Horizontal nav
+$topnav-bg-dark:                        #282e3f;
+$menu-item-color-dark:                  #a6b0cf;
+$menu-item-active-color-dark:           #556ee6;
+
+$boxed-body-bg-dark:                    #32394f;
+
+
+// Display
+$display-none-dark:                                        block;
+$display-block-dark:                                       none;