Skip to content

Commit 229ce45

Browse files
heiskrheiskr
authored
Update sidebar to use primer backgrounds (github#18818)
See github/docs-team#546 (comment)
1 parent 3263e0a commit 229ce45

File tree

5 files changed

+17
-37
lines changed

5 files changed

+17
-37
lines changed

‎includes/all-products-link.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% if currentVersion != 'homepage' %}
22
<li title="Home">
3-
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1">
3+
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1 color-text-primary">
44
<svg xmlns="http://www.w3.org/2000/svg" class="octicon" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.78033 12.5303C7.48744 12.8232 7.01256 12.8232 6.71967 12.5303L2.46967 8.28033C2.17678 7.98744 2.17678 7.51256 2.46967 7.21967L6.71967 2.96967C7.01256 2.67678 7.48744 2.67678 7.78033 2.96967C8.07322 3.26256 8.07322 3.73744 7.78033 4.03033L4.81066 7L12.25 7C12.6642 7 13 7.33579 13 7.75C13 8.16421 12.6642 8.5 12.25 8.5L4.81066 8.5L7.78033 11.4697C8.07322 11.7626 8.07322 12.2374 7.78033 12.5303Z"></path></svg>
55
All products
66
</a>

‎includes/sidebar-homepage.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
title="{{product.name}}{% if product.external %} (External Site){% endif %}"
77
class="sidebar-product"
88
>
9-
<a href="{% unless product.external %}/{{currentLanguage}}{% endunless %}{% if product.versions contains currentVersion %}/{{currentVersion}}/{{product.id}}{% else %}{{product.href}}{% endif %}" class="f4 pl-4 pr-5 py-2">
9+
<a href="{% unless product.external %}/{{currentLanguage}}{% endunless %}{% if product.versions contains currentVersion %}/{{currentVersion}}/{{product.id}}{% else %}{{product.href}}{% endif %}" class="f4 pl-4 pr-5 py-2 color-text-primary">
1010
{{ product.name }}
1111
{% if product.external %}
1212
<span class="ml-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="octicon" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 1C14.8163 1 14.8799 1.02634 14.9268 1.07322C14.9737 1.12011 15 1.1837 15 1.25V5.396C15.0001 5.44551 14.9855 5.49393 14.958 5.53513C14.9305 5.57632 14.8915 5.60843 14.8457 5.62739C14.8 5.64635 14.7497 5.6513 14.7011 5.64162C14.6525 5.63194 14.608 5.60805 14.573 5.573L13.03 4.03L8.53 8.53C8.38783 8.66248 8.19978 8.7346 8.00548 8.73118C7.81118 8.72775 7.62579 8.64903 7.48838 8.51162C7.35097 8.37421 7.27225 8.18882 7.26883 7.99452C7.2654 7.80022 7.33752 7.61217 7.47 7.47L11.97 2.97L10.427 1.427C10.3919 1.39204 10.3681 1.34745 10.3584 1.2989C10.3487 1.25034 10.3536 1.20001 10.3726 1.15427C10.3916 1.10853 10.4237 1.06945 10.4649 1.04199C10.5061 1.01453 10.5545 0.999912 10.604 1H14.75ZM2.75 2C2.28587 2 1.84075 2.18437 1.51256 2.51256C1.18437 2.84075 1 3.28587 1 3.75V13.25C1 14.216 1.784 15 2.75 15H12.25C12.7141 15 13.1592 14.8156 13.4874 14.4874C13.8156 14.1592 14 13.7141 14 13.25V9.75C14 9.55109 13.921 9.36032 13.7803 9.21967C13.6397 9.07902 13.4489 9 13.25 9C13.0511 9 12.8603 9.07902 12.7197 9.21967C12.579 9.36032 12.5 9.55109 12.5 9.75V13.25C12.5 13.3163 12.4737 13.3799 12.4268 13.4268C12.3799 13.4737 12.3163 13.5 12.25 13.5H2.75C2.6837 13.5 2.62011 13.4737 2.57322 13.4268C2.52634 13.3799 2.5 13.3163 2.5 13.25V3.75C2.5 3.6837 2.52634 3.62011 2.57322 3.57322C2.62011 3.52634 2.6837 3.5 2.75 3.5H6.25C6.44891 3.5 6.63968 3.42098 6.78033 3.28033C6.92098 3.13968 7 2.94891 7 2.75C7 2.55109 6.92098 2.36032 6.78033 2.21967C6.63968 2.07902 6.44891 2 6.25 2H2.75Z"></path></svg></span>

‎includes/sidebar-specific-product.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{% include all-products-link %}
1111
<li title="{{product.title}}" class="sidebar-product mb-2">
1212
{% unless page.hidden %}
13-
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4">{{ product.title }}</a>
13+
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4 color-text-primary">{{ product.title }}</a>
1414
{% endunless %}
1515
</li>
1616
<li>
@@ -21,12 +21,12 @@
2121
<li class="sidebar-category py-1 {% if breadcrumbs.category.href == category[1].href %}active {% if currentPath == fullPathToCategory %}is-current-page {% endif %}{% endif %}{% if category[1].standalone %}standalone-category{% endif %}">
2222
{% if category[1].shortTitle %}{% assign categoryTitle = category[1].shortTitle %}{% else %}{% assign categoryTitle = category[1].title %}{% endif %}
2323
{% if category[1].standalone %}
24-
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
24+
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
2525
{% else %}
2626
<details class="dropdown-withArrow details details-reset" {% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}open{% endif %}>
2727
<summary>
2828
<div class="d-flex flex-justify-between">
29-
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
29+
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
3030
{% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}
3131
<svg xmlns="http://www.w3.org/2000/svg" class="octicon flex-shrink-0 arrow mr-3" style="margin-top:7px" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></svg>
3232
{% endif %}
@@ -43,15 +43,15 @@
4343
{% if maptopic[1].shortTitle %}{% assign maptopicTitle = maptopic[1].shortTitle %}{% else %}{% assign maptopicTitle = maptopic[1].title %}{% endif %}
4444

4545
<li class="sidebar-maptopic {% if breadcrumbs.maptopic.href == maptopic[1].href %}active {% if currentPath == fullPathToMaptopic %}is-current-page{% endif %}{% endif %}">
46-
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2">{{ maptopicTitle }}</a>
46+
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2 color-text-primary">{{ maptopicTitle }}</a>
4747
<ul class="sidebar-articles my-2">
4848
{% for article in maptopic[1].articles %}
4949
{% unless article[1].hidden %}
5050
{% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
5151
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
5252

5353
<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
54-
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
54+
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
5555
</li>
5656
{% endunless %}
5757
{% endfor %}
@@ -68,7 +68,7 @@
6868
{% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
6969
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
7070
<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
71-
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
71+
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
7272
</li>
7373
{% endunless %}
7474
{% endfor %}

‎includes/sidebar.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!-- product > category > maptopic > article -->
2-
<div class="sidebar d-none d-lg-block">
2+
<div class="sidebar d-none d-lg-block color-bg-tertiary">
33

4-
<div class="d-flex flex-items-center p-4 position-sticky top-0 sidebar-background-color" style="z-index: 3;" id="github-logo" role="banner">
5-
<a href="/{{ currentLanguage }}" class="color-text-inverse" aria-hidden="true" tabindex="-1">
4+
<div class="d-flex flex-items-center p-4 position-sticky top-0 color-bg-tertiary" style="z-index: 3;" id="github-logo" role="banner">
5+
<a href="/{{ currentLanguage }}" class="color-text-primary" aria-hidden="true" tabindex="-1">
66
{% octicon "mark-github" height="32" %}
77
</a>
8-
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-inverse no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
8+
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
99
</div>
1010

1111
<nav>

‎stylesheets/sidebar.scss

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.sidebar {
22
width: 260px;
3-
background-color: var(--color-auto-blue-9);
43
position: sticky;
54
top: 0;
65
padding-bottom: $spacer-5;
@@ -13,48 +12,29 @@
1312
}
1413
}
1514

16-
.sidebar-background-color {
17-
background-color: var(--color-auto-blue-9);
18-
}
19-
2015
.sidebar-products > li {
2116
margin: 4px 0;
2217
}
2318

2419
.sidebar-products a,
2520
.sidebar-products .arrow {
2621
text-decoration: none;
27-
color: var(--color-auto-white);
2822
display: block;
2923
line-height: 1.4;
30-
31-
&:hover {
32-
color: var(--color-auto-blue-3);
33-
}
3424
}
3525

3626
.sidebar-category,
3727
.sidebar-product {
3828
> a,
3929
summary a {
40-
color: var(--color-auto-blue-2);
4130
opacity: 0.8;
4231
}
4332
}
4433

45-
.sidebar-product,
46-
.sidebar-category,
47-
.sidebar-maptopic,
48-
.sidebar-article {
49-
&.active > a {
50-
}
51-
&.is-current-page > a {
52-
color: var(--color-auto-blue-3);
53-
}
54-
}
55-
5634
.sidebar-category.active {
57-
background-color: var(--color-auto-blue-8);
35+
background-color: rgba(#959da5, 0.1); // --color-auto-gray-4
36+
// We can't do rgba(var(--color-auto-gray-4, 0.1) quite yet
37+
// as the browsers are still working on supporting that combination
5838
}
5939

6040
.sidebar-maptopic {
@@ -65,13 +45,13 @@
6545
position: absolute;
6646
left: $spacer-4;
6747
height: 100%;
68-
border-left: 1px solid var(--color-auto-blue-7);
48+
border-left: 1px solid var(--color-text-primary);
6949
width: 1px;
7050
top: 0;
7151
}
7252
&.active {
7353
&::before {
74-
border-left: 3px solid var(--color-auto-blue-7);
54+
border-left: 3px solid var(--color-text-primary);
7555
}
7656
}
7757
}

0 commit comments

Comments
 (0)