@appscode/design-system 1.1.0-beta.49 → 1.1.0-beta.50

package/base/utilities/_global.scss

@@ -24,6 +24,13 @@ $positions: (
   border: 1px solid $primary-90;
 }
 
+.is-fullwidth {
+  width: 100%;
+}
+.is-fullheight {
+  height: 100%;
+}
+
 // for ellipsis
 @for $i from 0 through 10 {
   .is-ellipsis-#{$i} {

package/package.json

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

package/vue-components/v3/cards/InfoCard.vue

@@ -166,9 +166,8 @@ const OptionDots = defineAsyncComponent(
   .header {
     display: flex;
     align-items: center;
-    padding: 8px 16px;
+    padding: 12px 16px;
     border-bottom: 1px dashed $primary-90;
-    background-color: $primary-97;
 
     .logo {
       display: flex;

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

@@ -142,7 +142,7 @@ withDefaults(defineProps<Props>(), {
 
       &.show-label {
         font-size: 12px;
-        color: $black-40;
+        color: $primary-20;
         top: -9px;
         font-weight: 500;
         background-color: $white-100;
@@ -394,12 +394,7 @@ withDefaults(defineProps<Props>(), {
           transition: 0.3s;
 
           &:hover {
-            background-color: hsla(
-              var(--hsl-hue),
-              var(--hsl-saturation),
-              var(--hsl-lightness),
-              0.2
-            );
+            background-color: $primary-30;
             color: $primary;
           }
         }
@@ -494,7 +489,7 @@ withDefaults(defineProps<Props>(), {
 
   span.eye {
     i.fa {
-      color: $primary-80;
+      color: $primary-70;
       position: absolute;
       cursor: pointer;
       padding: 15px;

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -1,65 +1,23 @@
-<script setup lang="ts">
+<script>
 import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
 </script>
 
 <template>
-  <div>
-    <svg
-      role="img"
-      width="230"
-      height="115"
-      aria-labelledby="loading-aria"
-      viewBox="0 0 230 115"
-      preserveAspectRatio="none"
-    >
-      <title id="loading-aria">Loading...</title>
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        clip-path="url(#clip-path)"
-        style="fill: url('#fill')"
-      ></rect>
-      <defs>
-        <clipPath id="clip-path">
-          <rect x="150" y="40" rx="3" ry="3" width="60" height="50" />
-          <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
-          <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
-          <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
-          <rect x="10" y="1" rx="3" ry="3" width="200" height="22" />
-          <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
-        </clipPath>
-        <linearGradient id="fill">
-          <stop offset="0.599964" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-2; -2; 1"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-1; -1; 2"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="2.59996" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="0; 0; 3"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
+  <content-loader
+    viewBox="0 0 230 115"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" width="NaN" height="NaN" />
+    <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
+    <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
+    <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
+    <rect x="10" y="1" rx="3" ry="3" width="216" height="22" />
+    <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
+  </content-loader>
 </template>

package/vue-components/v3/loaders/SingleInfoCardLoader.vue

@@ -0,0 +1,24 @@
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
+</script>
+
+<template>
+  <content-loader
+    viewBox="0 0 1540 90"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" width="NaN" height="NaN" />
+    <circle cx="47" cy="52" r="21" />
+    <rect x="86" y="64" rx="0" ry="0" width="95" height="11" />
+    <rect x="86" y="29" rx="0" ry="0" width="146" height="22" />
+    <rect x="1240" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1340" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1440" y="56" rx="0" ry="0" width="64" height="12" />
+  </content-loader>
+</template>

package/vue-components/v3/tag/Tag.vue

@@ -16,5 +16,6 @@ withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .tag {
   line-height: 1;
+  font-size: 11px;
 }
 </style>