From bf74e55f705b54f2863026fc2983bb6e3832e812 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 10 Aug 2020 20:56:51 +0800
Subject: [PATCH] refactor(divider): clean cssr codes

---
 src/_styles/Divider.scss                   | 166 ++++++++++-----------
 src/confirm/src/styles/themed-base.cssr.js |  16 +-
 src/confirm/styles/dark.js                 |   2 +-
 src/confirm/styles/light.js                |   2 +-
 src/divider/src/Divider.vue                |   5 +-
 src/divider/src/styles/themed-base.cssr.js |  22 +--
 src/divider/styles/dark.js                 |   5 +-
 src/divider/styles/light.js                |   5 +-
 8 files changed, 115 insertions(+), 108 deletions(-)

diff --git a/src/_styles/Divider.scss b/src/_styles/Divider.scss
index 2fa327138..aae75baac 100644
--- a/src/_styles/Divider.scss
+++ b/src/_styles/Divider.scss
@@ -1,84 +1,84 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@include themes-mixin {
-  @include b(divider) {
-    @include once {
-      position: relative;
-      display: flex;
-      width: 100%;
-      box-sizing: border-box;
-      font-size: 16px;
-      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-      @include not-m(vertical) {
-        margin-top: 24px;
-        margin-bottom: 24px;
-        @include not-m(no-title) {
-          display: flex;
-          align-items: center;
-        }
-      }
-      @include e(title) {
-        transition: color .3s $--n-ease-in-out-cubic-bezier;
-        display: flex;
-        align-items: center;
-        margin-left: 12px;
-        margin-right: 12px;
-        white-space: nowrap;
-        font-weight: $--n-strong-weight;
-      }
-      @include m(title-position-left) {
-        @include e(line) {
-          @include m(left) {
-            width: 28px;
-          }
-        }
-      }
-      @include m(title-position-right) {
-        @include e(line) {
-          @include m(right) {
-            width: 28px;
-          }
-        }
-      }
-      @include m(dashed) {
-        @include e(line) {
-          background-color: transparent;
-          height: 0px;
-          width: 100%;
-          border-style: dashed;
-          border-width: 1px 0 0;
-        }
-      }
-      @include m(vertical) {
-        display: inline-block;
-        height: 1em;
-        margin: 0 8px;
-        vertical-align: middle;
-        width: 1px;
-      }
-    }
-    color: $--divider-text-color;
-    @include once {
-      @include e(line) {
-        border: none;
-        transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
-        height: 1px;
-        width: 100%;
-        margin: 0;
-      }
-    }
-    @include not-m(dashed) {
-      @include e(line) {
-        background-color: $--divider-border-color;  
-      }
-    }
-    @include m(dashed) {
-      @include e(line) {
-        border-color: $--divider-border-color;
-      }
-    }
-    @include m(vertical) {
-      background-color: $--divider-border-color;
-    }
-  }
-}
\ No newline at end of file
+// @include themes-mixin {
+//   @include b(divider) {
+//     @include once {
+//       position: relative;
+//       display: flex;
+//       width: 100%;
+//       box-sizing: border-box;
+//       font-size: 16px;
+//       transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//       @include not-m(vertical) {
+//         margin-top: 24px;
+//         margin-bottom: 24px;
+//         @include not-m(no-title) {
+//           display: flex;
+//           align-items: center;
+//         }
+//       }
+//       @include e(title) {
+//         transition: color .3s $--n-ease-in-out-cubic-bezier;
+//         display: flex;
+//         align-items: center;
+//         margin-left: 12px;
+//         margin-right: 12px;
+//         white-space: nowrap;
+//         font-weight: $--n-strong-weight;
+//       }
+//       @include m(title-position-left) {
+//         @include e(line) {
+//           @include m(left) {
+//             width: 28px;
+//           }
+//         }
+//       }
+//       @include m(title-position-right) {
+//         @include e(line) {
+//           @include m(right) {
+//             width: 28px;
+//           }
+//         }
+//       }
+//       @include m(dashed) {
+//         @include e(line) {
+//           background-color: transparent;
+//           height: 0px;
+//           width: 100%;
+//           border-style: dashed;
+//           border-width: 1px 0 0;
+//         }
+//       }
+//       @include m(vertical) {
+//         display: inline-block;
+//         height: 1em;
+//         margin: 0 8px;
+//         vertical-align: middle;
+//         width: 1px;
+//       }
+//     }
+//     color: $--divider-text-color;
+//     @include once {
+//       @include e(line) {
+//         border: none;
+//         transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
+//         height: 1px;
+//         width: 100%;
+//         margin: 0;
+//       }
+//     }
+//     @include not-m(dashed) {
+//       @include e(line) {
+//         background-color: $--divider-border-color;  
+//       }
+//     }
+//     @include m(dashed) {
+//       @include e(line) {
+//         border-color: $--divider-border-color;
+//       }
+//     }
+//     @include m(vertical) {
+//       background-color: $--divider-border-color;
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/src/confirm/src/styles/themed-base.cssr.js b/src/confirm/src/styles/themed-base.cssr.js
index 57f5cfdf4..1676718d0 100644
--- a/src/confirm/src/styles/themed-base.cssr.js
+++ b/src/confirm/src/styles/themed-base.cssr.js
@@ -9,7 +9,7 @@ export default c([
       textColor,
       color,
       borderRadius,
-      strongFontWeight,
+      titleFontWeight,
       closeColor,
       closeColorHover,
       closeColorActive,
@@ -59,7 +59,7 @@ export default c([
             justify-content: space-between;
             align-items: center;
             font-size: 18px;
-            font-weight: ${strongFontWeight};
+            font-weight: ${titleFontWeight};
             color: ${titleTextColor}
           `
         },
@@ -104,21 +104,21 @@ export default c([
           }),
           cE('close', {
             raw: `
-              fill: ${closeColor},
-              stroke: ${closeColor}
+              fill: ${closeColor};
+              stroke: ${closeColor};
             `
           },
           [
             c('&:hover', {
               raw: `
-                fill: ${closeColorHover},
-                stroke: ${closeColorHover}
+                fill: ${closeColorHover};
+                stroke: ${closeColorHover};
               `
             }),
             c('&:active', {
               raw: `
-                fill: ${closeColorActive},
-                stroke: ${closeColorActive}
+                fill: ${closeColorActive};
+                stroke: ${closeColorActive};
               `
             })
           ])
diff --git a/src/confirm/styles/dark.js b/src/confirm/styles/dark.js
index 373ec7f15..ab80fc605 100644
--- a/src/confirm/styles/dark.js
+++ b/src/confirm/styles/dark.js
@@ -28,7 +28,7 @@ export default create({
       iconColorWarning: warningColor,
       iconColorError: errorColor,
       borderRadius: base.borderRadius,
-      strongFontWeight: base.strongFontWeight
+      titleFontWeight: base.strongFontWeight
     }
   }
 })
diff --git a/src/confirm/styles/light.js b/src/confirm/styles/light.js
index 274fee2f9..af1340c2e 100644
--- a/src/confirm/styles/light.js
+++ b/src/confirm/styles/light.js
@@ -28,7 +28,7 @@ export default create({
       iconColorWarning: warningColor,
       iconColorError: errorColor,
       borderRadius: base.borderRadius,
-      strongFontWeight: base.strongFontWeight
+      titleFontWeight: base.strongFontWeight
     }
   }
 })
diff --git a/src/divider/src/Divider.vue b/src/divider/src/Divider.vue
index 1539f69c5..d8aac03fc 100644
--- a/src/divider/src/Divider.vue
+++ b/src/divider/src/Divider.vue
@@ -29,12 +29,15 @@
 <script>
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
   name: 'Divider',
   mixins: [
     withapp,
-    themeable
+    themeable,
+    usecssr(styles)
   ],
   props: {
     titlePlacement: {
diff --git a/src/divider/src/styles/themed-base.cssr.js b/src/divider/src/styles/themed-base.cssr.js
index 3c9cb7075..b1f500081 100644
--- a/src/divider/src/styles/themed-base.cssr.js
+++ b/src/divider/src/styles/themed-base.cssr.js
@@ -2,10 +2,11 @@ import { c, cTB, cNotM, cE, cM } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
-    const { easeInOutCubicBezier, strongFontWeight } = props.$base
+    const { easeInOutCubicBezier } = props.$base
     const {
-      dividerTextColor,
-      dividerBorderColor
+      textColor,
+      color,
+      fontWeight
     } = props.$local
     return [
       cTB(
@@ -17,8 +18,10 @@ export default c([
             width: 100%;
             box-sizing: border-box;
             font-size: 16px;
-            color: ${dividerTextColor}
-            transition: background-color .3s ${easeInOutCubicBezier};
+            color: ${textColor};
+            transition:
+              color .3s ${easeInOutCubicBezier},
+              background-color .3s ${easeInOutCubicBezier};
           `
         },
         [
@@ -38,13 +41,12 @@ export default c([
           ]),
           cE('title', {
             raw: `
-              transition: color .3s ${easeInOutCubicBezier};
               display: flex;
               align-items: center;
               margin-left: 12px;
               margin-right: 12px;
               white-space: nowrap;
-              font-weight: ${strongFontWeight};
+              font-weight: ${fontWeight};
             `
           }),
           cM('title-position-left', [
@@ -97,20 +99,20 @@ export default c([
           cNotM('dashed', [
             cE('line', {
               raw: `
-                background-color: ${dividerBorderColor};
+                background-color: ${color};
               `
             })
           ]),
           cM('dashed', [
             cE('line', {
               raw: `
-                border-color:: ${dividerBorderColor};
+                border-color: ${color};
               `
             })
           ]),
           cM('vertical', {
             raw: `
-              background-color: ${dividerBorderColor};
+              background-color: ${color};
             `
           })
         ]
diff --git a/src/divider/styles/dark.js b/src/divider/styles/dark.js
index 5693562b6..61db0bf74 100644
--- a/src/divider/styles/dark.js
+++ b/src/divider/styles/dark.js
@@ -9,8 +9,9 @@ export default create({
       dividerOverlayColor
     } = derived
     return {
-      dividerTextColor: primaryTextOverlayColor,
-      dividerBorderColor: dividerOverlayColor
+      textColor: primaryTextOverlayColor,
+      color: dividerOverlayColor,
+      fontWeight: base.strongFontWeight
     }
   }
 })
diff --git a/src/divider/styles/light.js b/src/divider/styles/light.js
index 5c59204d1..83dc8fe08 100644
--- a/src/divider/styles/light.js
+++ b/src/divider/styles/light.js
@@ -9,8 +9,9 @@ export default create({
       dividerOverlayColor
     } = derived
     return {
-      dividerTextColor: primaryTextColor,
-      dividerBorderColor: dividerOverlayColor
+      textColor: primaryTextColor,
+      color: dividerOverlayColor,
+      fontWeight: base.strongFontWeight
     }
   }
 })