Skip to content

Commit fd82717

Browse files
danezdanez
committed
Add more style options
1 parent 577e222 commit fd82717

File tree

3 files changed

+106
-2
lines changed

3 files changed

+106
-2
lines changed

‎style/react-tabs.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
border-color: #aaa;
2121
color: black;
2222
border-radius: 5px 5px 0 0;
23-
-moz-border-radius: 5px 5px 0 0;
24-
-webkit-border-radius: 5px 5px 0 0;
2523
}
2624

2725
.ReactTabs__TabPanel {

‎style/react-tabs.less

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.ReactTabs {
2+
&__TabList {
3+
border-bottom: 1px solid #aaa;
4+
margin: 0 0 10px;
5+
padding: 0;
6+
}
7+
8+
&__Tab {
9+
display: inline-block;
10+
border: 1px solid transparent;
11+
border-bottom: none;
12+
bottom: -1px;
13+
position: relative;
14+
list-style: none;
15+
padding: 6px 12px;
16+
cursor: pointer;
17+
18+
&--selected {
19+
background: #fff;
20+
border-color: #aaa;
21+
color: black;
22+
border-radius: 5px 5px 0 0;
23+
}
24+
&:focus {
25+
box-shadow: 0 0 5px hsl(208, 99%, 50%);
26+
border-color: hsl(208, 99%, 50%);
27+
outline: none;
28+
29+
&:after {
30+
content: "";
31+
position: absolute;
32+
height: 5px;
33+
left: -4px;
34+
right: -4px;
35+
bottom: -5px;
36+
background: #fff;
37+
}
38+
}
39+
}
40+
41+
&__TabPanel {
42+
display: none;
43+
44+
&--selected {
45+
display: block;
46+
}
47+
48+
&--disabled {
49+
color: GrayText;
50+
cursor: default;
51+
}
52+
}
53+
}

‎style/react-tabs.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.ReactTabs {
2+
&__TabList {
3+
border-bottom: 1px solid #aaa;
4+
margin: 0 0 10px;
5+
padding: 0;
6+
}
7+
8+
&__Tab {
9+
display: inline-block;
10+
border: 1px solid transparent;
11+
border-bottom: none;
12+
bottom: -1px;
13+
position: relative;
14+
list-style: none;
15+
padding: 6px 12px;
16+
cursor: pointer;
17+
18+
&--selected {
19+
background: #fff;
20+
border-color: #aaa;
21+
color: black;
22+
border-radius: 5px 5px 0 0;
23+
}
24+
&:focus {
25+
box-shadow: 0 0 5px hsl(208, 99%, 50%);
26+
border-color: hsl(208, 99%, 50%);
27+
outline: none;
28+
29+
&:after {
30+
content: "";
31+
position: absolute;
32+
height: 5px;
33+
left: -4px;
34+
right: -4px;
35+
bottom: -5px;
36+
background: #fff;
37+
}
38+
}
39+
}
40+
41+
&__TabPanel {
42+
display: none;
43+
44+
&--selected {
45+
display: block;
46+
}
47+
48+
&--disabled {
49+
color: GrayText;
50+
cursor: default;
51+
}
52+
}
53+
}

0 commit comments

Comments
 (0)