@appscode/design-system 2.0.6-alpha.1 → 2.0.6

package/components/_navbar.scss

@@ -0,0 +1,786 @@
+// .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) {
+// }