@appscode/design-system 2.6.36 → 2.6.38

package/package.json

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

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

@@ -623,3 +623,62 @@ $whitespace-values: normal, nowrap, pre, pre-line, pre-wrap, break-spaces;
     white-space: #{$value};
   }
 }
+// Whats New
+.whats-new {
+  --right: -25px;
+  --top: 2px;
+  --width: 1.5rem;
+  --status-color: #cc002a;
+  position: absolute;
+  z-index: 1;
+  top: var(--top);
+  right: var(--right);
+  font-size: 0.8rem;
+  color: $white-100;
+  padding: 0.2rem 0.3rem;
+  line-height: 1.2;
+  display: none;
+  border-radius: 8px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: block;
+    width: var(--width);
+    height: 1.2rem;
+    background: var(--status-color);
+    border-radius: 8px;
+    animation: pulse-border 1500ms ease-out infinite;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    display: block;
+    width: var(--width);
+    height: 1.2rem;
+    background: var(--status-color);
+    transition: all 200ms;
+    border-radius: 8px;
+  }
+
+  @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.5);
+      opacity: 0;
+    }
+  }
+}

package/vue-components/v3/code-preview/CodeGroup.vue

@@ -31,6 +31,7 @@ const { copy, copied } = useClipboard({ source, legacy: true });
         :icon-class="copied ? 'check' : 'copy'"
         @click="copy()"
       />
+      <slot name="right" />
     </div>
     <slot v-if="custom" name="body" />
     <pre v-else class="ac-hscrollbar is-border-none">

package/vue-components/v3/form-fields/Input.vue

@@ -16,11 +16,5 @@ const handleInput = (e: Event) => {
 </script>
 
 <template>
-  <input
-    class="ac-input"
-    data-testid="ac-input"
-    :class="{ 'width-200': modelValue }"
-    :value="modelValue"
-    @input="handleInput"
-  />
+  <input class="ac-input" data-testid="ac-input" :value="modelValue" @input="handleInput" />
 </template>