mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add docs menu
This commit is contained in:
parent
e9dd9eb80e
commit
5ffedabb07
@ -249,7 +249,7 @@
|
||||
"path": "/documentation/components/tabs"
|
||||
}
|
||||
},
|
||||
"order": {
|
||||
"categories": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
|
@ -5,8 +5,9 @@ route: documentation
|
||||
|
||||
{% include navbar.html id="Documentation" %}
|
||||
|
||||
{% assign current_category = page.doc-tab %}
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign category_links = site.data.links.order[page.doc-tab] %}
|
||||
{% assign category_links = site.data.links.categories[current_category] %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if link_id == current_link_id %}
|
||||
@ -98,9 +99,38 @@ route: documentation
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% unless page.hide_carbon %}
|
||||
<nav class="bd-categories">
|
||||
{% for category in site.data.links.categories %}
|
||||
<div class="bd-category">
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
|
||||
{% endunless %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-toggle">
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<ul class="bd-category-list {% if category_id == current_category %}is-active{% endif %}">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -66,6 +66,44 @@ $main-spacing: 2.5rem
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
.bd-category
|
||||
a
|
||||
&:hover
|
||||
color: $link
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-category-header
|
||||
position: relative
|
||||
|
||||
.bd-category-toggle
|
||||
+overlay
|
||||
align-items: center
|
||||
color: $grey-light
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
.icon
|
||||
font-size: 0.75rem
|
||||
|
||||
.bd-category-name
|
||||
color: $text-strong
|
||||
position: relative
|
||||
|
||||
.bd-category-list
|
||||
display: none
|
||||
font-size: 0.875rem
|
||||
padding: 0.5rem
|
||||
li
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5em
|
||||
&.is-current
|
||||
a
|
||||
color: $link
|
||||
a
|
||||
color: $text-light
|
||||
&.is-active
|
||||
display: block
|
||||
|
||||
+touch
|
||||
.bd-lead,
|
||||
.bd-side
|
||||
@ -77,7 +115,7 @@ $main-spacing: 2.5rem
|
||||
.bd-side-background
|
||||
display: none
|
||||
|
||||
$sidebar-width: 16rem
|
||||
$sidebar-width: 14rem
|
||||
|
||||
+tablet
|
||||
.bd-duo
|
||||
|
@ -130,7 +130,7 @@
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
|
||||
.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
|
||||
.bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
|
||||
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
|
||||
bottom: 0;
|
||||
@ -9570,6 +9570,56 @@ label.panel-block:hover {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bd-category a:hover {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.bd-category:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.bd-category-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-category-toggle {
|
||||
align-items: center;
|
||||
color: #b5b5b5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.bd-category-toggle .icon {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.bd-category-name {
|
||||
color: #363636;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-category-list {
|
||||
display: none;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.bd-category-list li:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.bd-category-list li.is-current a {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.bd-category-list a {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.bd-category-list.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
.bd-lead,
|
||||
.bd-side {
|
||||
@ -9600,7 +9650,7 @@ label.panel-block:hover {
|
||||
display: flex;
|
||||
}
|
||||
.bd-side {
|
||||
flex: 0 0 calc(16rem + 1.5rem);
|
||||
flex: 0 0 calc(14rem + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user