lh-ui-next 0.1.7-beta.8 → 0.1.7

package/static/css/package/popover.less

@@ -3,7 +3,7 @@
     display: inline-block;
     width: 200px;
     .popover-reference {
-        display: inline-block;
+        display: block;
         width: 100%;
     }
 }
@@ -11,139 +11,7 @@
     display: inline-block;
     visibility: hidden;
     position: fixed;
-    border: solid 1px #d5dce6;
-    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
-    border-radius: 3px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    border-radius: 2px;
     background: #fff;
-    .triangle-icon {
-        display: inline-block;
-        height: 12px;
-        position: fixed;
-        z-index: 1;
-        &::before {
-            content: "";
-            display: inline-block;
-            width: 0;
-            height: 0;
-            border-width: 0 6px 6px;
-            border-style: solid;
-            border-color: #e8ecf1;
-            position: absolute;
-            left: 50%;
-            margin-left: -6px;
-            bottom: 0;
-        }
-
-        &::after {
-            content: "";
-            display: inline-block;
-            width: 0;
-            height: 0;
-            border-width: 0 6px 6px;
-            border-style: solid;
-            border-color: #fff;
-            position: absolute;
-            left: 50%;
-            margin-left: -6px;
-            bottom: -1px;
-            z-index: 1;
-        }
-
-        &.top {
-            &::before {
-                border-width: 6px 6px 0;
-                border-right-color: transparent!important;
-                border-bottom-color: transparent!important;
-                border-left-color: transparent!important;
-                top: 0;
-            }
-    
-            &::after {
-                border-width: 6px 6px 0;
-                border-right-color: transparent!important;
-                border-bottom-color: transparent!important;
-                border-left-color: transparent!important;
-                top: -1px;
-            }
-        }
-        &.right {
-            &::before {
-                border-width: 6px 6px 6px 0;
-                border-top-color: transparent!important;
-                border-bottom-color: transparent!important;
-                border-left-color: transparent!important;
-                top: 50%;
-                margin-top: -6px;
-                margin-left: 0;
-                left: auto;
-                right: 0;
-            }
-    
-            &::after {
-                border-width: 6px 6px 6px 0;
-                border-top-color: transparent!important;
-                border-bottom-color: transparent!important;
-                border-left-color: transparent!important;
-                top: 50%;
-                margin-top: -6px;
-                margin-left: 0;
-                left: auto;
-                right: -1px;
-            }
-        }
-        &.bottom {
-            &::before {
-                border-top-color: transparent!important;
-                border-right-color: transparent!important;
-                border-left-color: transparent!important;
-            }
-    
-            &::after {
-                border-top-color: transparent!important;
-                border-right-color: transparent!important;
-                border-left-color: transparent!important;
-            }
-        }
-        &.left {
-            &::before {
-                border-width: 6px 0 6px 6px;
-                border-top-color: transparent!important;
-                border-right-color: transparent!important;
-                border-bottom-color: transparent!important;
-                top: 50%;
-                margin-top: -6px;
-                margin-left: 0;
-                left: 0;
-            }
-    
-            &::after {
-                border-width: 6px 0 6px 6px;
-                border-top-color: transparent!important;
-                border-right-color: transparent!important;
-                border-bottom-color: transparent!important;
-                top: 50%;
-                margin-top: -6px;
-                margin-left: 0;
-                left: -1px;
-            }
-        }
-    }
-    &.lh-tooltip {
-        box-shadow: none;
-        background: rgba(0, 0, 0, 0.75);
-        border: none;
-        color: #fff;
-        width: auto !important;
-        line-height: 20px;
-        padding: 5px 13px;
-        font-size: 14px;
-        .triangle-icon {
-            &::before {
-                display: none;
-            }
-            &::after {
-                border-color: rgba(0, 0, 0, 0.75);
-            }
-        }
-    }
 }

package/static/css/package/radio.less

@@ -12,13 +12,13 @@
   + .lh-radio {
     margin-left: 14px;
   }
-  &-output{
+  .lh-radio-output{
     position: relative;
     display: inline-block;
     cursor: pointer;
     vertical-align: middle;
   }
-  &-inner{
+  .lh-radio-inner{
     position: relative;
     display: flex;
     align-items: center;
@@ -69,7 +69,7 @@
 
 
   }
-  &-input{
+  .lh-radio-input{
     position: absolute;
     top: 0;
     right: 0;
@@ -81,7 +81,7 @@
     cursor: pointer;
     z-index:-1;
   }
-  &-title{
+  .lh-radio-title{
     transform: translateY(-1px);
     display: inline-block;
     font-size: 14px;
@@ -97,41 +97,27 @@
       color: @color_b4;
     }
   }
-}
-.lh-radio-mini{
-  +.lh-radio {
-    margin-left: 14px;
-  }
-  .lh-radio-inner{
-    width: 12px;
-    height: 12px;
-    &::after{
-      width:4px;
-      height:4px;
+
+  &.mini{
+    +.lh-radio {
+      margin-left: 12px;
     }
-  }
-  .lh-radio-title{
-    font-size: 12px;
-    padding-left: 6px;
-  }
-}
-.lh-radio-big{
-  +.lh-radio {
-    margin-left:16px;
-  }
-  .lh-radio-inner{
-    width: 16px;
-    height: 16px;
-    &::after{
-      width:8px;
-      height:8px;
+    .lh-radio-inner{
+      width: 14px;
+      height: 14px;
+      &::after{
+        width:6px;
+        height:6px;
+      }
+    }
+    .lh-radio-title{
+      font-size: 12px;
     }
   }
-  .lh-radio-title{
-    font-size: 14px;
-    padding-left:8px;
-  }
+
 }
+
+
 .lh-radio-group {
   display: inline-block;
   font-size: 0;

package/static/css/package/select.less

@@ -1,5 +1,5 @@
 .lh-select {
-    display: inline-block;
+    display: block;
     width: 100%;
     position: relative;
     .lh-select-text {
@@ -147,6 +147,7 @@
             }
             .dropdown-icon {
                 top: 4px;
+                right:4px;
             }
         }
     }
@@ -232,16 +233,16 @@
             padding: 0 0 0 0;
             li {
                 font-size: 12px;
-                height: 20px;
-                line-height: 19px;
-                padding-left: 4px;
-                padding-right: 4px;
+                height: 22px;
+                line-height: 22px;
+                padding-left: 6px;
+                padding-right: 6px;
             }
         }
         .lh-select-search {
             padding-top: 0;
-            padding-left: 4px;
-            padding-right: 4px;
+            padding-left: 6px;
+            padding-right: 6px;
         }
     }
 }
@@ -255,12 +256,5 @@
 }
 // 下拉popover样式覆写
 .lh-select-popover-content {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
     overflow: hidden;
-    border:none !important;
-    border-radius: 2px;
-    margin-top: -2px;
-    .triangle-icon {
-        display: none;
-    }
 }

package/static/css/package/selectTile.less

@@ -4,7 +4,7 @@
         font-size: 14px;
         margin: 8px 0;
     }
-    .lh-select-ul {
+    .lh-select-tile-ul {
         display: inline-block;
         .tile-left-title {
             display: inline-block;

package/static/css/package/switch.less

@@ -3,7 +3,7 @@
     height: 22px;
     line-height: 22px;
     position: relative;
-    &-input {
+    .lh-switch-input {
         position: absolute;
         top: 0;
         bottom: 0;
@@ -11,22 +11,20 @@
         right: 0;
         visibility: hidden;
     }
-    &-text {
-        cursor: pointer;
-    }
-    &-core {
+    .lh-switch-core {
         height: 22px;
+        width: 44px;
         border:none;
         margin: 0;
         display: inline-block;
         position: relative;
         outline: none;
-        border-radius: 10px;
+        border-radius: 11px;
         box-sizing: border-box;
-        background-color: #dcdfe6;
+        background-color: @color_b4;
         cursor: pointer;
         vertical-align: top;
-        transition: all 0.3s;
+        transition: all 0.3s ease;
         &::after {
             content: "";
             position: absolute;
@@ -35,22 +33,54 @@
             height: 18px;
             top: 2px;
             left: 2px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.16);
             background-color: #fff;
-            transition: all 0.3s;
+            transition: all 0.3s ease;
         }
     }
-    &-checked {
+    .lh-switch-checked {
         .lh-switch-core {
             border:none;
-            background-color: #409eff;
+            background-color: @color_theme4;
             &::after {
-                left: 100%;
-                margin-left: -20px;
+                left:24px;
             }
         }
     }
-    &-disabled{
+    .lh-switch-disabled{
         cursor: not-allowed;
-        opacity: .6;
+        .lh-switch-core {
+            background-color: @color_b7;
+        }
+        &.lh-switch-checked {
+            .lh-switch-core {
+                background-color: @color_theme2;
+            }
+
+        }
+    }
+
+        
+    &.mini {
+        height: 16px;
+        line-height: 16px;
+
+        .lh-switch-core {
+            height: 16px;
+            width: 28px;
+            border-radius: 8px;
+            &::after {
+                width: 12px;
+                height: 12px;
+            }
+        }
+
+        .lh-switch-checked {
+            .lh-switch-core {
+                &::after {
+                    left:14px;
+                }
+            }
+        }
     }
 }

package/static/css/package/tab.less

@@ -276,9 +276,12 @@
   }
   //类别n5
   .lh-tab-div-n5 {
+    border: 1px solid @color_b6;
+    width: 100%;
+    height: 32px;
     .lh-tab-content {
-      height: 32px;
-      line-height: 32px;
+      height: 30px;
+      line-height: 30px;
       display: inline-block;
       float: left;
       margin-left: -1px;

package/static/css/package/tree.less

@@ -4,7 +4,7 @@
     display: inline-block;
     .node-base {
       height: 22px;
-      margin-bottom: 5px;
+      margin-bottom: 2px;
       white-space: nowrap;
       display: inline-block;
       .node-base-icon-wapper {
@@ -19,6 +19,7 @@
           color:#000;
           transform: rotate(270deg);
           display: inline-block;
+          line-height: 21px;
         }
         &:hover {
           .icon_component_arrow {
@@ -89,4 +90,26 @@
   .lh-tree-node-divider {
     height: 1px
   }
+  &.mini {
+    .lh-tree-node {
+      .node-base {
+        .node-checkbox {
+          margin-right:10px;
+        }
+        .node-radio {
+          margin-right: 10px;
+          height: 14px;
+          width: 14px;
+          .node-radio-inner {
+            width: 6px;
+            height: 6px;
+          }
+        }
+        .node-label {
+          font-size: 12px;
+        }
+
+      }
+    }
+  }
 }

package/static/css/package/treeSelect.less

@@ -35,17 +35,9 @@
   border-radius: 4px;
   border: none;
   display: inline-block;
-  margin-top: -8px;
-  .triangle-icon {
-    display: none;
-  }
 }
 .lh-tree-select-popover-mini {
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   border-radius: 3px;
   border: none;
-  margin-top: -8px;
-  .triangle-icon {
-    display: none;
-  }
 }

package/static/css/package/treeSpecial.less

@@ -0,0 +1,70 @@
+.lh-tree-special {
+  display: inline-block;
+  background-color: white;
+  .lh-tree-specail-container {
+    display: inline-block;
+    height: 240px;
+    width: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 8px 4px 8px 4px;
+    border-right:1px solid @color_b6;
+    .lh-tree-special-node {
+      display: inline-block;
+      border-radius: 2px;
+      padding-left: 12px;
+      padding-right: 7px;
+      width: 100%;
+      cursor: default;
+      .node-checkbox {
+        vertical-align: middle;
+        margin-right: 10px;
+        .lh-checkbox-text {
+          display: none;
+        }
+      }
+      .node-label {
+        vertical-align: middle;
+        height: 28px;
+        line-height: 28px;
+        color:@color_b1;
+        display: inline-block;
+        position: relative;
+        .node-selected-num {
+          display: inline-block;
+          position: absolute;
+          height: 18px;
+          min-width: 18px;
+          padding-left: 2px;
+          padding-right: 2px;
+          line-height: 18px;
+          background: @color_warning_red;
+          box-shadow: 0 1px 0 #FFFFFF;
+          opacity: 1;
+          border-radius: 9px;
+          text-align: center;
+          .text {
+            color:white;
+            display: inline-block;
+            transform: scale(0.91);
+          }
+        }
+      }
+      .icon-wapper {
+        margin-top: 7px;
+        transform: rotate(-90deg);
+        .icon_component_arrow_down {
+          font-size: 14px;
+          color:@color_b4;
+        }
+      }
+      &.active {
+        background-color: @color_theme1;
+      }
+      &:hover {
+        background-color: @color_b6;
+      }
+    }
+  }
+
+}

package/static/css/package/treeSpecialSelect.less

@@ -0,0 +1,37 @@
+.lh-treeS-select-div {
+  height: 315px;
+  .treeS-select-div-header {
+    height: 35px;
+    border-bottom: 1px solid @color_b6;
+    padding: 7px 20px 0 10px;
+  }
+  .treeS-select-div-content-wapper {
+    overflow-y: hidden;
+    height: 240px;
+  }
+  .treeS-select-div-footer {
+    border-top:1px solid @color_b6;
+    position: absolute;
+    bottom: 8px;
+    left:0;
+    padding:8px 16px 0 16px;
+    width: 100%;
+    .count-text {
+      color:@color_b3;
+      font-size: 13px;
+      line-height: 22px;
+    }
+  }
+}
+
+.lh-tree-special-select-popover {
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border-radius: 4px;
+  border: none;
+  display: inline-block;
+}
+.lh-tree-special-select-popover-mini {
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border-radius: 3px;
+  border: none;
+}