/
boxedTab.js
55 lines (54 loc) · 1.84 KB
/
boxedTab.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const plugin = require("tailwindcss/plugin");
const theme = require("./theme");
module.exports = plugin.withOptions(
() => {
return ({ addComponents, theme }) => {
addComponents([
{
".boxed-tabs": {
"-webkit-overflow-scrolling": "touch",
"white-space": "nowrap",
overflow: "hidden",
overflowX: "auto",
display: "flex",
"justify-content": "flex-start",
"align-items": "center",
"[role=tablist]": {
margin: 0,
padding: 0,
display: "flex",
"justify-content": "flex-start",
"align-items": "center",
"flex-shrink": 0,
"flex-grow": 1,
"border-bottom": `1px solid ${theme("colors.gray.300")}`,
},
"[role=tab]": {
display: "block",
marginRight: `${theme("spacing.2")}`,
textDecoration: "none",
"justify-content": "space-between",
"align-items": "center",
"margin-bottom": "-1px",
"vertical-align": "top",
border: "1px solid transparent",
"border-radius": `${theme("borderRadius.md")} ${theme(
"borderRadius.md"
)} 0 0`,
padding: `${theme("spacing[rel1.5]")} ${theme("spacing.rel5")}`,
"&[aria-selected=true]": {
border: `1px solid ${theme("colors.gray.300")}`,
"background-color": `${theme("colors.white")}`,
"border-bottom-color": "transparent",
position: "relative",
paddingTop: theme("spacing.rel2"),
paddingBottom: theme("spacing[rel1.5]"),
},
},
},
},
]);
};
},
() => ({ theme })
);