Fix control variables

This commit is contained in:
Jeremy Thomas
2016-10-29 21:51:13 +01:00
parent a2afb61ffe
commit 2e7e1d7c75
9 changed files with 574 additions and 258 deletions

View File

@@ -115,25 +115,70 @@ doc-subtab: button
<hr>
<h3 class="title">States</h3>
<h4 class="subtitle">Loading</h4>
<h4 class="subtitle">Normal</h4>
<div class="columns">
<div class="column">
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>
</div>
<div class="column">
{% highlight html %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Hover</h4>
<div class="columns">
<div class="column">
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>
</div>
<div class="column">
{% highlight html %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Focus</h4>
<div class="columns">
<div class="column">
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
</div>
<div class="column">
{% highlight html %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
{% endhighlight %}
</div>
</div>
@@ -161,6 +206,29 @@ doc-subtab: button
</div>
</div>
<h4 class="subtitle">Loading</h4>
<div class="columns">
<div class="column">
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
</div>
<div class="column">
{% highlight html %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Disabled</h4>
<div class="columns">

View File

@@ -250,6 +250,72 @@ doc-subtab: form
<hr>
<h3 class="title">States</h3>
<h4 class="subtitle">Normal</h4>
<div class="columns">
<div class="column is-half">
<p class="control">
<input class="input" type="text" placeholder="Normal input">
</p>
<p class="control">
<textarea class="textarea" placeholder="Normal textarea"></textarea>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<p class="control">
<input class="input" type="text" placeholder="Normal input">
</p>
<p class="control">
<textarea class="textarea" placeholder="Normal textarea"></textarea>
</p>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Hover</h4>
<div class="columns">
<div class="column is-half">
<p class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input">
</p>
<p class="control">
<textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<p class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input">
</p>
<p class="control">
<textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
</p>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Focus</h4>
<div class="columns">
<div class="column is-half">
<p class="control">
<input class="input is-focused" type="text" placeholder="Focused input">
</p>
<p class="control">
<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
</p>
</div>
<div class="column is-half">
{% highlight html %}
<p class="control">
<input class="input is-focused" type="text" placeholder="Focused input">
</p>
<p class="control">
<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
</p>
{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Loading</h4>
<div class="columns">
<div class="column is-half">