diff options
1 files changed, 82 insertions, 3 deletions
| -rw-r--r-- | docs/index.html | 85 |
diff --git a/docs/index.html b/docs/index.html index 2f2b552..5f2cb09 100644 --- a/docs/index.html +++ b/docs/index.html @@ -197,9 +197,88 @@ └── spectre.less </code></pre> - <header id="colors" class="text-center"><h4>Colors</h4></header> + <header id="variables" class="text-center"><h4>Variables</h4></header> <section class="notes"> - <p>Spectre.css has its consistent design language colors (primary color <span class="docs-dot bg-primary"></span> <span style="color:#5764c6;">#5764c6</span>), you can modify <code>variables.less</code> to create your new or match existing design. </p> + <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design. + <h5>Colors</h5> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#5764c6;color:#fff;"> + <div class="color-title">#5764c6</div> + <div class="color-subtitle">Primary</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#eff1fa;color:#5764c6;"> + <div class="color-title">#eff1fa</div> + <div class="color-subtitle">Secondary</div> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#454d5d;color:#fff;"> + <div class="color-title">#454d5d</div> + <div class="color-subtitle">Dark</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#727e96;color:#fff;"> + <div class="color-title">#727e96</div> + <div class="color-subtitle">Gray dark</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#acb3c2;color:#fff;"> + <div class="color-title">#acb3c2</div> + <div class="color-subtitle">Gray</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e7e9ed;color:#727e96;"> + <div class="color-title">#e7e9ed</div> + <div class="color-subtitle">Gray light</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f0f1f4;color:#727e96;"> + <div class="color-title">#f0f1f4</div> + <div class="color-subtitle">Border</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f8f9fa;color:#727e96;"> + <div class="color-title">#f8f9fa</div> + <div class="color-subtitle">Background</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#fff;color:#727e96;"> + <div class="color-title">#fff</div> + <div class="color-subtitle">Light</div> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#32b643;color:#fff;"> + <div class="color-title">#32b643</div> + <div class="color-subtitle">Success</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#ffb700;color:#fff;"> + <div class="color-title">#ffb700</div> + <div class="color-subtitle">Warning</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e85600;color:#fff;"> + <div class="color-title">#e85600</div> + <div class="color-subtitle">Danger</div> + </div> + </div> + </div> </section> </section> @@ -268,7 +347,7 @@ <ul class="pagination"> <li class="page-item page-next"> <a href="elements.html"> - <p class="page-item-meta">Next</p> + <p class="page-item-subtitle">Next</p> <h4 class="page-item-title">Elements</h4> </a> </li> |