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
Files
3fc0e236f668d2b634a5efe54828e562e5718af6
webawesome/source/css/buttons.css
Cory LaViska 3fc0e236f6 Move variables back to variables.css
2017-08-26 13:05:28 -04:00

389 lines
14 KiB
CSS
Raw Blame History

/*! Buttons */
button,
.button {
font-family: var(--button-font-family);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
text-align: center;
text-decoration: none;
color: var(--button-color);
background-color: var(--button-bg-color);
border-radius: var(--button-border-radius);
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: 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 */
cursor: pointer;
display: inline-block;
transition: var(--button-speed) all;
&:hover {
color: var(--button-color);
}
&: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%));
}
&: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%));
}
&:focus:not(:disabled, .disabled) {
outline: none;
box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%));
}
&:disabled,
&.disabled {
text-decoration: none;
opacity: .5;
cursor: not-allowed;
}
/* 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-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-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-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 var(--button-focus-width) 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 var(--button-focus-width) 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 var(--button-focus-width) 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 var(--button-focus-width) 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 var(--button-focus-width) 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 var(--button-focus-width) 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:not(:disabled, .disabled) {
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:not(:disabled, .disabled),
&.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 var(--button-focus-width) 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 */
label.button input[type="file"] {
display: none;
}
/* Loader buttons */
.button-loader,
.button-loader:hover {
position: relative;
min-width: calc(var(--button-loader-size) * 2);
color: transparent !important;
overflow: hidden;
}
.button-loader::after {
content: '';
position: absolute;
top: calc(50% - calc(var(--button-loader-size) / 2));
left: calc(50% - calc(var(--button-loader-size) / 2));
width: var(--button-loader-size);
height: var(--button-loader-size);
border-radius: 50%;
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-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-color: color(var(--button-color-dark) alpha(20%));
border-top-color: var(--button-color-dark);
border-left-color: var(--button-color-dark);
}
@keyframes button-loader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Reference in New Issue View Git Blame Copy Permalink