js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #43

Browse Source
This commit is contained in:
Cory LaViska
2017-08-18 16:02:58 -04:00
parent 2ea71fdce7
commit fda7c402aa
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/customizing.html
View File

@@ -48,7 +48,7 @@
<div id="content">
<h2 id="customizing">Customizing</h2>
<p>If you’re using the source version of Shoelace (i.e. not the CDN or <code>/dist</code> version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>shoelace.css</code></a>.</p>
<p>If you’re using the source version of Shoelace (i.e. not the CDN or <code>/dist</code> version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>.</p>
<p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
<pre><code class="lang-css">:root {
--body-color: white;
@@ -57,7 +57,7 @@
}
</code></pre>
<p>You don’t need to include all of the core variables. You only need to include the ones you want to customize.</p>
<p>Additional variables can be found in the <code>:root</code> block of each component’s stylesheet. For example, to customize alerts, refer to the top of <a href="https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css"><code>alerts.css</code></a> for a complete list of variables.</p>
<p>Additional variables can be found in the <code>:root</code> block of each component’s stylesheet. For example, to customize alerts, refer to the top of <a href="../source/css/alerts.css"><code>source/css/alerts.css</code></a> for a complete list of variables.</p>
<h3 id="using-variables">Using Variables</h3>
<p>You can use any of Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own <a href="#creating-custom-components">custom components</a>.</p>
<pre><code class="lang-css">.your-selector {

4
source/docs/customizing.md
View File

@@ -6,7 +6,7 @@ description: Learn how to customize Shoelace.css with CSS variables.
## Customizing
If you’re using the source version of Shoelace (i.e. not the CDN or `/dist` version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in the `:root` block of [`shoelace.css`](../source/css/shoelace.css).
If you’re using the source version of Shoelace (i.e. not the CDN or `/dist` version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in the `:root` block of [`source/css/shoelace.css`](../source/css/shoelace.css).
For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:
@@ -20,7 +20,7 @@ For example, you can customize the default text color, background color, and the
You don’t need to include all of the core variables. You only need to include the ones you want to customize.
Additional variables can be found in the `:root` block of each component’s stylesheet. For example, to customize alerts, refer to the top of [`alerts.css`](https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css) for a complete list of variables.
Additional variables can be found in the `:root` block of each component’s stylesheet. For example, to customize alerts, refer to the top of [`source/css/alerts.css`](../source/css/alerts.css) for a complete list of variables.
### Using Variables