INIT

packages/styles/utils/index.scss

@@ -0,0 +1,2 @@
+@import './mixins';
+@import './var';

packages/styles/utils/mixins.scss

@@ -0,0 +1,94 @@
+//BEM
+$fi-namespace: 'lemon';
+
+@mixin b($block) {
+  $selector: $fi-namespace + '-' + $block;
+  .#{$selector} {
+    @content;
+  }
+}
+@mixin e($element) {
+  $selector: '__' + $element;
+  &#{$selector} {
+    @content;
+  }
+}
+@mixin m($modifier) {
+  $selector: '--' + $modifier;
+  &#{$selector} {
+    @content;
+  }
+}
+
+@mixin bem($block, $element: false, $modifier: false) {
+  $selector: '.';
+  @if $block {
+    $selector: $fi-namespace + '-' + $block;
+  }
+  @if $element {
+    $selector: $selector + '__' + $element;
+  }
+  @if $modifier {
+    $selector: $selector + '--' + $modifier;
+  }
+  & .#{$selector} {
+    @content;
+  }
+}
+
+@mixin user-select($value) {
+  -moz-user-select: $value;
+  -webkit-user-select: $value;
+  -ms-user-select: $value;
+}
+
+@mixin scrollbar-theme($color: #1f252d, $background: #6d6d6d) {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  &::-webkit-scrollbar-track-piece {
+    background-color: $background;
+  }
+  &::-webkit-scrollbar-thumb:vertical {
+    height: 5px;
+    background-color: $color;
+  }
+  &::-webkit-scrollbar-thumb:horizontal {
+    width: 5px;
+    background-color: $background;
+  }
+}
+@mixin scrollbar-dark() {
+  @include scrollbar-theme();
+}
+@mixin scrollbar-light() {
+  @include scrollbar-theme(#aaa, #fff);
+}
+
+@mixin vertical-center {
+  $selector: &;
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: '';
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+}
+@mixin position-center($type: fixed) {
+  position: $type;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin arrow {
+}

packages/styles/utils/var.scss

@@ -0,0 +1,30 @@
+//$color-primary: #2977fa;
+$color-primary: #1bc213;
+$color-light: #fff;
+/* 头像 */
+$avatar-size: 45px;
+$avatar-radius: 50%;
+
+/** 标题 */
+$title-background: $color-primary;
+$title-color: $color-light;
+$title-height: 44px;
+/* 气泡 */
+$bubble-background: $color-primary;
+$bubble-color: $color-light;
+$bubble-radius: 12px;
+
+$bubble-self-background: #e7ebef;
+$bubble-self-color: #606d84;
+
+/* 输入框 */
+$editor-textarea-height: 40px;
+$editor-textarea-radius: 5px;
+
+$editor-submit-disable-color: #bcbcbc;
+$editor-submit-disable-background: #ebebeb;
+$editor-submit-radius: $editor-textarea-radius;
+/*
+$bubble-self-background: #e7ebef;
+$bubble-self-color: #3a465d;
+*/