update themes and style

Author: dev-javascript

style/react-dyn-tabs.css

@@ -1,5 +1,6 @@
 .rc-dyn-tabs-panellist {
   padding: 6px 12px;
+  position: relative;
 }
 .rc-dyn-tabs-panellist .rc-dyn-tabs-panel {
   display: none;
@@ -34,7 +35,7 @@
   float: none;
   position: relative;
 }
-.rc-dyn-tabs-tablist .rc-dyn-tabs-tab {
+.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab {
   display: list-item;
   list-style: none;
   text-align: center;
@@ -44,7 +45,7 @@
   pointer-events: visible;
   opacity: 1;
 }
-.rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
+.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title {
   position: relative;
   display: flex;
   align-items: center;
@@ -57,15 +58,15 @@
   outline: none;
   justify-content: center;
 }
-.rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-title > .rc-dyn-tabs-icon {
+.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-title > .rc-dyn-tabs-icon {
   display: inline-block;
 }
-.rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
+.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab > .rc-dyn-tabs-close {
   position: absolute;
   top: 1px;
   cursor: pointer;
 }
-.rc-dyn-tabs-tablist .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
+.rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
   pointer-events: none;
   opacity: 0.7;
 }
@@ -99,9 +100,9 @@
 }
 
 .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
-  width: 200px;
-  float: left;
+  width: 12em;
   height: 100%;
+  float: left;
 }
 .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical > .rc-dyn-tabs-tab {
   float: none;
@@ -115,3 +116,7 @@
   transform: translateY(-50%);
   line-height: 0px;
 }
+
+.rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
+  float: right;
+}

style/react-dyn-tabs.min.css

@@ -1,7 +1,7 @@
 @mixin main {
   .rc-dyn-tabs-panellist {
     padding: 6px 12px;
-
+    position: relative;
     .rc-dyn-tabs-panel {
       display: none;
     }
@@ -41,7 +41,7 @@
     float: none;
     position: relative;
 
-    .rc-dyn-tabs-tab {
+    & > .rc-dyn-tabs-tab {
       display: list-item;
       list-style: none;
       text-align: center;
@@ -76,7 +76,7 @@
       }
     }
 
-    .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
+    & > .rc-dyn-tabs-tab.rc-dyn-tabs-disable {
       pointer-events: none;
       opacity: 0.7;
     }
@@ -121,10 +121,9 @@
   }
 
   .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
-    width: 200px;
-    float: left;
+    width: 12em;
     height: 100%;
-
+    float: left;
     & > .rc-dyn-tabs-tab {
       float: none;
 
@@ -140,4 +139,7 @@
       }
     }
   }
+  .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
+    float: right;
+  }
 }

style/scss/modules/_react-dyn-tabs.scss

@@ -21,6 +21,7 @@
   border-color: transparent;
   background-color: transparent;
   padding: 0.5rem 1rem;
+  min-width: 100px;
   transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
 }
 .rc-dyn-tabs-tablist .rc-dyn-tabs-tab > .rc-dyn-tabs-title:hover {
@@ -36,6 +37,10 @@
   background-color: #fff;
 }
 
+.rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
+  flex-direction: row-reverse;
+}
+
 .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
   flex-direction: column;
   border-width: 0px 1px 0px 0px;

themes/react-dyn-tabs-bootstrap.css

@@ -27,6 +27,7 @@
   border-style: solid;
   border-width: 1px 1px 0px 1px;
   color: #416da3;
+  min-width: 100px;
 }
 .rc-dyn-tabs-tablist > .rc-dyn-tabs-tab.rc-dyn-tabs-selected > .rc-dyn-tabs-title {
   background-image: none;

themes/react-dyn-tabs-bootstrap.min.css

@@ -75,6 +75,7 @@ $background-color: #fff;
         @include tabBorder;
         background-color: transparent;
         padding: 0.5rem 1rem;
+        min-width: 100px;
         transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
       }
 
@@ -93,7 +94,9 @@ $background-color: #fff;
       }
     }
   }
-
+  .rc-dyn-tabs-tablist.rc-dyn-tabs-rtl {
+    flex-direction: row-reverse;
+  }
   .rc-dyn-tabs-tablist.rc-dyn-tabs-vertical {
     flex-direction: column;
     @include tablistBorder($isVertical: true);

themes/react-dyn-tabs-classic.css

@@ -89,6 +89,7 @@ $border-radius-value: 5px;
         border-style: solid;
         border-width: 1px 1px 0px 1px;
         color: $tab-color;
+        min-width: 100px;
       }
       &.rc-dyn-tabs-selected {
         & > .rc-dyn-tabs-title {