[Docs: Installation] Fix tabs responsive layout - Resubmit (#9458)
* [Docs: Installation] Fix tabs responsive layout * Move tabs a pixel down * Remove left margin on first tab * Remove the long line * Fix mobile styles
Almero Steyn committed
Apr 20, 2017 at 12:49 UTC
a92128e7fb158f4aadc31e549ff96c4645cd9d83
1 file changed
+26
-4
docs/docs/installation.md
+26
-4
@@ -23,21 +23,43 @@ React is flexible and can be used in a variety of projects. You can create new a
23
<style>
24
.toggler li {
25
display: inline-block;
26
+ position: relative;
27
+ top: 1px;
28
padding: 10px;
27
- margin: 2px;
29
+ margin: 0px 2px 0px 2px;
30
border: 1px solid #05A5D1;
29
- border-radius: 3px;
31
+ border-bottom-color: transparent;
32
+ border-radius: 3px 3px 0px 0px;
33
color: #05A5D1;
34
background-color: transparent;
35
font-size: 0.99em;
36
cursor: pointer;
37
}
38
+ .toggler li:first-child {
39
+ margin-left: 0;
40
+ }
41
+ .toggler li:last-child {
42
+ margin-right: 0;
43
+ }
44
.toggler ul {
45
+ display: inline-block;
46
list-style-type: none;
47
margin: 0;
48
+ border-bottom: 1px solid #05A5D1;
49
+ cursor: default;
50
}
39
- .toggler li {
40
- display: inline;
51
+ @media screen and (max-width: 960px) {
52
+ .toggler li,
53
+ .toggler li:first-child,
54
+ .toggler li:last-child {
55
+ display: block;
56
+ border-bottom-color: #05A5D1;
57
+ border-radius: 3px;
58
+ margin: 2px 0px 2px 0px;
59
+ }
60
+ .toggler ul {
61
+ border-bottom: 0;
62
+ }
63
}
64
.display-target-fiddle .toggler .button-fiddle:focus,
65
.display-target-newapp .toggler .button-newapp:focus,