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

Remove button inverse, add light/dark

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 10:50:56 -04:00
parent 9f314e5fb3
commit 008f2e419c
5 changed files with 132 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

37
docs/buttons.html
View File

@@ -49,22 +49,23 @@
<div id="content">
<h2 id="buttons">Buttons</h2>
<p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to another element such as an <code>&lt;a&gt;</code>. You can change a button’s appearance using the <code>button-*</code> modifier.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Default&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-success&quot;&gt;Success&lt;/button&gt;
<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-inverse&quot;&gt;Inverse&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button button-link&quot;&gt;Link&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-dark&quot;&gt;Dark&lt;/button&gt;
</code></pre>
<div class="input-single">
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button" class="button-secondary">Secondary</button>
<button type="button" class="button-success">Success</button>
<button type="button" class="button-info">Info</button>
<button type="button" class="button-warning">Warning</button>
<button type="button" class="button-danger">Danger</button>
<button type="button" class="button-inverse">Inverse</button>
<button type="button" class="button-link">Link</button>
<button type="button" class="button-light">Light</button>
<button type="button" class="button-dark">Dark</button>
</div>
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
@@ -89,22 +90,36 @@
<p>Disabled buttons look like this. Set the <code>disabled</code> property on <code>&lt;button&gt;</code> elements to achieve this effect. For all other elements, apply <code>class=&quot;disabled&quot;</code> instead.</p>
<div class="input-single">
<button type="button" disabled>Default</button>
<button type="button" disabled>Primary</button>
<button type="button" class="button-secondary" disabled>Primary</button>
<button type="button" class="button-success" disabled>Success</button>
<button type="button" class="button-info" disabled>Info</button>
<button type="button" class="button-warning" disabled>Warning</button>
<button type="button" class="button-danger" disabled>Danger</button>
<button type="button" class="button-inverse" disabled>Inverse</button>
<button type="button" class="button-light" disabled>Light</button>
<button type="button" class="button-dark" disabled>Dark</button>
</div>
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
<div class="input-single">
<button type="button" class="active">Default</button>
<button type="button" class="active">Primary</button>
<button type="button" class="button-secondary active">Primary</button>
<button type="button" class="button-success active">Success</button>
<button type="button" class="button-info active">Info</button>
<button type="button" class="button-warning active">Warning</button>
<button type="button" class="button-danger active">Danger</button>
<button type="button" class="button-inverse active">Inverse</button>
<button type="button" class="button-light active">Light</button>
<button type="button" class="button-dark active">Dark</button>
</div>
<h3 id="link-buttons">Link Buttons</h3>
<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. The appropriate sizing is placed so they align properly with regular buttons.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-link&quot;&gt;Link&lt;/button&gt;
</code></pre>
<div class="input-single">
<button type="button">Button</button>
<button type="button" class="button-link">Link</button>
</div>
<h3 id="file-buttons">File Buttons</h3>

73
source/css/buttons.css
View File

@@ -8,7 +8,7 @@ button,
text-align: center;
text-decoration: none;
color: var(--button-color);
background-color: var(--button-bg-color-primary);
background-color: var(--button-bg-color);
border-radius: var(--button-border-radius);
border: none;
height: var(--button-height);
@@ -40,9 +40,57 @@ button,
display: block;
}
.button-secondary {
color: var(--button-color-secondary);
background-color: var(--button-bg-color-secondary);
}
.button-success {
color: var(--button-color-success);
background-color: var(--button-bg-color-success);
}
.button-info {
color: var(--button-color-info);
background-color: var(--button-bg-color-info);
}
.button-warning {
color: var(--button-color-warning);
background-color: var(--button-bg-color-warning);
}
.button-danger {
color: var(--button-color-danger);
background-color: var(--button-bg-color-danger);
}
.button-light {
color: var(--button-color-light);
background-color: var(--button-bg-color-light);
}
.button-dark {
color: var(--button-color-dark);
background-color: var(--button-bg-color-dark);
}
.button-link {
background-color: transparent;
color: var(--link-color);
text-decoration: var(--link-text-decoration);
box-shadow: none;
}
.button-link:hover:not(:disabled):not(.disabled) {
background-color: transparent;
color: var(--link-color-hover);
text-decoration: var(--link-text-decoration-hover);
box-shadow: none;
}
button:hover,
.button:hover {
color: var(--button-color);
text-decoration: none;
}
@@ -54,7 +102,6 @@ button:hover:not(:disabled),
button:active:not(.button-link):not(:disabled),
button.active:not(.button-link):not(:disabled),
.button.active:not(.button-link):not(.disabled) {
color: var(--button-color);
box-shadow: var(--button-box-shadow-active);
}
@@ -65,26 +112,6 @@ button.disabled,
cursor: not-allowed;
}
.button-success { background-color: var(--button-bg-color-success); }
.button-info { background-color: var(--button-bg-color-info); }
.button-warning { background-color: var(--button-bg-color-warning); }
.button-danger { background-color: var(--button-bg-color-danger); }
.button-inverse { background-color: var(--button-bg-color-inverse); }
.button-link {
background-color: transparent;
color: var(--link-color);
text-decoration: var(--link-text-decoration);
box-shadow: none;
}
.button-link:hover:not(:disabled) {
background-color: transparent;
color: var(--link-color-hover);
text-decoration: var(--link-text-decoration-hover);
box-shadow: none;
}
label.button input[type="file"] {
display: none;
}

28
source/css/variables.css
View File

@@ -9,6 +9,7 @@
/* Colors (most courtesy of http://clrs.cc/) */
--color-primary: tomato;
--color-secondary: #a5a5a5;
--color-white: white;
--color-navy: #001f3f;
--color-blue: #0074d9;
@@ -29,10 +30,12 @@
/* States */
--state-success: var(--color-green);
--state-info: var(--color-aqua);
--state-info: var(--color-teal);
--state-warning: var(--color-orange);
--state-danger: var(--color-red);
--state-inverse: var(--color-black);
--state-light: var(--color-white);
--state-dark: var(--color-black);
/* Components */
--component-bg-color: #f2f2f2;
@@ -141,17 +144,34 @@
--button-height: var(--input-height);
--button-height-small: var(--input-height-small);
--button-height-big: var(--input-height-big);
--button-color: var(--color-white);
--button-border-radius: var(--component-border-radius);
--button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
--button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
--button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
--button-bg-color-primary: var(--color-primary);
--button-color: var(--color-white);
--button-bg-color: var(--color-primary);
--button-color-secondary: var(--color-white);
--button-bg-color-secondary: var(--color-secondary);
--button-color-success: var(--color-white);
--button-bg-color-success: var(--state-success);
--button-color-info: var(--color-white);
--button-bg-color-info: var(--state-info);
--button-color-warning: var(--color-white);
--button-bg-color-warning: var(--state-warning);
--button-color-danger: var(--color-white);
--button-bg-color-danger: var(--state-danger);
--button-bg-color-inverse: var(--state-inverse);
--button-color-light: var(--color-black);
--button-bg-color-light: var(--state-light);
--button-color-dark: var(--color-white);
--button-bg-color-dark: var(--state-dark);
/* Dropdowns */
--dropdown-min-width: 10rem;

41
source/docs/buttons.md
View File

@@ -9,23 +9,24 @@ description: Add styled buttons to your app with minimal effort.
To create a button, use the `<button>` element or apply the `button` class to another element such as an `<a>`. You can change a button’s appearance using the `button-*` modifier.
```html
<button type="button">Default</button>
<button type="button" class="button-success">Success</button>
<button type="button">Primary</button>
<button type="button" class="button-secondary">Secondary</button>
<button type="button" class="button-info">Info</button>
<button type="button" class="button-warning">Warning</button>
<button type="button" class="button-danger">Danger</button>
<button type="button" class="button-inverse">Inverse</button>
<button type="button" class="button button-link">Link</button>
<button type="button" class="button-light">Light</button>
<button type="button" class="button-dark">Dark</button>
```
<div class="input-single">
<button type="button">Default</button>
<button type="button">Primary</button>
<button type="button" class="button-secondary">Secondary</button>
<button type="button" class="button-success">Success</button>
<button type="button" class="button-info">Info</button>
<button type="button" class="button-warning">Warning</button>
<button type="button" class="button-danger">Danger</button>
<button type="button" class="button-inverse">Inverse</button>
<button type="button" class="button-link">Link</button>
<button type="button" class="button-light">Light</button>
<button type="button" class="button-dark">Dark</button>
</div>
Use the `button-small` and `button-big` modifiers to change the size of a button.
@@ -53,23 +54,41 @@ Use the `button-block` modifier to make the button span the entire width of its
Disabled buttons look like this. Set the `disabled` property on `<button>` elements to achieve this effect. For all other elements, apply `class="disabled"` instead.
<div class="input-single">
<button type="button" disabled>Default</button>
<button type="button" disabled>Primary</button>
<button type="button" class="button-secondary" disabled>Primary</button>
<button type="button" class="button-success" disabled>Success</button>
<button type="button" class="button-info" disabled>Info</button>
<button type="button" class="button-warning" disabled>Warning</button>
<button type="button" class="button-danger" disabled>Danger</button>
<button type="button" class="button-inverse" disabled>Inverse</button>
<button type="button" class="button-light" disabled>Light</button>
<button type="button" class="button-dark" disabled>Dark</button>
</div>
You can force buttons to have an active state by applying the `active` class.
<div class="input-single">
<button type="button" class="active">Default</button>
<button type="button" class="active">Primary</button>
<button type="button" class="button-secondary active">Primary</button>
<button type="button" class="button-success active">Success</button>
<button type="button" class="button-info active">Info</button>
<button type="button" class="button-warning active">Warning</button>
<button type="button" class="button-danger active">Danger</button>
<button type="button" class="button-inverse active">Inverse</button>
<button type="button" class="button-light active">Light</button>
<button type="button" class="button-dark active">Dark</button>
</div>
### Link Buttons
Buttons can be styled to look like normal links with the `button-link` modifier. The appropriate sizing is placed so they align properly with regular buttons.
```html
<button type="button">Button</button>
<button type="button" class="button-link">Link</button>
```
<div class="input-single">
<button type="button">Button</button>
<button type="button" class="button-link">Link</button>
</div>
### File Buttons