mirror of
https://github.com/jgthms/bulma
synced 2026-03-25 22:39:36 -07:00
Create links nav
This commit is contained in:
Jeremy Thomas
51
docs/_data/links.json
Normal file
51
docs/_data/links.json
Normal 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"]
|
||||
}
|
||||
}
|
||||
@@ -31,6 +31,11 @@
|
||||
"name": "$title-strong-weight",
|
||||
"value": "inherit"
|
||||
},
|
||||
"title-line-height": {
|
||||
"id": "title-line-height",
|
||||
"name": "$title-line-height",
|
||||
"value": "1.125"
|
||||
},
|
||||
"subtitle-color": {
|
||||
"id": "subtitle-color",
|
||||
"name": "$subtitle-color",
|
||||
@@ -46,6 +51,11 @@
|
||||
"name": "$subtitle-weight",
|
||||
"value": "$weight-normal"
|
||||
},
|
||||
"subtitle-line-height": {
|
||||
"id": "subtitle-line-height",
|
||||
"name": "$subtitle-line-height",
|
||||
"value": "1.25"
|
||||
},
|
||||
"subtitle-strong-color": {
|
||||
"id": "subtitle-strong-color",
|
||||
"name": "$subtitle-strong-color",
|
||||
@@ -55,6 +65,11 @@
|
||||
"id": "subtitle-strong-weight",
|
||||
"name": "$subtitle-strong-weight",
|
||||
"value": "$weight-semibold"
|
||||
},
|
||||
"subtitle-negative-margin": {
|
||||
"id": "subtitle-negative-margin",
|
||||
"name": "$subtitle-negative-margin",
|
||||
"value": "-1.25rem"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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">
|
||||
{{ include.name }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<section class="section bd-typo">
|
||||
<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/">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
|
||||
@@ -5,6 +5,25 @@ route: 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">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
@@ -13,27 +32,43 @@ route: documentation
|
||||
<div class="bd-breadcrumb">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ site.url }}">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
{% for key in page.breadcrumb %}
|
||||
{% assign link = site.data.links.by_id[key] %}
|
||||
<li{% if forloop.last %} class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<header class="bd-header">
|
||||
<h1 class="title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
<p class="subtitle is-4">
|
||||
{{ page.subtitle }}
|
||||
</p>
|
||||
</header>
|
||||
@@ -41,6 +76,8 @@ route: documentation
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
@@ -49,5 +86,3 @@ route: documentation
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
|
||||
@@ -9,7 +9,27 @@
|
||||
position: relative
|
||||
|
||||
.bd-breadcrumb
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
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
|
||||
margin-bottom: 2.5rem
|
||||
@@ -52,6 +72,8 @@
|
||||
overflow: hidden
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.bd-prev-next
|
||||
display: flex
|
||||
.bd-side
|
||||
flex: 0 0 300px
|
||||
|
||||
|
||||
@@ -347,10 +347,10 @@ code {
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #dbdbdb;
|
||||
background-color: whitesmoke;
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@@ -4960,7 +4960,7 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.title:not(.is-spaced) + .subtitle {
|
||||
margin-top: -1.5rem;
|
||||
margin-top: -1.25rem;
|
||||
}
|
||||
|
||||
.title.is-1 {
|
||||
@@ -5004,7 +5004,7 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.subtitle:not(.is-spaced) + .title {
|
||||
margin-top: -1.5rem;
|
||||
margin-top: -1.25rem;
|
||||
}
|
||||
|
||||
.subtitle.is-1 {
|
||||
@@ -5071,11 +5071,7 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -5107,15 +5103,15 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.breadcrumb li + li::before {
|
||||
color: #4a4a4a;
|
||||
color: #b5b5b5;
|
||||
content: "\0002f";
|
||||
}
|
||||
|
||||
.breadcrumb ul, .breadcrumb ol {
|
||||
align-items: center;
|
||||
.breadcrumb ul,
|
||||
.breadcrumb ol {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -5127,11 +5123,11 @@ a.tag:hover {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.breadcrumb.is-centered ol, .breadcrumb.is-centered ul {
|
||||
.breadcrumb.is-centered ol {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumb.is-right ol, .breadcrumb.is-right ul {
|
||||
.breadcrumb.is-right ol {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -9502,9 +9498,35 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.bd-breadcrumb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
@@ -9557,6 +9579,9 @@ label.panel-block:hover {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.bd-prev-next {
|
||||
display: flex;
|
||||
}
|
||||
.bd-side {
|
||||
flex: 0 0 300px;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns powered by Flexbox
|
||||
subtitle: "A simple way to build <strong>responsive columns</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: basics
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-basics
|
||||
---
|
||||
|
||||
{% capture columns %}
|
||||
@@ -22,13 +28,6 @@ doc-subtab: basics
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<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>
|
||||
<ol>
|
||||
@@ -40,21 +39,19 @@ doc-subtab: basics
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
<p class="bd-notification is-primary">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
<p class="bd-notification is-primary">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
<p class="bd-notification is-primary">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
<p class="bd-notification is-primary">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns gap
|
||||
subtitle: Customize the <strong>gap</strong> between the columns
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: gap
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-gap
|
||||
---
|
||||
|
||||
{% capture columns_default_gap %}
|
||||
@@ -79,15 +85,6 @@ doc-subtab: gap
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<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">
|
||||
@@ -219,6 +216,3 @@ doc-subtab: gap
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
---
|
||||
title: Nesting columns
|
||||
subtitle: "A simple way to build <strong>responsive columns</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: nesting
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-nesting
|
||||
---
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<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>
|
||||
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
|
||||
@@ -75,5 +73,3 @@ doc-subtab: nesting
|
||||
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Column options
|
||||
subtitle: "Design different <strong>types</strong> of column layouts"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: options
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-options
|
||||
---
|
||||
|
||||
{% capture columns_multiline %}
|
||||
@@ -83,15 +89,6 @@ doc-subtab: options
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<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">
|
||||
@@ -189,5 +186,3 @@ doc-subtab: options
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Columns responsiveness
|
||||
subtitle: "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-responsiveness
|
||||
---
|
||||
|
||||
{% capture columns_mobile %}
|
||||
@@ -37,15 +43,6 @@ doc-subtab: responsiveness
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<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">
|
||||
@@ -139,5 +136,3 @@ doc-subtab: responsiveness
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Column sizes
|
||||
subtitle: "Define the <strong>size</strong> of each column <strong>individually</strong>"
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
doc-subtab: sizes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-sizes
|
||||
---
|
||||
|
||||
{% capture columns_sizes %}
|
||||
@@ -95,17 +101,6 @@ doc-subtab: sizes
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<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>
|
||||
<ul>
|
||||
@@ -604,5 +599,3 @@ doc-subtab: sizes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,6 +4,11 @@ subtitle: "The classic <strong>button</strong>, in different colors, sizes, and
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- button
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: true
|
||||
|
||||
@@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
|
||||
$code-weight: normal !default
|
||||
$code-size: 0.875em !default
|
||||
|
||||
$hr-background-color: $border !default
|
||||
$hr-height: 1px !default
|
||||
$hr-background-color: $background !default
|
||||
$hr-height: 2px !default
|
||||
$hr-margin: 1.5rem 0 !default
|
||||
|
||||
$strong-color: $text-strong !default
|
||||
|
||||
@@ -5,16 +5,12 @@ $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: $grey-light !default
|
||||
|
||||
.breadcrumb
|
||||
+block
|
||||
+unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
font-size: $size-normal
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
@@ -37,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default
|
||||
& + li::before
|
||||
color: $breadcrumb-item-separator-color
|
||||
content: "\0002f"
|
||||
ul, ol
|
||||
align-items: center
|
||||
ul,
|
||||
ol
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.icon
|
||||
&:first-child
|
||||
@@ -50,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default
|
||||
margin-left: 0.5em
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ol, ul
|
||||
ol,
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ol, ul
|
||||
ol,
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Sizes
|
||||
&.is-small
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
$title-color: $grey-darker !default
|
||||
$title-size: $size-3 !default
|
||||
$title-weight: $weight-semibold !default
|
||||
$title-line-height: 1.125 !default
|
||||
$title-strong-color: inherit !default
|
||||
$title-strong-weight: inherit !default
|
||||
$title-sub-size: 0.75em !default
|
||||
@@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default
|
||||
$subtitle-color: $grey-dark !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-weight: $weight-normal !default
|
||||
$subtitle-line-height: 1.25 !default
|
||||
$subtitle-strong-color: $grey-darker !default
|
||||
$subtitle-strong-weight: $weight-semibold !default
|
||||
$subtitle-negative-margin: -1.25rem !default
|
||||
|
||||
.title,
|
||||
.subtitle
|
||||
@@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default
|
||||
color: $title-color
|
||||
font-size: $title-size
|
||||
font-weight: $title-weight
|
||||
line-height: 1.125
|
||||
line-height: $title-line-height
|
||||
strong
|
||||
color: $title-strong-color
|
||||
font-weight: $title-strong-weight
|
||||
& + .highlight
|
||||
margin-top: -0.75rem
|
||||
&:not(.is-spaced) + .subtitle
|
||||
margin-top: -1.5rem
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
@@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default
|
||||
color: $subtitle-color
|
||||
font-size: $subtitle-size
|
||||
font-weight: $subtitle-weight
|
||||
line-height: 1.25
|
||||
line-height: $subtitle-line-height
|
||||
strong
|
||||
color: $subtitle-strong-color
|
||||
font-weight: $subtitle-strong-weight
|
||||
&:not(.is-spaced) + .title
|
||||
margin-top: -1.5rem
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
|
||||
Reference in New Issue
Block a user