Skip to content

Commit 0461182

Browse files
chasenleharachasenlehara
authored
Merge pull request #269 from canjs/bit-docs-197-nav-css
Updates to On This Page CSS
2 parents 741a10b + 56c866a commit 0461182

File tree

2 files changed

+94
-96
lines changed

2 files changed

+94
-96
lines changed

‎static/breadcrumb.less‎

Lines changed: 88 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
.breadcrumb {
2-
display: none;
3-
@media screen and (min-width: @breakpoint) {
2+
display: none;
3+
@media screen and (min-width: @breakpoint) {
44
height: 48px;
5-
display: block;
6-
padding-left: @gutter*2;
7-
background: @code-color;
8-
cursor: pointer;
9-
color: lighten(@gray, 10%);
10-
.breadcrumb-dropdown {
5+
display: block;
6+
padding-left: @gutter*2;
7+
background: @code-color;
8+
color: lighten(@gray, 10%);
9+
.breadcrumb-dropdown {
1110
display: none;
12-
padding: @gutter @gutter/4;
1311
position: relative;
1412
color: lighten(@gray, 10%);
1513
a {
16-
padding-left: @gutter/4;
1714
cursor: pointer;
1815
color: white;
1916
font-weight: 700;
2017
}
2118
&:hover {
22-
.on-this-page {
23-
display: flex;
24-
li {
25-
flex-grow: 1;
26-
flex-basis: auto;
27-
}
28-
}
29-
}
30-
&::after {
19+
color: @link-color;
20+
a {
21+
background-color: white;
22+
color: @link-color !important;
23+
}
24+
.on-this-page {
25+
display: flex;
26+
li {
27+
flex-grow: 1;
28+
flex-basis: auto;
29+
}
30+
}
31+
}
32+
&::after {
3133
display: inline-block;
3234
width: 16px;
3335
height: 16px;
@@ -36,85 +38,78 @@
3638
background-image: url(img/down_white.svg);
3739
background-size: cover;
3840
background-repeat: no-repeat;
39-
}
40-
}
41-
li {
41+
}
42+
}
43+
li {
4244
display: inline-block;
4345
list-style: none;
44-
color: @link-color;
4546
padding: @gutter @gutter/4;
46-
a {
47-
color: white;
48-
font-size: 14px;
49-
code {
50-
background: none;
51-
line-height: 14px;
52-
}
53-
}
54-
}
55-
}
47+
a {
48+
color: white;
49+
font-size: 14px;
50+
padding: @gutter;
51+
code {
52+
background: none;
53+
line-height: 14px;
54+
}
55+
}
56+
a:hover {
57+
background-color: white;
58+
color: @link-color !important;
59+
text-decoration: none;
60+
}
61+
.on-this-page a {
62+
padding: @gutter/4 0;
63+
}
64+
}
65+
}
5666
}
5767

5868
.on-this-page {
59-
width: 100%;
60-
font-size: 14px;
61-
margin-top:@gutter/2;
62-
margin-bottom: @gutter !important;
63-
background: #fff;
64-
list-style: none;
65-
line-height: 1.5em;
66-
a {
67-
color: @link-color !important;
68-
}
69-
@media screen and (min-width: @breakpoint) {
70-
padding: @gutter;
71-
margin: 0;
72-
position: fixed;
73-
.box-shadow;
74-
z-index: 15;
75-
cursor: pointer;
76-
display: none;
77-
margin-top: 15px;
78-
width: auto;
79-
flex-direction: column;
80-
flex-wrap: nowrap;
81-
li {
82-
padding: 0px;
83-
margin: 0px;
84-
code {
85-
background: none;
86-
font-weight: 600;
87-
padding: 0;
88-
}
89-
a {
90-
width: auto;
91-
padding: 0px;
92-
margin: 0px;
93-
}
94-
}
95-
li:hover {
96-
text-decoration: underline;
97-
}
98-
li .current {
99-
text-decoration: underline;
100-
font-weight: bold;
101-
}
102-
&::before {
103-
content: '';
104-
width:10px;
105-
height: 10px;
106-
background: #fff;
107-
position: absolute;
108-
top:-4px;
109-
left: @gutter;
110-
-webkit-transform: rotate(-45deg);
111-
-moz-transform: rotate(-45deg);
112-
-o-transform: rotate(-45deg);
113-
-ms-transform: rotate(-45deg);
114-
transform: rotate(-45deg);
115-
z-index: 16;
116-
}
117-
}
69+
width: 100%;
70+
font-size: 14px;
71+
margin-top:@gutter/2;
72+
margin-bottom: @gutter !important;
73+
background: #fff;
74+
list-style: none;
75+
line-height: 1.5em;
76+
a {
77+
color: @link-color !important;
78+
}
79+
@media screen and (min-width: @breakpoint) {
80+
padding: @gutter;
81+
margin: 0;
82+
position: fixed;
83+
.box-shadow;
84+
z-index: 15;
85+
cursor: pointer;
86+
display: none;
87+
margin-top: 15px;
88+
width: auto;
89+
flex-direction: column;
90+
flex-wrap: nowrap;
91+
li {
92+
padding: 0px;
93+
margin: 0px;
94+
code {
95+
background: none;
96+
font-weight: 600;
97+
padding: 0;
98+
}
99+
a {
100+
width: auto;
101+
padding: 0px;
102+
margin: 0px;
103+
}
104+
}
105+
li:hover {
106+
text-decoration: underline;
107+
}
108+
li .current {
109+
text-decoration: underline;
110+
font-weight: bold;
111+
}
112+
}
118113
}
119114

120115
.nav-toggle {
@@ -138,5 +133,5 @@
138133
}
139134

140135
.on-this-page:empty{
141-
visibility: hidden;
136+
visibility: hidden;
142137
}

‎templates/breadcrumb.mustache‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<div class="breadcrumb">
22
{{#each (getLinkableParents)}}
3-
<li><a href="{{urlTo name}}">{{getShortTitle .}}</a></li> /
3+
<li><a href="{{urlTo name}}">{{getShortTitle .}}</a></li>
4+
<li> / </li>
45
{{/each}}
56
{{#with (getCurrent)}}
67
<li><a href="{{urlTo name}}">{{getShortTitle .}}</a></li>
78
{{/with}}
8-
<li class="breadcrumb-dropdown">/ <a> On this page</a>
9-
<ul class="on-this-page"></ul>
9+
<li class="breadcrumb-dropdown">
10+
/
11+
<a> On this page</a>
12+
<ul class="on-this-page"></ul>
1013
</li>
1114
<div class="nav-toggle" title="Back to top"></div>
1215
</div>

0 commit comments

Comments
 (0)