mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add navbar documentation
This commit is contained in:
Jeremy Thomas
parent
d5372f08af
commit
45a31d7b86
1
docs/_includes/bp/desktop.html
Normal file
1
docs/_includes/bp/desktop.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<span class="tag">>= 1000px</span>
|
||||||
1
docs/_includes/bp/touch.html
Normal file
1
docs/_includes/bp/touch.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<span class="tag">< 1000px</span>
|
||||||
@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const expand = '<button class="expand">Expand</button>';
|
const expand = '<button class="expand">Expand</button>';
|
||||||
$el.insertAdjacentHTML('beforeend', copy);
|
$el.insertAdjacentHTML('beforeend', copy);
|
||||||
|
|
||||||
if ($el.firstElementChild.scrollHeight > 600) {
|
if ($el.firstElementChild.scrollHeight > 320) {
|
||||||
$el.insertAdjacentHTML('beforeend', expand);
|
$el.insertAdjacentHTML('beforeend', expand);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,6 +3,5 @@
|
|||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% include footer.html %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4398,6 +4398,7 @@ a.navbar-item:hover,
|
|||||||
|
|
||||||
a.navbar-item.is-active,
|
a.navbar-item.is-active,
|
||||||
.navbar-link.is-active {
|
.navbar-link.is-active {
|
||||||
|
background-color: whitesmoke;
|
||||||
color: #0a0a0a;
|
color: #0a0a0a;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4436,9 +4437,11 @@ a.navbar-item.is-active,
|
|||||||
|
|
||||||
.navbar-dropdown a.navbar-item:hover {
|
.navbar-dropdown a.navbar-item:hover {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
|
color: #0a0a0a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-dropdown a.navbar-item.is-active {
|
.navbar-dropdown a.navbar-item.is-active {
|
||||||
|
background-color: whitesmoke;
|
||||||
color: #00d1b2;
|
color: #00d1b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4475,12 +4478,12 @@ a.navbar-item.is-active,
|
|||||||
.navbar {
|
.navbar {
|
||||||
height: 3.25rem;
|
height: 3.25rem;
|
||||||
}
|
}
|
||||||
.navbar.is-transparent .navbar-brand .navbar-link:hover,
|
.navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active,
|
||||||
.navbar.is-transparent .navbar-brand > a.navbar-item:hover,
|
.navbar.is-transparent .navbar-link:hover,
|
||||||
.navbar.is-transparent .navbar-start .navbar-link:hover,
|
.navbar.is-transparent .navbar-link.is-active {
|
||||||
.navbar.is-transparent .navbar-start > a.navbar-item:hover,
|
background-color: transparent;
|
||||||
.navbar.is-transparent .navbar-end .navbar-link:hover,
|
}
|
||||||
.navbar.is-transparent .navbar-end > a.navbar-item:hover {
|
.navbar.is-transparent .navbar-item.is-active .navbar-link, .navbar.is-transparent .navbar-item.is-hoverable:hover .navbar-link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.navbar-burger {
|
.navbar-burger {
|
||||||
@ -4494,7 +4497,19 @@ a.navbar-item.is-active,
|
|||||||
.navbar-item.has-dropdown {
|
.navbar-item.has-dropdown {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
.navbar-item.has-dropdown::after {
|
.navbar-item.is-active .navbar-link, .navbar-item.is-hoverable:hover .navbar-link {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: #0a0a0a;
|
||||||
|
}
|
||||||
|
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.navbar-link::after {
|
||||||
border: 1px solid #00d1b2;
|
border: 1px solid #00d1b2;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
@ -4509,14 +4524,6 @@ a.navbar-item.is-active,
|
|||||||
right: 1.125em;
|
right: 1.125em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
}
|
}
|
||||||
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
.navbar-menu {
|
.navbar-menu {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -6209,13 +6216,6 @@ label.panel-block:hover {
|
|||||||
padding: 3rem 1.5rem;
|
padding: 3rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1192px) {
|
|
||||||
.hero-body {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@ -7866,8 +7866,13 @@ html.route-index #carbon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlight pre {
|
.highlight pre {
|
||||||
max-height: 600px;
|
max-height: 320px;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
padding: 1.25em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight pre code {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.structure {
|
.structure {
|
||||||
|
|||||||
@ -13,11 +13,19 @@ doc-subtab: navbar
|
|||||||
{% capture navbar_brand_example %}
|
{% capture navbar_brand_example %}
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<!-- nav items, nav burger ... -->
|
<!-- navbar items, navbar burger ... -->
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_burger_example %}
|
||||||
|
<div class="navbar-burger">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture navbar_brand_items_example %}
|
{% capture navbar_brand_items_example %}
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
@ -34,58 +42,367 @@ doc-subtab: navbar
|
|||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_menu_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<!-- navbar items, nav burger ... -->
|
||||||
|
</div>
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<!-- navbar start, navbar end -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_menu_active_example %}
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<!-- hidden on mobile -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu is-active">
|
||||||
|
<!-- shown on mobile -->
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_start_end_example %}
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<!-- navbar items -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<!-- navbar items -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_link_example %}
|
||||||
|
<a class="navbar-item">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_brand_example %}
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_dropdown_example %}
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<!-- Other navbar items -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_dropdown_bis_example %}
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_other_example %}
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a id="class="button">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Tweet</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_transparent_example %}
|
||||||
|
{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_hover_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_active_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_default_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_boxed_example %}
|
||||||
|
<nav class="navbar is-transparent">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown is-boxed">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_item_active_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item is-active">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_divider_example %}
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<h1 class="title">Navbar</h1>
|
<div class="columns" style="margin-bottom: -0.75rem !important;">
|
||||||
<h2 class="subtitle">
|
<div class="column">
|
||||||
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
<h1 class="title">Navbar</h1>
|
||||||
</h2>
|
<h2 class="subtitle">
|
||||||
|
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-narrow">
|
||||||
|
<p class="content">
|
||||||
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.5.0</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div class="message is-success">
|
<div class="message is-success">
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
<p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
<p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
The <code>.navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar</code> the <strong>main</strong> container
|
<code>navbar</code> the <strong>main</strong> container
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
|
<code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
|
<code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
|
<code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
|
<code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
|
<code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
|
<code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
|
<code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
|
<code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>.navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
|
<code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@ -112,14 +429,14 @@ doc-subtab: navbar
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
The <code>.navbar-brand</code> is the left side of the navbar. It can contain:
|
The <code>navbar-brand</code> is the left side of the navbar. It can contain:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
a number of <code>.navbar-item</code>
|
a number of <code>navbar-item</code>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
the <code>.navbar-burger</code> as last child
|
the <code>navbar-burger</code> as last child
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -128,7 +445,7 @@ doc-subtab: navbar
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
The navbar brand is <strong>always visible</strong>: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -138,5 +455,347 @@ doc-subtab: navbar
|
|||||||
|
|
||||||
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar burger</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
<div class="navbar-burger" style="display: flex;">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can add the modifier class <code>is-active</code> to turn it into a cross.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
<div class="navbar-burger is-active" style="display: flex;">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar menu</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar-brand</code>, as a sibling of <code>navbar-brand</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar start and navbar end</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code> will appear on the <strong>left</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code> will appear on the <strong>right</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Each of them can contain any number of <code>navbar-item</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar item</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
A <code>navbar-item</code> is a repeatable element that can be:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
a navigation <strong>link</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a container for the <strong>brand logo</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the <strong>parent</strong> of a dropdown menu
|
||||||
|
{% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a child of a <strong>navbar dropdown</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a container for almost <strong>anything</strong> you want, like a <code>field</code>
|
||||||
|
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
It can either be an anchor tag <code><a></code> or a <code><div></code>, as a <strong>direct child</strong> of either:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-brand</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-dropdown</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 id="transparent-navbar" class="title">Transparent navbar</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifer on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{navbar_transparent_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 id="dropdown-menu" class="title">Dropdown menu</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-item</code> with the <code>has-dropdown</code> modifier
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-link</code> which contains the dropdown arrow
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message is-success">
|
||||||
|
<p class="message-body">
|
||||||
|
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_hover_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_active_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Styles for the dropdown menu
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
By default, the <code>navbar-dropdown</code> has:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
a grey <code>border-top</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a <code>border-radius</code> at both bottom corners
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_default_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
the grey border is <strong>removed</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a slight <strong>inner shadow</strong> is added
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
all corners are <strong>rounded</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the hover/active state is <strong>animated</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_boxed_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Active dropdown navbar item
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_item_active_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Dropdown divider
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
var expand = '<button class="expand">Expand</button>';
|
var expand = '<button class="expand">Expand</button>';
|
||||||
$el.insertAdjacentHTML('beforeend', copy);
|
$el.insertAdjacentHTML('beforeend', copy);
|
||||||
|
|
||||||
if ($el.firstElementChild.scrollHeight > 600) {
|
if ($el.firstElementChild.scrollHeight > 320) {
|
||||||
$el.insertAdjacentHTML('beforeend', expand);
|
$el.insertAdjacentHTML('beforeend', expand);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,6 +5,7 @@ $navbar-item: $grey-dark !default
|
|||||||
$navbar-item-hover: $black !default
|
$navbar-item-hover: $black !default
|
||||||
$navbar-item-hover-background: $background !default
|
$navbar-item-hover-background: $background !default
|
||||||
$navbar-item-active: $black !default
|
$navbar-item-active: $black !default
|
||||||
|
$navbar-item-active-background: $background !default
|
||||||
|
|
||||||
$navbar-dropdown-background: $white !default
|
$navbar-dropdown-background: $white !default
|
||||||
$navbar-dropdown-border: $border !default
|
$navbar-dropdown-border: $border !default
|
||||||
@ -13,8 +14,10 @@ $navbar-dropdown-arrow: $link !default
|
|||||||
$navbar-dropdown-radius: $radius-large !default
|
$navbar-dropdown-radius: $radius-large !default
|
||||||
$navbar-dropdown-z: 20 !default
|
$navbar-dropdown-z: 20 !default
|
||||||
|
|
||||||
|
$navbar-dropdown-item-hover: $black !default
|
||||||
$navbar-dropdown-item-hover-background: $background !default
|
$navbar-dropdown-item-hover-background: $background !default
|
||||||
$navbar-dropdown-item-active: $primary !default
|
$navbar-dropdown-item-active: $primary !default
|
||||||
|
$navbar-dropdown-item-active-background: $background !default
|
||||||
|
|
||||||
$navbar-divider-background: $border !default
|
$navbar-divider-background: $border !default
|
||||||
|
|
||||||
@ -49,6 +52,7 @@ a.navbar-item,
|
|||||||
background-color: $navbar-item-hover-background
|
background-color: $navbar-item-hover-background
|
||||||
color: $navbar-item-hover
|
color: $navbar-item-hover
|
||||||
&.is-active
|
&.is-active
|
||||||
|
background-color: $navbar-item-active-background
|
||||||
color: $navbar-item-active
|
color: $navbar-item-active
|
||||||
|
|
||||||
.navbar-item
|
.navbar-item
|
||||||
@ -76,7 +80,9 @@ a.navbar-item,
|
|||||||
a.navbar-item
|
a.navbar-item
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $navbar-dropdown-item-hover-background
|
background-color: $navbar-dropdown-item-hover-background
|
||||||
|
color: $navbar-dropdown-item-hover
|
||||||
&.is-active
|
&.is-active
|
||||||
|
background-color: $navbar-dropdown-item-active-background
|
||||||
color: $navbar-dropdown-item-active
|
color: $navbar-dropdown-item-active
|
||||||
|
|
||||||
.navbar-divider
|
.navbar-divider
|
||||||
@ -107,12 +113,15 @@ a.navbar-item,
|
|||||||
.navbar
|
.navbar
|
||||||
height: $navbar-height
|
height: $navbar-height
|
||||||
&.is-transparent
|
&.is-transparent
|
||||||
.navbar-brand,
|
a.navbar-item,
|
||||||
.navbar-start,
|
.navbar-link
|
||||||
.navbar-end
|
&:hover,
|
||||||
.navbar-link,
|
&.is-active
|
||||||
& > a.navbar-item
|
background-color: transparent
|
||||||
&:hover
|
.navbar-item
|
||||||
|
&.is-active,
|
||||||
|
&.is-hoverable:hover
|
||||||
|
.navbar-link
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
.navbar-burger
|
.navbar-burger
|
||||||
display: none
|
display: none
|
||||||
@ -123,19 +132,23 @@ a.navbar-item,
|
|||||||
.navbar-item
|
.navbar-item
|
||||||
&.has-dropdown
|
&.has-dropdown
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
&::after
|
|
||||||
+arrow($navbar-dropdown-arrow)
|
|
||||||
margin-top: -0.375em
|
|
||||||
right: 1.125em
|
|
||||||
top: 50%
|
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&.is-hoverable:hover
|
&.is-hoverable:hover
|
||||||
.navbar-dropdown
|
.navbar-link
|
||||||
display: block
|
background-color: $navbar-item-active-background
|
||||||
&.is-boxed
|
color: $navbar-item-active
|
||||||
opacity: 1
|
.navbar-dropdown
|
||||||
pointer-events: auto
|
display: block
|
||||||
transform: translateY(0)
|
&.is-boxed
|
||||||
|
opacity: 1
|
||||||
|
pointer-events: auto
|
||||||
|
transform: translateY(0)
|
||||||
|
.navbar-link
|
||||||
|
&::after
|
||||||
|
+arrow($navbar-dropdown-arrow)
|
||||||
|
margin-top: -0.375em
|
||||||
|
right: 1.125em
|
||||||
|
top: 50%
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
|
|||||||
@ -42,10 +42,6 @@
|
|||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
padding: 3rem 1.5rem
|
padding: 3rem 1.5rem
|
||||||
// Responsiveness
|
|
||||||
+from($widescreen)
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
|
|
||||||
// Main container
|
// Main container
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user