refactoring of less rules (#26)

This is a difficult first step to more unified less code.

replace inline styles with class names and define rules at the end of vue files
remove first ant-pro classes (no benefits with it yet)
move some less rules to components

Signed-off-by: Rohit Yadav <[email protected]>

Author: M. Weber

ui/src/App.vue

@@ -23,7 +23,7 @@ export default {
 }
 </script>
 <style>
-  #app {
-    height: 100%;
-  }
+#app {
+  height: 100%;
+}
 </style>

ui/src/components/FooterToolbar/FooterToolBar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :class="prefixCls">
-    <div style="float: left">
+  <div class="footer-toolbar">
+    <div class="footer-toolbar-left">
       <slot name="extra">{{ extra }}</slot>
     </div>
-    <div style="float: right">
+    <div class="footer-toolbar-right">
       <slot></slot>
     </div>
   </div>
@@ -15,7 +15,7 @@ export default {
   props: {
     prefixCls: {
       type: String,
-      default: 'ant-pro-footer-toolbar'
+      default: 'reduced'
     },
     extra: {
       type: [String, Object],
@@ -26,5 +26,32 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.footer-toolbar {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 56px;
+  line-height: 56px;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+  background: #fff;
+  border-top: 1px solid #e8e8e8;
+  padding: 0 24px;
+  z-index: 9;
 
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  &-left {
+    float: left;
+  }
+
+  &-right {
+    float: right;
+  }
+
+}
 </style>

ui/src/components/MultiTab/MultiTab.vue

@@ -157,8 +157,8 @@ export default {
     })
 
     return (
-      <div class="ant-pro-multi-tab">
-        <div class="ant-pro-multi-tab-wrapper">
+      <div class="multi-tab">
+        <div class="multi-tab-wrapper">
           <a-tabs
             hideAdd
             type={'editable-card'}
@@ -173,3 +173,15 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+  .multi-tab {
+    margin: -23px -24px 24px -24px;
+    background: #fff;
+  }
+
+  .topmenu .multi-tab-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>

ui/src/components/NumberInfo/NumberInfo.vue

@@ -21,7 +21,7 @@ export default {
   props: {
     prefixCls: {
       type: String,
-      default: 'ant-pro-number-info'
+      default: 'number-info'
     },
     total: {
       type: Number,
@@ -50,5 +50,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  @import "index";
+  @import '~ant-design-vue/lib/style/themes/default';
+
+  .number-info {
+
+    .number-info-subtitle {
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      height: 22px;
+      line-height: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+
+    .number-info-value {
+      margin-top: 4px;
+      font-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+
+      & > span {
+        color: @heading-color;
+        display: inline-block;
+        line-height: 32px;
+        height: 32px;
+        font-size: 24px;
+        margin-right: 32px;
+      }
+
+      .sub-total {
+        color: @text-color-secondary;
+        font-size: @font-size-lg;
+        vertical-align: top;
+        margin-right: 0;
+        i {
+          font-size: 12px;
+          transform: scale(0.82);
+          margin-left: 4px;
+        }
+        :global {
+          .anticon-caret-up {
+            color: @red-6;
+          }
+          .anticon-caret-down {
+            color: @green-6;
+          }
+        }
+      }
+    }
+  }
 </style>

ui/src/components/Trend/Trend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[prefixCls, reverseColor && 'reverse-color' ]">
+  <div class="trend" :class="[ reverseColor && 'reverse-color' ]">
     <span>
       <slot name="term"></slot>
       <span class="item-text">
@@ -31,5 +31,43 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  @import "index";
+@import "~ant-design-vue/lib/style/themes/default";
+.trend {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}
 </style>

ui/src/components/chart/Bar.vue

@@ -1,11 +1,10 @@
 <template>
-  <div :style="{ padding: '0 0 32px 32px' }">
-    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+  <div class="bar-wrapper">
+    <h4 class="bar-headline">{{ title }}</h4>
     <v-chart
-      height="254"
+      class="bar-chart"
       :data="data"
-      :forceFit="true"
-      :padding="['auto', 'auto', '40', '50']">
+      :forceFit="true">
       <v-tooltip />
       <v-axis />
       <v-bar position="x*y"/>
@@ -55,3 +54,20 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.bar {
+  &-wrapper {
+    padding: 0 0 32px 32px;
+  }
+
+  &-headline {
+    margin-bottom: 20px;
+  }
+
+  &-chart {
+    height: 254px;
+    padding: 0 0 40px 50px;
+  }
+}
+</style>

ui/src/components/chart/ChartCard.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
     <div class="chart-card-header">
-      <div class="meta">
+      <div class="chart-card-meta">
         <span class="chart-card-title">
           <slot name="title">
             {{ title }}
@@ -11,19 +11,19 @@
           <slot name="action"></slot>
         </span>
       </div>
-      <div class="total">
+      <div class="chart-card-total">
         <slot name="total">
           <span>{{ typeof total === 'function' && total() || total }}</span>
         </slot>
       </div>
     </div>
     <div class="chart-card-content">
-      <div class="content-fix">
+      <div class="chart-card-content-fix">
         <slot></slot>
       </div>
     </div>
     <div class="chart-card-footer">
-      <div class="field">
+      <div class="chart-card-field">
         <slot name="footer"></slot>
       </div>
     </div>
@@ -52,61 +52,59 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .chart-card-header {
+.chart-card {
+  &-header {
     position: relative;
     overflow: hidden;
     width: 100%;
+  }
 
-    .meta {
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      color: rgba(0, 0, 0, .45);
-      font-size: 14px;
-      line-height: 22px;
-    }
+  &-meta {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: rgba(0, 0, 0, .45);
+    font-size: 14px;
+    line-height: 22px;
   }
 
-  .chart-card-action {
+  &-action {
     cursor: pointer;
     position: absolute;
     top: 0;
     right: 0;
   }
 
-  .chart-card-footer {
+  &-footer {
     border-top: 1px solid #e8e8e8;
     padding-top: 9px;
     margin-top: 8px;
+  }
 
-    > * {
-      position: relative;
-    }
-
-    .field {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-    }
+  &-field {
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
   }
 
-  .chart-card-content {
+  &-content {
     margin-top: -42px;
     margin-bottom: 12px;
     position: relative;
     height: 100%;
     width: 100%;
+  }
 
-    .content-fix {
+  &-content-fix {
       position: relative;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-    }
+    left: 0;
+    bottom: 0;
+    width: 100%;
   }
 
-  .total {
+  &-total {
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-all;
@@ -118,4 +116,5 @@ export default {
     line-height: 38px;
     height: 38px;
   }
+}
 </style>