[breaking change] rebuild style struct (#2021)

packages/notice-bar/demo/index.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-notice-bar {
   .van-notice-bar:not(:first-of-type) {
     margin-top: 15px;

packages/notice-bar/index.less

@@ -0,0 +1,72 @@
+@import '../style/var';
+
+.van-notice-bar {
+  display: flex;
+  height: 40px;
+  padding: 0 15px;
+  font-size: 14px;
+  line-height: 24px;
+  position: relative;
+  align-items: center;
+  color: @orange-dark;
+  background-color: @orange-light;
+
+  &--withicon {
+    position: relative;
+    padding-right: 40px;
+  }
+
+  &__left-icon {
+    height: 18px;
+    min-width: 20px;
+    box-sizing: border-box;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__right-icon {
+    top: 12px;
+    right: 15px;
+    font-size: 16px;
+    position: absolute;
+  }
+
+  &__wrap {
+    flex: 1;
+    height: 24px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__content {
+    position: absolute;
+    white-space: nowrap;
+
+    &.van-ellipsis {
+      max-width: 100%;
+    }
+  }
+
+  &__play {
+    animation: van-notice-bar-play linear both;
+  }
+
+  &__play--infinite {
+    animation: van-notice-bar-play-infinite linear infinite both;
+  }
+}
+
+/**
+ * Declare two same keyframes
+ * In case that some mobile browsers can continue animation when className changed
+ */
+@keyframes van-notice-bar-play {
+  to { transform: translate3d(-100%, 0, 0); }
+}
+
+@keyframes van-notice-bar-play-infinite {
+  to { transform: translate3d(-100%, 0, 0); }
+}