fix(tip): style refactor

moyus · moyus · commit f22cda166e50 · 2018-09-13T23:56:58.000+08:00
diff --git a/components/tip/tip.vue b/components/tip/tip.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md-tip" :class="wrapperCls">
-    <div class="tip-content">
+    <div class="md-tip-content">
       <template>{{content}}</template>
       <md-icon
         v-if="closable"
@@ -9,7 +9,7 @@
         @click.native="$_onClose"
       />
     </div>
-    <div class="tip-bg"></div>
+    <div class="md-tip-bg"></div>
   </div>
 </template>
 
@@ -58,50 +58,54 @@ export default {
   display inline-block
   max-width 400px
   z-index tip-zindex
-  .tip-content
-    position relative
-    padding tip-padding
-    color tip-color
-    font-size tip-font-size
-    line-height 1.2
-    z-index 2
-  .tip-bg
+
+.md-tip-content
+  position relative
+  padding tip-padding
+  color tip-color
+  font-size tip-font-size
+  line-height 1.2
+  z-index 2
+
+.md-tip-bg
+  position absolute
+  absolute-pos()
+  border-radius tip-radius
+  background-color tip-fill
+  box-shadow tip-shadow
+  opacity tip-fill-opacity
+  &::after
+    content ''
     position absolute
-    absolute-pos()
-    border-radius tip-radius
-    background-color tip-fill
-    box-shadow tip-shadow
-    opacity tip-fill-opacity
-    &::after
-      content ''
-      position absolute
-      bottom -10px
-      left 50%
-      margin-left -11px
-      width 0
-      height 0
-      border-style solid
-      border-width 10px 11px 0 11px
-      border-color tip-fill transparent transparent transparent
+    bottom -10px
+    left 50%
+    margin-left -11px
+    width 0
+    height 0
+    border-style solid
+    border-width 10px 11px 0 11px
+    border-color tip-fill transparent transparent transparent
+
+.md-tip
   &.has-close
-    .tip-content
+    .md-tip-content
       padding-right 60px
   &.is-bottom
-    .tip-bg::after
+    .md-tip-bg::after
       bottom auto
       top -10px
       border-width 0 11px 10px 11px
       border-color transparent transparent tip-fill transparent
   &.is-left
-    .tip-bg::after
+    .md-tip-bg::after
       top 50%
       right -6px
       left auto
       margin-top -11px
       border-width 11px 0 11px 10px
       border-color transparent transparent transparent tip-fill
   &.is-right
-    .tip-bg::after
+    .md-tip-bg::after
       top 50%
       left 4px
       margin-top -11px
