update main style :

dev-javascript · dev-javascript · commit c166842082e5 · 2023-07-18T00:12:34.000+03:30
.rc-dyn-tabs-title should fill its space and fix position of
tab's close icon
diff --git a/style/react-dyn-tabs.css b/style/react-dyn-tabs.css
@@ -65,9 +65,13 @@
   cursor: pointer;
   top: 50%;
   transform: translateY(-50%);
-  line-height: 0px;
   right: 4px;
   left: auto;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  right: 10px;
+  width: 10px;
 }
 .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title {
   position: relative;
@@ -82,6 +86,7 @@
   outline: none;
   justify-content: center;
   flex-direction: row-reverse;
+  flex: 1;
 }
 .rc-dyn-tabs-tablist-view .rc-dyn-tabs-showmorebutton {
   display: inline-flex;
diff --git a/style/scss/modules/_react-dyn-tabs.scss b/style/scss/modules/_react-dyn-tabs.scss
@@ -64,9 +64,13 @@
       cursor: pointer;
       top: 50%;
       transform: translateY(-50%);
-      line-height: 0px;
       right: 4px;
       left: auto;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      right: 10px;
+      width: 10px;
     }
     .rc-dyn-tabs-title {
       position: relative;
@@ -81,6 +85,7 @@
       outline: none;
       justify-content: center;
       flex-direction: row-reverse;
+      flex: 1;
     }
     .rc-dyn-tabs-showmorebutton {
       display: inline-flex;
diff --git a/themes/react-dyn-tabs-basic.css b/themes/react-dyn-tabs-basic.css
@@ -16,12 +16,6 @@
 .rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:hover {
   background-color: #ddd;
 }
-.rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {
-  top: 50%;
-  transform: translateY(-50%);
-  line-height: 0px;
-  right: 10px;
-}
 .rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {
   background-color: #ccc;
 }
diff --git a/themes/scss/modules/_react-dyn-tabs-basic.scss b/themes/scss/modules/_react-dyn-tabs-basic.scss
@@ -21,12 +21,6 @@ $selected-tab-background-color: #ccc;
     .rc-dyn-tabs-title:active:hover {
       background-color: $actived-tab-background-color;
     }
-    .rc-dyn-tabs-close {
-      top: 50%;
-      transform: translateY(-50%);
-      line-height: 0px;
-      right: 10px;
-    }
     .rc-dyn-tabs-selected .rc-dyn-tabs-title {
       background-color: $selected-tab-background-color;
     }

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,6 @@`
`16`	`16`	`.rc-dyn-tabs-tablist-view .rc-dyn-tabs-title:active:hover {`
`17`	`17`	`background-color: #ddd;`
`18`	`18`	`}`
`19`		`-.rc-dyn-tabs-tablist-view .rc-dyn-tabs-close {`
`20`		`- top: 50%;`
`21`		`- transform: translateY(-50%);`
`22`		`- line-height: 0px;`
`23`		`- right: 10px;`
`24`		`-}`
`25`	`19`	`.rc-dyn-tabs-tablist-view .rc-dyn-tabs-selected .rc-dyn-tabs-title {`
`26`	`20`	`background-color: #ccc;`
`27`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,12 +21,6 @@ $selected-tab-background-color: #ccc;`
`21`	`21`	`.rc-dyn-tabs-title:active:hover {`
`22`	`22`	`background-color: $actived-tab-background-color;`
`23`	`23`	`}`
`24`		`- .rc-dyn-tabs-close {`
`25`		`- top: 50%;`
`26`		`- transform: translateY(-50%);`
`27`		`- line-height: 0px;`
`28`		`- right: 10px;`
`29`		`- }`
`30`	`24`	`.rc-dyn-tabs-selected .rc-dyn-tabs-title {`
`31`	`25`	`background-color: $selected-tab-background-color;`
`32`	`26`	`}`