Fixes for #4697

Author: kkartunov

src/shared/components/Contentful/Tabs/Tabs.jsx

@@ -22,6 +22,7 @@ import zurichTheme from './themes/zurich.scss';
 import tabsGroup from './themes/tabsGroup.scss';
 import tabsGroupChildren from './themes/tabsGroupChildren.scss';
 import underlineTheme from './themes/underline.scss';
+import underlineDarkTheme from './themes/underline-dark.scss';
 import verticalTheme from './themes/vertical.scss';
 import pillsTheme from './themes/pills.scss';
 
@@ -31,6 +32,7 @@ export const TAB_THEMES = {
   'Tabs Group': tabsGroup,
   'Tabs Group Children': tabsGroupChildren,
   Underline: underlineTheme,
+  'Underline dark': underlineDarkTheme,
   Vertical: verticalTheme,
   Pills: pillsTheme,
 };

src/shared/components/Contentful/Tabs/themes/underline-dark.scss

@@ -0,0 +1,101 @@
+@import "~styles/mixins";
+
+$container-background-gray: #ebebeb;
+$text-color-black: #262628;
+$text-color-gray: #888894;
+$text-color-pannel: #4a4a4a;
+
+.container {
+  @include roboto-regular;
+
+  max-width: $screen-md;
+  margin: auto;
+}
+
+.tablist {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: row; /* Safari */
+  flex-direction: row;
+  -webkit-justify-content: center; /* Safari */
+  justify-content: center;
+  list-style-type: none;
+  border-bottom: 5px solid #fff;
+
+  @include xs-to-sm {
+    overflow-x: auto;
+    white-space: nowrap;
+    border: none;
+    margin-left: 16px;
+  }
+
+  @media (max-width: 425px) {
+    justify-content: space-between;
+  }
+}
+
+.tab {
+  text-align: center;
+  margin: 0 25px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 25px;
+  padding-bottom: 15px;
+  cursor: pointer;
+  margin-bottom: -5px;
+  position: relative;
+
+  @include xs-to-sm {
+    margin: 0;
+    padding-right: 36px;
+    border-bottom: 5px solid #fff;
+  }
+
+  &:hover,
+  &.selected {
+    &::after {
+      content: '';
+      border-radius: 1000vw;
+      background: #43d7b0;
+      height: 5px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      @include xs-to-sm {
+        width: calc(100% - 36px);
+        bottom: -5px;
+      }
+    }
+  }
+
+  p {
+    small {
+      color: #888894;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 25px;
+      text-align: left;
+    }
+
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.tabpannel {
+  display: none;
+}
+
+.selectedTabPanel {
+  display: block;
+
+  @include xs-to-sm {
+    padding: 0 15px;
+  }
+}

src/shared/components/Contentful/Tabs/themes/underline.scss

@@ -28,15 +28,18 @@ $text-color-pannel: #4a4a4a;
     overflow-x: auto;
     white-space: nowrap;
     border: none;
+    margin-left: 16px;
+  }
+
+  @media (max-width: 425px) {
     justify-content: space-between;
-    margin: 0 16px;
   }
 }
 
 .tab {
   text-align: center;
   margin: 0 25px;
-  color: $text-color-black;
+  color: #2a2a2a;
   font-size: 20px;
   font-weight: 400;
   line-height: 25px;
@@ -47,24 +50,28 @@ $text-color-pannel: #4a4a4a;
 
   @include xs-to-sm {
     margin: 0;
-    margin-right: 36px;
-
-    &:last-child {
-      margin-right: 0;
-    }
+    padding-right: 36px;
+    border-bottom: 5px solid #e9e9e9;
   }
 
   &:hover,
   &.selected {
     &::after {
       content: '';
-      border-radius: 2.5px;
+      border-radius: 1000vw;
       background: #43d7b0;
       height: 5px;
       width: 100%;
       position: absolute;
       bottom: 0;
       left: 0;
+      border-left: 1px solid #fff;
+      border-right: 1px solid #fff;
+
+      @include xs-to-sm {
+        width: calc(100% - 36px);
+        bottom: -5px;
+      }
     }
   }
 
@@ -89,4 +96,8 @@ $text-color-pannel: #4a4a4a;
 
 .selectedTabPanel {
   display: block;
+
+  @include xs-to-sm {
+    padding: 0 15px;
+  }
 }