Vertical tabs theme #3974

Author: kkartunov

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

@@ -22,13 +22,15 @@ 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 verticalTheme from './themes/vertical.scss';
 
 export const TAB_THEMES = {
   Default: defaultTheme,
   Zurich: zurichTheme,
   'Tabs Group': tabsGroup,
   'Tabs Group Children': tabsGroupChildren,
   Underline: underlineTheme,
+  Vertical: verticalTheme,
 };
 
 export default class TabsItemsLoader extends Component {

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

@@ -0,0 +1,70 @@
+@import '~styles/mixins';
+
+$text-color-black: #262628;
+$selected-color: #43d7b0;
+$gray-border-color: #e9e9e9;
+
+.container {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+}
+
+.tablist {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: column; /* Safari */
+  flex-direction: column;
+  list-style-type: none;
+  border-right: 5px solid $gray-border-color;
+  margin-right: 58px;
+  padding: 7px 0;
+}
+
+.tab {
+  text-align: left;
+  color: $text-color-black;
+  font-size: 16px;
+  line-height: 45px;
+  font-weight: 400;
+  cursor: pointer;
+  padding-right: 30px;
+
+  &:hover,
+  &.selected {
+    font-weight: 700;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 5px;
+      background: $selected-color;
+      height: 100%;
+      right: -5px;
+      top: 0;
+      display: flex;
+      position: absolute;
+      border-radius: 5px;
+      border-top: 1px solid white;
+      border-bottom: 1px solid white;
+    }
+  }
+
+  p {
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.tabpannel {
+  display: none;
+}
+
+.selectedTabPanel {
+  display: block;
+  flex: 1;
+}