@appscode/design-system 1.1.0 → 2.0.0

package/components/_navbar.scss

@@ -1,752 +1,786 @@
-.ac-navbar-area {
-  background-color: $ac-primary;
-  box-shadow: $ac-shadow-3;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-
-  &.is-light {
-    background-color: $ac-white;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
-
-    .ac-navbar-menu .ac-menu-item .ac-nav-button.ac-profile-button {
-      color: #3a3a3a !important;
-    }
-
-    .drawer-icon svg {
-      fill: $ac-color-text !important;
-    }
-  }
-
-  .ac-navbar {
-    display: inline-grid;
-    grid-template-columns: 255px auto auto;
-    grid-gap: 0px;
-    align-items: center;
-    width: 100%;
-    height: 50px;
-    padding: 0 15px;
-
-    .ac-navbar-brand {
-      .logo {
-        font-size: 20px;
-        font-weight: 600;
-        color: $ac-white;
-      }
-
-      img {
-        height: 30px;
-      }
-    }
-
-    .search-item {
-      display: flex;
-      align-items: center;
-      background-color: rgba(255, 255, 255, 0.2);
-      padding: 5px 20px;
-      border-radius: 4px;
-
-      span {
-        color: $ac-white;
-      }
-
-      input {
-        background-color: transparent;
-        border: none;
-        color: $ac-white;
-        font-size: $font-size-small;
-        font-weight: 600;
-        font-family: $ac-family-heading;
-        width: 100%;
-        padding-left: 15px;
-
-        &::placeholder {
-          color: $ac-white-lighter;
-          font-weight: 500;
-        }
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-
-    .ac-navbar-menu {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      .ac-organizations {
-        margin: 0;
-
-        .ac-nav-button {
-          border: none;
-          margin: 0;
-          padding: 0;
-          margin-right: 15px;
-          width: 26px;
-          height: 26px;
-          border-radius: 50%;
-          overflow: hidden;
-          border: 2px solid $ac-white;
-
-          &:last-child {
-            margin-right: 0;
-            position: relative;
-            z-index: 1;
-
-            .more-items {
-              text-align: center;
-              color: $ac-white;
-              z-index: 99;
-              position: absolute;
-              font-size: $font-size-extra-small;
-              font-weight: 500;
-            }
-
-            &::after {
-              position: absolute;
-              content: "";
-              left: 0;
-              top: 0;
-              width: 100%;
-              height: 100%;
-              background-color: $ac-black;
-              opacity: 0.2;
-              z-index: 1;
-            }
-          }
-        }
-      }
-
-      .ac-menu-item {
-        position: relative;
-        z-index: 1;
-
-        // width: 30px;
-        // height: 30px;
-        // border-radius: 50%;
-        .ac-nav-button:not(.ac-profile-button) {
-          &:after {
-            content: "";
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            position: absolute;
-            z-index: -1;
-            left: 50%;
-            transition: 0.3s ease-in-out;
-            margin-left: -15px;
-          }
-
-          &:hover {
-            &:after {
-              background-color: rgba(255, 255, 255, 0.2) !important;
-            }
-          }
-        }
-
-        &:hover {
-          .ac-nav-button:not(.ac-profile-button) {
-            i.fa {
-              color: $ac-white;
-            }
-          }
-
-          .ac-menu-content {
-            opacity: 1;
-            visibility: visible;
-            top: 40px;
-
-            &.theme-choice {
-              transition: none;
-              padding: 10px 10px;
-              min-width: 150px !important;
-              max-height: 150px;
-              overflow-y: auto;
-              border-radius: 4px;
-              left: 0;
-              background-color: $ac-white;
-
-              ul {
-                li {
-                  width: 40px;
-                  height: 40px;
-                  line-height: 42px;
-                  border-radius: 4px;
-                  text-align: center;
-                  cursor: pointer;
-
-                  &.is-active {
-                    color: $ac-white;
-                    background: $ac-primary;
-                  }
-                }
-              }
-
-              // &::after {
-              //   right: 90px;
-              // }
-            }
-
-            &::after {
-              position: absolute;
-              content: "";
-              right: 15px;
-              top: -6px;
-              background-color: $ac-white;
-              width: 15px;
-              height: 15px;
-              transform: rotate(45deg);
-              box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.16);
-              z-index: -1;
-            }
-          }
-
-          .ac-shake {
-            animation-play-state: paused;
-          }
-        }
-
-        .ac-nav-button {
-          background-color: transparent;
-          border: none;
-          color: $ac-white-lighter;
-          padding: 0 14px;
-          margin-left: 15px;
-
-          &.ac-profile-button {
-            color: $ac-white;
-          }
-
-          &:last-child {
-            margin-left: 0;
-          }
-
-          span {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            width: 15px;
-            height: 15px;
-            background-color: $ac-white;
-            font-size: 12px;
-            line-height: 15px;
-            border-radius: 50%;
-            color: $ac-primary;
-            z-index: 9;
-          }
-
-          &:focus {
-            outline: none;
-            box-shadow: none !important;
-          }
-
-          &.ac-profile-button {
-            strong {
-              color: $ac-white;
-              margin-left: 16px;
-              font-weight: 500;
-              font-size: $font-size-small;
-            }
-
-            .ac-user-profile {
-              width: 32px;
-              height: 32px;
-              border-radius: 50%;
-              overflow: hidden;
-              box-shadow: $ac-shadow-1;
-            }
-
-            i.fa {
-              padding: 0 10px;
-            }
-          }
-        }
-
-        .ac-menu-content {
-          position: absolute;
-          right: 0;
-          top: 80px;
-          box-shadow: $ac-shadow-1;
-          min-width: 180px;
-          opacity: 0;
-          visibility: hidden;
-          transition: 0.3s ease-in;
-
-          &.theme-choice {
-            left: 0;
-          }
-
-          .user-profile-wrapper {
-            background-color: $ac-white;
-            padding: 20px;
-            border-radius: 4px;
-
-            .profile-area {
-              display: flex;
-              align-items: center;
-              border-bottom: 1px solid $ac-white-light;
-              padding-bottom: 10px;
-              margin-bottom: 10px;
-
-              .profile-photo {
-                width: 50px;
-                height: 50px;
-                border-radius: 50%;
-                position: relative;
-                z-index: 1;
-                margin-right: 10px;
-
-                img {
-                  border-radius: 50%;
-                  width: 100%;
-                }
-
-                .camera-icon {
-                  position: absolute;
-                  right: -10px;
-                  top: 0;
-                  background-color: transparent;
-                  border: none;
-                  cursor: pointer;
-                }
-              }
-
-              .profile-info {
-                p {
-                  color: $ac-color-text;
-                  font-size: $font-size-small;
-                  font-weight: 500;
-                  line-height: 1.3;
-                }
-
-                a {
-                  font-size: $font-size-extra-small;
-                  color: #74818d;
-                  line-height: 1.3;
-                }
-              }
-            }
-
-            ul {
-              li {
-                a {
-                  padding: 8px 0px;
-
-                  &:hover {
-                    background-color: transparent;
-                    color: $ac-primary;
-                  }
-                }
-              }
-            }
-          }
-
-          &.quick-access {
-            background-color: $ac-white;
-            padding: 20px;
-            min-width: 260px !important;
-            max-height: 250px;
-            overflow-y: auto;
-            border-radius: 4px;
-
-            .header {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              border-bottom: 1px solid $ac-white-light;
-              padding-bottom: 20px;
-
-              p {
-                font-size: $font-size-small;
-                color: $ac-color-text;
-              }
-
-              button {
-                background-color: transparent;
-                border: none;
-                cursor: pointer;
-                color: $ac-color-value;
-              }
-            }
-
-            .body-content {
-              margin-top: 20px;
-
-              p {
-                font-size: $font-size-small;
-                color: $ac-color-text;
-              }
-
-              .organizations {
-                .organization {
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  padding: 5px 0;
-
-                  .org-info {
-                    display: flex;
-                    align-items: center;
-
-                    img {
-                      max-width: 30px;
-                      margin-right: 10px;
-                      object-fit: cover;
-                    }
-                  }
-
-                  .remove {
-                    border: none;
-                    padding: 0;
-                    font-size: $font-size-tiny;
-                    color: #eb5757;
-                    background-color: transparent;
-                  }
-                }
-              }
-            }
-          }
-
-          &::-webkit-scrollbar {
-            width: 7px;
-          }
-
-          /* Track */
-          &::-webkit-scrollbar-track {
-            background-color: #d1d4de;
-            border-radius: 10px;
-          }
-
-          /* Handle */
-          &::-webkit-scrollbar-thumb {
-            background-color: $ac-gray-light;
-            border-radius: 10px;
-          }
-
-          /* Handle on hover */
-          &::-webkit-scrollbar-thumb:hover {
-            background-color: $ac-gray-light;
-          }
-
-          // &:last-child {
-          //   right: 0;
-          // }
-
-          &.is-notification {
-            right: 0;
-            background-color: $ac-white;
-            box-shadow: 0px 4px 8px rgba(84, 101, 126, 0.2);
-            border-radius: 4px;
-            min-width: 330px;
-            max-height: 400px;
-            overflow-y: auto;
-
-            .notification-header {
-              padding: 20px 20px 6px 20px;
-              display: flex;
-              justify-content: space-between;
-              align-items: baseline;
-
-              .left-content {
-                p {
-                  font-weight: 500;
-                  font-size: $font-size-small;
-                  line-height: 19px;
-                  margin-bottom: 15px;
-
-                  span {
-                    font-weight: normal;
-                  }
-
-                  &.date {
-                    font-size: $font-size-tiny;
-                    line-height: 14px;
-                    font-weight: normal;
-                    margin-bottom: 0;
-                  }
-                }
-              }
-
-              .right-content {
-                .button {
-                  border: none;
-                  margin: 0;
-                  padding: 10px;
-                  font-size: $font-size-small;
-
-                  &.is-active {
-                    background-color: $ac-primary;
-                    color: $ac-white;
-
-                    img {
-                      filter: brightness(100);
-                    }
-                  }
-
-                  &:hover {
-                    background-color: $ac-primary;
-                    color: $ac-white;
-
-                    img {
-                      filter: brightness(100);
-                    }
-                  }
-                }
-              }
-            }
-
-            .notification-body {
-              .single-notification-item {
-                display: block;
-                border-top: 1px solid $ac-white-light;
-                padding: 15px 20px;
-                font-weight: 500;
-
-                &.is-complete {
-                  font-weight: 400;
-                }
-
-                &:hover {
-                  background-color: #d1e3f2;
-                }
-
-                p {
-                  color: $ac-color-text;
-                  font-size: $font-size-extra-small;
-                }
-
-                .notification-status {
-                  margin-top: 10px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-
-                  p {
-                    font-size: $font-size-tiny;
-                    color: $ac-label-text;
-
-                    &.is-success {
-                      color: $ac-success;
-                    }
-
-                    &.is-danger {
-                      color: $ac-danger;
-                    }
-
-                    &.is-warning {
-                      color: $ac-warning;
-                    }
-                  }
-                }
-              }
-            }
-
-            .see-all-message {
-              border-top: 1px solid $ac-white-light;
-              text-align: center;
-              font-weight: 500;
-              font-size: $font-size-small;
-              color: $ac-color-text;
-              display: block;
-              padding: 10px 20px;
-            }
-          }
-
-          ul {
-            background-color: $ac-white;
-            padding: 0;
-            border-radius: 4px;
-            overflow: hidden;
-
-            li {
-              a {
-                display: block;
-                padding: 8px 15px;
-                color: $ac-color-text;
-                transition: 0.3s ease-in-out;
-                font-size: $font-size-small;
-
-                &:hover {
-                  background-color: $ac-primary;
-                  color: $ac-white;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.ac-menu-item {
-  li {
-    &.is-close {
-      ul {
-        max-height: 0;
-        visibility: hidden;
-        transition: max-height 0.25s ease-out;
-      }
-    }
-
-    &.is-open {
-      ul {
-        max-height: 200px;
-        visibility: visible;
-        transition: max-height 0.25s ease-out;
-      }
-    }
-  }
-
-  .is-fullwidth {
-    width: 100%;
-  }
-
-  .navbar-dropdown-wrapper {
-    width: 300px;
-    transition: width 0.9s ease-in-out;
-  }
-}
-
-.theme-choicee {
-  border: 1px solid $ac-white-light;
-
-  li {
-    border-right: 1px solid $ac-white-light;
-    cursor: pointer;
-    transition: 0.3s ease-in-out;
-
-    &:last-child {
-      border-right: none;
-    }
-
-    &:hover {
-      color: $ac-black;
-    }
-
-    &.is-active {
-      background-color: $ac-primary;
-      color: $ac-white;
-    }
-  }
-}
-
-// start dark theme
-.is-dark-theme {
-  body {
-    .ac-navbar-area {
-      background-color: var(--dark-bg-light);
-      --ac-white: #ffffff;
-      --ac-white-lighter: #f1f1f1;
-
-      .ac-navbar {
-        .search-item {
-          background-color: rgba(0, 0, 0, 0.2);
-        }
-
-        .ac-navbar-menu {
-          .ac-menu-item {
-            .quick-access {
-              --ac-white: var(--dark-bg-light);
-            }
-
-            .ac-menu-content {
-              &.theme-choice {
-                background-color: var(--dark-bg-light);
-              }
-
-              background-color: var(--dark-bg-light);
-
-              ul {
-                background-color: var(--dark-bg-light);
-              }
-
-              &::after {
-                --ac-white: var(--dark-bg-light);
-              }
-
-              .user-profile-wrapper {
-                --ac-white: var(--dark-bg-light);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// end dark theme code
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-  .ac-navbar-area {
-    .ac-navbar {
-      grid-template-columns: 60px 30px auto;
-
-      .ac-navbar-brand {
-        max-width: 40px;
-
-        a {
-          display: block;
-        }
-      }
-
-      .search-item {
-        display: inline-block;
-
-        input {
-          display: none;
-        }
-      }
-
-      .ac-navbar-menu {
-        .ac-menu-item {
-          .ac-nav-button {
-            margin-left: 0px;
-
-            &.ac-profile-button {
-              margin-left: 0px;
-
-              strong {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-  .ac-navbar-area {
-    .ac-navbar {
-      grid-template-columns: 250px auto auto;
-    }
-  }
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-  .ac-navbar-area {
-    .ac-navbar {
-      grid-template-columns: 270px auto auto;
-    }
-  }
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+// .ac-navbar-area {
+//   background-color: $primary;
+//   box-shadow: $ac-shadow-3;
+//   position: fixed;
+//   margin-left: 250px;
+//   width: 100%;
+//   top: 0;
+//   z-index: 999;
+
+//   &.is-full {
+//     margin-left: 0;
+
+//     .ac-navbar {
+//       grid-template-columns: 255px auto auto;
+//       width: 100%;
+//     }
+//   }
+
+//   &.is-light {
+//     background: $primary-97;
+//     border-bottom: 1px solid $primary-90;
+//     box-shadow: none;
+
+//     .ac-navbar-menu {
+//       .ac-menu-item {
+//         .ac-nav-button {
+//           &.ac-profile-button {
+//             font-weight: 600;
+//             font-size: 13px;
+//             line-height: 100%;
+//             color: $primary-10 !important;
+
+//             strong {
+//               color: $primary-10 !important;
+//               font-weight: 600;
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     .drawer-icon svg {
+//       fill: $primary-10 !important;
+//     }
+//   }
+
+//   .ac-navbar {
+//     display: inline-grid;
+//     grid-template-columns: auto auto;
+//     // margin-left: 255px;
+//     grid-gap: 0px;
+//     align-items: center;
+//     width: calc(100% - 255px);
+//     height: 50px;
+//     padding: 0 15px;
+
+//     .ac-navbar-brand {
+//       .logo {
+//         font-size: 20px;
+//         font-weight: 600;
+//         color: $white-100;
+//       }
+
+//       img {
+//         height: 30px;
+//       }
+//     }
+
+//     .search-item {
+//       display: flex;
+//       align-items: center;
+//       background-color: rgba(255, 255, 255, 0.2);
+//       padding: 5px 20px;
+//       border-radius: 4px;
+
+//       span {
+//         color: $white-100;
+//       }
+
+//       input {
+//         background-color: transparent;
+//         border: none;
+//         color: $white-100;
+//         font-size: 13px;
+//         font-weight: 600;
+//         font-family: $font-heading;
+//         width: 100%;
+//         padding-left: 15px;
+
+//         &::placeholder {
+//           color: $primary-90;
+//           font-weight: 500;
+//         }
+
+//         &:focus {
+//           outline: none;
+//         }
+//       }
+//     }
+
+//     .ac-navbar-menu {
+//       display: flex;
+//       align-items: center;
+//       justify-content: flex-end;
+
+//       .ac-organizations {
+//         margin: 0;
+
+//         .ac-nav-button {
+//           border: none;
+//           margin: 0;
+//           padding: 0;
+//           margin-right: 15px;
+//           width: 26px;
+//           height: 26px;
+//           border-radius: 50%;
+//           overflow: hidden;
+//           border: 2px solid $white-100;
+
+//           &:last-child {
+//             margin-right: 0;
+//             position: relative;
+//             z-index: 1;
+
+//             .more-items {
+//               text-align: center;
+//               color: $white-100;
+//               z-index: 99;
+//               position: absolute;
+//               font-size: 12px;
+//               font-weight: 500;
+//             }
+
+//             &::after {
+//               position: absolute;
+//               content: "";
+//               left: 0;
+//               top: 0;
+//               width: 100%;
+//               height: 100%;
+//               background-color: $black-5;
+//               opacity: 0.2;
+//               z-index: 1;
+//             }
+//           }
+//         }
+//       }
+
+//       .ac-menu-item {
+//         position: relative;
+//         z-index: 1;
+
+//         // width: 30px;
+//         // height: 30px;
+//         // border-radius: 50%;
+//         .ac-nav-button:not(.ac-profile-button) {
+//           &:after {
+//             content: "";
+//             border-radius: 50%;
+//             width: 30px;
+//             height: 30px;
+//             position: absolute;
+//             z-index: -1;
+//             left: 50%;
+//             transition: 0.3s ease-in-out;
+//             margin-left: -15px;
+//           }
+
+//           &:hover {
+//             &:after {
+//               background-color: rgba(255, 255, 255, 0.2) !important;
+//             }
+//           }
+//         }
+
+//         &:hover {
+//           .ac-nav-button:not(.ac-profile-button) {
+//             i.fa {
+//               color: $white-100;
+//             }
+//           }
+
+//           .ac-menu-content {
+//             opacity: 1;
+//             visibility: visible;
+//             top: 40px;
+
+//             &.theme-choice {
+//               transition: none;
+//               padding: 10px 10px;
+//               min-width: 150px !important;
+//               max-height: 150px;
+//               overflow-y: auto;
+//               border-radius: 0 0 4px 4px;
+//               left: 0;
+//               background-color: $white-100;
+
+//               ul {
+//                 li {
+//                   width: 40px;
+//                   height: 40px;
+//                   line-height: 42px;
+//                   // border-radius: 4px;
+//                   text-align: center;
+//                   cursor: pointer;
+
+//                   &.is-active {
+//                     color: $white-100;
+//                     background: $primary;
+//                   }
+//                 }
+//               }
+
+//               // &::after {
+//               //   right: 90px;
+//               // }
+//             }
+
+//             &::after {
+//               position: absolute;
+//               content: "";
+//               right: 38px;
+//               top: -6px;
+//               background-color: $white-100;
+//               width: 15px;
+//               height: 15px;
+//               transform: rotate(45deg);
+//               box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.16);
+//               z-index: -1;
+//             }
+//           }
+
+//           .ac-shake {
+//             animation-play-state: paused;
+//           }
+//         }
+
+//         .ac-nav-button {
+//           background-color: transparent;
+//           border: none;
+//           color: $primary-90;
+//           padding: 0 14px;
+//           margin-left: 15px;
+
+//           &.ac-profile-button {
+//             color: $white-100;
+//           }
+
+//           &:last-child {
+//             margin-left: 0;
+//           }
+
+//           span {
+//             position: absolute;
+//             top: 5px;
+//             right: 5px;
+//             width: 15px;
+//             height: 15px;
+//             background-color: $white-100;
+//             font-size: 12px;
+//             line-height: 15px;
+//             border-radius: 50%;
+//             color: $primary;
+//             z-index: 9;
+//           }
+
+//           &:focus {
+//             outline: none;
+//             box-shadow: none !important;
+//           }
+
+//           &.ac-profile-button {
+//             strong {
+//               color: $white-100;
+//               margin-left: 16px;
+//               font-weight: 500;
+//               font-size: 13px;
+//             }
+
+//             .ac-user-profile {
+//               width: 32px;
+//               height: 32px;
+//               border-radius: 50%;
+//               overflow: hidden;
+//               border: 2px solid #d2e7f9;
+//             }
+
+//             i.fa {
+//               padding: 0 10px;
+//             }
+//           }
+//         }
+
+//         .ac-menu-content {
+//           position: absolute;
+//           right: 0;
+//           top: 80px;
+//           box-shadow: $ac-shadow-1;
+//           min-width: 180px;
+//           opacity: 0;
+//           visibility: hidden;
+//           transition: 0.3s ease-in;
+
+//           &.theme-choice {
+//             left: 0;
+//           }
+
+//           .user-profile-wrapper {
+//             background-color: $white-100;
+//             border-radius: 4px;
+//             border: 1px solid $primary-90;
+
+//             .profile-area {
+//               display: flex;
+//               align-items: center;
+//               border-bottom: 1px solid $primary-90;
+//               padding: 8px 16px;
+
+//               .profile-photo {
+//                 // width: 50px;
+//                 // height: 50px;
+//                 border-radius: 50%;
+//                 position: relative;
+//                 z-index: 1;
+//                 margin-right: 10px;
+
+//                 img {
+//                   border-radius: 50%;
+//                   width: 100%;
+//                   border: 2px solid #d2e7f9;
+//                 }
+
+//                 .camera-icon {
+//                   position: absolute;
+//                   right: -10px;
+//                   top: 0;
+//                   background-color: transparent;
+//                   border: none;
+//                   cursor: pointer;
+//                 }
+//               }
+
+//               .profile-info {
+//                 p {
+//                   color: $primary-10;
+//                   font-size: 13px;
+//                   font-weight: 500;
+//                   line-height: 1.3;
+//                 }
+
+//                 a {
+//                   font-size: 1rem;
+//                   color: $primary-20;
+//                   line-height: 1.3;
+//                 }
+//               }
+//             }
+
+//             ul {
+//               li {
+//                 a {
+//                   padding: 6px 16px;
+//                   font-weight: 500;
+
+//                   &:hover {
+//                     // background-color: transparent;
+//                     color: $primary;
+//                   }
+//                 }
+//               }
+//             }
+//           }
+
+//           &.quick-access {
+//             background-color: $white-100;
+//             padding: 20px;
+//             min-width: 260px !important;
+//             max-height: 250px;
+//             overflow-y: auto;
+//             border-radius: 4px;
+
+//             .header {
+//               display: flex;
+//               justify-content: space-between;
+//               align-items: center;
+//               border-bottom: 1px solid $primary-90;
+//               padding-bottom: 20px;
+
+//               p {
+//                 font-size: 13px;
+//                 color: $primary-10;
+//               }
+
+//               button {
+//                 background-color: transparent;
+//                 border: none;
+//                 cursor: pointer;
+//                 color: $primary-20;
+//               }
+//             }
+
+//             .body-content {
+//               margin-top: 20px;
+
+//               p {
+//                 font-size: 13px;
+//                 color: $primary-10;
+//               }
+
+//               .organizations {
+//                 .organization {
+//                   display: flex;
+//                   align-items: center;
+//                   justify-content: space-between;
+//                   padding: 5px 0;
+
+//                   .org-info {
+//                     display: flex;
+//                     align-items: center;
+
+//                     img {
+//                       max-width: 30px;
+//                       margin-right: 10px;
+//                       object-fit: cover;
+//                     }
+//                   }
+
+//                   .remove {
+//                     border: none;
+//                     padding: 0;
+//                     font-size: 11px;
+//                     color: $danger;
+//                     background-color: transparent;
+//                   }
+//                 }
+//               }
+//             }
+//           }
+
+//           &::-webkit-scrollbar {
+//             width: 7px;
+//           }
+
+//           /* Track */
+//           &::-webkit-scrollbar-track {
+//             background-color: #d1d4de;
+//             border-radius: 10px;
+//           }
+
+//           /* Handle */
+//           &::-webkit-scrollbar-thumb {
+//             background-color: $black-50;
+//             border-radius: 10px;
+//           }
+
+//           /* Handle on hover */
+//           &::-webkit-scrollbar-thumb:hover {
+//             background-color: $black-50;
+//           }
+
+//           // &:last-child {
+//           //   right: 0;
+//           // }
+
+//           &.is-notification {
+//             right: 0;
+//             background-color: $white-100;
+//             box-shadow: 0px 4px 8px rgba(84, 101, 126, 0.2);
+//             border-radius: 4px;
+//             min-width: 330px;
+//             max-height: 400px;
+//             overflow-y: auto;
+
+//             .notification-header {
+//               padding: 20px 20px 6px 20px;
+//               display: flex;
+//               justify-content: space-between;
+//               align-items: baseline;
+
+//               .left-content {
+//                 p {
+//                   font-weight: 500;
+//                   font-size: 13px;
+//                   line-height: 19px;
+//                   margin-bottom: 15px;
+
+//                   span {
+//                     font-weight: normal;
+//                   }
+
+//                   &.date {
+//                     font-size: 11px;
+//                     line-height: 14px;
+//                     font-weight: normal;
+//                     margin-bottom: 0;
+//                   }
+//                 }
+//               }
+
+//               .right-content {
+//                 .button {
+//                   border: none;
+//                   margin: 0;
+//                   padding: 10px;
+//                   font-size: 13px;
+
+//                   &.is-active {
+//                     background-color: $primary;
+//                     color: $white-100;
+
+//                     img {
+//                       filter: brightness(100);
+//                     }
+//                   }
+
+//                   &:hover {
+//                     background-color: $primary;
+//                     color: $white-100;
+
+//                     img {
+//                       filter: brightness(100);
+//                     }
+//                   }
+//                 }
+//               }
+//             }
+
+//             .notification-body {
+//               .single-notification-item {
+//                 display: block;
+//                 border-top: 1px solid $primary-90;
+//                 padding: 15px 20px;
+//                 font-weight: 500;
+
+//                 &.is-complete {
+//                   font-weight: 400;
+//                 }
+
+//                 &:hover {
+//                   background-color: #d1e3f2;
+//                 }
+
+//                 p {
+//                   color: $primary-10;
+//                   font-size: 12px;
+//                 }
+
+//                 .notification-status {
+//                   margin-top: 10px;
+//                   display: flex;
+//                   align-items: center;
+//                   justify-content: space-between;
+
+//                   p {
+//                     font-size: 11px;
+//                     color: $primary-10;
+
+//                     &.is-success {
+//                       color: $success;
+//                     }
+
+//                     &.is-danger {
+//                       color: $danger;
+//                     }
+
+//                     &.is-warning {
+//                       color: $warning;
+//                     }
+//                   }
+//                 }
+//               }
+//             }
+
+//             .see-all-message {
+//               border-top: 1px solid $primary-90;
+//               text-align: center;
+//               font-weight: 500;
+//               font-size: 13px;
+//               color: $primary-10;
+//               display: block;
+//               padding: 10px 20px;
+//             }
+//           }
+
+//           ul {
+//             background-color: $white-100;
+//             padding: 0;
+//             // border-radius: 4px;
+//             overflow: hidden;
+
+//             li {
+//               a {
+//                 display: block;
+//                 padding: 8px 15px;
+//                 color: $primary-10;
+//                 transition: 0.3s ease-in-out;
+//                 font-size: 13px;
+
+//                 &:hover {
+//                   background-color: $primary-95;
+
+//                   p {
+//                     color: $primary !important;
+//                   }
+//                 }
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .ac-menu-item {
+//   li {
+//     &.is-close {
+//       ul {
+//         max-height: 0;
+//         visibility: hidden;
+//         transition: max-height 0.25s ease-out;
+//       }
+//     }
+
+//     &.is-open {
+//       ul {
+//         max-height: 200px;
+//         visibility: visible;
+//         transition: max-height 0.25s ease-out;
+//       }
+//     }
+//   }
+
+//   .is-fullwidth {
+//     width: 100%;
+//   }
+
+//   .navbar-dropdown-wrapper {
+//     width: 240px;
+//     transition: width 0.9s ease-in-out;
+//   }
+// }
+
+// .theme-choicee {
+//   border-top: 1px solid $primary-90;
+
+//   li {
+//     cursor: pointer;
+//     padding: 0.5rem;
+//     border-radius: 0;
+//     transition: all 0.2s ease-in-out;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+
+//     &:last-child {
+//       border-right: none;
+//     }
+
+//     &:hover {
+//       background: $primary-95;
+//     }
+
+//     &.is-active {
+//       background: $primary-90;
+//       color: $primary;
+//     }
+//   }
+// }
+
+// // start dark theme
+// .is-dark-theme {
+//   body {
+//     .ac-navbar-area {
+//       background-color: var(--dark-bg-light);
+//       --ac-white: #ffffff;
+//       --ac-white-lighter: #f1f1f1;
+
+//       .ac-navbar {
+//         .search-item {
+//           background-color: rgba(0, 0, 0, 0.2);
+//         }
+
+//         .ac-navbar-menu {
+//           .ac-menu-item {
+//             .quick-access {
+//               --ac-white: var(--dark-bg-light);
+//             }
+
+//             .ac-menu-content {
+//               &.theme-choice {
+//                 background-color: var(--dark-bg-light);
+//               }
+
+//               background-color: var(--dark-bg-light);
+
+//               ul {
+//                 background-color: var(--dark-bg-light);
+//               }
+
+//               &::after {
+//                 --ac-white: var(--dark-bg-light);
+//               }
+
+//               .user-profile-wrapper {
+//                 --ac-white: var(--dark-bg-light);
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // end dark theme code
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   // .ac-navbar-area {
+//   //   .ac-navbar {
+//   //     grid-template-columns: 60px 30px auto;
+
+//   //     .ac-navbar-brand {
+//   //       max-width: 40px;
+
+//   //       a {
+//   //         display: block;
+//   //       }
+//   //     }
+
+//   //     .search-item {
+//   //       display: inline-block;
+
+//   //       input {
+//   //         display: none;
+//   //       }
+//   //     }
+
+//   //     .ac-navbar-menu {
+//   //       .ac-menu-item {
+//   //         .ac-nav-button {
+//   //           margin-left: 0px;
+
+//   //           &.ac-profile-button {
+//   //             margin-left: 0px;
+
+//   //             strong {
+//   //               display: none;
+//   //             }
+//   //           }
+//   //         }
+//   //       }
+//   //     }
+//   //   }
+//   // }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   // .ac-navbar-area {
+//   //   .ac-navbar {
+//   //     grid-template-columns: 250px auto auto;
+//   //   }
+//   // }
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+//   // .ac-navbar-area {
+//   //   .ac-navbar {
+//   //     grid-template-columns: 270px auto auto;
+//   //   }
+//   // }
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }