library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add main layout

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 10:35:44 +01:00
parent a6b48378f8
commit 4ede497c96
16 changed files with 719 additions and 446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/_data/global.json
View File

@ -1,4 +1,41 @@
{ {
"navbar_items": [
{
"id": "templates",
"color": "has-text-info",
"fa_type": "fas",
"fa_icon": "fa-code",
"title": "Templates"
},
{
"id": "videos",
"color": "has-text-success",
"fa_type": "fas",
"fa_icon": "fa-play-circle",
"title": "Videos"
},
{
"id": "blog",
"color": "bd-has-text-rss",
"fa_type": "fas",
"fa_icon": "fa-rss",
"title": "Blog"
},
{
"id": "expo",
"color": "bd-has-text-star",
"fa_type": "fas",
"fa_icon": "fa-star",
"title": "Expo"
},
{
"id": "love",
"color": "has-text-danger",
"fa_type": "fas",
"fa_icon": "fa-heart",
"title": "Love"
}
],
"more_items": [ "more_items": [
{ {
"id": "bulma-start", "id": "bulma-start",

16
docs/_includes/elements/improve-page.html Normal file
View File

@ -0,0 +1,16 @@
<section class="section bd-typo">
<div class="container">
<p class="has-text-centered has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
<br>
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</p>
</div>
</section>

42
docs/_includes/navbar.html
View File

@ -1,4 +1,4 @@
<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}"> <nav id="navbar" class="navbar">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}"> <a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28"> <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
@ -23,44 +23,24 @@
</div> </div>
</div> </div>
<div id="navMenu{{ include.id }}" class="navbar-menu is-active"> <div id="navMenu{{ include.id }}" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}"> <a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
<span class="icon has-text-primary"> <span class="icon has-text-primary">
<i class="fas fa-book"></i> <i class="fas fa-book"></i>
</span> </span>
<span>Documentation</span> <span>Documentation</span>
</a> </a>
<a class="navbar-item {% if page.route == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
<span class="icon has-text-info"> {% for item in site.data.global.navbar_items %}
<i class="fas fa-code"></i> <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
<span class="icon {{ item.color }}">
<i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
</span> </span>
<span>Templates</span> <span>{{ item.title }}</span>
</a>
<a class="navbar-item {% if page.route == 'videos' %}is-active{% endif %}" href="{{ site.url }}/videos/">
<span class="icon has-text-success">
<i class="fas fa-play-circle"></i>
</span>
<span>Videos</span>
</a>
<a class="navbar-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
<span class="icon" style="color: #f26522;">
<i class="fas fa-rss"></i>
</span>
<span>Blog</span>
</a>
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
<span class="icon" style="color: #FFD257;">
<i class="fas fa-star"></i>
</span>
<span>Expo</span>
</a>
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
<span class="icon has-text-danger">
<i class="fas fa-heart"></i>
</span>
<span>Love</span>
</a> </a>
{% endfor %}
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link"> <div class="navbar-link">
More More

24
docs/_javascript/main.js
View File

@ -287,23 +287,23 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
translateHeader(window.scrollY, false); // translateHeader(window.scrollY, false);
let ticking = false; let ticking = false;
let lastY = 0; let lastY = 0;
window.addEventListener('scroll', function() { // window.addEventListener('scroll', function() {
const currentY = window.scrollY; // const currentY = window.scrollY;
if (!ticking) { // if (!ticking) {
window.requestAnimationFrame(function() { // window.requestAnimationFrame(function() {
upOrDown(lastY, currentY); // upOrDown(lastY, currentY);
ticking = false; // ticking = false;
lastY = currentY; // lastY = currentY;
}); // });
} // }
ticking = true; // ticking = true;
}); // });
}); });

2
docs/_layouts/default.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}"> <html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
{% 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 %}">
{% include deprecated.html %} {% include deprecated.html %}

100
docs/_layouts/documentation.html
View File

@ -3,73 +3,51 @@ layout: default
route: documentation route: documentation
--- ---
{% include navbar.html id="Documentation" has_container=true %} {% include navbar.html id="Documentation" %}
<section class="hero is-link"> <main class="bd-main">
<div class="hero-body"> <div class="bd-side-background"></div>
<div class="container"> <div class="bd-main-container container">
<div class="columns is-vcentered"> <div class="bd-duo">
<div class="column"> <div class="bd-lead">
<p class="title"> <div class="bd-breadcrumb">
Documentation <nav class="breadcrumb" aria-label="breadcrumbs">
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
<div class="column is-narrow">
{% include carbon.html %}
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul> <ul>
<li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}> <li>
<a href="{{ site.data.meta.documentation }}">Overview</a> <a href="{{ site.url }}">Home</a>
</li> </li>
<li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}> <li>
<a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a> <a href="{{ site.url }}/documentation">Documentation</a>
</li> </li>
<li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}> <li>
<a href="{{ site.url }}/documentation/columns/basics">Columns</a> <a href="{{ site.url }}/documentation/elements">Elements</a>
</li> </li>
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}> <li class="is-active">
<a href="{{ site.url }}/documentation/layout/container/">Layout</a> <a href="#" aria-current="page">Button</a>
</li>
<li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/form/general">Form</a>
</li>
<li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/elements/box/">Elements</a>
</li>
<li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
</li> </li>
</ul> </ul>
</div>
</div>
</nav> </nav>
</section>
{{ content }}
<section class="section bd-typo">
<div class="container">
<p class="has-text-centered has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
<br>
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</p>
</div> </div>
</section>
<header class="bd-header">
<h1 class="title">
{{ page.title }}
</h1>
<p class="subtitle">
{{ page.subtitle }}
</p>
</header>
<div class="bd-content">
{{ content }}
</div>
</div>
<aside class="bd-side">
{% include carbon.html %}
</aside>
</aside>
</div>
</main>
{% include elements/improve-page.html %}

6
docs/_sass/global.sass
View File

@ -3,6 +3,7 @@ svg
max-width: 100% max-width: 100%
$carbon-space: 15px $carbon-space: 15px
$carbon-width: 300px
#carboncontainer #carboncontainer
align-items: center align-items: center
@ -10,8 +11,9 @@ $carbon-space: 15px
justify-content: center justify-content: center
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
max-width: 340px max-width: $carbon-width
min-height: 120px + ($carbon-space * 2) min-height: 120px + ($carbon-space * 2)
min-width: 280px
#carbon #carbon
flex-grow: 1 flex-grow: 1
@ -21,7 +23,7 @@ $carbon-space: 15px
&:hover &:hover
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
+tablet +tablet
width: 340px width: $carbon-width
#carbonads #carbonads
font-size: 14px font-size: 14px

64
docs/_sass/main.sass Normal file
View File

@ -0,0 +1,64 @@
.bd-main
overflow: hidden
position: relative
// Lead
.bd-lead
// border: 1px solid lightskyblue
position: relative
.bd-breadcrumb
margin-bottom: 2.5rem
.bd-header
margin-bottom: 2.5rem
.subtitle
color: $text-light
strong
color: currentColor
// Side
.bd-side,
.bd-side-background
background-color: $white-bis
// border: 1px solid coral
.bd-side
position: relative
.bd-side-background
bottom: 0
left: 50%
position: absolute
right: 0
top: 0
+touch
.bd-lead,
.bd-side
padding: 1.5rem
+mobile
.bd-side-background
display: none
+tablet
.bd-duo
display: flex
.bd-lead
background-color: $white
overflow: hidden
flex-grow: 1
flex-shrink: 1
.bd-side
flex: 0 0 300px
+desktop
.bd-main
padding: 0 3rem
.bd-lead
padding: 3rem 3rem 3rem 0
.bd-side
padding: 3rem 0 3rem 1.5rem

31
docs/_sass/specific.sass
View File

@ -1,3 +1,28 @@
.bd-has-text-rss
color: $rss
.bd-has-text-star
color: $star
$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
@each $name, $color in $navbar-items
.bd-navbar-item-#{$name}
.icon
color: $color
&:hover
background-color: $color !important
color: #fff !important
.icon
color: currentColor !important
.bd-navbar-item-expo
&:hover
color: #744F09 !important
.icon
color: #FF7B00 !important
.bd-special-shadow .bd-special-shadow
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0)) background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
height: 8px height: 8px
@ -28,13 +53,13 @@
width: 24px width: 24px
.button.bd-is-rss .button.bd-is-rss
background-color: #f26522 background-color: $rss
border-color: transparent border-color: transparent
color: #fff color: #fff
&:hover &:hover
background-color: darken(#f26522, 5%) background-color: darken($rss, 5%)
&:active &:active
background-color: darken(#f26522, 10%) background-color: darken($rss, 10%)
.bd-view-all-versions .bd-view-all-versions
color: $text-light color: $text-light

3
docs/bulma-docs.sass
View File

@ -9,8 +9,11 @@ $fortyfour: #5f45bb
$amazon: #ffd863 $amazon: #ffd863
$bleeding-green: #ABF47C $bleeding-green: #ABF47C
$bleeding-red: #CA1F26 $bleeding-red: #CA1F26
$star: #FFD257
$rss: #f26522
@import "../bulma" @import "../bulma"
@import "./_sass/main"
@import "./_sass/highlight" @import "./_sass/highlight"
@import "./_sass/override" @import "./_sass/override"
@import "./_sass/global" @import "./_sass/global"

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

@ -5084,7 +5084,7 @@ a.tag:hover {
color: #3273dc; color: #3273dc;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0.5em 0.75em; padding: 0 0.75em;
} }
.breadcrumb a:hover { .breadcrumb a:hover {
@ -5848,6 +5848,7 @@ a.dropdown-item.is-active {
box-shadow: 0 2px 0 0 whitesmoke; box-shadow: 0 2px 0 0 whitesmoke;
min-height: 3.25rem; min-height: 3.25rem;
position: relative; position: relative;
z-index: 30;
} }
.navbar.is-white { .navbar.is-white {
@ -9491,6 +9492,88 @@ label.panel-block:hover {
padding: 3rem 1.5rem 6rem; padding: 3rem 1.5rem 6rem;
} }
.bd-main {
overflow: hidden;
position: relative;
}
.bd-lead {
position: relative;
}
.bd-breadcrumb {
margin-bottom: 2.5rem;
}
.bd-header {
margin-bottom: 2.5rem;
}
.bd-header .subtitle {
color: #7a7a7a;
}
.bd-header .subtitle strong {
color: currentColor;
}
.bd-side,
.bd-side-background {
background-color: #fafafa;
}
.bd-side {
position: relative;
}
.bd-side-background {
bottom: 0;
left: 50%;
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 1023px) {
.bd-lead,
.bd-side {
padding: 1.5rem;
}
}
@media screen and (max-width: 768px) {
.bd-side-background {
display: none;
}
}
@media screen and (min-width: 769px), print {
.bd-duo {
display: flex;
}
.bd-lead {
background-color: white;
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
}
.bd-side {
flex: 0 0 300px;
}
}
@media screen and (min-width: 1024px) {
.bd-main {
padding: 0 3rem;
}
.bd-lead {
padding: 3rem 3rem 3rem 0;
}
.bd-side {
padding: 3rem 0 3rem 1.5rem;
}
}
.highlight { .highlight {
background-color: #f5f5f5; background-color: #f5f5f5;
color: #586e75; color: #586e75;
@ -9770,8 +9853,9 @@ svg {
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 340px; max-width: 300px;
min-height: 150px; min-height: 150px;
min-width: 280px;
} }
#carbon { #carbon {
@ -9787,7 +9871,7 @@ svg {
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
#carbon { #carbon {
width: 340px; width: 300px;
} }
} }
@ -10282,6 +10366,100 @@ svg {
text-decoration: underline; text-decoration: underline;
} }
.bd-has-text-rss {
color: #f26522;
}
.bd-has-text-star {
color: #FFD257;
}
.bd-navbar-item-documentation .icon {
color: #00d1b2;
}
.bd-navbar-item-documentation:hover {
background-color: #00d1b2 !important;
color: #fff !important;
}
.bd-navbar-item-documentation:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-templates .icon {
color: #209cee;
}
.bd-navbar-item-templates:hover {
background-color: #209cee !important;
color: #fff !important;
}
.bd-navbar-item-templates:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-videos .icon {
color: #23d160;
}
.bd-navbar-item-videos:hover {
background-color: #23d160 !important;
color: #fff !important;
}
.bd-navbar-item-videos:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-blog .icon {
color: #f26522;
}
.bd-navbar-item-blog:hover {
background-color: #f26522 !important;
color: #fff !important;
}
.bd-navbar-item-blog:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-expo .icon {
color: #FFD257;
}
.bd-navbar-item-expo:hover {
background-color: #FFD257 !important;
color: #fff !important;
}
.bd-navbar-item-expo:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-love .icon {
color: #ff3860;
}
.bd-navbar-item-love:hover {
background-color: #ff3860 !important;
color: #fff !important;
}
.bd-navbar-item-love:hover .icon {
color: currentColor !important;
}
.bd-navbar-item-expo:hover {
color: #744F09 !important;
}
.bd-navbar-item-expo:hover .icon {
color: #FF7B00 !important;
}
.bd-special-shadow { .bd-special-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent); background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
height: 8px; height: 8px;

171
docs/documentation/elements/button.html
View File

@ -1,8 +1,13 @@
--- ---
title: Button title: Button
subtitle: "The classic <strong>button</strong>, in different colors, sizes, and states"
layout: documentation layout: documentation
doc-tab: elements doc-tab: elements
doc-subtab: button doc-subtab: button
meta:
- colors: true
- sizes: true
- variables: true
--- ---
{% capture button_example %} {% capture button_example %}
@ -448,32 +453,15 @@ doc-subtab: button
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-elements.html %} <div class="content">
<section class="section">
<div class="container">
<h1 class="title">Buttons</h1>
<h2 class="subtitle">
The classic <strong>button</strong>, in different colors, sizes, and states
</h2>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr>
<div class="content">
<p> <p>
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page. The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
</p> </p>
</div> </div>
{% include snippet.html content=button_example %} {% include snippet.html content=button_example %}
<div class="content"> <div class="content">
<p> <p>
The <code>.button</code> class can be used on: The <code>.button</code> class can be used on:
</p> </p>
@ -491,29 +479,29 @@ doc-subtab: button
<code>&lt;input type="reset"&gt;</code> reset inputs <code>&lt;input type="reset"&gt;</code> reset inputs
</li> </li>
</ul> </ul>
</div> </div>
{% include snippet.html content=button_tags_example %} {% include snippet.html content=button_tags_example %}
{% include anchor.html name="Colors" %} {% include anchor.html name="Colors" %}
{% include snippet.html content=button_colors_a_example %} {% include snippet.html content=button_colors_a_example %}
{% include snippet.html content=button_colors_b_example %} {% include snippet.html content=button_colors_b_example %}
{% include anchor.html name="Sizes" %} {% include anchor.html name="Sizes" %}
{% include snippet.html content=button_sizes_example %} {% include snippet.html content=button_sizes_example %}
{% include anchor.html name="Styles" %} {% include anchor.html name="Styles" %}
<h4 class="subtitle">Outlined</h4> <h4 class="subtitle">Outlined</h4>
{% include snippet.html content=button_outlined_example %} {% include snippet.html content=button_outlined_example %}
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4> <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-callout is-primary"> <div class="bd-callout is-primary">
{{button_inverted_example}} {{button_inverted_example}}
@ -522,11 +510,11 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_inverted_example}}{% endhighlight %} {% highlight html %}{{button_inverted_example}}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4> <h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="bd-callout is-primary"> <div class="bd-callout is-primary">
{{button_inverted_outlined_example}} {{button_inverted_outlined_example}}
@ -535,11 +523,11 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %} {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="subtitle">Rounded buttons</h4> <h4 class="subtitle">Rounded buttons</h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
{% include elements/new-tag.html version="0.6.2" %} {% include elements/new-tag.html version="0.6.2" %}
{{ button_rounded_example }} {{ button_rounded_example }}
@ -547,29 +535,29 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{ button_rounded_example }}{% endhighlight %} {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="States" %} {% include anchor.html name="States" %}
<h4 class="subtitle">Normal</h4> <h4 class="subtitle">Normal</h4>
{% include snippet.html content=button_normal_example %} {% include snippet.html content=button_normal_example %}
<h4 class="subtitle">Hover</h4> <h4 class="subtitle">Hover</h4>
{% include snippet.html content=button_hover_example %} {% include snippet.html content=button_hover_example %}
<h4 class="subtitle">Focus</h4> <h4 class="subtitle">Focus</h4>
{% include snippet.html content=button_focus_example %} {% include snippet.html content=button_focus_example %}
<h4 class="subtitle">Active</h4> <h4 class="subtitle">Active</h4>
{% include snippet.html content=button_active_example %} {% include snippet.html content=button_active_example %}
<h4 class="subtitle">Loading</h4> <h4 class="subtitle">Loading</h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="block"> <div class="block">
{{button_loading_example}} {{button_loading_example}}
@ -585,13 +573,13 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_loading_example}}{% endhighlight %} {% highlight html %}{{button_loading_example}}{% endhighlight %}
</div> </div>
</div> </div>
<h4 id="static-button" class="subtitle"> <h4 id="static-button" class="subtitle">
Static Static
</h4> </h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -603,11 +591,11 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_static_example}}{% endhighlight %} {% highlight html %}{{button_static_example}}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="subtitle">Disabled</h4> <h4 class="subtitle">Disabled</h4>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="block"> <div class="block">
{{button_disabled_example}} {{button_disabled_example}}
@ -621,13 +609,13 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_disabled_example}}{% endhighlight %} {% highlight html %}{{button_disabled_example}}{% endhighlight %}
</div> </div>
</div> </div>
<h4 class="subtitle">With Font Awesome icons</h4> <h4 class="subtitle">With Font Awesome icons</h4>
{% include snippet.html content=button_fa_example clipped=true %} {% include snippet.html content=button_fa_example clipped=true %}
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -639,37 +627,37 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{button_only_icon_example}}{% endhighlight %} {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
</div> </div>
</div> </div>
{% include anchor.html name="Button group" %} {% include anchor.html name="Button group" %}
<div class="content"> <div class="content">
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p> <p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div> </div>
{% include snippet.html content=button_group_example %} {% include snippet.html content=button_group_example %}
{% include anchor.html name="Button addons" %} {% include anchor.html name="Button addons" %}
<div class="content"> <div class="content">
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p> <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div> </div>
{% include snippet.html content=button_addons_example %} {% include snippet.html content=button_addons_example %}
{% include anchor.html name="Button group with addons" %} {% include anchor.html name="Button group with addons" %}
<div class="content"> <div class="content">
<p>You can group together addons as well:</p> <p>You can group together addons as well:</p>
</div> </div>
{% include snippet.html content=button_group_addons_example %} {% include snippet.html content=button_group_addons_example %}
{% include anchor.html name="List of buttons" %} {% include anchor.html name="List of buttons" %}
{% include elements/new-tag.html version="0.6.1" %} {% include elements/new-tag.html version="0.6.1" %}
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -683,9 +671,9 @@ doc-subtab: button
<div class="column"> <div class="column">
{% highlight html %}{{ buttons }}{% endhighlight %} {% highlight html %}{{ buttons }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -699,9 +687,9 @@ doc-subtab: button
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{ buttons_multiple }}{% endhighlight %} {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -715,9 +703,9 @@ doc-subtab: button
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{ buttons_addons }}{% endhighlight %} {% highlight html %}{{ buttons_addons }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -732,9 +720,9 @@ doc-subtab: button
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %} {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <p>
@ -748,9 +736,9 @@ doc-subtab: button
<div class="column highlight-full"> <div class="column highlight-full">
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %} {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
</div> </div>
</div> </div>
<div class="message is-info"> <div class="message is-info">
<div class="message-header"> <div class="message-header">
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p> <p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
</div> </div>
@ -781,9 +769,6 @@ doc-subtab: button
</p> </p>
</div> </div>
</div> </div>
</div> </div>
{% include variables.html type='element' %} {% include variables.html type='element' %}
</div>
</section>

2
docs/index.html
View File

@ -4,7 +4,7 @@ route: index
fixed_navbar: true fixed_navbar: true
--- ---
{% include navbar.html id="Index" fixed=true has_container=true boxed=true transparent=true hide_fortyfour=true %} {% include navbar.html id="Index" %}
{% include index/intro.html %} {% include index/intro.html %}

24
docs/lib/main.js
View File

@ -287,22 +287,22 @@ document.addEventListener('DOMContentLoaded', function () {
} }
} }
translateHeader(window.scrollY, false); // translateHeader(window.scrollY, false);
var ticking = false; var ticking = false;
var lastY = 0; var lastY = 0;
window.addEventListener('scroll', function () { // window.addEventListener('scroll', function() {
var currentY = window.scrollY; // const currentY = window.scrollY;
if (!ticking) { // if (!ticking) {
window.requestAnimationFrame(function () { // window.requestAnimationFrame(function() {
upOrDown(lastY, currentY); // upOrDown(lastY, currentY);
ticking = false; // ticking = false;
lastY = currentY; // lastY = currentY;
}); // });
} // }
ticking = true; // ticking = true;
}); // });
}); });

5
sass/components/breadcrumb.sass
View File

@ -2,6 +2,9 @@ $breadcrumb-item-color: $link !default
$breadcrumb-item-hover-color: $link-hover !default $breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $text !default $breadcrumb-item-separator-color: $text !default
.breadcrumb .breadcrumb
@ -18,7 +21,7 @@ $breadcrumb-item-separator-color: $text !default
color: $breadcrumb-item-color color: $breadcrumb-item-color
display: flex display: flex
justify-content: center justify-content: center
padding: 0.5em 0.75em padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
&:hover &:hover
color: $breadcrumb-item-hover-color color: $breadcrumb-item-hover-color
li li

2
sass/components/navbar.sass
View File

@ -1,5 +1,6 @@
$navbar-background-color: $white !default $navbar-background-color: $white !default
$navbar-height: 3.25rem !default $navbar-height: 3.25rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default $navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default $navbar-item-color: $grey-dark !default
@ -45,6 +46,7 @@ $navbar-divider-background-color: $border !default
box-shadow: 0 2px 0 0 $background box-shadow: 0 2px 0 0 $background
min-height: $navbar-height min-height: $navbar-height
position: relative position: relative
z-index: $navbar-z
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)