diff options
1 files changed, 22 insertions, 0 deletions
| -rw-r--r-- | docs/getting-started.html | 22 |
diff --git a/docs/getting-started.html b/docs/getting-started.html index 982080e..e57c652 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -337,6 +337,7 @@ </div> <h4 id="compiling-gulptasks" class="s-subtitle">Folder Structure</h4> + <!-- folder structure --> <pre class="code"><code>spectre/ ├── dist/ <span class="com">// Build folder (Git ignored)</span> @@ -456,6 +457,27 @@ </div> </div> </div> + + <h5 id="variables-buttons" class="s-subtitle">Buttons</h5> + <div class="docs-note"> + <p>There are 2 button variant mixins in <code>mixins.less</code> to generate different color variants. </p> + <ul> + <li>.button-variant(<code>@color</code>: @primary-color);</li> + <li>.button-outline-variant(<code>@color</code>: @primary-color);</li> + </ul> + +<!-- button variables example --> +<pre class="code" data-lang="LESS"><code><span class="com"><!-- filled button with the success color --></span> +<span class="tag">.btn-success</span> { + .button-variant(<span class="atv">@success-color</span>); +} + +<span class="com"><!-- outlined button with the success color --></span> +<span class="tag">.btn-outline-success</span> { + .button-outline-variant(<span class="atv">@success-color</span>); +} +</code></pre> + </div> <h5 id="variables-sizes" class="s-subtitle">Sizes</h5> <div class="docs-note"> |