update: add offset parameter to onePixelBorder mixin and update devDependencies

Author: kayo5994

package.json

@@ -1,50 +1,50 @@
 {
     "name": "qmui_web",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "一个旨在提高 UI 开发效率、快速产生项目 UI 的前端框架",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/Tencent/QMUI_Web.git"
     },
     "main": "gulpfile.js",
     "dependencies": {
-        "ansi-colors": "^3.0.5",
-        "autoprefixer": "^9.1.5",
+        "ansi-colors": "^3.2.1",
+        "autoprefixer": "^9.3.1",
         "beeper": "^1.1.1",
-        "browser-sync": "^2.23.6",
+        "browser-sync": "^2.26.3",
         "color-support": "^1.1.3",
         "del": "^3.0.0",
         "fancy-log": "^1.3.2",
         "gulp": "^4.0.0",
         "gulp-better-sass-inheritance": "^0.0.3",
-        "gulp-clean-css": "^3.9.3",
+        "gulp-clean-css": "^3.10.0",
         "gulp-concat": "^2.6.1",
         "gulp-debug": "^4.0.0",
         "gulp-file-include": "^2.0.1",
         "gulp-file-sync": "^2.0.0",
         "gulp-if": "^2.0.2",
-        "gulp-imagemin": "^4.1.0",
+        "gulp-imagemin": "^5.0.3",
         "gulp-load-plugins": "^1.5.0",
         "gulp-merge-link": "^0.1.3",
         "gulp-plumber": "^1.2.0",
         "gulp-postcss": "^8.0.0",
-        "gulp-rename": "^1.2.2",
+        "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
-        "gulp-sass": "^4.0.1",
+        "gulp-sass": "^4.0.2",
         "gulp-shell": "^0.6.5",
         "gulp-sourcemaps": "^2.6.4",
-        "gulp-uglify": "^3.0.0",
+        "gulp-uglify": "^3.0.1",
         "imagemin-pngquant": "^6.0.0",
         "js-md5": "^0.7.3",
-        "lodash": "^4.17.5",
+        "lodash": "^4.17.11",
         "mkdirp": "^0.5.1",
         "path": "^0.12.7",
-        "postcss-lazysprite": "^1.8.2",
+        "postcss-lazysprite": "^2.1.4",
         "postcss-svg-sprite": "^1.0.6",
         "yargs": "^12.0.2"
     },
     "devDependencies": {
-        "sassdoc": "^2.5.0",
+        "sassdoc": "^2.5.1",
         "stylelint-wechat-work-css": "^0.4.1"
     },
     "keywords": [

qmui/mixin/_adaptation.scss

@@ -123,10 +123,10 @@
 /// @name bgWithOpacity
 /// @param {Color} $color - 背景色的颜色值
 /// @param {Number} $alpha - 背景色的透明度
-@mixin bgWithOpacity($color,$alpha) {
+@mixin bgWithOpacity($color, $alpha) {
     background-color: rgba($color, $alpha);
     @include forIE8 {
-        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{ie-hex-str(rgba($color,$alpha))}, endcolorstr=#{ie-hex-str(rgba($color, $alpha))});
+        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{ie-hex-str(rgba($color, $alpha))}, endcolorstr=#{ie-hex-str(rgba($color, $alpha))});
     }
 }
 

qmui/mixin/tool/_effect.scss

@@ -55,19 +55,19 @@
         border-top: 0;
         border-bottom-color: $borderColor;
     }
-        /* 向下小三角 */
+    /* 向下小三角 */
     @else if $direction == bottom {
         border-width: $height $width / 2;
         border-bottom: 0;
         border-top-color: $borderColor;
     }
-        /* 向左小三角 */
+    /* 向左小三角 */
     @else if $direction == left {
         border-width: $width / 2 $height;
         border-left: 0;
         border-right-color: $borderColor;
     }
-        /* 向右小三角 */
+    /* 向右小三角 */
     @else if $direction == right {
         border-width: $width / 2 $height;
         border-right: 0;
@@ -144,22 +144,29 @@
 /// @param {Color} $color - 边框的颜色
 /// @param {String} $position [outside] - 边框的位置，支持 outside 和 inside
 /// @param {Number} $borderRadius [0] - 边框的圆角
+/// @param {Number} $offset 水平缩进值
 /// @throw 在多倍屏下，本方法会利用元素的 ::after 做效果，因此需要注意使用了该方法后 ::after 则尽量避免添加样式，以免影响效果
-@mixin onePixelBorder($direction: all, $color: $common_color_border, $position: outside, $borderRadius: 0) {
+@mixin onePixelBorder($direction: all, $color: $common_color_border, $position: outside, $borderRadius: 0, $borderStyle: solid, $offset: 0) {
     @include borderStyleForOnePixel($direction, $color);
     border-radius: $borderRadius;
+    border-style: $borderStyle;
     @include screenResolution(2) {
         position: relative;
         border: 0;
         &:after {
             content: "";
             position: absolute;
             top: 0;
-            left: 0;
-            width: 200%;
+            left: $offset;
+            @if $offset == 0 {
+                width: 200%;
+            } @else {
+                width: calc(200% - #{$offset * 2 * 2});
+            }
             height: 200%;
             border-radius: $borderRadius * 2;
             @include borderStyleForOnePixel($direction, $color);
+            border-style: $borderStyle;
             transform: scale(.5);
             transform-origin: 0 0;
             @if $position == inside {
@@ -170,7 +177,11 @@
     }
     @include screenResolution(3) {
         &:after {
-            width: 300%;
+            @if $offset == 0 {
+                width: 300%;
+            } @else {
+                width: calc(300% - #{$offset * 3 * 2});
+            }
             height: 300%;
             border-radius: $borderRadius * 3;
             transform: scale((1 / 3));

stylelint.config.js

@@ -30,7 +30,7 @@ module.exports = {
                 'opacity',
                 'keyframes'
             ],
-        'wechat-work/comments-in-header': true, // 文件头部需要有注释 @date 和 @author
+        'wechat-work/comments-in-header': false, // 文件头部需要有注释 @date 和 @author，QMUI Web 源码中使用的是 SassDoc 的注释格式，不被识别，因此设置为 false
         'wechat-work/selector-namespace-follow-filename': [true, {
             'fileDirWhiteList': ['widget', 'qmui'],
             'filenameWhitelist': []