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

Create links nav

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 12:45:52 +01:00
parent 4ede497c96
commit 0f9d338f66
17 changed files with 1087 additions and 963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/_data/links.json Normal file
View File

@ -0,0 +1,51 @@
{
"by_id": {
"home": {
"name": "Home",
"path": ""
},
"documentation": {
"name": "Documentation",
"path": "/documentation"
},
"columns": {
"name": "Columns",
"path": "/documentation/columns"
},
"columns-basics": {
"name": "Basics",
"path": "/documentation/columns/basics"
},
"columns-gap": {
"name": "Gap",
"path": "/documentation/columns/gap"
},
"columns-nesting": {
"name": "Nesting",
"path": "/documentation/columns/nesting"
},
"columns-options": {
"name": "Options",
"path": "/documentation/columns/options"
},
"columns-responsiveness": {
"name": "Responsiveness",
"path": "/documentation/columns/responsiveness"
},
"columns-sizes": {
"name": "Sizes",
"path": "/documentation/columns/sizes"
},
"elements": {
"name": "Elements",
"path": "/documentation/elements"
},
"button": {
"name": "Button",
"path": "/documentation/elements/button"
}
},
"order": {
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
}
}

15
docs/_data/variables/elements/title.json
View File

@ -31,6 +31,11 @@
"name": "$title-strong-weight", "name": "$title-strong-weight",
"value": "inherit" "value": "inherit"
}, },
"title-line-height": {
"id": "title-line-height",
"name": "$title-line-height",
"value": "1.125"
},
"subtitle-color": { "subtitle-color": {
"id": "subtitle-color", "id": "subtitle-color",
"name": "$subtitle-color", "name": "$subtitle-color",
@ -46,6 +51,11 @@
"name": "$subtitle-weight", "name": "$subtitle-weight",
"value": "$weight-normal" "value": "$weight-normal"
}, },
"subtitle-line-height": {
"id": "subtitle-line-height",
"name": "$subtitle-line-height",
"value": "1.25"
},
"subtitle-strong-color": { "subtitle-strong-color": {
"id": "subtitle-strong-color", "id": "subtitle-strong-color",
"name": "$subtitle-strong-color", "name": "$subtitle-strong-color",
@ -55,6 +65,11 @@
"id": "subtitle-strong-weight", "id": "subtitle-strong-weight",
"name": "$subtitle-strong-weight", "name": "$subtitle-strong-weight",
"value": "$weight-semibold" "value": "$weight-semibold"
},
"subtitle-negative-margin": {
"id": "subtitle-negative-margin",
"name": "$subtitle-negative-margin",
"value": "-1.25rem"
} }
} }
} }

2
docs/_includes/anchor.html
View File

@ -1,4 +1,4 @@
<hr style="margin-bottom: 0;"> <hr class="hr" style="margin-bottom: 0;">
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title"> <h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
{{ include.name }} {{ include.name }}

2
docs/_includes/elements/improve-page.html
View File

@ -1,6 +1,6 @@
<section class="section bd-typo"> <section class="section bd-typo">
<div class="container"> <div class="container">
<p class="has-text-centered has-text-grey-light"> <p class="has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/"> <a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24"> <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a> </a>

63
docs/_layouts/documentation.html
View File

@ -5,6 +5,25 @@ route: documentation
{% include navbar.html id="Documentation" %} {% include navbar.html id="Documentation" %}
{% assign current_link_id = page.breadcrumb | last %}
{% assign category_links = site.data.links.order[page.doc-tab] %}
{% for link_id in category_links %}
{% if link_id == current_link_id %}
{% unless forloop.first %}
{% assign previous_index = forloop.index0 | minus: 1 %}
{% assign previous_link_id = category_links[previous_index] %}
{% assign previous_link = site.data.links.by_id[previous_link_id] %}
{% endunless %}
{% unless forloop.last %}
{% assign next_index = forloop.index0 | plus: 1 %}
{% assign next_link_id = category_links[next_index] %}
{% assign next_link = site.data.links.by_id[next_link_id] %}
{% endunless %}
{% endif %}
{% endfor %}
<main class="bd-main"> <main class="bd-main">
<div class="bd-side-background"></div> <div class="bd-side-background"></div>
<div class="bd-main-container container"> <div class="bd-main-container container">
@ -13,27 +32,43 @@ route: documentation
<div class="bd-breadcrumb"> <div class="bd-breadcrumb">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li> {% for key in page.breadcrumb %}
<a href="{{ site.url }}">Home</a> {% assign link = site.data.links.by_id[key] %}
</li> <li{% if forloop.last %} class="is-active"{% endif %}>
<li> <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
<a href="{{ site.url }}/documentation">Documentation</a>
</li>
<li>
<a href="{{ site.url }}/documentation/elements">Elements</a>
</li>
<li class="is-active">
<a href="#" aria-current="page">Button</a>
</li> </li>
{% endfor %}
</ul> </ul>
</nav> </nav>
<nav class="bd-prev-next">
{% if previous_link %}
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if next_link %}
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
</div> </div>
<header class="bd-header"> <header class="bd-header">
<h1 class="title"> <h1 class="title">
{{ page.title }} {{ page.title }}
</h1> </h1>
<p class="subtitle"> <p class="subtitle is-4">
{{ page.subtitle }} {{ page.subtitle }}
</p> </p>
</header> </header>
@ -41,6 +76,8 @@ route: documentation
<div class="bd-content"> <div class="bd-content">
{{ content }} {{ content }}
</div> </div>
{% include elements/improve-page.html %}
</div> </div>
<aside class="bd-side"> <aside class="bd-side">
@ -49,5 +86,3 @@ route: documentation
</aside> </aside>
</div> </div>
</main> </main>
{% include elements/improve-page.html %}

22
docs/_sass/main.sass
View File

@ -9,7 +9,27 @@
position: relative position: relative
.bd-breadcrumb .bd-breadcrumb
display: flex
justify-content: space-between
margin-bottom: 2.5rem margin-bottom: 2.5rem
.breadcrumb:not(:last-child)
margin-bottom: 0
.bd-prev-next
align-items: flex-start
color: $grey-light
display: none
flex-grow: 0
flex-shrink: 0
margin-left: 0.5rem
text-align: center
a,
span
border-radius: $radius
width: 1.5rem
a
&:hover
background-color: $background
.bd-header .bd-header
margin-bottom: 2.5rem margin-bottom: 2.5rem
@ -52,6 +72,8 @@
overflow: hidden overflow: hidden
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
.bd-prev-next
display: flex
.bd-side .bd-side
flex: 0 0 300px flex: 0 0 300px

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

@ -347,10 +347,10 @@ code {
} }
hr { hr {
background-color: #dbdbdb; background-color: whitesmoke;
border: none; border: none;
display: block; display: block;
height: 1px; height: 2px;
margin: 1.5rem 0; margin: 1.5rem 0;
} }
@ -4960,7 +4960,7 @@ a.tag:hover {
} }
.title:not(.is-spaced) + .subtitle { .title:not(.is-spaced) + .subtitle {
margin-top: -1.5rem; margin-top: -1.25rem;
} }
.title.is-1 { .title.is-1 {
@ -5004,7 +5004,7 @@ a.tag:hover {
} }
.subtitle:not(.is-spaced) + .title { .subtitle:not(.is-spaced) + .title {
margin-top: -1.5rem; margin-top: -1.25rem;
} }
.subtitle.is-1 { .subtitle.is-1 {
@ -5071,11 +5071,7 @@ a.tag:hover {
} }
.breadcrumb { .breadcrumb {
align-items: stretch;
display: flex;
font-size: 1rem; font-size: 1rem;
overflow: hidden;
overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
@ -5107,15 +5103,15 @@ a.tag:hover {
} }
.breadcrumb li + li::before { .breadcrumb li + li::before {
color: #4a4a4a; color: #b5b5b5;
content: "\0002f"; content: "\0002f";
} }
.breadcrumb ul, .breadcrumb ol { .breadcrumb ul,
align-items: center; .breadcrumb ol {
align-items: flex-start;
display: flex; display: flex;
flex-grow: 1; flex-wrap: wrap;
flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
} }
@ -5127,11 +5123,11 @@ a.tag:hover {
margin-left: 0.5em; margin-left: 0.5em;
} }
.breadcrumb.is-centered ol, .breadcrumb.is-centered ul { .breadcrumb.is-centered ol {
justify-content: center; justify-content: center;
} }
.breadcrumb.is-right ol, .breadcrumb.is-right ul { .breadcrumb.is-right ol {
justify-content: flex-end; justify-content: flex-end;
} }
@ -9502,9 +9498,35 @@ label.panel-block:hover {
} }
.bd-breadcrumb { .bd-breadcrumb {
display: flex;
justify-content: space-between;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
.bd-breadcrumb .breadcrumb:not(:last-child) {
margin-bottom: 0;
}
.bd-prev-next {
align-items: flex-start;
color: #b5b5b5;
display: none;
flex-grow: 0;
flex-shrink: 0;
margin-left: 0.5rem;
text-align: center;
}
.bd-prev-next a,
.bd-prev-next span {
border-radius: 3px;
width: 1.5rem;
}
.bd-prev-next a:hover {
background-color: whitesmoke;
}
.bd-header { .bd-header {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@ -9557,6 +9579,9 @@ label.panel-block:hover {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.bd-prev-next {
display: flex;
}
.bd-side { .bd-side {
flex: 0 0 300px; flex: 0 0 300px;
} }

35
docs/documentation/columns/basics.html
View File

@ -1,8 +1,14 @@
--- ---
title: Columns powered by Flexbox title: Columns powered by Flexbox
subtitle: "A simple way to build <strong>responsive columns</strong>"
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: basics doc-subtab: basics
breadcrumb:
- home
- documentation
- columns
- columns-basics
--- ---
{% capture columns %} {% capture columns %}
@ -22,39 +28,30 @@ doc-subtab: basics
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-columns.html %} <div class="content">
<section class="section">
<div class="container">
<h1 class="title">Columns</h1>
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
<hr>
<div class="content">
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p> <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
<ol> <ol>
<li>Add a <code>columns</code> container</li> <li>Add a <code>columns</code> container</li>
<li>Add as many <code>column</code> elements as you want</li> <li>Add as many <code>column</code> elements as you want</li>
</ol> </ol>
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p> <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p class="bd-notification is-info">First column</p> <p class="bd-notification is-primary">First column</p>
</div> </div>
<div class="column"> <div class="column">
<p class="bd-notification is-success">Second column</p> <p class="bd-notification is-primary">Second column</p>
</div> </div>
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Third column</p> <p class="bd-notification is-primary">Third column</p>
</div> </div>
<div class="column"> <div class="column">
<p class="bd-notification is-danger">Fourth column</p> <p class="bd-notification is-primary">Fourth column</p>
</div>
</div> </div>
</div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %} {% highlight html %}{{ columns }}{% endhighlight %}
</div> </div>
</div>
</section>

72
docs/documentation/columns/gap.html
View File

@ -1,8 +1,14 @@
--- ---
title: Columns gap title: Columns gap
subtitle: Customize the <strong>gap</strong> between the columns
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: gap doc-subtab: gap
breadcrumb:
- home
- documentation
- columns
- columns-gap
--- ---
{% capture columns_default_gap %} {% capture columns_default_gap %}
@ -79,36 +85,27 @@ doc-subtab: gap
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-columns.html %} {% include anchor.html name="Default gap" %}
<section class="section"> <div class="content">
<div class="container">
<h1 class="title">Columns gap</h1>
<h2 class="subtitle">
Customize the <strong>gap</strong> between the columns
</h2>
{% include anchor.html name="Default gap" %}
<div class="content">
<p> <p>
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>. Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
<br> <br>
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default. Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
</p> </p>
</div> </div>
{{ columns_default_gap }} {{ columns_default_gap }}
{% include anchor.html name="Gapless" %} {% include anchor.html name="Gapless" %}
<div class="content"> <div class="content">
<p> <p>
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container: If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
</p> </p>
</div> </div>
<div class="columns is-gapless"> <div class="columns is-gapless">
<div class="column"> <div class="column">
<p class="bd-notification is-info">First column</p> <p class="bd-notification is-info">First column</p>
</div> </div>
@ -121,17 +118,17 @@ doc-subtab: gap
<div class="column"> <div class="column">
<p class="bd-notification is-danger">Fourth column</p> <p class="bd-notification is-danger">Fourth column</p>
</div> </div>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns_gapless }}{% endhighlight %} {% highlight html %}{{ columns_gapless }}{% endhighlight %}
</div> </div>
<div class="content"> <div class="content">
<p>You can combine it with the <code>is-multiline</code> modifier:</p> <p>You can combine it with the <code>is-multiline</code> modifier:</p>
</div> </div>
<div class="columns is-multiline is-mobile is-gapless"> <div class="columns is-multiline is-mobile is-gapless">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<p class="bd-notification is-info"><code>is-one-quarter</code></p> <p class="bd-notification is-info"><code>is-one-quarter</code></p>
</div> </div>
@ -159,15 +156,15 @@ doc-subtab: gap
<div class="column"> <div class="column">
<p class="bd-notification is-info">Auto</p> <p class="bd-notification is-info">Auto</p>
</div> </div>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
</div> </div>
{% include anchor.html name="Variable gap" %} {% include anchor.html name="Variable gap" %}
<div class="field is-grouped is-grouped-multiline"> <div class="field is-grouped is-grouped-multiline">
<div class="control"> <div class="control">
<div class="tags"> <div class="tags">
<span class="tag is-warning">Experimental</span> <span class="tag is-warning">Experimental</span>
@ -180,9 +177,9 @@ doc-subtab: gap
<span class="tag is-info">0.5.2</span> <span class="tag is-info">0.5.2</span>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container. You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
</p> </p>
@ -200,25 +197,22 @@ doc-subtab: gap
<p> <p>
Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container. Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
</p> </p>
</div> </div>
{% include klmn.html %} {% include klmn.html %}
<div class="message is-warning"> <div class="message is-warning">
<div class="message-body"> <div class="message-body">
<p> <p>
This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>: This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
</p> </p>
</div> </div>
</div> </div>
<div class="message is-info"> <div class="message is-info">
<div class="message-body"> <div class="message-body">
<p> <p>
If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>. If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
</p> </p>
</div> </div>
</div> </div>
</div>
</section>

28
docs/documentation/columns/nesting.html
View File

@ -1,19 +1,17 @@
--- ---
title: Nesting columns title: Nesting columns
subtitle: "A simple way to build <strong>responsive columns</strong>"
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: nesting doc-subtab: nesting
breadcrumb:
- home
- documentation
- columns
- columns-nesting
--- ---
{% include subnav/subnav-columns.html %} <div class="content">
<section class="section">
<div class="container">
<h1 class="title">Nesting columns</h1>
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
<hr>
<div class="content">
<p> <p>
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure: You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
</p> </p>
@ -40,9 +38,9 @@ doc-subtab: nesting
<p> <p>
The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result. The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
</p> </p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p class="bd-notification is-info">First column</p> <p class="bd-notification is-info">First column</p>
<div class="columns is-mobile"> <div class="columns is-mobile">
@ -68,12 +66,10 @@ doc-subtab: nesting
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>. Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
</p> </p>
</div> </div>
</div>
</section>

51
docs/documentation/columns/options.html
View File

@ -1,8 +1,14 @@
--- ---
title: Column options title: Column options
subtitle: "Design different <strong>types</strong> of column layouts"
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: options doc-subtab: options
breadcrumb:
- home
- documentation
- columns
- columns-options
--- ---
{% capture columns_multiline %} {% capture columns_multiline %}
@ -83,22 +89,13 @@ doc-subtab: options
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-columns.html %} {% include anchor.html name="Multiline" %}
<section class="section"> <div class="content">
<div class="container">
<h1 class="title">Column options</h1>
<h2 class="subtitle">
Design different <strong>types</strong> of column layouts
</h2>
{% include anchor.html name="Multiline" %}
<div class="content">
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p> <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
</div> </div>
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline is-mobile">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<p class="bd-notification is-info"><code>is-one-quarter</code></p> <p class="bd-notification is-info"><code>is-one-quarter</code></p>
</div> </div>
@ -126,36 +123,36 @@ doc-subtab: options
<div class="column"> <div class="column">
<p class="bd-notification is-info">Auto</p> <p class="bd-notification is-info">Auto</p>
</div> </div>
</div> </div>
{% highlight html %}{{ columns_multiline }}{% endhighlight %} {% highlight html %}{{ columns_multiline }}{% endhighlight %}
{% include anchor.html name="Centering columns" %} {% include anchor.html name="Centering columns" %}
<div class="content"> <div class="content">
<p> <p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element: While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
</p> </p>
</div> </div>
<div class="columns is-mobile is-centered"> <div class="columns is-mobile is-centered">
<div class="column is-half is-narrow"> <div class="column is-half is-narrow">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-half</code><br> <code class="html">is-half</code><br>
<code class="html">is-narrow</code> <code class="html">is-narrow</code>
</p> </p>
</div> </div>
</div> </div>
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
<div class="content"> <div class="content">
<p> <p>
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes): Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
</p> </p>
</div> </div>
<div class="columns is-mobile is-multiline is-centered"> <div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow"> <div class="column is-narrow">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;"> <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br> <code class="html">is-narrow</code><br>
@ -186,8 +183,6 @@ doc-subtab: options
Fifth Column Fifth Column
</p> </p>
</div> </div>
</div> </div>
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
</div>
</section>

59
docs/documentation/columns/responsiveness.html
View File

@ -1,8 +1,14 @@
--- ---
title: Columns responsiveness title: Columns responsiveness
subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: responsiveness doc-subtab: responsiveness
breadcrumb:
- home
- documentation
- columns
- columns-responsiveness
--- ---
{% capture columns_mobile %} {% capture columns_mobile %}
@ -37,26 +43,17 @@ doc-subtab: responsiveness
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-columns.html %} {% include anchor.html name="Mobile columns" %}
<section class="section"> <div class="content">
<div class="container">
<h1 class="title">Columns responsiveness</h1>
<h2 class="subtitle">
Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
</h2>
{% include anchor.html name="Mobile columns" %}
<div class="content">
<p> <p>
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>. By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
<br> <br>
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container: If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
</p> </p>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column"> <div class="column">
<p class="bd-notification is-info">1</p> <p class="bd-notification is-info">1</p>
</div> </div>
@ -69,26 +66,26 @@ doc-subtab: responsiveness
<div class="column"> <div class="column">
<p class="bd-notification is-danger">4</p> <p class="bd-notification is-danger">4</p>
</div> </div>
</div> </div>
{% highlight html %}{{ columns_mobile }}{% endhighlight %} {% highlight html %}{{ columns_mobile }}{% endhighlight %}
<div class="message is-info"> <div class="message is-info">
<p class="message-header"> <p class="message-header">
Resize Resize
</p> </p>
<p class="message-body"> <p class="message-body">
If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed. If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
</p> </p>
</div> </div>
<div class="content"> <div class="content">
<p> <p>
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container: If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
</p> </p>
</div> </div>
<div class="columns is-desktop"> <div class="columns is-desktop">
<div class="column"> <div class="column">
<p class="bd-notification is-info">1</p> <p class="bd-notification is-info">1</p>
</div> </div>
@ -101,17 +98,17 @@ doc-subtab: responsiveness
<div class="column"> <div class="column">
<p class="bd-notification is-danger">4</p> <p class="bd-notification is-danger">4</p>
</div> </div>
</div> </div>
{% highlight html %}{{ columns_desktop }}{% endhighlight %} {% highlight html %}{{ columns_desktop }}{% endhighlight %}
{% include anchor.html name="Different column sizes per breakpoint" %} {% include anchor.html name="Different column sizes per breakpoint" %}
<div class="content"> <div class="content">
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p> <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"> <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code>is-half-mobile</code><br> <code>is-half-mobile</code><br>
@ -131,13 +128,11 @@ doc-subtab: responsiveness
<div class="column"> <div class="column">
<p class="bd-notification is-warning">1</p> <p class="bd-notification is-warning">1</p>
</div> </div>
</div> </div>
<div class="message is-info"> <div class="message is-info">
<p class="message-header">Resize</p> <p class="message-header">Resize</p>
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p> <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
</div> </div>
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
</div>
</section>

163
docs/documentation/columns/sizes.html
View File

@ -1,8 +1,14 @@
--- ---
title: Column sizes title: Column sizes
subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
layout: documentation layout: documentation
doc-tab: columns doc-tab: columns
doc-subtab: sizes doc-subtab: sizes
breadcrumb:
- home
- documentation
- columns
- columns-sizes
--- ---
{% capture columns_sizes %} {% capture columns_sizes %}
@ -95,18 +101,7 @@ doc-subtab: sizes
</div> </div>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-columns.html %} <div class="content">
<section class="section">
<div class="container">
<h1 class="title">Column sizes</h1>
<h2 class="subtitle">
Define the <strong>size</strong> of each column <strong>individually</strong>
</h2>
<hr>
<div class="content">
<p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p> <p>If you want to change the <strong>size</strong> of a single column, you can use one of the following classes:</p>
<ul> <ul>
<li> <li>
@ -126,11 +121,11 @@ doc-subtab: sizes
</li> </li>
</ul> </ul>
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p> <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
</div> </div>
{% include elements/new-tag.html version="0.6.1" %} {% include elements/new-tag.html version="0.6.1" %}
<div class="content"> <div class="content">
<p>You can now use the following multiples of <code>20%</code> as well:</p> <p>You can now use the following multiples of <code>20%</code> as well:</p>
<ul> <ul>
<li> <li>
@ -146,9 +141,9 @@ doc-subtab: sizes
<code>is-one-fifth</code> <code>is-one-fifth</code>
</li> </li>
</ul> </ul>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-four-fifths</code> <code class="html">is-four-fifths</code>
@ -160,9 +155,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-three-quarters"> <div class="column is-three-quarters">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-three-quarters</code> <code class="html">is-three-quarters</code>
@ -174,9 +169,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-two-thirds</code> <code class="html">is-two-thirds</code>
@ -188,9 +183,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-three-fifths"> <div class="column is-three-fifths">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-three-fifths</code> <code class="html">is-three-fifths</code>
@ -202,9 +197,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-half"> <div class="column is-half">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-half</code> <code class="html">is-half</code>
@ -216,9 +211,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-two-fifths"> <div class="column is-two-fifths">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-two-fifths</code> <code class="html">is-two-fifths</code>
@ -230,9 +225,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-one-third</code> <code class="html">is-one-third</code>
@ -244,9 +239,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-one-quarter</code> <code class="html">is-one-quarter</code>
@ -258,9 +253,9 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-one-fifth"> <div class="column is-one-fifth">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-one-fifth</code> <code class="html">is-one-fifth</code>
@ -272,15 +267,15 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning">Auto</p> <p class="bd-notification is-warning">Auto</p>
</div> </div>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns_sizes }}{% endhighlight %} {% highlight html %}{{ columns_sizes }}{% endhighlight %}
</div> </div>
{% include anchor.html name="12 columns system" %} {% include anchor.html name="12 columns system" %}
<div class="content"> <div class="content">
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p> <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
<ul> <ul>
<li><code>is-2</code></li> <li><code>is-2</code></li>
@ -294,14 +289,14 @@ doc-subtab: sizes
<li><code>is-10</code></li> <li><code>is-10</code></li>
<li><code>is-11</code></li> <li><code>is-11</code></li>
</ul> </ul>
</div> </div>
<div class="message is-info"> <div class="message is-info">
<p class="message-header">Naming convention</p> <p class="message-header">Naming convention</p>
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p> <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-2"> <div class="column is-2">
<p class="bd-notification is-info"><code>is-2</code></p> <p class="bd-notification is-info"><code>is-2</code></p>
</div> </div>
@ -335,8 +330,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning has-text-centered">1</p> <p class="bd-notification is-warning has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-3"> <div class="column is-3">
<p class="bd-notification is-info"><code>is-3</code></p> <p class="bd-notification is-info"><code>is-3</code></p>
</div> </div>
@ -367,8 +362,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-success has-text-centered">1</p> <p class="bd-notification is-success has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
<p class="bd-notification is-info"><code>is-4</code></p> <p class="bd-notification is-info"><code>is-4</code></p>
</div> </div>
@ -396,8 +391,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning has-text-centered">1</p> <p class="bd-notification is-warning has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-5"> <div class="column is-5">
<p class="bd-notification is-info"><code>is-5</code></p> <p class="bd-notification is-info"><code>is-5</code></p>
</div> </div>
@ -422,8 +417,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-success has-text-centered">1</p> <p class="bd-notification is-success has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-6"> <div class="column is-6">
<p class="bd-notification is-info"><code>is-6</code></p> <p class="bd-notification is-info"><code>is-6</code></p>
</div> </div>
@ -445,8 +440,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning has-text-centered">1</p> <p class="bd-notification is-warning has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-7"> <div class="column is-7">
<p class="bd-notification is-info"><code>is-7</code></p> <p class="bd-notification is-info"><code>is-7</code></p>
</div> </div>
@ -465,8 +460,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-success has-text-centered">1</p> <p class="bd-notification is-success has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-8"> <div class="column is-8">
<p class="bd-notification is-info"><code>is-8</code></p> <p class="bd-notification is-info"><code>is-8</code></p>
</div> </div>
@ -482,8 +477,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning has-text-centered">1</p> <p class="bd-notification is-warning has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-9"> <div class="column is-9">
<p class="bd-notification is-info"><code>is-9</code></p> <p class="bd-notification is-info"><code>is-9</code></p>
</div> </div>
@ -496,8 +491,8 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-success has-text-centered">1</p> <p class="bd-notification is-success has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-10"> <div class="column is-10">
<p class="bd-notification is-info"><code>is-10</code></p> <p class="bd-notification is-info"><code>is-10</code></p>
</div> </div>
@ -507,71 +502,71 @@ doc-subtab: sizes
<div class="column"> <div class="column">
<p class="bd-notification is-warning has-text-centered">1</p> <p class="bd-notification is-warning has-text-centered">1</p>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-11"> <div class="column is-11">
<p class="bd-notification is-info"><code>is-11</code></p> <p class="bd-notification is-info"><code>is-11</code></p>
</div> </div>
<div class="column"> <div class="column">
<p class="bd-notification is-success has-text-centered">1</p> <p class="bd-notification is-success has-text-centered">1</p>
</div> </div>
</div> </div>
{% include anchor.html name="Offset" %} {% include anchor.html name="Offset" %}
<div class="content"> <div class="content">
<p> <p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>: While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
</p> </p>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"> <div class="column is-half is-offset-one-quarter">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-half</code><br> <code class="html">is-half</code><br>
<code class="html">is-offset-one-quarter</code> <code class="html">is-offset-one-quarter</code>
</p> </p>
</div> </div>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-three-fifths is-offset-one-fifth"> <div class="column is-three-fifths is-offset-one-fifth">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-three-fifths</code><br> <code class="html">is-three-fifths</code><br>
<code class="html">is-offset-one-fifth</code> <code class="html">is-offset-one-fifth</code>
</p> </p>
</div> </div>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-4 is-offset-8"> <div class="column is-4 is-offset-8">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-4</code><br> <code class="html">is-4</code><br>
<code class="html">is-offset-8</code> <code class="html">is-offset-8</code>
</p> </p>
</div> </div>
</div> </div>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-11 is-offset-1"> <div class="column is-11 is-offset-1">
<p class="bd-notification is-info"> <p class="bd-notification is-info">
<code class="html">is-11</code><br> <code class="html">is-11</code><br>
<code class="html">is-offset-1</code> <code class="html">is-offset-1</code>
</p> </p>
</div> </div>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns_offset }}{% endhighlight %} {% highlight html %}{{ columns_offset }}{% endhighlight %}
</div> </div>
{% include anchor.html name="Narrow column" %} {% include anchor.html name="Narrow column" %}
<div class="content"> <div class="content">
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p> <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column is-narrow"> <div class="column is-narrow">
<div class="box" style="width: 200px;"> <div class="box" style="width: 200px;">
<p class="title is-5">Narrow column</p> <p class="title is-5">Narrow column</p>
@ -584,13 +579,13 @@ doc-subtab: sizes
<p class="subtitle">This column will take up the remaining space available.</p> <p class="subtitle">This column will take up the remaining space available.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="highlight-full"> <div class="highlight-full">
{% highlight html %}{{ columns_narrow }}{% endhighlight %} {% highlight html %}{{ columns_narrow }}{% endhighlight %}
</div> </div>
<div class="content"> <div class="content">
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p> <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
<ul> <ul>
<li> <li>
@ -603,6 +598,4 @@ doc-subtab: sizes
<code>is-narrow-desktop</code> <code>is-narrow-desktop</code>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</section>

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

@ -4,6 +4,11 @@ subtitle: "The classic <strong>button</strong>, in different colors, sizes, and
layout: documentation layout: documentation
doc-tab: elements doc-tab: elements
doc-subtab: button doc-subtab: button
breadcrumb:
- home
- documentation
- elements
- button
meta: meta:
- colors: true - colors: true
- sizes: true - sizes: true

4
sass/base/generic.sass
View File

@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default $code-weight: normal !default
$code-size: 0.875em !default $code-size: 0.875em !default
$hr-background-color: $border !default $hr-background-color: $background !default
$hr-height: 1px !default $hr-height: 2px !default
$hr-margin: 1.5rem 0 !default $hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default $strong-color: $text-strong !default

20
sass/components/breadcrumb.sass
View File

@ -5,16 +5,12 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default $breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default $breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $text !default $breadcrumb-item-separator-color: $grey-light !default
.breadcrumb .breadcrumb
+block +block
+unselectable +unselectable
align-items: stretch
display: flex
font-size: $size-normal font-size: $size-normal
overflow: hidden
overflow-x: auto
white-space: nowrap white-space: nowrap
a a
align-items: center align-items: center
@ -37,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default
& + li::before & + li::before
color: $breadcrumb-item-separator-color color: $breadcrumb-item-separator-color
content: "\0002f" content: "\0002f"
ul, ol ul,
align-items: center ol
align-items: flex-start
display: flex display: flex
flex-grow: 1 flex-wrap: wrap
flex-shrink: 0
justify-content: flex-start justify-content: flex-start
.icon .icon
&:first-child &:first-child
@ -50,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default
margin-left: 0.5em margin-left: 0.5em
// Alignment // Alignment
&.is-centered &.is-centered
ol, ul ol,
ul
justify-content: center justify-content: center
&.is-right &.is-right
ol, ul ol,
ul
justify-content: flex-end justify-content: flex-end
// Sizes // Sizes
&.is-small &.is-small

11
sass/elements/title.sass
View File

@ -1,6 +1,7 @@
$title-color: $grey-darker !default $title-color: $grey-darker !default
$title-size: $size-3 !default $title-size: $size-3 !default
$title-weight: $weight-semibold !default $title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default $title-strong-color: inherit !default
$title-strong-weight: inherit !default $title-strong-weight: inherit !default
$title-sub-size: 0.75em !default $title-sub-size: 0.75em !default
@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default $subtitle-color: $grey-dark !default
$subtitle-size: $size-5 !default $subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default $subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default $subtitle-strong-color: $grey-darker !default
$subtitle-strong-weight: $weight-semibold !default $subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
.title, .title,
.subtitle .subtitle
@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default
color: $title-color color: $title-color
font-size: $title-size font-size: $title-size
font-weight: $title-weight font-weight: $title-weight
line-height: 1.125 line-height: $title-line-height
strong strong
color: $title-strong-color color: $title-strong-color
font-weight: $title-strong-weight font-weight: $title-strong-weight
& + .highlight & + .highlight
margin-top: -0.75rem margin-top: -0.75rem
&:not(.is-spaced) + .subtitle &:not(.is-spaced) + .subtitle
margin-top: -1.5rem margin-top: $subtitle-negative-margin
// Sizes // Sizes
@each $size in $sizes @each $size in $sizes
$i: index($sizes, $size) $i: index($sizes, $size)
@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default
color: $subtitle-color color: $subtitle-color
font-size: $subtitle-size font-size: $subtitle-size
font-weight: $subtitle-weight font-weight: $subtitle-weight
line-height: 1.25 line-height: $subtitle-line-height
strong strong
color: $subtitle-strong-color color: $subtitle-strong-color
font-weight: $subtitle-strong-weight font-weight: $subtitle-strong-weight
&:not(.is-spaced) + .title &:not(.is-spaced) + .title
margin-top: -1.5rem margin-top: $subtitle-negative-margin
// Sizes // Sizes
@each $size in $sizes @each $size in $sizes
$i: index($sizes, $size) $i: index($sizes, $size)