init

2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
--- a/.svn/pristine/c3/c3699475439e766e864dc313083d48d59c55d609.svn-base
+++ b/.svn/pristine/c3/c3699475439e766e864dc313083d48d59c55d609.svn-base
@@ -0,0 +1,126 @@
+// 主题颜色
+// 浅色 --> 默认使用
+@ligh-background: #FFF;
+@ligh-color: #3a3a3a;
+
+// 深色
+@dark-background: #353535;
+@dark-color: #FFF;
+
+@border-clor: #cecece;
+
+// 单一设置主题
+.single-theme(@position, @contrary_position, @margin_postion, @color, @m-border-color) {
+    @attr : ~'[position=@{position}]';
+    &{
+        border: 1px solid @m-border-color;
+        &@{attr}{
+            margin-@{contrary_position}: 6px;
+            .layui-popper-arrow {
+                @{contrary_position}: -6px;
+                border-@{contrary_position}-width: 0;
+                border-@{position}-color: @m-border-color;
+                &::after{
+                    @{contrary_position}: 1px;
+                    border-@{contrary_position}-width: 0;
+                    margin-@{margin_postion}: -6px;
+                    border-@{position}-color: @color; 
+                }
+            }
+        }
+    }
+}
+// 统一设置四个方向的主题
+.theme(@background-color, @color, @border-color) {
+    background-color: @background-color;
+    color: @color;
+    .single-theme(top, bottom, left, @background-color, @border-color);
+    .single-theme(bottom, top, left, @background-color, @border-color);
+    .single-theme(right, left, top, @background-color, @border-color);
+    .single-theme(left, right, top, @background-color, @border-color);
+}
+
+// 箭头默认居中
+.arrow-default-center(@position, @prop) {
+    @attr : ~'[position=@{position}]';
+    &@{attr} {
+        .layui-popper-arrow{
+            @{prop}: -moz-calc(50% - 6px);
+            @{prop}: -webkit-calc(50% - 6px);
+            @{prop}: calc(50% - 6px);
+        }
+    }
+}
+.all-arrow-default-center() {
+    .arrow-default-center(top, left);
+    .arrow-default-center(bottom, left);
+    .arrow-default-center(left, top);
+    .arrow-default-center(right, top);
+}
+
+// 填充popper，支持可以移动到popper使用到
+.single-fill-popper(@position, @contrary_position, @zeroPosition, @all, @seven){
+    @attr : ~'[position=@{position}]';
+    &@{attr}::after{
+        @{contrary_position}: -7px;
+        @{zeroPosition}: 0;
+        @{all}: 100%;
+        @{seven}: 7px;
+    }
+}
+.fill-popper(){
+    .single-fill-popper(top, bottom, left, width, height);
+    .single-fill-popper(bottom, top, left, width, height);
+    .single-fill-popper(left, right, bottom, height, width);
+    .single-fill-popper(right, left, bottom, height, width);
+}
+
+// 样式开始
+.layui-popper {
+    position: fixed;
+    padding: 10px;
+    border-radius: 3px;
+    word-wrap: break-word;
+    min-width: 12px;
+    min-height: 12px;
+    font-size: 14px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+    .theme(@ligh-background, @ligh-color, @border-clor);
+    max-width: 300px;
+    z-index: 99999;
+
+    // 箭头默认居中
+    .all-arrow-default-center();
+
+    &::after{
+        content: " ";
+        position: absolute;
+        display: block;
+    }
+    // 填充
+    .fill-popper();
+
+    .layui-popper-arrow {
+        &,&::after{
+            position: absolute;
+            display: block;
+            width: 0;
+            height: 0;
+            border-width: 6px;
+            border-style: solid;
+            border-color: transparent;
+        }
+
+        &::after{
+            content: ' ';
+        }
+
+    }
+
+    /* 深色主题 */
+    &.layui-dark {
+        .theme(@dark-background, @dark-color, @dark-background);
+    }
+
+}