library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add docs menu

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 17:59:04 +01:00
parent e9dd9eb80e
commit 5ffedabb07
4 changed files with 125 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_data/links.json
View File

@ -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"],

36
docs/_layouts/documentation.html
View File

@ -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>

40
docs/_sass/main.sass
View File

@ -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

54
docs/css/bulma-docs.css
View File

@ -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);
}
}