<Tabs />

1import React from "react";
2import "./Styles/_tabs.scss";
3
4export default function Tabs({ children }) {
5    return (
6        <div className="tabs">
7            <ul>{children}</ul>
8        </div>
9    )
10}
11
12export { TabItem } from "./Components/TabItem";

1$properties: (
2      // center, right, full
3      alignment: "full"
4);
5
6.tabs {
7      display: flex;
8      align-items: stretch;
9      font-size: 1.25rem;
10      justify-content: space-between;
11      overflow: hidden;
12      overflow-x: auto;
13      white-space: nowrap;
14
15      ul {
16            display: flex;
17            align-items: center;
18            justify-content: flex-start;
19            flex-grow: 1;
20            flex-shrink: 0;
21            border-bottom-color: #dbdbdb;
22            border-bottom-style: solid;
23            border-bottom-width: 1px;
24            margin: 0;
25            padding: 0;
26            list-style: none;
27
28            @if map-get($properties, alignment) == "center" {
29                  & {
30                        justify-content: center;
31                  }
32            } @else if map-get($properties, alignment) == "right" {
33                  & {
34                        justify-content: flex-end;
35                  }
36            }
37      }
38
39      li {
40            display: block;
41
42            &.is-active {
43                  a {
44                        background-color: #fff;
45                        border-color: #dbdbdb;
46                        border-bottom-color: transparent;
47                        color: #485fc7;
48                  }
49            }
50
51            @if map-get($properties, alignment) == "full" {
52                  & {
53                        flex-grow: 1;
54                        flex-shrink: 0;
55                  }
56            }
57      }
58      a {
59            display: flex;
60            justify-content: center;
61            align-items: center;
62            color: #4a4a4a;
63            margin-bottom: -1px;
64            padding: 0.5em 1em;
65            vertical-align: top;
66            text-decoration: none;
67            cursor: pointer;
68            border: 1px solid transparent;
69            border-radius: 0.375em 0.375em 0 0;
70
71            &:hover {
72                  background-color: #f5f5f5;
73                  border-bottom-color: #dbdbdb;
74            }
75      }
76}

1