@appscode/design-system 2.0.20 → 2.0.22-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.20",
+  "version": "2.0.22-alpha.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/ui-builder/_ui-builder.scss

@@ -144,64 +144,55 @@
   }
 }
 
-.is-visibility-hidden {
-  visibility: hidden !important;
-  height: 0 !important;
-  opacity: 0 !important;
-}
-
 // nested elements end
 
-.table-wrapper {
-  overflow-x: auto;
+// .table-wrapper {
+//   overflow-x: auto;
 
-  .table-inner {
-    min-width: 630px;
+//   .table-inner {
+//     min-width: 630px;
 
-    .thead {
-      background-color: $primary-90;
-
-      .tr {
-        .th {
-          font-weight: 600;
-        }
+//     .thead {
+//       background-color: $primary-90;
 
-        border-top: 1px solid var(--ac-white-light);
-        border-bottom: 1px solid var(--ac-white-light);
-      }
-    }
+//       .tr {
+//         .th {
+//           font-weight: 600;
+//         }
+//       }
+//     }
 
-    .thead,
-    .tbody {
-      .tr {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: space-between;
-
-        .th,
-        .td {
-          width: 20%;
-          font-size: 13px;
-          min-width: 150px;
-          padding: 6px 20px;
-        }
-      }
-    }
+//     .thead,
+//     .tbody {
+//       .tr {
+//         display: flex;
+//         flex-wrap: nowrap;
+//         align-items: center;
+//         justify-content: space-between;
+
+//         .th,
+//         .td {
+//           width: 20%;
+//           font-size: 13px;
+//           min-width: 150px;
+//           padding: 6px 20px;
+//         }
+//       }
+//     }
 
-    .tbody {
-      .tr {
-        border-bottom: 1px solid $primary-90;
-      }
-    }
-  }
+//     .tbody {
+//       .tr {
+//         border-bottom: 1px solid $primary-90;
+//       }
+//     }
+//   }
 
-  .is-selected {
-    border: 1px solid $primary;
-    border-bottom: 1px solid $primary !important;
-    border-radius: 4px;
-  }
-}
+//   .is-selected {
+//     border: 1px solid $primary;
+//     border-bottom: 1px solid $primary !important;
+//     border-radius: 4px;
+//   }
+// }
 
 .is-collapsed {
   &.ac-nested-elements::before,
@@ -216,16 +207,16 @@
   gap: 16px;
   grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
 }
-.table {
-  tr {
-    &.is-selected {
-      background-color: $primary-97;
-      strong {
-        color: $primary;
-      }
-    }
-  }
-}
+// .table {
+//   tr {
+//     &.is-selected {
+//       background-color: $primary-97;
+//       strong {
+//         color: $primary;
+//       }
+//     }
+//   }
+// }
 // dark theme start
 // .is-dark-theme {
 //   .nested-body {
@@ -369,24 +360,57 @@
   }
 }
 
-// buttons
-.button {
-  &.ac-button {
-    &.is-medium {
-      font-size: 1rem;
-      height: 36px;
-      &.is-square {
-        width: 36px;
-        align-items: center;
-        justify-content: center;
+.up-down-buttons {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  max-width: 36px;
+  margin-bottom: 0 !important;
+  button {
+    width: 36px;
+    height: 18px;
+    cursor: pointer;
+    border: none;
+    color: $primary;
+    background-color: $primary-90;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      background-color: $primary-80;
+    }
+    &.is-primary {
+      background-color: $primary;
+      color: $white-100;
+      &:hover {
+        background-color: $primary-30;
       }
     }
-    &.is-tinny {
-      height: 24px;
-      padding: 0 8px;
+    .icon {
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
     }
   }
 }
+// buttons
+// .button {
+//   &.ac-button {
+//     &.is-medium {
+//       font-size: 1rem;
+//       height: 36px;
+//       &.is-square {
+//         width: 36px;
+//         align-items: center;
+//         justify-content: center;
+//       }
+//     }
+//     &.is-tinny {
+//       height: 24px;
+//       padding: 0 8px;
+//     }
+//   }
+// }
 
 // .button[disabled] {
 //   &.is-ghost {
@@ -399,26 +423,10 @@ span.is-error {
   color: $danger;
   font-weight: 400;
 }
-
-/****************************************
-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) {
+.circle-list-shape {
+  width: 6px;
+  height: 6px;
+  background-color: $black-40;
+  display: flex;
+  border-radius: 50%;
 }

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -5,7 +5,7 @@
 
     .form-left-item {
       margin-right: 16px;
-      width: calc(100% - 104px);
+      width: calc(100% - 108px);
     }
   }
 }
@@ -518,57 +518,11 @@
       }
     }
 
-    input,
-    .ac-card,
-    textarea {
-      background-color: $white-100;
-      color: $primary-10;
-      height: 45px;
-      font-weight: 400;
-      width: 100%;
-      border-radius: 4px;
-      border: 1px solid $primary-80;
-      padding: 8px 16px;
-      font-size: 13px;
-
-      &:hover {
-        border-color: $black-70;
-      }
-
-      &.bg-white {
-        background-color: $white-100;
-      }
-
-      &.StripeElement--focus {
-        border: 1px solid $primary;
-      }
-
-      &:focus {
-        border: 1px solid $primary;
-        outline: none;
-        background-color: $white-100;
-      }
-
-      &[type="password"] {
-        padding-right: 40px;
-      }
-
-      &[type="search"] {
-        padding-left: 30px;
-      }
-
-      transition: background-color 0.3s ease-in-out;
-    }
-
     .ac-card {
       height: 36px;
       padding: 10px 20px;
     }
 
-    textarea {
-      height: 55px;
-    }
-
     b.isRequired {
       color: $danger;
       font-size: 13px;

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -184,6 +184,6 @@ watch(
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "../../../vue-components/styles/components/editor/filtered-file-editor";
 </style>