Skip to content

Commit 5dbd403

Browse files
parloughparlough
authored
Utilize scss features in sidebar styles (#4010)
Separated from #3942. Tested manually by staging various sites.
1 parent 6c770bf commit 5dbd403

File tree

7 files changed

+120
-122
lines changed

7 files changed

+120
-122
lines changed

‎lib/resources/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pubspec.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ dev_dependencies:
2727
dart_style: ^3.0.0
2828
lints: ^5.0.0
2929
matcher: ^0.12.15
30-
sass: ^1.85.0
30+
sass: ^1.85.1
3131
test: ^1.24.2
3232
test_descriptor: ^2.0.1
3333
test_process: ^2.0.3

‎web/sig.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
FBB2C1241F0FD138D012004E4AA98F0E
1+
B33E364DD554BA379AE780C5C4237B34

‎web/styles/_breadcrumbs.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,3 @@ ol.breadcrumbs li a {
6262
.self-crumb {
6363
color: var(--main-h-text);
6464
}
65-
66-
.self-name {
67-
color: #555;
68-
display: none;
69-
}

‎web/styles/_content.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ a {
1313
text-decoration: none;
1414
}
1515

16+
button {
17+
padding: 0;
18+
}
19+
1620
section {
1721
/* Note that the generated HTML for pub packages may have `section` tags
1822
transformed into `div` tags. */

‎web/styles/_header.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,9 @@ header {
3131
height: 50px;
3232
margin-bottom: 25px;
3333
}
34+
35+
.self-name {
36+
color: #555;
37+
display: none;
38+
}
3439
}

‎web/styles/_sidebar.scss‎

Lines changed: 108 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,121 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5-
.sidebar ol {
6-
list-style: none;
7-
line-height: 22px;
8-
margin-top: 0;
9-
margin-bottom: 0;
10-
padding: 0 0 15px 0;
11-
}
5+
.sidebar {
6+
h5, ol li {
7+
text-overflow: ellipsis;
8+
overflow: hidden;
9+
padding: 3px 0 3px 3px;
10+
}
1211

13-
.sidebar h5 a,
14-
.sidebar h5 a:hover {
15-
color: var(--main-sidebar-color);
16-
}
12+
ol {
13+
list-style: none;
14+
line-height: 22px;
15+
margin-top: 0;
16+
margin-bottom: 0;
17+
padding: 0 0 15px 0;
18+
19+
li {
20+
&.section-title {
21+
font-size: 18px;
22+
font-weight: normal;
23+
text-transform: uppercase;
24+
padding-top: 25px;
25+
}
26+
27+
&.section-subtitle {
28+
font-weight: 400;
29+
text-transform: uppercase;
30+
31+
a {
32+
color: inherit;
33+
}
34+
}
35+
36+
&.section-subitem {
37+
margin-left: 12px;
38+
}
39+
40+
&:first-child {
41+
padding-top: 3px;
42+
margin-top: 0;
43+
}
44+
}
45+
}
1746

18-
.sidebar h5,
19-
.sidebar ol li {
20-
text-overflow: ellipsis;
21-
overflow: hidden;
22-
padding: 3px 0 3px 3px;
23-
}
47+
h5 {
48+
color: var(--main-sidebar-color);
49+
font-size: 18px;
50+
margin: 0 0 22px 0;
51+
padding-top: 0;
2452

25-
.sidebar h5 {
26-
color: var(--main-sidebar-color);
27-
font-size: 18px;
28-
margin: 0 0 22px 0;
29-
padding-top: 0;
53+
a, a:hover {
54+
color: var(--main-sidebar-color);
55+
}
56+
}
3057
}
3158

32-
.sidebar ol li.section-title {
33-
font-size: 18px;
34-
font-weight: normal;
35-
text-transform: uppercase;
36-
padding-top: 25px;
37-
}
59+
#sidenav-left-toggle {
60+
display: none;
61+
vertical-align: text-bottom;
62+
padding: 0;
63+
color: var(--main-icon-color);
64+
user-select: none;
65+
cursor: pointer;
3866

39-
.sidebar ol li.section-subtitle a {
40-
color: inherit;
41-
}
67+
&:hover {
68+
color: var(--main-hyperlinks-color);
69+
}
4270

43-
.sidebar ol li.section-subtitle {
44-
font-weight: 400;
45-
text-transform: uppercase;
71+
@media screen and (max-width: 320px) {
72+
margin-right: 10px;
73+
margin-left: 20px;
74+
}
4675
}
4776

48-
.sidebar ol li.section-subitem {
49-
margin-left: 12px;
50-
}
77+
#overlay-under-drawer {
78+
display: none;
5179

52-
.sidebar ol li:first-child {
53-
padding-top: 3px;
54-
margin-top: 0;
80+
opacity: 0.4;
81+
height: 100%;
82+
z-index: 1999;
83+
position: fixed;
84+
top: 0;
85+
left: 0;
86+
right: 0;
87+
bottom: 0;
88+
background-color: black;
5589
}
5690

57-
button {
58-
padding: 0;
59-
}
91+
.sidebar-offcanvas-left {
92+
flex: 0 1 230px;
93+
order: 1;
94+
overflow-y: scroll;
95+
padding: 20px 0 15px 30px;
96+
margin: 5px 20px 0 0;
6097

61-
#sidenav-left-toggle {
62-
display: none;
63-
vertical-align: text-bottom;
64-
padding: 0;
65-
color: var(--main-icon-color);
66-
user-select: none;
67-
cursor: pointer;
98+
h5 {
99+
margin-bottom: 10px;
100+
101+
&:last-of-type {
102+
border: 0;
103+
margin-bottom: 25px;
104+
}
105+
}
68106
}
69107

70-
#sidenav-left-toggle:hover {
71-
color: var(--main-hyperlinks-color);
108+
.sidebar-offcanvas-right {
109+
flex: 0 1 12em;
110+
order: 3;
111+
overflow-y: scroll;
112+
padding: 20px 15px 15px 15px;
113+
margin-top: 5px;
114+
margin-right: 20px;
115+
116+
// The right nav should disappear out of view when the window shrinks.
117+
@media screen and (max-width: 992px) {
118+
display: none;
119+
}
72120
}
73121

74122
/* left-nav disappears, and can transition in from the left */
@@ -84,15 +132,6 @@ button {
84132
}
85133

86134
#overlay-under-drawer.active {
87-
opacity: 0.4;
88-
height: 100%;
89-
z-index: 1999;
90-
position: fixed;
91-
top: 0;
92-
left: 0;
93-
right: 0;
94-
bottom: 0;
95-
background-color: black;
96135
display: block;
97136
}
98137

@@ -103,77 +142,32 @@ button {
103142
z-index: 2000;
104143
top: 0;
105144
width: 280px; /* works all the way down to an iphone 4 */
145+
// Set a max width for narrow layouts that accounts for margin.
146+
max-width: calc(100% - 20px);
106147
height: 90%;
107148
background-color: var(--main-bg-color);
108149
overflow-y: scroll; /* TODO: how to hide scroll bars? */
109150
padding: 10px;
110151
margin: 10px 10px;
111152
box-shadow: 5px 5px 5px 5px #444444;
153+
154+
&.active {
155+
// Enable animating the drawer into the page view.
156+
left: 0;
157+
}
112158
}
113159

114160
ol#sidebar-nav {
115161
font-size: 18px;
116162
white-space: pre-line;
117163
}
118164

119-
.sidebar-offcanvas-left.active {
120-
left: 0; /* this animates our drawer into the page */
121-
}
122-
123-
.self-name {
165+
header .self-name {
124166
display: inline-block;
125167
color: var(--main-hyperlinks-color);
126168
}
127169
}
128170

129-
.sidebar-offcanvas-left h5 {
130-
margin-bottom: 10px;
131-
}
132-
133-
.sidebar-offcanvas-left h5:last-of-type {
134-
border: 0;
135-
margin-bottom: 25px;
136-
}
137-
138-
/* the right nav disappears out of view when the window shrinks */
139-
@media screen and (max-width: 992px) {
140-
.sidebar-offcanvas-right {
141-
display: none;
142-
}
143-
}
144-
145-
#overlay-under-drawer {
146-
display: none;
147-
}
148-
149-
@media screen and (max-width: 320px) {
150-
#sidenav-left-toggle {
151-
margin-right: 10px;
152-
margin-left: 20px;
153-
}
154-
155-
.self-name {
156-
margin-right: 10px;
157-
}
158-
}
159-
160-
.sidebar-offcanvas-left {
161-
flex: 0 1 230px;
162-
order: 1;
163-
overflow-y: scroll;
164-
padding: 20px 0 15px 30px;
165-
margin: 5px 20px 0 0;
166-
}
167-
168-
.sidebar-offcanvas-right {
169-
flex: 0 1 12em;
170-
order: 3;
171-
overflow-y: scroll;
172-
padding: 20px 15px 15px 15px;
173-
margin-top: 5px;
174-
margin-right: 20px;
175-
}
176-
177171
::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0; background-color: #AAA; }
178172
::-webkit-scrollbar-button:hover{ background-color: #AAA; }
179173
::-webkit-scrollbar-thumb{ background-color: var(--main-scrollbar-color); }

0 commit comments

Comments
 (0)