@appscode/design-system 2.6.8 → 2.6.10-alpha-1

package/package.json

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

package/vue-components/styles/base/utilities/_global.scss

@@ -24,29 +24,15 @@ $positions: (
   border: 1px solid $color-border;
 }
 
-.is-rounded-0 {
-  border-radius: 0;
-}
-.is-rounded-2 {
-  border-radius: 2px;
-}
-.is-rounded-4 {
-  border-radius: 4px;
-}
-.is-rounded-8 {
-  border-radius: 8px;
-}
-
-.is-rounded-12 {
-  border-radius: 12px;
-}
-.is-rounded-16 {
-  border-radius: 16px;
-}
-.is-rounded-50 {
-  border-radius: 50px;
+// Border radius utilities
+$radius-values: (0, 2, 4, 8, 12, 16, 50);
+@each $value in $radius-values {
+  .is-rounded-#{$value} {
+    border-radius: #{$value}px;
+  }
 }
 
+// Full width and height utilities
 .is-fullwidth {
   width: 100%;
 }
@@ -54,7 +40,7 @@ $positions: (
   height: 100%;
 }
 
-// for ellipsis
+// Ellipsis utilities
 @for $i from 0 through 10 {
   .is-ellipsis-#{$i} {
     overflow: hidden;
@@ -62,10 +48,10 @@ $positions: (
     display: -webkit-box;
     line-clamp: #{$i};
     -webkit-line-clamp: #{$i};
-    box-orient: vertical;
     -webkit-box-orient: vertical;
   }
 }
+
 .ac-navbar-area {
   .brand-tag {
     color: $color-heading;
@@ -135,24 +121,20 @@ hr {
   min-height: auto !important;
 }
 
+// Additional utilities
 .is-auto-height {
   height: auto !important;
   min-height: auto !important;
 }
-
 .is-fixed {
   position: fixed !important;
 }
-
 .is-not-fixed {
   position: inherit !important;
 }
-
-// border none
 .is-border-none {
   border: none !important;
 }
-
 .is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -199,140 +181,43 @@ hr {
   justify-content: space-between;
   align-items: center;
 }
-
-.ac-hscrollbar {
+// Scrollbar mixin
+@mixin scrollbar-styles($direction) {
   padding: 15px;
   transition: 0.3s ease-in-out;
-  overflow-x: auto;
+  overflow-#{$direction}: auto;
 
   &::-webkit-scrollbar {
     border-radius: 50px;
-    height: 3px;
+    #{if($direction == "y", width, height)}: 3px;
   }
 
   &::-webkit-scrollbar:hover {
-    height: 7px;
+    #{if($direction == "y", width, height)}: 7px;
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: $gray-80;
     border-radius: 50px;
-    height: 2px !important;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: $gray-80;
   }
 
   &:hover::-webkit-scrollbar-corner {
-    height: 40px;
+    #{if($direction == "y", width, height)}: 40px;
   }
 }
 
+// Scrollbar utilities
 .ac-vscrollbar {
-  padding: 15px;
-  transition: 0.3s ease-in-out;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    border-radius: 50px;
-    width: 3px;
-  }
-
-  &::-moz-scrollbar {
-    border-radius: 50px;
-    width: 3px;
-  }
-
-  &::-ms-scrollbar {
-    border-radius: 50px;
-    width: 3px;
-  }
-
-  &::-webkit-scrollbar:hover {
-    width: 7px;
-  }
-
-  &::-moz-scrollbar:hover {
-    width: 7px;
-  }
-
-  &::-ms-scrollbar:hover {
-    width: 7px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $gray-80;
-    border-radius: 50px;
-    height: 2px !important;
-  }
-
-  &::-moz-scrollbar-thumb {
-    background-color: $gray-80;
-    border-radius: 50px;
-    height: 2px !important;
-  }
-
-  &::-ms-scrollbar-thumb {
-    background-color: $gray-80;
-    border-radius: 50px;
-    height: 2px !important;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: $gray-80;
-  }
-
-  &::-moz-scrollbar-thumb:hover {
-    background-color: $gray-80;
-  }
-
-  &::-ms-scrollbar-thumb:hover {
-    background-color: $gray-80;
-  }
-
-  &:hover::-webkit-scrollbar-corner {
-    height: 40px;
-  }
-
-  &:hover::-moz-scrollbar-corner {
-    height: 40px;
-  }
-
-  &:hover::-ms-scrollbar-corner {
-    height: 40px;
-  }
+  @include scrollbar-styles("y");
+}
+.ac-hscrollbar {
+  @include scrollbar-styles("x");
 }
-
 .ac-scrollbar {
-  padding: 15px;
-  transition: 0.3s ease-in-out;
-  overflow: auto;
-
-  &::-webkit-scrollbar {
-    border-radius: 50px;
-    width: 3px;
-  }
-
-  &::-webkit-scrollbar:hover {
-    width: 7px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $gray-80;
-    border-radius: 50px;
-    width: 2px !important;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: $gray-80;
-  }
-
-  &:hover::-webkit-scrollbar-corner {
-    width: 40px;
-  }
+  @include scrollbar-styles("both");
 }
 
+// Overflow utilities
 .overflow-y-hidden {
   overflow-y: hidden;
 }
@@ -346,18 +231,23 @@ hr {
   overflow-x: auto;
 }
 
-.is-transparent-bg {
-  background-color: transparent !important;
+// Background and shadow utilities
+.is-bg-white {
+  background-color: $white-100 !important;
+}
+.bg-white {
+  background-color: $white-100 !important;
 }
-
 .is-shadowless {
   box-shadow: none !important;
 }
-
 .is-shadow {
   box-shadow: $ac-shadow-1 !important;
 }
 
+.is-transparent-bg {
+  background-color: transparent !important;
+}
 .is-transparent {
   border: none;
   background-color: transparent !important;
@@ -389,15 +279,6 @@ button {
   }
 }
 
-// background color start
-.is-bg-white {
-  background-color: $white-100 !important;
-}
-
-.bg-white {
-  background-color: $white-100 !important;
-}
-
 // background color end
 
 // Shake animation
@@ -668,3 +549,54 @@ em {
     z-index: #{$i}00;
   }
 }
+
+.whats-new-rel {
+  min-width: fit-content !important;
+  font-size: 11px !important;
+  color: #ffff !important;
+  margin-left: 4px;
+  margin-right: 0 !important;
+  padding: 0 4px;
+  position: relative;
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background: $ac-primary;
+  }
+  &:before {
+    animation: pulse-border 1500ms ease-out infinite;
+  }
+
+  &:after {
+    transition: all 200ms;
+  }
+
+  @keyframes pulse-border {
+    0% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.4);
+      opacity: 0;
+    }
+  }
+}
+
+// white-space
+$whitespace-values: normal, nowrap, pre, pre-line, pre-wrap, break-spaces;
+@each $value in $whitespace-values {
+  .is-whitespace-#{$value} {
+    white-space: #{$value};
+  }
+}

package/vue-components/styles/base/utilities/_typography.scss

@@ -44,7 +44,7 @@ h4 {
 } // 18px
 h5 {
   font-size: 1.231rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: normal;
 } // 16px
 h6 {

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

@@ -6,7 +6,11 @@
     padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
-
+    &.is-white {
+      &:focus {
+        background-color: $primary-light-gray;
+      }
+    }
     &.is-primary {
       background-color: $ac-primary;
       &:hover {

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

@@ -1,10 +1,40 @@
 .dropdown-group {
   margin-bottom: 8px;
 }
+
+.dropdown-menu.show-arrow {
+  --left: 2rem;
+  &:after {
+    position: absolute;
+    content: "";
+    transform: rotate(45deg);
+    top: -2px;
+    left: var(--left);
+    width: 16px;
+    height: 16px;
+    background-color: #fff;
+    border-radius: 4px;
+    z-index: -1;
+    border: 1px solid $color-border;
+  }
+  &:before {
+    position: absolute;
+    content: "";
+    // transform: rotate(45deg);
+    top: 3px;
+    left: var(--left);
+    width: 16px;
+    height: 2px;
+    background-color: #fff;
+    border-radius: 4px 4px 0 0;
+    z-index: 1;
+  }
+}
+
 .dropdown-content {
   min-width: 220px;
   max-width: 500px;
-  max-height: calc(100vh - 200px);
+  max-height: clamp(100px, calc(100vh - 200px), calc(100vh - 200px));
   overflow-y: auto;
   border: 1px solid $color-border;
 

package/vue-components/styles/components/inbox/all.scss

@@ -1,3 +1,8 @@
+.mail-details {
+  display: grid;
+  grid-template-columns: 460px calc(100% - 460px);
+}
+
 .inbox-sidebar {
   width: 460px;
   border-right: 1px solid $color-border;
@@ -41,6 +46,16 @@
   &:hover {
     background-color: hsla(var(--secondary-hue), 12%, 95%);
   }
+  p,
+  span {
+    color: $color-text;
+  }
+  .time {
+    font-size: 11px;
+  }
+  .ac-checkbox {
+    margin-top: 4px;
+  }
 }
 
 .message-details {
@@ -71,3 +86,44 @@
     }
   }
 }
+.message-content {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-inline: 20px;
+}
+
+.is-fullwidth.searchbar {
+  .ac-search {
+    width: 100%;
+    height: 36px;
+    &:focus {
+      width: 100% !important;
+    }
+  }
+}
+
+body:not(.message-details) .inbox-sidebar {
+  width: 100%;
+  border-right: none;
+}
+
+body:has(.message-details) {
+  .inbox-sidebar {
+    width: 460px;
+    border-right: 1px solid #e2e8f0;
+  }
+  .ac-system-content {
+    max-height: calc(100vh - 60px);
+    overflow: hidden;
+  }
+}
+
+.message-details {
+  max-width: 100%;
+  overflow: hidden;
+  pre {
+    max-width: 100%;
+    font-size: 1rem;
+  }
+}

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -251,3 +251,15 @@
     }
   }
 }
+
+.router-link-exact-active {
+  .whats-new-rel {
+    background-color: #fff;
+    color: $ac-primary !important;
+    z-index: 9;
+    &::after,
+    &::before {
+      background-color: #fff;
+    }
+  }
+}

package/vue-components/v3/icons/MailIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  open?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  open: false,
+});
+</script>
+
+<template>
+  <svg v-if="open" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98z"
+    />
+  </svg>
+
+  <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+    />
+  </svg>
+</template>

package/vue-components/v3/inbox/Inbox.vue

@@ -4,7 +4,7 @@ import MessageList from "./MessageList.vue";
 </script>
 
 <template>
-  <div class="is-flex">
+  <div class="mail-details">
     <MessageList />
     <MessageDetails />
   </div>

package/vue-components/v3/inbox/MessageDetails.vue

@@ -42,7 +42,7 @@ const InfoIcon = defineAsyncComponent(() => import("../icons/InfoIcon.vue"));
       </div>
     </div>
 
-    <div class="message-content mt-24">
+    <div class="message-content mt-24 ac-vscrollbar p-0">
       <h2 class="mb-4">Update scanner addons</h2>
       <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum

package/vue-components/v3/inbox/MessageList.vue

@@ -5,6 +5,7 @@ import ArrowIcon from "../icons/ArrowIcon.vue";
 import RefreshIcon from "../icons/RefreshIcon.vue";
 import EllipsisVertical from "../icons/EllipsisVertical.vue";
 import StarIcon from "../icons/StarIcon.vue";
+import MailIcon from "../icons/MailIcon.vue";
 
 const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vue"));
 </script>
@@ -18,7 +19,7 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
 
       <!-- filter  -->
       <div class="is-flex is-justify-content-space-between">
-        <div class="is-flex gap-8">
+        <div class="is-flex gap-8 dropdown-action dropdown">
           <label class="ac-checkbox" for="checkbox16">
             <input class="is-danger" id="checkbox16" type="checkbox" /><span class="checkmark"></span>
           </label>
@@ -27,6 +28,39 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
               <ArrowIcon />
             </span>
           </button>
+          <!-- is-block -->
+          <div class="dropdown-menu show-arrow is-block" id="dropdown-menu3" role="menu" style="--left: 2.5rem">
+            <div class="dropdown-content ac-scrollbar p-0">
+              <div class="dropdown-group">
+                <label>Filter</label>
+                <a href="#" class="dropdown-item">
+                  <span class="icon">
+                    <MailIcon :open="true" />
+                  </span>
+                  <span>Read</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                  <span class="icon">
+                    <MailIcon />
+                  </span>
+                  <span>Unread</span>
+                </a>
+                <!-- <hr class="p-0 m-0" /> -->
+                <a href="#" class="dropdown-item">
+                  <span class="icon">
+                    <StarIcon :fill="true" />
+                  </span>
+                  <span>Started</span>
+                </a>
+                <a href="#" class="dropdown-item">
+                  <span class="icon">
+                    <StarIcon />
+                  </span>
+                  <span>Unstarted</span>
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="is-flex gap-4">
@@ -43,15 +77,21 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
               </span>
             </button>
             <!-- dropdown  -->
-            <div class="dropdown-menu" id="dropdown-menu3" role="menu" style="left: auto; right: 0">
+            <!-- use "is-block" -->
+            <div
+              class="dropdown-menu show-arrow"
+              id="dropdown-menu3"
+              role="menu"
+              style="left: auto; right: 0; --left: calc(100% - 1.8rem)"
+            >
               <div class="dropdown-content ac-scrollbar p-0">
                 <div class="dropdown-group">
-                  <label>Options</label>
+                  <label>Action</label>
                   <a href="#" class="dropdown-item">
                     <span class="icon">
-                      <RefreshIcon />
+                      <MailIcon />
                     </span>
-                    <span>Read</span>
+                    <span>Mark as all read</span>
                   </a>
                 </div>
               </div>
@@ -66,7 +106,7 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
     <div class="message-list ac-vscrollbar pt-0 pb-0">
       <!-- messages '.is-unread' -->
       <div
-        class="is-flex gap-16 is-clickable single-message"
+        class="is-flex gap-16 is-clickable single-message is-justify-content-space-between"
         v-for="i in 10"
         :key="i"
         :class="{ 'is-unread': i % 2 !== 0 }"
@@ -76,10 +116,12 @@ const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vu
         </label>
         <div class="is-flex gap-4 is-flex-direction-column">
           <div class="is-flex is-flex-direction-column">
-            <span>Category</span>
-            <h6 class="has-text-weight-medium is-size-5">Update scanner addons</h6>
+            <span>AppsCode Accounts</span>
+            <h6 class="has-text-weight-medium is-size-5 is-ellipsis-1">Update scanner addons</h6>
           </div>
-          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
+          <p class="is-ellipsis-2">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
+          </p>
         </div>
         <div class="is-flex is-flex-direction-column is-justify-content-space-between">
           <p class="is-size-7">2mins</p>

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -49,6 +49,7 @@ watch(
         <img :src="icon" alt="icon" />
       </span>
       <strong>{{ title }}</strong>
+      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel">NEW</span>
     </router-link>
   </li>
 </template>