@magicgol/polyjuice 0.55.0 → 0.55.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.55.0",
+  "version": "0.55.2",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/content/card/vertical-card/VCard.vue

@@ -12,7 +12,7 @@
     </div>
     <div
       class="mg-v-card-body"
-      :class="{'p-3': size === 'normal', 'p-2': size === 'small'}"
+      :class="{'p-3': size === 'normal', 'p-2': size === 'small', 'py-1 px-2': size === 'x-small'}"
     ><slot></slot></div>
     <div
       class="mg-v-card-footer"
@@ -54,6 +54,7 @@ export default {
       default: 'normal',
       validator: function (value) {
         return [
+          'x-small',
           'small',
           'normal',
         ].indexOf(value) !== -1;
@@ -70,6 +71,9 @@ export default {
       return {
         'mg-v-card': true,
         'mg-v-card--highlighted': this.highlighted === true,
+        'mg-v-card--size-x-small': this.size === 'x-small',
+        'mg-v-card--size-small': this.size === 'small',
+        'mg-v-card--size-normal': this.size === 'normal',
         'mg-v-card--theme-rating': this.theme === 'rating',
         'mg-v-card--theme-goalkeeper': this.theme === 'goalkeeper',
         'mg-v-card--theme-defender': this.theme === 'defender',
@@ -100,9 +104,19 @@ export default {
 
 .mg-v-card {
   background: white;
-  border-radius: 16px;
   box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
 
+  &--size {
+    &-small,
+    &-normal {
+      border-radius: 16px;
+    }
+
+    &-x-small {
+      border-radius: 9px;
+    }
+  }
+
   &--highlighted {
     border: 2px solid map-get($palette, 'highlighted');
   }
@@ -140,7 +154,7 @@ export default {
 
     &-transparent {
       background: rgba(255, 255, 255, 0.95) !important;
-      border: 1px solid #eee;
+      border: 1px solid #e2e7ef;
       box-shadow: none;
     }
   }