From 43c52cb95054d3de43a3a7a5ab46836c84013d1b Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 5 Mar 2019 13:25:31 -0500
Subject: [PATCH] Update modifier class notation

---
 .../user_card_content/user_card_content.js     |  6 +++---
 .../user_card_content/user_card_content.vue    | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 78c7eb6b62..96c6036ce0 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rounded': this.rounded === true,
-        'user-card-content-rounded-t': this.rounded === 'top',  // top only
-        'user-card-content-bordered': this.bordered
+        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-content-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index f06a0a45d6..e003e85029 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -164,19 +164,19 @@
   //
   // Modifiers
 
-  &-rounded {
+  &-rt {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-r {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-rounded-t {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &-bordered {
+  &-b {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;