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

package/vue-components/styles/components/_tabs.scss

@@ -1,338 +0,0 @@
-// .tabs {
-//   &.ac-tabs {
-//     ul {
-//       border-bottom-color: $primary-90;
-//     }
-
-//     &.is-line {
-//       ul {
-//         border-bottom-color: $primary-90;
-//         padding-left: 4px;
-
-//         li {
-//           &.is-active {
-//             a {
-//               font-weight: 500;
-//               border-bottom-color: $primary;
-//               border-bottom: 2px solid $primary !important;
-//               border-width: 2px;
-//             }
-//           }
-
-//           a {
-//             // text-transform: uppercase;
-//             font-weight: 400;
-//             color: $primary-5;
-//             font-size: 13px;
-//             border-bottom: none;
-//             padding: 6px 16px;
-
-//             &:hover {
-//               border-bottom-color: $primary;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     &.is-boxed {
-//       font-size: 14px;
-
-//       a {
-//         padding: 8px 20px;
-//         color: $primary-20;
-
-//         &:hover {
-//           border-bottom-color: transparent;
-//           background-color: transparent;
-//         }
-//       }
-
-//       ul {
-//         padding-left: 10px;
-
-//         li {
-//           &.is-active {
-//             position: relative;
-//             border-color: $primary-90;
-//             z-index: 1;
-//             color: $primary;
-
-//             &:after {
-//               position: absolute;
-//               content: "";
-//               left: 0;
-//               top: 0;
-//               width: 100%;
-//               height: 4px;
-//               border-radius: 4px 4px 0 0;
-//               background-color: $primary;
-//             }
-
-//             a {
-//               border-color: $primary-90;
-//               background-color: $white-100;
-//               padding: 8px 20px;
-//               font-weight: 500;
-//               margin-bottom: -2px;
-//               font-size: 13px;
-//             }
-//           }
-//         }
-//       }
-
-//       &.is-gap {
-//         ul {
-//           li {
-//             margin-right: 6px;
-
-//             &.is-active {
-//               box-shadow: 0px 4px 6px rgba(133, 145, 163, 0.54);
-//             }
-
-//             a {
-//               border: 1px solid $primary-90;
-//               border-bottom: none;
-//               margin-bottom: -2px;
-//               font-size: 13px;
-//               color: $primary-20;
-//             }
-//           }
-//         }
-
-//         &.is-borderless {
-//           ul {
-//             border-bottom-color: transparent;
-
-//             li {
-//               &.is-active {
-//                 a {
-//                   background-color: $primary-90;
-//                 }
-//               }
-
-//               a {
-//                 border: 1px solid transparent;
-//               }
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     &.is-toggle {
-//       ul {
-//         border: 1px solid $primary-10;
-//         border-radius: 4px;
-//         padding: 4px;
-//         flex-grow: inherit;
-
-//         li {
-//           &.is-active {
-//             a {
-//               color: $white-100;
-//               background-color: $primary;
-
-//               &:hover {
-//                 background-color: $primary;
-//               }
-//             }
-//           }
-
-//           a {
-//             font-size: 16px;
-//             font-weight: 500;
-//             border: none;
-//             padding: 8px 25px;
-//             line-height: 1;
-//             border-radius: 4px;
-
-//             &:hover {
-//               background-color: inherit;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     &.kubedb-ui-tabs {
-//       ul {
-//         border-bottom: none;
-
-//         li {
-//           &.is-active {
-//             a {
-//               border-bottom: 3px solid $primary !important;
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .ac-tabs-body {
-//   &.is-content-available {
-//     .ac-tabs {
-//       margin-bottom: 0;
-
-//       ul {
-//         li {
-//           &.is-active {
-//             a {
-//               border-color: $primary-90;
-//               background-color: $white-100;
-//               color: $primary;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     .ac-tab-content {
-//       background-color: $white-100;
-//       border: 1px solid $primary-90;
-//       border-top: none;
-//       border-radius: 0 0 4px 4px;
-
-//       &.is-borderless {
-//         border: 1px solid transparent;
-//         background-color: $primary-90;
-//         border-radius: 4px 4px 4px 4px;
-//       }
-//     }
-//   }
-// }
-
-// .ac-tabs-body {
-//   &.is-content-available {
-//     &.has-bg-color {
-//       .ac-tabs {
-//         ul {
-//           border-bottom-width: 0px;
-
-//           li {
-//             &.is-active {
-//               a {
-//                 background-color: $primary-90;
-//                 color: $primary;
-//               }
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .tabs li.is-active a {
-//   color: $primary;
-// }
-
-// .no-data-available {
-//   img {
-//     width: 250px;
-//   }
-// }
-
-// .ac-system-body.bb-user-management {
-//   .tabs.ac-tabs.is-line {
-//     margin-left: -20px;
-//     position: sticky;
-//     top: 50px;
-//     z-index: 99;
-//     background: $white-100;
-//   }
-// }
-
-// // dark theme
-// // .is-dark-theme {
-// //   .tabs {
-// //     &.is-toggle {
-// //       a {
-// //         &:hover {
-// //           background-color: $dark-bg;
-// //         }
-// //       }
-// //     }
-
-// //     a {
-// //       border-bottom: 1px solid $primary-90;
-// //       color: $white-100;
-// //     }
-
-// //     &.ac-tabs.is-line {
-// //       ul {
-// //         li.is-active {
-// //           a {
-// //             color: $primary-10;
-// //           }
-// //         }
-// //       }
-// //     }
-// //   }
-// // }
-
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-// }
-
-// // 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) {
-// }
-
-// // Large devices (desktops, 992px and up)
-// @media (min-width: 992px) and (max-width: 1199.98px) {
-// }
-
-// // Extra large devices (large desktops, 1200px and up)
-// @media (min-width: 1200px) {
-//   .card-body-wrapper {
-//     .tabs.ac-tabs {
-//       &.is-boxed {
-//         ul {
-//           li {
-//             &.is-active {
-//               a {
-//                 border-color: $primary-90;
-//                 background-color: $white-100;
-//               }
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-.tabs {
-  &.ac-tabs {
-    ul {
-      border-color: $primary-90;
-    }
-    a {
-      padding: 8px 20px;
-      color: $primary-10;
-      font-weight: 500;
-      color: $black-40;
-      &:hover {
-        border-bottom-color: $black-40;
-      }
-    }
-    li {
-      &.is-active {
-        a {
-          border-bottom-color: $primary;
-          color: $primary;
-        }
-      }
-    }
-  }
-}