@open-rlb/ng-bootstrap 2.2.17

package/assets/scss/icons.scss

@@ -0,0 +1,11 @@
+/*
+Template Name: Skote - Admin & Dashboard Template
+Author: Themesbrand
+Version: 4.3.0.
+Website: https://themesbrand.com/
+Contact: themesbrand@gmail.com
+File: Icons Css File
+*/
+
+// Plugins
+@import "custom/plugins/icons";

package/assets/scss/rlb/_avatar.scss

@@ -0,0 +1,42 @@
+
+/*AVATAR*/
+.avatar {
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #CED4DA;
+
+  & img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.profile {
+    width: 90px;
+    height: 90px;
+    min-width: 90px;
+  }
+
+  &.large {
+    width: 54px;
+    height: 54px;
+    min-width: 54px;
+  }
+
+  &.regular {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+  }
+
+  &.small {
+    width: 34px;
+    height: 34px;
+    min-width: 34px;
+  }
+
+  &.dark {
+    border: 2px solid #FFFFFF;
+  }
+}

package/assets/scss/rlb/app-layout.scss

@@ -0,0 +1,106 @@
+.rlb-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $header-height;
+  display: flex;
+  align-items: center;
+  z-index: 1001;
+}
+
+.rlb-sidebar {
+  position: fixed;
+  margin-top: $header-height;
+  left: 0;
+  width: $sidebar-width;
+  height: calc(100% - $header-height);
+  box-sizing: border-box;
+  z-index: 1001;
+  transition: width 0.3s ease-in-out;
+
+  &.collapsed {
+    width: 0;
+  }
+}
+
+.rlb-content {
+  position: fixed;
+  left: 0;
+  width: calc(100%);
+  height: calc(100% - $header-height);
+  overflow-y: auto;
+  margin-top: $header-height;
+  box-sizing: border-box;
+  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
+
+  &.rlb-sidebar-en {
+    left: $sidebar-width;
+    width: calc(100% - $sidebar-width);
+  }
+
+  &.expanded {
+    left: 0;
+    width: calc(100%);
+  }
+}
+
+.sidebar-toggle {
+  position: fixed;
+  top: calc($header-height + 15px);
+  left: $sidebar-width - 30px;
+  transform: translateX(-50%);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 9999;
+  transition: left 0.3s ease-in-out, transform 0.2s ease, color 0.2s ease, border 0.2s ease;
+
+  &:hover {
+    transform: translateX(-50%) scale(1.15);
+    border: 1px solid $sidebar-menu-item-active-color;
+    color: $sidebar-menu-item-active-color;
+  }
+
+  i {
+    font-size: 16px;
+  }
+}
+
+.rlb-sidebar.collapsed .sidebar-toggle {
+  left: 0;
+}
+
+.sidebar-toggler-tooltip {
+
+  --bs-tooltip-bg: var(--bs-body-bg);
+  --bs-tooltip-color: var(--bs-body-color);
+
+
+  --bs-tooltip-border-width: 1px;
+  --bs-tooltip-border-color: rgba(0, 0, 0, 0.15);
+
+  background-color: var(--bs-tooltip-bg);
+  color: var(--bs-tooltip-color);
+  border: var(--bs-tooltip-border-width) solid var(--bs-tooltip-border-color);
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+
+/* ===== Mobile ===== */
+@media (max-width: 992px) {
+  .navbar-collapse {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--bs-body-bg);
+    border-top: 1px solid rgba(0, 0, 0, .1);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
+    z-index: 1100;
+  }
+}

package/assets/scss/rlb/chat.scss

@@ -0,0 +1,258 @@
+/*Chat bubble */
+
+.chat-bubble__wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-bubble-item {
+  min-width: 210px;
+  max-width: 700px;
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+  display: flex;
+  align-items: center;
+  word-wrap: normal;
+  word-break: break-word;
+  padding: 11px 0px;
+
+
+  &.left {
+    .text {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 14.29px;
+        left: -6px;
+        bottom: -0.5px;
+        border-top: 11px solid transparent;
+        border-bottom: 12px solid transparent;
+        transform: rotate(87deg);
+        z-index: -1;
+      }
+    }
+  }
+
+  &.right {
+    margin-left: auto;
+
+    .text {
+      position: relative;
+      margin-left: auto;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 14.29px;
+        right: -6px;
+        bottom: -0.5px;
+        border-top: 8px solid transparent;
+        border-bottom: 15px solid transparent;
+        transform: rotate(93deg);
+        z-index: -1;
+      }
+    }
+  }
+
+  .reply-button {
+    background: transparent;
+    border: none;
+    padding: 0;
+
+    i {
+
+      &::before {
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  .avatar {
+    margin-top: auto;
+  }
+
+  .text {
+    &:hover {
+      .reaction.add {
+        opacity: 1;
+        transition-duration: 150ms;
+        transition-property: opacity;
+      }
+    }
+
+    border-radius: $border-radius;
+    padding: 8px;
+    font-weight: 400;
+    line-height: 1.5;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    i {
+      margin-left: 5px;
+      margin-top: 5px;
+    }
+
+    .replied-message {
+      border-radius: 0;
+      padding: 8px;
+
+      .name {
+        font-weight: 700;
+        line-height: 1.5;
+
+        p {
+          margin-bottom: 0;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .time {
+      font-size: 13px;
+      margin-top: 6px;
+    }
+
+    .reaction {
+      position: absolute;
+      bottom: -14px;
+      height: 30px;
+      width: 30px;
+      font-size: 20px;
+      border-radius: 4px;
+      text-align: center;
+      padding: 0 !important;
+
+      &.right {
+        left: 15px;
+      }
+
+      &.left {
+        left: 15px;
+      }
+
+      &.add {
+
+        opacity: 0;
+        position: absolute;
+        bottom: 0px;
+        left: 7px;
+        transition-duration: 150ms;
+        transition-property: opacity;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.chat-bubble-item {
+  &.left {
+    .text {
+      background: $body-bg;
+      border: 1px solid #e5e5e5;
+
+      &::after {
+        border-right: 14px solid $body-bg;
+      }
+    }
+  }
+
+  &.right {
+    .text {
+      background: #78c0ff;
+      border: 1px solid $border-color;
+
+      &::after {
+        border-right: 14px solid #78c0ff;
+      }
+    }
+  }
+
+  .text {
+    color: $body-color;
+
+    .replied-message {
+      background: $gray-200;
+      border-left: 3px solid $primary;
+
+      .name {
+        color: $primary;
+      }
+    }
+
+    .reaction {
+      &.right {
+        background: #78c0ff;
+        border: 1px solid $border-color;
+      }
+
+      &.left {
+        background: $body-bg;
+        border: 1px solid $border-color;
+      }
+    }
+  }
+}
+
+[data-bs-theme="dark"] {
+  .chat-bubble-item {
+    &.left {
+      .text {
+        background: $body-bg-dark;
+        border: 1px solid #e5e5e5;
+
+        &::after {
+          border-right: 14px solid $body-bg-dark;
+        }
+      }
+    }
+
+    &.right {
+      .text {
+        background: #2f9eff;
+        border: 1px solid $border-color-dark;
+
+        &::after {
+          border-right: 14px solid #2f9eff;
+        }
+      }
+    }
+
+    .text {
+      color: $body-color-dark ;
+
+      .replied-message {
+        color: $body-color;
+        background: $gray-200;
+        border-left: 3px solid $primary;
+
+        .name {
+          color: $primary;
+        }
+      }
+
+      .reaction {
+        &.right {
+          background: #2f9eff;
+          border: 1px solid $border-color-dark;
+        }
+
+        &.left {
+          background: $body-bg-dark;
+          border: 1px solid $border-color-dark;
+        }
+      }
+    }
+  }
+}

package/assets/scss/rlb/file-dnd.scss

@@ -0,0 +1,41 @@
+.rlb-file-dnd {
+  padding: 2rem;
+  text-align: center;
+  border: dashed 1px #979797;
+
+
+  input {
+    display: none;
+  }
+}
+
+.rlb-file-dnd-list {
+  margin-top: 1.5rem;
+
+  .single-file {
+    padding: 0.5rem;
+    border: dashed 1px #979797;
+    margin-bottom: 1rem;
+    display: flex;
+
+    .name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #353f4a;
+      margin: 0;
+    }
+
+    .size {
+      font-size: 12px;
+      font-weight: 500;
+      color: #a4a4a4;
+      margin: 0;
+      margin-bottom: 0.25rem;
+    }
+
+    .info {
+      width: 100%
+    }
+  }
+}
+

package/assets/scss/rlb/navbar.scss

@@ -0,0 +1,5 @@
+.separator {
+  border-left: 1px solid #e5e5e5;
+  margin: 0 5px;
+  display: block;
+}