Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add focus

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 23:53:34 +01:00
parent e8d4efb274
commit f123eb9562
13 changed files with 310 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
docs/documentation/modifiers/syntax.html
View File

@@ -22,6 +22,66 @@ breadcrumb:
</a>
{% endcapture %}
{% capture button_colors %}
<a class="button is-primary">
Button
</a>
<a class="button is-link">
Button
</a>
<a class="button is-info">
Button
</a>
<a class="button is-success">
Button
</a>
<a class="button is-warning">
Button
</a>
<a class="button is-danger">
Button
</a>
{% endcapture %}
{% capture button_sizes %}
<a class="button is-small">
Button
</a>
<a class="button">
Button
</a>
<a class="button is-medium">
Button
</a>
<a class="button is-large">
Button
</a>
{% endcapture %}
{% capture button_states %}
<a class="button is-primary is-outlined">
Button
</a>
<a class="button is-loading">
Button
</a>
<a class="button" disabled>
Button
</a>
{% endcapture %}
{% capture button_combinations %}
<a class="button is-primary is-small" disabled>
Button
</a>
<a class="button is-info is-loading">
Button
</a>
<a class="button is-danger is-outlined is-large">
Button
</a>
{% endcapture %}
<div class="columns">
<div class="column">
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
@@ -84,26 +144,7 @@ breadcrumb:
</div>
<div class="column is-half">
<div class="highlight-full">
{% highlight html %}
<a class="button is-primary">
Button
</a>
<a class="button is-link">
Button
</a>
<a class="button is-info">
Button
</a>
<a class="button is-success">
Button
</a>
<a class="button is-warning">
Button
</a>
<a class="button is-danger">
Button
</a>
{% endhighlight %}
{% highlight html %}{{ button_colors }}{% endhighlight %}
</div>
</div>
</div>
@@ -134,21 +175,8 @@ breadcrumb:
</p>
</div>
<div class="column is-half">
{% highlight html %}
<a class="button is-small">
Button
</a>
<a class="button">
Button
</a>
<a class="button is-medium">
Button
</a>
<a class="button is-large">
Button
</a>
{% endhighlight %}
</div>
{% highlight html %}{{ button_sizes }}{% endhighlight %}
</div>
</div>
<div class="columns">
@@ -167,23 +195,35 @@ breadcrumb:
<a class="button is-primary is-outlined">Button</a>
</p>
<p class="field">
<a class="button is-primary is-loading">Button</a>
<a class="button is-loading">Button</a>
</p>
<p class="field">
<a class="button is-primary" disabled>Button</a>
<a class="button" disabled>Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<a class="button is-primary is-outlined">
Button
</a>
<a class="button is-primary is-loading">
Button
</a>
<a class="button is-primary" disabled>
Button
</a>
{% endhighlight %}
</div>
{% highlight html %}{{ button_states }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
As a result, it's very easy to <strong>combine modifiers:</strong>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-primary is-small" disabled>Button</a>
</p>
<p class="field">
<a class="button is-info is-loading">Button</a>
</p>
<p class="field">
<a class="button is-danger is-outlined is-large">Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %}{{ button_combinations }}{% endhighlight %}
</div>
</div>