mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rework buttons
This commit is contained in:
Cory LaViska
12
dist/shoelace.css
vendored
12
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
@@ -55,32 +55,19 @@
|
||||
<button type="button">Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
<p>Use the <code>button-[xs|sm|lg|xl]</code> modifiers to change the size of a button.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-xs">XS Button</button>
|
||||
<button type="button" class="button-sm">SM Button</button>
|
||||
<button type="button">Default Button</button>
|
||||
<button type="button" class="button-lg">LG Button</button>
|
||||
<button type="button" class="button-xl">XL Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-block button-small">Small Block Button</button>
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
<button type="button" class="button-xs">XS Button</button>
|
||||
<button type="button" class="button-sm">SM Button</button>
|
||||
<button type="button">Default Button</button>
|
||||
<button type="button" class="button-lg">LG Button</button>
|
||||
<button type="button" class="button-xl">XL Button</button>
|
||||
</div>
|
||||
|
||||
<p>To disable a button set the <code>disabled</code> property on <code><button></code> elements. You can simulate the disabled state on links by adding the <code>disabled</code> class, but additional JavaScript is required to prevent them from being activated.</p>
|
||||
@@ -121,6 +108,14 @@
|
||||
<button type="button" class="button-dark">Dark</button>
|
||||
</div>
|
||||
|
||||
<h3 id="block-buttons">Block Buttons</h3>
|
||||
<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-block">Block Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Block Button</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. Button sizing is maintained so they align properly with other buttons.</p>
|
||||
<pre><code class="lang-html"><a href="#" class="button button-link">Link Button</a>
|
||||
@@ -131,14 +126,18 @@
|
||||
|
||||
<h3 id="loader-buttons">Loader Buttons</h3>
|
||||
<p>Buttons can be given a loading state with the <code>button-loader</code> modifier. This will make the button text invisible and display a loader using the <code>::after</code> pseudo-element. The button’s width will not be affected.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-loader button-small">Small</button>
|
||||
<button type="button" class="button-loader">Loader</button>
|
||||
<button type="button" class="button-loader button-big">Loader</button>
|
||||
<pre><code class="lang-html"><button type="button" class="button-loader button-xs">XS</button>
|
||||
<button type="button" class="button-loader button-sm">SM</button>
|
||||
<button type="button" class="button-loader">Default</button>
|
||||
<button type="button" class="button-loader button-lg">LG</button>
|
||||
<button type="button" class="button-loader button-xl">XL</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-loader button-small">Loader</button>
|
||||
<button type="button" class="button-loader">Loader</button>
|
||||
<button type="button" class="button-loader button-big">Loader</button>
|
||||
<button type="button" class="button-loader button-xs">XS</button>
|
||||
<button type="button" class="button-loader button-sm">SM</button>
|
||||
<button type="button" class="button-loader">Default</button>
|
||||
<button type="button" class="button-loader button-lg">LG</button>
|
||||
<button type="button" class="button-loader button-xl">XL</button>
|
||||
</div>
|
||||
|
||||
<p>Loader buttons also work with button variations.</p>
|
||||
|
||||
@@ -1,26 +1,54 @@
|
||||
/*! Buttons */
|
||||
:root {
|
||||
--button-height-xs: var(--input-height-xs);
|
||||
--button-height-sm: var(--input-height-sm);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-lg: var(--input-height-lg);
|
||||
--button-height-xl: var(--input-height-xl);
|
||||
--button-font-size-xs: var(--input-font-size-xs);
|
||||
--button-font-size-sm: var(--input-font-size-sm);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-lg: var(--input-font-size-lg);
|
||||
--button-font-size-xl: var(--input-font-size-xl);
|
||||
--button-font-family: var(--input-font-family);
|
||||
--button-font-weight: var(--input-font-weight);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-small: var(--input-font-size-small);
|
||||
--button-font-size-big: var(--input-font-size-big);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-border-width: 2px;
|
||||
--button-speed: .2s;
|
||||
--button-loader-size: 1em;
|
||||
--button-loader-border-width: .15em;
|
||||
|
||||
/* Default */
|
||||
--button-color: var(--color-white);
|
||||
--button-bg-color: var(--state-primary);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-small: var(--input-height-small);
|
||||
--button-height-big: var(--input-height-big);
|
||||
--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-loader-size: 1.4em;
|
||||
--button-loader-border-width: .2em;
|
||||
}
|
||||
|
||||
@keyframes button-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
/* Secondary */
|
||||
--button-color-secondary: var(--color-white);
|
||||
--button-bg-color-secondary: var(--state-secondary);
|
||||
|
||||
/* Success */
|
||||
--button-color-success: var(--color-white);
|
||||
--button-bg-color-success: var(--state-success);
|
||||
|
||||
/* Info */
|
||||
--button-color-info: var(--color-white);
|
||||
--button-bg-color-info: var(--state-info);
|
||||
|
||||
/* Warning */
|
||||
--button-color-warning: var(--color-white);
|
||||
--button-bg-color-warning: var(--state-warning);
|
||||
|
||||
/* Danger */
|
||||
--button-color-danger: var(--color-white);
|
||||
--button-bg-color-danger: var(--state-danger);
|
||||
|
||||
/* Light */
|
||||
--button-color-light: var(--state-dark);
|
||||
--button-bg-color-light: color(var(--state-light) shade(10%));
|
||||
|
||||
/* Dark */
|
||||
--button-color-dark: var(--state-light);
|
||||
--button-bg-color-dark: color(var(--state-dark) tint(10%));
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -33,73 +61,305 @@ button,
|
||||
color: var(--button-color);
|
||||
background-color: var(--button-bg-color);
|
||||
border-radius: var(--button-border-radius);
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-width: var(--button-border-width);
|
||||
border-color: var(--button-bg-color);
|
||||
border-top-color: color(var(--button-bg-color) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color) shade(10%));
|
||||
height: var(--button-height);
|
||||
line-height: var(--button-height);
|
||||
line-height: calc(var(--button-height) - var(--button-border-width) * 2);
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: 0 .75em; /* ems for relative sizing */
|
||||
box-shadow: var(--button-box-shadow);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: .1s box-shadow, .1s background-color;
|
||||
}
|
||||
transition: var(--button-speed) all;
|
||||
|
||||
.button-small {
|
||||
font-size: var(--button-font-size-small);
|
||||
height: var(--button-height-small);
|
||||
line-height: var(--button-height-small);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
.button-big {
|
||||
font-size: var(--button-font-size-big);
|
||||
height: var(--button-height-big);
|
||||
line-height: var(--button-height-big);
|
||||
}
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
text-decoration: none;
|
||||
background-color: color(var(--button-bg-color) shade(10%));
|
||||
border-color: color(var(--button-bg-color) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color) shade(20%));
|
||||
}
|
||||
|
||||
.button-block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color) shade(10%));
|
||||
border-color: color(var(--button-bg-color) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color) shade(10%));
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
color: var(--link-color);
|
||||
text-decoration: var(--link-text-decoration);
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color) alpha(50%));
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
text-decoration: none;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
color: var(--button-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Sizes */
|
||||
&.button-xs {
|
||||
font-size: var(--button-font-size-xs);
|
||||
height: var(--button-height-xs);
|
||||
line-height: calc(var(--button-height-xs) - var(--button-border-width) * 2);
|
||||
}
|
||||
|
||||
button:hover:not(:disabled),
|
||||
.button:hover:not(.disabled) {
|
||||
color: var(--button-color);
|
||||
box-shadow: var(--button-box-shadow-hover);
|
||||
}
|
||||
&.button-sm {
|
||||
font-size: var(--button-font-size-sm);
|
||||
height: var(--button-height-sm);
|
||||
line-height: calc(var(--button-height-sm) - var(--button-border-width) * 2);
|
||||
}
|
||||
|
||||
button:active:not(.button-link):not(:disabled),
|
||||
button.active:not(.button-link):not(:disabled),
|
||||
.button:active:not(.button-link):not(.disabled),
|
||||
.button.active:not(.button-link):not(.disabled) {
|
||||
box-shadow: var(--button-box-shadow-active);
|
||||
}
|
||||
&.button-lg {
|
||||
font-size: var(--button-font-size-lg);
|
||||
height: var(--button-height-lg);
|
||||
line-height: calc(var(--button-height-lg) - var(--button-border-width) * 2);
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
.button.disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
&.button-xl {
|
||||
font-size: var(--button-font-size-xl);
|
||||
height: var(--button-height-xl);
|
||||
line-height: calc(var(--button-height-xl) - var(--button-border-width) * 2);
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
&.button-secondary {
|
||||
color: var(--button-color-secondary);
|
||||
background-color: var(--button-bg-color-secondary);
|
||||
border-color: var(--button-bg-color-secondary);
|
||||
border-top-color: color(var(--button-bg-color-secondary) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-secondary);
|
||||
background-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
border-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-secondary) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-secondary) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
border-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-secondary) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-secondary) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-success {
|
||||
color: var(--button-color-success);
|
||||
background-color: var(--button-bg-color-success);
|
||||
border-color: var(--button-bg-color-success);
|
||||
border-top-color: color(var(--button-bg-color-success) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-success) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-success);
|
||||
background-color: color(var(--button-bg-color-success) shade(10%));
|
||||
border-color: color(var(--button-bg-color-success) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-success) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-success) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-success) shade(10%));
|
||||
border-color: color(var(--button-bg-color-success) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-success) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-success) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-success) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-info {
|
||||
color: var(--button-color-info);
|
||||
background-color: var(--button-bg-color-info);
|
||||
border-color: var(--button-bg-color-info);
|
||||
border-top-color: color(var(--button-bg-color-info) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-info) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-info);
|
||||
background-color: color(var(--button-bg-color-info) shade(10%));
|
||||
border-color: color(var(--button-bg-color-info) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-info) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-info) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-info) shade(10%));
|
||||
border-color: color(var(--button-bg-color-info) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-info) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-info) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-info) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-warning {
|
||||
color: var(--button-color-warning);
|
||||
background-color: var(--button-bg-color-warning);
|
||||
border-color: var(--button-bg-color-warning);
|
||||
border-top-color: color(var(--button-bg-color-warning) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-warning);
|
||||
background-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
border-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-warning) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-warning) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
border-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-warning) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-warning) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-danger {
|
||||
color: var(--button-color-danger);
|
||||
background-color: var(--button-bg-color-danger);
|
||||
border-color: var(--button-bg-color-danger);
|
||||
border-top-color: color(var(--button-bg-color-danger) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-danger);
|
||||
background-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
border-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-danger) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-danger) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
border-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-danger) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-danger) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-light {
|
||||
color: var(--button-color-light);
|
||||
background-color: var(--button-bg-color-light);
|
||||
border-color: var(--button-bg-color-light);
|
||||
border-top-color: color(var(--button-bg-color-light) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-light) shade(10%));
|
||||
|
||||
&:hover:not(:disabled, .disabled) {
|
||||
color: var(--button-color-light);
|
||||
background-color: color(var(--button-bg-color-light) shade(10%));
|
||||
border-color: color(var(--button-bg-color-light) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-light) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-light) shade(20%));
|
||||
}
|
||||
|
||||
&:active:not(:disabled, .disabled),
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-light) shade(10%));
|
||||
border-color: color(var(--button-bg-color-light) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-light) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-light) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-light) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
color: var(--button-color-dark);
|
||||
background-color: var(--button-bg-color-dark);
|
||||
border-color: var(--button-bg-color-dark);
|
||||
border-top-color: color(var(--button-bg-color-dark) tint(10%));
|
||||
border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
|
||||
&:hover {
|
||||
color: var(--button-color-dark);
|
||||
background-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
border-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-dark) tint(0%));
|
||||
border-bottom-color: color(var(--button-bg-color-dark) shade(20%));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active:not(:disabled, .disabled) {
|
||||
background-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
border-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
border-top-color: color(var(--button-bg-color-dark) shade(20%));
|
||||
border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
|
||||
}
|
||||
|
||||
&:focus:not(:disabled, .disabled) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color(var(--button-bg-color-dark) alpha(50%));
|
||||
}
|
||||
}
|
||||
|
||||
/* Block buttons */
|
||||
&.button-block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Link buttons */
|
||||
&.button-link {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--link-color);
|
||||
text-decoration: var(--link-text-decoration);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.button-link:hover:not(:disabled, .disabled),
|
||||
&.button-link:focus:not(:disabled, .disabled) {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-text-decoration-hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* File buttons */
|
||||
@@ -124,54 +384,56 @@ label.button input[type="file"] {
|
||||
width: var(--button-loader-size);
|
||||
height: var(--button-loader-size);
|
||||
border-radius: 50%;
|
||||
border: solid var(--button-loader-border-width) rgba(255, 255, 255, .2);
|
||||
border: solid var(--button-loader-border-width) color(var(--button-color) alpha(20%));
|
||||
border-top-color: var(--button-color);
|
||||
border-left-color: var(--button-color);
|
||||
display: inline-block;
|
||||
animation: button-loader var(--loader-speed) linear infinite;
|
||||
}
|
||||
|
||||
.button-secondary.button-loader::after {
|
||||
border-color: color(var(--button-color-secondary) alpha(20%));
|
||||
border-top-color: var(--button-color-secondary);
|
||||
border-left-color: var(--button-color-secondary);
|
||||
}
|
||||
|
||||
.button-success.button-loader::after {
|
||||
border-color: color(var(--button-color-success) alpha(20%));
|
||||
border-top-color: var(--button-color-success);
|
||||
border-left-color: var(--button-color-success);
|
||||
}
|
||||
|
||||
.button-info.button-loader::after {
|
||||
border-color: color(var(--button-color-info) alpha(20%));
|
||||
border-top-color: var(--button-color-info);
|
||||
border-left-color: var(--button-color-info);
|
||||
}
|
||||
|
||||
.button-warning.button-loader::after {
|
||||
border-color: color(var(--button-color-warning) alpha(20%));
|
||||
border-top-color: var(--button-color-warning);
|
||||
border-left-color: var(--button-color-warning);
|
||||
}
|
||||
|
||||
.button-danger.button-loader::after {
|
||||
border-color: color(var(--button-color-danger) alpha(20%));
|
||||
border-top-color: var(--button-color-danger);
|
||||
border-left-color: var(--button-color-danger);
|
||||
}
|
||||
|
||||
.button-light.button-loader::after {
|
||||
border-top-color: var(--state-dark);
|
||||
border-left-color: var(--state-dark);
|
||||
border-color: color(var(--button-color-light) alpha(20%));
|
||||
border-top-color: var(--button-color-light);
|
||||
border-left-color: var(--button-color-light);
|
||||
}
|
||||
|
||||
.button-dark.button-loader::after {
|
||||
border-top-color: var(--state-light);
|
||||
border-left-color: var(--state-light);
|
||||
border-color: color(var(--button-color-dark) alpha(20%));
|
||||
border-top-color: var(--button-color-dark);
|
||||
border-left-color: var(--button-color-dark);
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.button-secondary {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.button-success {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.button-info {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.button-light,
|
||||
button.button-light:hover:not(:disabled),
|
||||
.button-light:hover:not(.disabled) {
|
||||
color: var(--state-dark);
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.button-dark,
|
||||
button.button-dark:hover:not(:disabled),
|
||||
.button-dark:hover:not(.disabled) {
|
||||
color: var(--state-light);
|
||||
background-color: var(--state-dark);
|
||||
@keyframes button-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -16,38 +16,22 @@ To create a button, use the `<button>` element or apply the `button` class to an
|
||||
<button type="button">Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-small` and `button-big` modifiers to change the size of a button.
|
||||
Use the `button-[xs|sm|lg|xl]` modifiers to change the size of a button.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
<button type="button" class="button-xs">XS Button</button>
|
||||
<button type="button" class="button-sm">SM Button</button>
|
||||
<button type="button">Default Button</button>
|
||||
<button type="button" class="button-lg">LG Button</button>
|
||||
<button type="button" class="button-xl">XL Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-block` modifier to make a button span the entire width of its parent.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
<button type="button" class="button-xs">XS Button</button>
|
||||
<button type="button" class="button-sm">SM Button</button>
|
||||
<button type="button">Default Button</button>
|
||||
<button type="button" class="button-lg">LG Button</button>
|
||||
<button type="button" class="button-xl">XL Button</button>
|
||||
</div>
|
||||
|
||||
To disable a button set the `disabled` property on `<button>` elements. You can simulate the disabled state on links by adding the `disabled` class, but additional JavaScript is required to prevent them from being activated.
|
||||
@@ -98,6 +82,18 @@ Use the `button-*` modifier to create variations.
|
||||
<button type="button" class="button-dark">Dark</button>
|
||||
</div>
|
||||
|
||||
### Block Buttons
|
||||
|
||||
Use the `button-block` modifier to make a button span the entire width of its parent.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-block">Block Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Block Button</button>
|
||||
</div>
|
||||
|
||||
### Link Buttons
|
||||
|
||||
Buttons can be styled to look like normal links with the `button-link` modifier. Button sizing is maintained so they align properly with other buttons.
|
||||
@@ -115,15 +111,19 @@ Buttons can be styled to look like normal links with the `button-link` modifier.
|
||||
Buttons can be given a loading state with the `button-loader` modifier. This will make the button text invisible and display a loader using the `::after` pseudo-element. The button’s width will not be affected.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-loader button-small">Small</button>
|
||||
<button type="button" class="button-loader">Loader</button>
|
||||
<button type="button" class="button-loader button-big">Loader</button>
|
||||
<button type="button" class="button-loader button-xs">XS</button>
|
||||
<button type="button" class="button-loader button-sm">SM</button>
|
||||
<button type="button" class="button-loader">Default</button>
|
||||
<button type="button" class="button-loader button-lg">LG</button>
|
||||
<button type="button" class="button-loader button-xl">XL</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-loader button-small">Loader</button>
|
||||
<button type="button" class="button-loader">Loader</button>
|
||||
<button type="button" class="button-loader button-big">Loader</button>
|
||||
<button type="button" class="button-loader button-xs">XS</button>
|
||||
<button type="button" class="button-loader button-sm">SM</button>
|
||||
<button type="button" class="button-loader">Default</button>
|
||||
<button type="button" class="button-loader button-lg">LG</button>
|
||||
<button type="button" class="button-loader button-xl">XL</button>
|
||||
</div>
|
||||
|
||||
Loader buttons also work with button variations.
|
||||
|
||||
Reference in New Issue
Block a user