@appscode/design-system 2.0.5 → 2.0.6-alpha.2

package/components/_navbar.scss

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