vxe-table 4.4.1 → 4.4.2-beta.1

package/styles/menu.scss

@@ -13,20 +13,20 @@
   top: 0;
   left: 0;
   font-size: 12px;
-  border: 1px solid $vxe-table-popup-border-color;
+  border: 1px solid var(--vxe-table-popup-border-color);
   box-shadow: 3px 3px 4px -2px rgba(0,0,0,.6);
   padding: 0 1px;
   user-select: none;
-  color: $vxe-table-font-color;
-  font-family: $vxe-font-family;
-  background-color: $vxe-table-menu-background-color;
+  color: var(--vxe-table-font-color);
+  font-family: var(--vxe-font-family);
+  background-color: var(--vxe-table-menu-background-color);
 }
 .vxe-context-menu--link {
   display: block;
   padding: 0 2.5em;
-  width: $vxe-table-menu-item-width;
+  width: var(--vxe-table-menu-item-width);
   line-height: 26px;
-  color: $vxe-table-font-color;
+  color: var(--vxe-table-font-color);
   cursor: pointer;
   .vxe-context-menu--link-prefix,
   .vxe-context-menu--link-suffix {
@@ -84,7 +84,7 @@
     }
     &.link--disabled {
       & > .vxe-context-menu--link {
-        color: $vxe-disabled-color;
+        color: var(--vxe-disabled-color);
         cursor: no-drop;
       }
       &.link--active {

package/styles/modal.scss

@@ -9,8 +9,8 @@
   line-height: 1.5;
   width: calc(100% + 18px);
   height: calc(100% + 18px);
-  color: $vxe-font-color;
-  font-family: $vxe-font-family;
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
   transition: top .4s ease-in-out;
   &.is--active {
     display: block;
@@ -36,7 +36,7 @@
     .vxe-modal--header,
     .vxe-modal--footer {
       position: relative;
-      border-bottom-color: $vxe-loading-background-color;
+      border-bottom-color: var(--vxe-loading-background-color);
       &:before {
         content: "";
         position: absolute;
@@ -46,7 +46,7 @@
         height: 100%;
         z-index: 1;
         user-select: none;
-        background-color: $vxe-loading-background-color;
+        background-color: var(--vxe-loading-background-color);
       }
     }
   }
@@ -160,9 +160,9 @@
   .vxe-modal--box {
     visibility: hidden;
     width: 420px;
-    background-color: $vxe-modal-body-background-color;
-    border-radius: $vxe-border-radius;
-    border: 1px solid $vxe-modal-border-color;
+    background-color: var(--vxe-modal-body-background-color);
+    border-radius: var(--vxe-border-radius);
+    border: 1px solid var(--vxe-modal-border-color);
     text-align: left;
     pointer-events: auto;
     opacity: 0;
@@ -189,28 +189,28 @@
   }
   &.status--info {
     .vxe-modal--status-wrapper {
-      color: $vxe-info-color;
+      color: var(--vxe-info-color);
     }
   }
   &.status--warning,
   &.status--question {
     .vxe-modal--status-wrapper {
-      color: $vxe-warning-color;
+      color: var(--vxe-warning-color);
     }
   }
   &.status--success {
     .vxe-modal--status-wrapper {
-      color: $vxe-success-color;
+      color: var(--vxe-success-color);
     }
   }
   &.status--error {
     .vxe-modal--status-wrapper {
-      color: $vxe-danger-color;
+      color: var(--vxe-danger-color);
     }
   }
   &.status--loading {
     .vxe-modal--status-wrapper {
-      color: $vxe-disabled-color;
+      color: var(--vxe-disabled-color);
     }
   }
   .vxe-modal--status-wrapper {
@@ -238,9 +238,9 @@
     flex-shrink: 0;
     font-size: 1.1em;
     font-weight: 700;
-    border-bottom: 1px solid $vxe-modal-border-color;
-    background-color: $vxe-modal-header-background-color;
-    border-radius: $vxe-border-radius $vxe-border-radius 0 0;
+    border-bottom: 1px solid var(--vxe-modal-border-color);
+    background-color: var(--vxe-modal-header-background-color);
+    border-radius: var(--vxe-border-radius) var(--vxe-border-radius) 0 0;
     user-select: none;
     &.is--draggable {
       .vxe-modal--header-title {
@@ -268,7 +268,7 @@
     cursor: pointer;
     margin-left: 0.6em;
     &:hover {
-      color: $vxe-primary-color;
+      color: var(--vxe-primary-color);
     }
   }
   .vxe-modal--footer {
@@ -371,14 +371,14 @@
 }
 
 .vxe-modal--wrapper {
-  font-size: $vxe-font-size;
+  font-size: var(--vxe-font-size);
   &.size--medium {
-    font-size: $vxe-font-size-medium;
+    font-size: var(--vxe-font-size-medium);
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
+    font-size: var(--vxe-font-size-small);
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
+    font-size: var(--vxe-font-size-mini);
   }
 }

package/styles/modules.scss

@@ -1,3 +1,4 @@
+@import './cssvar.scss';
 @import './icon.scss';
 @import './filter.scss';
 @import './menu.scss';

package/styles/old-icon.scss

@@ -6,7 +6,7 @@
   vertical-align: middle;
   position: relative;
   direction: ltr;
-  font-family: $vxe-icon-font-family;
+  font-family: var(--vxe-icon-font-family);
   font-weight: normal;
   user-select: none;
   &.rotate45 {
@@ -50,7 +50,7 @@
   border-width: 0.1em;
   border-style: solid;
   border-color: inherit;
-  background-color: $vxe-icon-background-color;
+  background-color: var(--vxe-icon-background-color);
   &:before,
   &:after {
     @extend %PseudoClass;
@@ -92,7 +92,7 @@
     border-width: 0.1em;
     border-style: solid;
     border-color: inherit;
-    background-color: $vxe-icon-background-color;
+    background-color: var(--vxe-icon-background-color);
   }
 }
 
@@ -439,7 +439,7 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    color: $vxe-icon-background-color;
+    color: var(--vxe-icon-background-color);
     transform: rotate(-10deg) scale(0.75);
   }
 }
@@ -484,7 +484,7 @@
     content: "\2713";
     left: 0.25em;
     bottom: 0;
-    color: $vxe-icon-background-color;
+    color: var(--vxe-icon-background-color);
     font-size: 0.65em;
   }
 }
@@ -501,7 +501,7 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    color: $vxe-icon-background-color;
+    color: var(--vxe-icon-background-color);
     line-height: 1.4em;
     font-size: 0.8em;
   }
@@ -520,7 +520,7 @@
     width: 100%;
     text-align: center;
     line-height: 1.5em;
-    color: $vxe-icon-background-color;
+    color: var(--vxe-icon-background-color);
     font-size: 0.7em;
   }
 }
@@ -538,7 +538,7 @@
     width: 100%;
     line-height: 1.4em;
     text-align: center;
-    color: $vxe-icon-background-color;
+    color: var(--vxe-icon-background-color);
     font-size: 0.8em;
   }
 }
@@ -682,7 +682,7 @@
     left: 0.2em;
     bottom: -0.2em;
     box-shadow: inset 0 0 0 0.1em;
-    background-color: $vxe-icon-background-color;
+    background-color: var(--vxe-icon-background-color);
   }
 }
 

package/styles/pager.scss

@@ -6,10 +6,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  color: $vxe-font-color;
-  font-family: $vxe-font-family;
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
   text-align: right;
-  background-color: $vxe-pager-background-color;
+  background-color: var(--vxe-pager-background-color);
   &.is--hidden {
     display: none;
   }
@@ -27,9 +27,9 @@
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: $vxe-loading-z-index;
+      z-index: var(--vxe-loading-z-index);
       user-select: none;
-      background-color: $vxe-loading-background-color;
+      background-color: var(--vxe-loading-background-color);
     }
   }
   .vxe-pager--prev-btn,
@@ -43,7 +43,7 @@
     border: 1px solid transparent;
     &:not(.is--disabled) {
       &:focus {
-        box-shadow: 0 0 0.25em 0 $vxe-primary-color;
+        box-shadow: 0 0 0.25em 0 var(--vxe-primary-color);
       }
       &:hover {
         color: lighten($vxe-primary-color, 6%);
@@ -61,7 +61,7 @@
       .vxe-pager--num-btn,
       .vxe-pager--jump-prev,
       .vxe-pager--jump-next {
-        border-color: $vxe-input-border-color;
+        border-color: var(--vxe-input-border-color);
       }
     }
   }
@@ -72,7 +72,7 @@
     .vxe-pager--jump-prev,
     .vxe-pager--num-btn,
     .vxe-pager--jump-next {
-      background-color: $vxe-pager-perfect-button-background-color;
+      background-color: var(--vxe-pager-perfect-button-background-color);
     }
     .vxe-pager--jump-prev,
     .vxe-pager--num-btn,
@@ -80,12 +80,12 @@
       &:not(.is--disabled) {
         &.is--active {
           color: #fff;
-          background-color: $vxe-primary-color;
+          background-color: var(--vxe-primary-color);
           &:hover {
             background-color: lighten($vxe-primary-color, 6%);
           }
           &:focus {
-            border-color: $vxe-primary-color;
+            border-color: var(--vxe-primary-color);
           }
           &:active {
             border-color: darken($vxe-primary-color, 3%);
@@ -96,14 +96,14 @@
     }
   }
   &.is--perfect {
-    border: 1px solid $vxe-table-border-color;
+    border: 1px solid var(--vxe-table-border-color);
     border-top-width: 0;
-    background-color: $vxe-pager-perfect-background-color;
+    background-color: var(--vxe-pager-perfect-background-color);
   }
   &.is--border {
     .vxe-pager--num-btn {
       &.is--active {
-        border-color: $vxe-primary-color;
+        border-color: var(--vxe-primary-color);
       }
     }
   }
@@ -193,17 +193,17 @@
   .vxe-pager--jump-next,
   .vxe-pager--num-btn {
     text-align: center;
-    border-radius: $vxe-border-radius;
+    border-radius: var(--vxe-border-radius);
     margin: 0 0.25em;
     user-select: none;
-    background-color: $vxe-pager-background-color;
+    background-color: var(--vxe-pager-background-color);
     &:not(.is--disabled) {
       &:hover {
         color: lighten($vxe-primary-color, 6%);
       }
       &.is--active,
       &:focus {
-        color: $vxe-primary-color;
+        color: var(--vxe-primary-color);
       }
       &:active {
         color: darken($vxe-primary-color, 3%);
@@ -211,9 +211,9 @@
     }
     &.is--disabled {
       cursor: no-drop;
-      color: $vxe-disabled-color;
+      color: var(--vxe-disabled-color);
       &:hover {
-        color: $vxe-disabled-color;
+        color: var(--vxe-disabled-color);
       }
     }
   }
@@ -244,14 +244,14 @@
     }
   }
   .vxe-pager--jump .vxe-pager--goto {
-    border-radius: $vxe-border-radius;
-    border: 1px solid $vxe-input-border-color;
-    color: $vxe-font-color;
+    border-radius: var(--vxe-border-radius);
+    border: 1px solid var(--vxe-input-border-color);
+    color: var(--vxe-font-color);
     transition: border .2s ease-in-out;
     padding: 0 0.4em;
-    background-color: $vxe-input-background-color;
+    background-color: var(--vxe-input-background-color);
     &:focus {
-      border: 1px solid $vxe-primary-color;
+      border: 1px solid var(--vxe-primary-color);
       outline: 0;
     }
   }
@@ -270,18 +270,18 @@
 }
 
 .vxe-pager {
-  font-size: $vxe-font-size;
-  height: $vxe-table-row-height-default;
+  font-size: var(--vxe-font-size);
+  height: var(--vxe-table-row-height-default);
   &.size--medium {
-    font-size: $vxe-font-size-medium;
-    height: $vxe-table-row-height-medium;
+    font-size: var(--vxe-font-size-medium);
+    height: var(--vxe-table-row-height-medium);
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
-    height: $vxe-table-row-height-small;
+    font-size: var(--vxe-font-size-small);
+    height: var(--vxe-table-row-height-small);
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
-    height: $vxe-table-row-height-mini;
+    font-size: var(--vxe-font-size-mini);
+    height: var(--vxe-table-row-height-mini);
   }
 }

package/styles/pulldown.scss

@@ -5,7 +5,7 @@
 .vxe-pulldown {
   position: relative;
   display: inline-block;
-  color: $vxe-font-color;
+  color: var(--vxe-font-color);
   text-align: left;
 }
 
@@ -14,7 +14,7 @@
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: $vxe-font-color;
+  color: var(--vxe-font-color);
   text-align: left;
   &:not(.is--transfer) {
     min-width: 100%;
@@ -39,19 +39,19 @@
   }
 }
 .vxe-pulldown--wrapper {
-  background-color: $vxe-pulldown-panel-background-color;
+  background-color: var(--vxe-pulldown-panel-background-color);
 }
 
 .vxe-pulldown,
 .vxe-pulldown--panel {
-  font-size: $vxe-font-size;
+  font-size: var(--vxe-font-size);
   &.size--medium {
-    font-size: $vxe-font-size-medium;
+    font-size: var(--vxe-font-size-medium);
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
+    font-size: var(--vxe-font-size-small);
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
+    font-size: var(--vxe-font-size-mini);
   }
 }

package/styles/radio.scss

@@ -39,7 +39,7 @@
   &:not(.is--disabled) {
     > input {
       &:focus+.vxe-radio--icon {
-        color: $vxe-primary-color;
+        color: var(--vxe-primary-color);
       }
     }
   }
@@ -52,32 +52,32 @@
 
 .vxe-radio-button {
   .vxe-radio--label {
-    background-color: $vxe-radio-button-default-background-color;
+    background-color: var(--vxe-radio-button-default-background-color);
   }
   &:first-child {
     .vxe-radio--label {
-      border-left: 1px solid $vxe-input-border-color;
-      border-radius: $vxe-border-radius 0 0 $vxe-border-radius;
+      border-left: 1px solid var(--vxe-input-border-color);
+      border-radius: var(--vxe-border-radius) 0 0 var(--vxe-border-radius);
     }
   }
   &:last-child {
     .vxe-radio--label {
-      border-radius: 0 $vxe-border-radius $vxe-border-radius 0;
+      border-radius: 0 var(--vxe-border-radius) var(--vxe-border-radius) 0;
     }
   }
   > input {
     &:checked+.vxe-radio--label {
       color: #fff;
-      background-color: $vxe-primary-color;
-      border-color: $vxe-primary-color;
+      background-color: var(--vxe-primary-color);
+      border-color: var(--vxe-primary-color);
     }
   }
   .vxe-radio--label {
     padding: 0 1em;
-    line-height: $vxe-button-height-default - 2;
+    line-height: var(--vxe-button-height-default) - 2;
     display: inline-block;
     border-style: solid;
-    border-color: $vxe-input-border-color;
+    border-color: var(--vxe-input-border-color);
     border-width: 1px 1px 1px 0;
     max-width: 50em;
     @extend %TextEllipsis;
@@ -87,7 +87,7 @@
     > input {
       &:not(:checked) {
         &+.vxe-radio--label {
-          color: $vxe-input-disabled-color;
+          color: var(--vxe-input-disabled-color);
         }
       }
       &:checked {
@@ -102,8 +102,8 @@
     & > input {
       &:focus {
         &+.vxe-radio--label {
-          border-color: $vxe-primary-color;
-          box-shadow: 0 0 0.2em 0 $vxe-primary-color;
+          border-color: var(--vxe-primary-color);
+          box-shadow: 0 0 0.2em 0 var(--vxe-primary-color);
         }
       }
     }
@@ -111,7 +111,7 @@
       > input {
         &:not(:checked) {
           &+.vxe-radio--label {
-            color: $vxe-primary-color;
+            color: var(--vxe-primary-color);
           }
         }
       }
@@ -119,30 +119,30 @@
   }
   &.size--medium {
     .vxe-radio--label {
-      line-height: $vxe-button-height-medium - 2;
+      line-height: var(--vxe-button-height-medium) - 2;
     }
   }
   &.size--small {
     .vxe-radio--label {
-      line-height: $vxe-button-height-small - 2;
+      line-height: var(--vxe-button-height-small) - 2;
     }
   }
   &.size--mini {
     .vxe-radio--label {
-      line-height: $vxe-button-height-mini - 2;
+      line-height: var(--vxe-button-height-mini) - 2;
     }
   }
 }
 
 .vxe-radio {
-  font-size: $vxe-font-size;
+  font-size: var(--vxe-font-size);
   &.size--medium {
-    font-size: $vxe-font-size-medium;
+    font-size: var(--vxe-font-size-medium);
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
+    font-size: var(--vxe-font-size-small);
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
+    font-size: var(--vxe-font-size-mini);
   }
 }