[breaking change] rebuild style struct (#2021)

packages/cell/demo/index.vue

@@ -63,7 +63,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-cell {
   .van-cell-text {
     margin-right: 5px;

packages/cell/index.less

@@ -0,0 +1,93 @@
+@import '../style/var';
+@import "../style/mixins/hairline";
+
+.van-cell {
+  width: 100%;
+  display: flex;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  line-height: 24px;
+  position: relative;
+  background-color: @white;
+  color: @text-color;
+  font-size: 14px;
+  overflow: hidden;
+
+  &:not(:last-child)::after {
+    .hairline-bottom(@border-color, 15px);
+  }
+
+  &--borderless::after {
+    display: none;
+  }
+
+  &__label {
+    font-size: 12px;
+    line-height: 1.2;
+    color: @gray-darker;
+  }
+
+  &__title,
+  &__value {
+    flex: 1;
+  }
+
+  &__value {
+    overflow: hidden;
+    text-align: right;
+    position: relative;
+    vertical-align: middle;
+
+    &--alone {
+      text-align: left;
+    }
+  }
+
+  &__left-icon {
+    min-width: 1em;
+    font-size: 16px;
+    line-height: 24px;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    color: @gray-dark;
+    font-size: 12px;
+    line-height: 24px;
+    margin-left: 5px;
+
+    &--left::before {
+      transform: rotate(180deg);
+    }
+
+    &--up::before {
+      transform: rotate(-90deg);
+    }
+
+    &--down::before {
+      transform: rotate(90deg);
+    }
+  }
+
+  &--clickable {
+    &:active {
+      background-color: @active-color;
+    }
+  }
+
+  &--required {
+    overflow: visible;
+
+    &::before {
+      content: '*';
+      position: absolute;
+      left: 7px;
+      font-size: 14px;
+      color: @red;
+    }
+  }
+
+  &--center {
+    align-items: center;
+  }
+}