mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add lots of snippets
This commit is contained in:
Jeremy Thomas
parent
08e082ae07
commit
3b0cb2ad4e
@ -1,8 +1,12 @@
|
||||
<div class="bd-snippet">
|
||||
<div class="
|
||||
bd-snippet
|
||||
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
|
||||
{% if include.size %}bd-is-{{ include.size }}{% endif %}
|
||||
">
|
||||
<div class="bd-snippet-preview">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
<div class="bd-snippet-code {%unless include.clipped %}highlight-full{% endunless %}">
|
||||
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
|
||||
{% highlight html %}{{ include.content }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container is-fullhd">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
{% if site.vernum >= 43 %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
{% if site.vernum >= 44 %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/media-object/">
|
||||
Media object
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/menu/">
|
||||
Menu
|
||||
@ -26,15 +19,9 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
{% if site.vernum >= 43 %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
|
||||
Nav
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
|
||||
@ -49,33 +49,41 @@
|
||||
position: relative
|
||||
&::before
|
||||
content: "Snippet"
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code
|
||||
+tablet
|
||||
width: 50%
|
||||
|
||||
.bd-snippet-preview
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-snippet-code
|
||||
background-color: $pre-background
|
||||
+tablet
|
||||
&,
|
||||
.highlight,
|
||||
.highlight pre
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.highlight,
|
||||
.highlight pre,
|
||||
.highlight .language-html
|
||||
flex-grow: 1
|
||||
.highlight pre
|
||||
white-space: pre
|
||||
|
||||
+desktop
|
||||
.bd-snippet.bd-is-vertical
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: center
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code
|
||||
width: 50%
|
||||
.bd-snippet-code
|
||||
&,
|
||||
.highlight,
|
||||
.highlight pre
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.highlight,
|
||||
.highlight pre,
|
||||
.highlight .language-html
|
||||
flex-grow: 1
|
||||
.highlight pre
|
||||
white-space: pre
|
||||
&.bd-is-one-third
|
||||
.bd-snippet-preview
|
||||
width: 33.3333%
|
||||
.bd-snippet-code
|
||||
width: 66.6666%
|
||||
|
||||
// Highlight
|
||||
.highlight.bd-is-hovering
|
||||
@ -83,7 +91,7 @@
|
||||
box-shadow: 0 0 0 2px $yellow
|
||||
|
||||
.highlight pre
|
||||
max-height: 480px
|
||||
max-height: 320px
|
||||
margin-bottom: 0 !important
|
||||
padding: 0
|
||||
code
|
||||
|
||||
@ -9622,20 +9622,8 @@ html.route-index #carbon {
|
||||
|
||||
.bd-snippet::before {
|
||||
content: "Snippet";
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code {
|
||||
width: 50%;
|
||||
}
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
@ -9646,22 +9634,37 @@ html.route-index #carbon {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet-code,
|
||||
.bd-snippet-code .highlight,
|
||||
.bd-snippet-code .highlight pre {
|
||||
@media screen and (min-width: 1008px) {
|
||||
.bd-snippet.bd-is-vertical {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-preview,
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code {
|
||||
width: 50%;
|
||||
}
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code,
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight,
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bd-snippet-code .highlight,
|
||||
.bd-snippet-code .highlight pre,
|
||||
.bd-snippet-code .highlight .language-html {
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight,
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre,
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight .language-html {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.bd-snippet-code .highlight pre {
|
||||
.bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre {
|
||||
white-space: pre;
|
||||
}
|
||||
.bd-snippet.bd-is-vertical.bd-is-one-third .bd-snippet-preview {
|
||||
width: 33.3333%;
|
||||
}
|
||||
.bd-snippet.bd-is-vertical.bd-is-one-third .bd-snippet-code {
|
||||
width: 66.6666%;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight.bd-is-hovering {
|
||||
@ -9670,7 +9673,7 @@ html.route-index #carbon {
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
max-height: 480px;
|
||||
max-height: 320px;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -253,11 +253,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Dropdown content
|
||||
</h3>
|
||||
{% include anchor.html name="Dropdown content" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -274,11 +270,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Hoverable or Toggable
|
||||
</h3>
|
||||
{% include anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -309,11 +301,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Right aligned
|
||||
</h3>
|
||||
{% include anchor.html name="Right aligned" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@ -73,14 +73,7 @@ variables:
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
{{menu_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{menu_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@ -201,78 +201,29 @@ variables:
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_example %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_colors_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_colors_example %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Message body only" %}
|
||||
|
||||
<h3 class="title">Message body only</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>omit</strong> the message header:</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_body_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_body_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=message_body_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_small}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_small}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_small %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_normal}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_normal}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_normal %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_medium}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_medium}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_medium %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_large}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{message_large}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=message_large %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@ -245,11 +245,7 @@ variables:
|
||||
|
||||
{% highlight html %}{{pagination_right_example}}{% endhighlight %}
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h2 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h2>
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<p class="content">
|
||||
The pagination comes in <strong>3 additional sizes</strong>.<br>
|
||||
|
||||
@ -152,14 +152,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
{{panel_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{panel_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=panel_example size="one-third" %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@ -382,118 +382,76 @@ variables:
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_example horizontal=true %}
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=tabs_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<h3 class="title">Alignment</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_centered_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_right_example horizontal=true clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Icons" %}
|
||||
|
||||
<h3 class="title">Icons</h3>
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_icons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_small_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_small_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_medium_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_large_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_large_example horizontal=true clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<div class="content">
|
||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}
|
||||
|
||||
<p class="content">
|
||||
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
||||
</p>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}
|
||||
|
||||
<p class="content">
|
||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Combining" %}
|
||||
|
||||
<h3 class="title">Combining</h3>
|
||||
<div class="content">
|
||||
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %}
|
||||
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@ variables:
|
||||
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=content_example fullheight=true %}
|
||||
{% include snippet.html content=content_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user