[Gatsby] Installation tabs design (#10989)
Joe Critchley committed
Sep 30, 2017 at 15:53 UTC
b43574067e3bf9bfbf9fd772bd82a010b8c88dda
1 file changed
+11
-11
docs/docs/installation.md
+11
-11
@@ -27,13 +27,16 @@ React is flexible and can be used in a variety of projects. You can create new a
27
top: 1px;
28
padding: 10px;
29
margin: 0px 2px 0px 2px;
30
- border: 1px solid #046E8B;
30
border-bottom-color: transparent;
31
border-radius: 3px 3px 0px 0px;
33
- color: #046E8B;
32
+ color: #373940;
33
background-color: transparent;
34
font-size: 0.99em;
35
cursor: pointer;
36
+ opacity: 0.5;
37
+ }
38
+ .toggler li:active {
39
+ opacity: 1;
40
}
41
.toggler li:first-child {
42
margin-left: 0;
@@ -45,33 +48,30 @@ React is flexible and can be used in a variety of projects. You can create new a
48
display: inline-block;
49
list-style-type: none;
50
margin: 0;
48
- border-bottom: 1px solid #046E8B;
51
+ border-bottom: 1px solid #ececec;
52
cursor: default;
53
+ margin: 0 -15px;
54
+ padding: 0 15px;
55
}
56
@media screen and (max-width: 960px) {
57
.toggler li,
58
.toggler li:first-child,
59
.toggler li:last-child {
60
display: block;
56
- border-bottom-color: #046E8B;
61
border-radius: 3px;
62
margin: 2px 0px 2px 0px;
63
}
60
- .toggler ul {
61
- border-bottom: 0;
62
- }
64
}
65
.display-target-fiddle .toggler .button-fiddle:focus,
66
.display-target-newapp .toggler .button-newapp:focus,
67
.display-target-existingapp .toggler .button-existingapp:focus {
67
- border: solid 1px #61dafb;;
68
- color: white;
68
+ opacity: 1;
69
}
70
.display-target-fiddle .toggler .button-fiddle,
71
.display-target-newapp .toggler .button-newapp,
72
.display-target-existingapp .toggler .button-existingapp {
73
- background-color: #046E8B;
74
- color: white;
73
+ opacity: 1;
74
+ font-weight: 700;
75
}
76
section {
77
display: none;