Fix variables component, Fix doc tabs

This commit is contained in:
Jeremy Thomas 2018-10-28 08:57:38 +00:00
parent 291c437ab5
commit 9f89f7252c
4 changed files with 99 additions and 118 deletions

View File

@ -1,5 +1,4 @@
{% capture content %}
{% assign anchor_name = include.anchor_name | default: 'Variables' %}
{% assign tab = include.tab | default: page.doc-tab %}
{% assign subtab = include.subtab | default: page.doc-subtab %}
@ -25,49 +24,53 @@
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
{% endif %}
{% endcapture %}
{% unless include.hide_anchor %}
{% include elements/anchor.html name=anchor_name %}
{% endunless %}
{% capture variables_size %}{{ variables | size }}{% endcapture %}
{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
{% unless include.hide_content %}
<div class="content">
<p>{{ content | strip }}</p>
{% if variables_size != '0' or variables_keys_size != '0' %}
{% unless include.hide_anchor %}
{% include elements/anchor.html name=anchor_name %}
{% endunless %}
{% unless include.hide_content %}
<div class="content">
<p>{{ content | strip }}</p>
</div>
{% endunless %}
<div class="table-container">
<table class="table {{ table_class }}">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</tfoot>
<tbody>
{% if include.variables_keys %}
{% for key in include.variables_keys %}
{% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
{% include elements/variable-row.html variable=variable %}
{% endfor %}
{% else %}
{% for variable_name in variables %}
{% assign variable = data.by_name[variable_name] %}
{% include elements/variable-row.html variable=variable %}
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
{% endunless %}
<div class="table-container">
<table class="table {{ table_class }}">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Computed value</th>
</tr>
</tfoot>
<tbody>
{% if include.variables_keys %}
{% for key in include.variables_keys %}
{% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
{% include elements/variable-row.html variable=variable %}
{% endfor %}
{% else %}
{% for variable_name in variables %}
{% assign variable = data.by_name[variable_name] %}
{% include elements/variable-row.html variable=variable %}
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
{% endif %}

View File

@ -72,19 +72,30 @@
.bd-tabs
margin-bottom: $main-spacing
.tabs
overflow: visible
ul,
a
border-bottom-color: $white-ter
border-bottom-width: 2px
ul
flex-wrap: wrap
max-width: 100%
a
margin-bottom: -2px
li:not(.is-active) a:hover
border-bottom-color: $border
+mobile
.bd-tabs
margin-left: -1.5rem
margin-right: -1.5rem
.tabs
ul
flex-wrap: nowrap
+tablet
.bd-tabs
.tabs
overflow: visible
ul,
a
border-bottom-color: $white-ter
border-bottom-width: 2px
a
margin-bottom: -2px
li:not(.is-active) a:hover
border-bottom-color: $border
ul
flex-wrap: wrap
max-width: 100%
.bd-content
hr:first-child

View File

@ -4204,54 +4204,13 @@ a.box:active {
}
.control {
box-sizing: border-box;
clear: both;
font-size: 1rem;
position: relative;
text-align: left;
}
.control.has-icon .icon {
color: #dbdbdb;
height: 2.25em;
pointer-events: none;
position: absolute;
top: 0;
width: 2.25em;
z-index: 4;
}
.control.has-icon .input:focus + .icon {
color: #7a7a7a;
}
.control.has-icon .input.is-small + .icon {
font-size: 0.75rem;
}
.control.has-icon .input.is-medium + .icon {
font-size: 1.25rem;
}
.control.has-icon .input.is-large + .icon {
font-size: 1.5rem;
}
.control.has-icon:not(.has-icon-right) .icon {
left: 0;
}
.control.has-icon:not(.has-icon-right) .input {
padding-left: 2.25em;
}
.control.has-icon.has-icon-right .icon {
right: 0;
}
.control.has-icon.has-icon-right .input {
padding-right: 2.25em;
}
.control.has-icons-left .input:focus ~ .icon,
.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
.control.has-icons-right .select:focus ~ .icon {
@ -10404,27 +10363,35 @@ label.panel-block:hover {
margin-bottom: 3rem;
}
.bd-tabs .tabs {
overflow: visible;
@media screen and (max-width: 768px) {
.bd-tabs {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.bd-tabs .tabs ul {
flex-wrap: nowrap;
}
}
.bd-tabs .tabs ul,
.bd-tabs .tabs a {
border-bottom-color: whitesmoke;
border-bottom-width: 2px;
}
.bd-tabs .tabs ul {
flex-wrap: wrap;
max-width: 100%;
}
.bd-tabs .tabs a {
margin-bottom: -2px;
}
.bd-tabs .tabs li:not(.is-active) a:hover {
border-bottom-color: #dbdbdb;
@media screen and (min-width: 769px), print {
.bd-tabs .tabs {
overflow: visible;
}
.bd-tabs .tabs ul,
.bd-tabs .tabs a {
border-bottom-color: whitesmoke;
border-bottom-width: 2px;
}
.bd-tabs .tabs a {
margin-bottom: -2px;
}
.bd-tabs .tabs li:not(.is-active) a:hover {
border-bottom-color: #dbdbdb;
}
.bd-tabs .tabs ul {
flex-wrap: wrap;
max-width: 100%;
}
}
.bd-content hr:first-child {

File diff suppressed because one or more lines are too long