зеркало из https://github.com/github/docs.git
Update sidebar to use primer backgrounds (#18818)
See https://github.com/github/docs-team/issues/546#issuecomment-820647057
This commit is contained in:
Kevin Heis
GitHub
Родитель
3263e0ab7a
Коммит
229ce4518f
|
|
@ -1,6 +1,6 @@
|
|||
{% if currentVersion != 'homepage' %}
|
||||
<li title="Home">
|
||||
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1">
|
||||
<a href="/{{currentLanguage}}" class="f6 pl-4 pr-5 ml-n1 pb-1 color-text-primary">
|
||||
<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>
|
||||
All products
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
title="{{product.name}}{% if product.external %} (External Site){% endif %}"
|
||||
class="sidebar-product"
|
||||
>
|
||||
<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">
|
||||
<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">
|
||||
{{ product.name }}
|
||||
{% if product.external %}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{% include all-products-link %}
|
||||
<li title="{{product.title}}" class="sidebar-product mb-2">
|
||||
{% unless page.hidden %}
|
||||
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4">{{ product.title }}</a>
|
||||
<a href="{{product.href}}" class="pl-4 pr-5 pb-1 f4 color-text-primary">{{ product.title }}</a>
|
||||
{% endunless %}
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
<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 %}">
|
||||
{% if category[1].shortTitle %}{% assign categoryTitle = category[1].shortTitle %}{% else %}{% assign categoryTitle = category[1].title %}{% endif %}
|
||||
{% if category[1].standalone %}
|
||||
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
|
||||
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
|
||||
{% else %}
|
||||
<details class="dropdown-withArrow details details-reset" {% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}open{% endif %}>
|
||||
<summary>
|
||||
<div class="d-flex flex-justify-between">
|
||||
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3">{{ categoryTitle }}</a>
|
||||
<a href="{{fullPathToCategory}}" class="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">{{ categoryTitle }}</a>
|
||||
{% if breadcrumbs.category.href == category[1].href or forloop.index < 4 %}
|
||||
<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>
|
||||
{% endif %}
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
{% if maptopic[1].shortTitle %}{% assign maptopicTitle = maptopic[1].shortTitle %}{% else %}{% assign maptopicTitle = maptopic[1].title %}{% endif %}
|
||||
|
||||
<li class="sidebar-maptopic {% if breadcrumbs.maptopic.href == maptopic[1].href %}active {% if currentPath == fullPathToMaptopic %}is-current-page{% endif %}{% endif %}">
|
||||
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2">{{ maptopicTitle }}</a>
|
||||
<a href="{{fullPathToMaptopic}}" class="pl-4 pr-5 py-2 color-text-primary">{{ maptopicTitle }}</a>
|
||||
<ul class="sidebar-articles my-2">
|
||||
{% for article in maptopic[1].articles %}
|
||||
{% unless article[1].hidden %}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
|
||||
|
||||
<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
|
||||
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
|
||||
<a href="{{fullPathToArticle}}" class="pl-6 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
{% capture fullPathToArticle %}{{article[1].href}}{% endcapture %}
|
||||
{% if article[1].shortTitle %}{% assign articleTitle = article[1].shortTitle %}{% else %}{% assign articleTitle = article[1].title %}{% endif %}
|
||||
<li class="sidebar-article {% if breadcrumbs.article.href == article[1].href %}active {% if currentPath == fullPathToArticle %}is-current-page{% endif %}{% endif %}">
|
||||
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %}">{{ articleTitle }}</a>
|
||||
<a href="{{fullPathToArticle}}" class="pl-4 pr-5 py-1{% if forloop.last %} pb-2{% endif %} color-text-primary">{{ articleTitle }}</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!-- product > category > maptopic > article -->
|
||||
<div class="sidebar d-none d-lg-block">
|
||||
<div class="sidebar d-none d-lg-block color-bg-tertiary">
|
||||
|
||||
<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">
|
||||
<a href="/{{ currentLanguage }}" class="color-text-inverse" aria-hidden="true" tabindex="-1">
|
||||
<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">
|
||||
<a href="/{{ currentLanguage }}" class="color-text-primary" aria-hidden="true" tabindex="-1">
|
||||
{% octicon "mark-github" height="32" %}
|
||||
</a>
|
||||
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-inverse no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
|
||||
<a href="/{{ currentLanguage }}" class="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto">{% data ui.header.github_docs %}</a>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.sidebar {
|
||||
width: 260px;
|
||||
background-color: var(--color-auto-blue-9);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-bottom: $spacer-5;
|
||||
|
|
@ -13,10 +12,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-background-color {
|
||||
background-color: var(--color-auto-blue-9);
|
||||
}
|
||||
|
||||
.sidebar-products > li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
|
@ -24,37 +19,22 @@
|
|||
.sidebar-products a,
|
||||
.sidebar-products .arrow {
|
||||
text-decoration: none;
|
||||
color: var(--color-auto-white);
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-auto-blue-3);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-category,
|
||||
.sidebar-product {
|
||||
> a,
|
||||
summary a {
|
||||
color: var(--color-auto-blue-2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-product,
|
||||
.sidebar-category,
|
||||
.sidebar-maptopic,
|
||||
.sidebar-article {
|
||||
&.active > a {
|
||||
}
|
||||
&.is-current-page > a {
|
||||
color: var(--color-auto-blue-3);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-category.active {
|
||||
background-color: var(--color-auto-blue-8);
|
||||
background-color: rgba(#959da5, 0.1); // --color-auto-gray-4
|
||||
// We can't do rgba(var(--color-auto-gray-4, 0.1) quite yet
|
||||
// as the browsers are still working on supporting that combination
|
||||
}
|
||||
|
||||
.sidebar-maptopic {
|
||||
|
|
@ -65,13 +45,13 @@
|
|||
position: absolute;
|
||||
left: $spacer-4;
|
||||
height: 100%;
|
||||
border-left: 1px solid var(--color-auto-blue-7);
|
||||
border-left: 1px solid var(--color-text-primary);
|
||||
width: 1px;
|
||||
top: 0;
|
||||
}
|
||||
&.active {
|
||||
&::before {
|
||||
border-left: 3px solid var(--color-auto-blue-7);
|
||||
border-left: 3px solid var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче