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

Rework width- and height-

Browse Source
This commit is contained in:
Cory LaViska
2017-08-16 21:48:08 -04:00
parent 6515d4a2cc
commit ede9bb44da
6 changed files with 121 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

40
docs/progress-bars.html
View File

@@ -52,27 +52,27 @@
<p>Create a progress bar with the following markup. Use the <code>progress-small</code> and <code>progress-big</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
<p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress progress-small&quot;&gt;
&lt;div class=&quot;progress-bar width-25&quot;&gt;25%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-25&quot;&gt;25%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-big&quot;&gt;
&lt;div class=&quot;progress-bar width-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-75&quot;&gt;75%&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress progress-small">
<div class="progress-bar width-25">25%</div>
<div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar width-75">75%</div>
<div class="progress-bar w-75">75%</div>
</div>
<p>When progress can’t be determined, use the <code>progress-indeterminate</code> modifier to set an indeterminate state.</p>
@@ -87,59 +87,59 @@
<h3 id="variations">Variations</h3>
<p>Use the <code>progress-*</code> modifier to create variations.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress progress-secondary&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-success&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-info&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-warning&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-danger&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-light&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-dark&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress progress-secondary">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-success">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-info">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-warning">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-danger">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-light">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-dark">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
</div>

36
docs/utilities.html
View File

@@ -162,30 +162,30 @@
<p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>
<p>A clearfix utility is also available to clear floated elements. Just apply the <code>clearfix</code> class to the appropriate element.</p>
<h3 id="sizing-utilities">Sizing Utilities</h3>
<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>width-*</code> or <code>height-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
<p>You can also use the <code>max-width-100</code> and <code>max-height-100</code> classes to set a max width and height of 100%.</p>
<pre><code class="lang-html">&lt;div class=&quot;width-25&quot;&gt;25%&lt;/div&gt;
&lt;div class=&quot;width-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;width-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;width-100&quot;&gt;100%&lt;/div&gt;
<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>w-*</code> or <code>h-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
<p>You can also use the <code>w-max-100</code> and <code>h-max-100</code> classes to set a max width and height of 100%.</p>
<pre><code class="lang-html">&lt;div class=&quot;w-25&quot;&gt;25%&lt;/div&gt;
&lt;div class=&quot;w-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;w-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;w-100&quot;&gt;100%&lt;/div&gt;
&lt;div class=&quot;height-25&quot;&gt;25%&lt;/div&gt;
&lt;div class=&quot;height-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;height-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;height-100&quot;&gt;100%&lt;/div&gt;
&lt;div class=&quot;h-25&quot;&gt;25%&lt;/div&gt;
&lt;div class=&quot;h-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;h-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;h-100&quot;&gt;100%&lt;/div&gt;
</code></pre>
<div class="width-sizing-example">
<div class="width-25">25%</div>
<div class="width-50">50%</div>
<div class="width-75">75%</div>
<div class="width-100">100%</div>
<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
</div>
<div class="height-sizing-example">
<div class="height-25">25%</div>
<div class="height-50">50%</div>
<div class="height-75">75%</div>
<div class="height-100">100%</div>
<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-75">75%</div>
<div class="h-100">100%</div>
</div>
<h3 id="spacing-utilities">Spacing Utilities</h3>

88
source/css/utilities.css
View File

@@ -80,52 +80,52 @@
* Sizing utilities
***************************************************************************************************/
.width-0 { width: 0% !important; }
.width-5 { width: 5% !important; }
.width-10 { width: 10% !important; }
.width-15 { width: 15% !important; }
.width-20 { width: 20% !important; }
.width-25 { width: 25% !important; }
.width-30 { width: 30% !important; }
.width-35 { width: 35% !important; }
.width-40 { width: 40% !important; }
.width-45 { width: 45% !important; }
.width-50 { width: 50% !important; }
.width-55 { width: 55% !important; }
.width-60 { width: 60% !important; }
.width-65 { width: 65% !important; }
.width-70 { width: 70% !important; }
.width-75 { width: 75% !important; }
.width-80 { width: 80% !important; }
.width-85 { width: 85% !important; }
.width-90 { width: 90% !important; }
.width-95 { width: 95% !important; }
.width-100 { width: 100% !important; }
.w-0 { width: 0% !important; }
.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }
.w-55 { width: 55% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-70 { width: 70% !important; }
.w-75 { width: 75% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }
.w-100 { width: 100% !important; }
.height-0 { height: 0% !important; }
.height-5 { height: 5% !important; }
.height-10 { height: 10% !important; }
.height-15 { height: 15% !important; }
.height-20 { height: 20% !important; }
.height-25 { height: 25% !important; }
.height-30 { height: 30% !important; }
.height-35 { height: 35% !important; }
.height-40 { height: 40% !important; }
.height-45 { height: 45% !important; }
.height-50 { height: 50% !important; }
.height-55 { height: 55% !important; }
.height-60 { height: 60% !important; }
.height-65 { height: 65% !important; }
.height-70 { height: 70% !important; }
.height-75 { height: 75% !important; }
.height-80 { height: 80% !important; }
.height-85 { height: 85% !important; }
.height-90 { height: 90% !important; }
.height-95 { height: 95% !important; }
.height-100 { height: 100% !important; }
.h-0 { height: 0% !important; }
.h-5 { height: 5% !important; }
.h-10 { height: 10% !important; }
.h-15 { height: 15% !important; }
.h-20 { height: 20% !important; }
.h-25 { height: 25% !important; }
.h-30 { height: 30% !important; }
.h-35 { height: 35% !important; }
.h-40 { height: 40% !important; }
.h-45 { height: 45% !important; }
.h-50 { height: 50% !important; }
.h-55 { height: 55% !important; }
.h-60 { height: 60% !important; }
.h-65 { height: 65% !important; }
.h-70 { height: 70% !important; }
.h-75 { height: 75% !important; }
.h-80 { height: 80% !important; }
.h-85 { height: 85% !important; }
.h-90 { height: 90% !important; }
.h-95 { height: 95% !important; }
.h-100 { height: 100% !important; }
.max-width-100 { max-width: 100% !important; }
.max-height-100 { max-width: 100% !important; }
.w-max-100 { max-width: 100% !important; }
.h-max-100 { max-width: 100% !important; }
/***************************************************************************************************
* Spacing utilities

40
source/docs/progress-bars.md
View File

@@ -14,28 +14,28 @@ An optional text label can be included inside the `progress-bar` element.
```html
<div class="progress progress-small">
<div class="progress-bar width-25">25%</div>
<div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar width-75">75%</div>
<div class="progress-bar w-75">75%</div>
</div>
```
<div class="progress progress-small">
<div class="progress-bar width-25">25%</div>
<div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar width-75">75%</div>
<div class="progress-bar w-75">75%</div>
</div>
When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state.
@@ -56,58 +56,58 @@ Use the `progress-*` modifier to create variations.
```html
<div class="progress progress-secondary">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-success">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-info">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-warning">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-danger">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-light">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-dark">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
```
<div class="progress progress-secondary">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-success">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-info">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-warning">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-danger">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-light">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>
<div class="progress progress-dark">
<div class="progress-bar width-50">50%</div>
<div class="progress-bar w-50">50%</div>
</div>

36
source/docs/utilities.md
View File

@@ -131,34 +131,34 @@ A clearfix utility is also available to clear floated elements. Just apply the `
### Sizing Utilities
Sizing utilities can be used to set a relative width or height on any element. Just apply a `width-*` or `height-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.
Sizing utilities can be used to set a relative width or height on any element. Just apply a `w-*` or `h-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.
You can also use the `max-width-100` and `max-height-100` classes to set a max width and height of 100%.
You can also use the `w-max-100` and `h-max-100` classes to set a max width and height of 100%.
```html
<div class="width-25">25%</div>
<div class="width-50">50%</div>
<div class="width-75">75%</div>
<div class="width-100">100%</div>
<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
<div class="height-25">25%</div>
<div class="height-50">50%</div>
<div class="height-75">75%</div>
<div class="height-100">100%</div>
<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-75">75%</div>
<div class="h-100">100%</div>
```
<div class="width-sizing-example">
<div class="width-25">25%</div>
<div class="width-50">50%</div>
<div class="width-75">75%</div>
<div class="width-100">100%</div>
<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
</div>
<div class="height-sizing-example">
<div class="height-25">25%</div>
<div class="height-50">50%</div>
<div class="height-75">75%</div>
<div class="height-100">100%</div>
<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-75">75%</div>
<div class="h-100">100%</div>
</div>
### Spacing Utilities