Merge pull request #514 from Tencent/fix/reset/style

feat: 各个组件移除全局 reset 样式依赖
Tencent · Jun 27, 2022 · 15d602f · 15d602f
2 parents 3c8219f + e6cb8ab
commit 15d602f
Show file tree

Hide file tree

Showing 58 changed files with 922 additions and 63 deletions.
diff --git a/js/global-config/locale/ko_KR.ts b/js/global-config/locale/ko_KR.ts
@@ -23,7 +23,7 @@ export default {
     thisMonth: '이번 달',
     week: '하나,둘,셋,넷,다섯,여섯,하루',
     cellMonth: '1월,2월,3월,4월,5월,6월,7월,8월,9월,10월,11월,12월',
- },
+  },
   transfer: {
     title: '{checked} / {total} 안건',
     empty: '데이터 없음',

diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 /* Alert */
 .@{prefix}-alert {
+  .reset;
+
   display: flex;
   padding: @alert-padding;
   opacity: 1;

diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-anchor {
+  .reset;
+
   position: relative;
   background: @anchor-bg-color;
   width: @anchor-width-default;

diff --git a/style/web/components/avatar/_index.less b/style/web/components/avatar/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-avatar {
+  .reset;
+
   position: relative;
   display: inline-flex;
   background: @avatar-bg-color;

diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less
@@ -6,8 +6,12 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 // Badge
 .@{prefix}-badge {
+  .reset;
+
   position: relative;
   display: inline-block;
 

diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less
@@ -4,7 +4,10 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-breadcrumb {
+  .reset;
   .breadcrumb;
 
   &__separator {

diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less
@@ -4,6 +4,8 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .button-attr-color(@theme, @attr, @ghost: false) {
   &:hover {
     @{attr}: @@theme-hover;
@@ -26,6 +28,7 @@
 }
 
 .@{prefix}-button {
+  .reset;
   .button;
 
   .@{prefix}-button__text,

diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less
@@ -4,7 +4,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-calendar {
+  .reset;
+
   border: 1px solid @calendar-border-color;
   background-color: @calendar-bg;
 
@@ -275,6 +279,7 @@
   }
 
   &__panel {
+    box-sizing: border-box;
     width: 100%;
   }
 

diff --git a/style/web/components/card/_index.less b/style/web/components/card/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-card {
+  .reset;
+
   position: relative;
   box-sizing: border-box;
   border-radius: @card-border-radius;

diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less
@@ -8,7 +8,11 @@
 
 @import "../../mixins/_text.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-cascader {
+  .reset;
+
   position: relative;
   border: @cascader-border;
   border-radius: @border-radius;

diff --git a/style/web/components/checkbox/_index.less b/style/web/components/checkbox/_index.less
@@ -8,14 +8,20 @@
 
 @import "../../mixins/_layout.less";
 
+@import "../../mixins/_reset.less";
+
 // <name> 替换为组件名
 .@{checkbox-cls}-group {
+  .reset;
+
   display: inline-flex;
   flex-wrap: wrap;
   gap: @checkbox-group-gap;
 }
 
 .@{checkbox-cls} {
+  .reset;
+
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -39,11 +45,13 @@
     border: 1px solid @checkbox-border-color;
     border-radius: @checkbox-border-radius;
     background-color: @checkbox-input-color;
+    box-sizing: border-box;
 
     &::after {
       content: "";
       position: absolute;
       opacity: 0;
+      box-sizing: border-box;
     }
   }
 

diff --git a/style/web/components/collapse/_index.less b/style/web/components/collapse/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{collapse-cls} {
+  .reset;
+
   border: @collapse-border-size;
   border-bottom: 0;
   background: @bg-color-container;

diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less
@@ -6,6 +6,8 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-color-picker__panel {
   padding: 0;
   width: @color-picker-panel-width;
@@ -26,6 +28,8 @@
 }
 
 .@{prefix}-color-picker {
+  .reset;
+
   &__icon {
     width: @color-picker-icon-size;
     height: @color-picker-icon-size;
@@ -102,6 +106,7 @@
   background: white;
   color: @text-color-brand;
   padding: @color-picker-slider-thumb-padding;
+  box-sizing: border-box;
 
   &::before {
     content: "";
@@ -448,6 +453,7 @@
       position: relative;
       transform-origin: center;
       transition: all @anim-duration-base @anim-time-fn-easing;
+      box-sizing: border-box;
 
       // 暂时先不删，待react同步后再删除
       &__color {
@@ -457,6 +463,7 @@
         overflow: hidden;
         border: 1px solid @component-border;
         border-radius: 50%;
+        flex-shrink: 0;
       }
 
       // 暂时先不删，待react同步后再删除
@@ -484,6 +491,7 @@
       overflow: hidden;
       border: 1px solid @component-border;
       border-radius: 50%;
+      box-sizing: border-box;
     }
 
     &--inner {

diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less
@@ -6,7 +6,11 @@
 
 @import "./_mixin.less";
 
+@import "../../mixins/_reset.less";
+
 .@{prefix}-comment {
+  .reset;
+
   width: 100%;
   color: @comment-text-color-default;
 
@@ -70,6 +74,8 @@
     margin-top: @comment-actions-margin-top;
     display: flex;
     justify-content: flex-end;
+    list-style: none;
+    padding: 0;
 
     & > li {
       color: @comment-text-color-secondary;