233 lines
6.4 KiB
CSS
233 lines
6.4 KiB
CSS
/*
|
|
Buttons
|
|
========================================
|
|
*/
|
|
|
|
/* Core */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px 12px;
|
|
margin-bottom: 0;
|
|
font-size: var(--base-font-size);
|
|
line-height: var(--base-line-height);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background-color: var(--btn-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-background), var(--btn-background-highlight));
|
|
border: 1px solid var(--btn-border);
|
|
border-bottom-color: #b3b3b3;
|
|
border-radius: var(--base-border-radius);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
/* Hover/focus state */
|
|
.btn:hover,
|
|
.btn:focus {
|
|
color: var(--gray-dark);
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-background) 80%, black), color-mix(in srgb, var(--btn-background-highlight) 80%, black));
|
|
transition: background-image 0.2s ease;
|
|
}
|
|
|
|
/* Specific hover states for colored buttons */
|
|
.btn-primary:hover, .btn-primary:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-primary-background) 80%, black), color-mix(in srgb, var(--btn-primary-background-highlight) 80%, black));
|
|
}
|
|
|
|
.btn-warning:hover, .btn-warning:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-warning-background) 80%, black), color-mix(in srgb, var(--btn-warning-background-highlight) 80%, black));
|
|
}
|
|
|
|
.btn-danger:hover, .btn-danger:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-danger-background) 80%, black), color-mix(in srgb, var(--btn-danger-background-highlight) 80%, black));
|
|
}
|
|
|
|
.btn-success:hover, .btn-success:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-success-background) 80%, black), color-mix(in srgb, var(--btn-success-background-highlight) 80%, black));
|
|
}
|
|
|
|
.btn-info:hover, .btn-info:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-info-background) 80%, black), color-mix(in srgb, var(--btn-info-background-highlight) 80%, black));
|
|
}
|
|
|
|
.btn-inverse:hover, .btn-inverse:focus {
|
|
color: var(--white);
|
|
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-inverse-background) 80%, black), color-mix(in srgb, var(--btn-inverse-background-highlight) 80%, black));
|
|
}
|
|
|
|
/* Focus state for keyboard and accessibility */
|
|
.btn:focus {
|
|
outline: thin dotted #333;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Active state */
|
|
.btn.active,
|
|
.btn:active {
|
|
background-image: none;
|
|
outline: 0;
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
/* Disabled state */
|
|
.btn.disabled,
|
|
.btn[disabled] {
|
|
cursor: default;
|
|
background-image: none;
|
|
opacity: 0.65;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.btn-large {
|
|
padding: var(--padding-large);
|
|
font-size: var(--font-size-large);
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
|
|
.btn-large [class^="icon-"],
|
|
.btn-large [class*=" icon-"] {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Small */
|
|
.btn-small {
|
|
padding: var(--padding-small);
|
|
font-size: var(--font-size-small);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
|
|
.btn-small [class^="icon-"],
|
|
.btn-small [class*=" icon-"] {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.btn-mini [class^="icon-"],
|
|
.btn-mini [class*=" icon-"] {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* Mini */
|
|
.btn-mini {
|
|
padding: var(--padding-mini);
|
|
font-size: var(--font-size-mini);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
|
|
/* Block button */
|
|
.btn-block {
|
|
display: flex;
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Vertically space out multiple block buttons */
|
|
.btn-block + .btn-block {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Specificity overrides */
|
|
input[type="submit"].btn-block,
|
|
input[type="reset"].btn-block,
|
|
input[type="button"].btn-block {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Alternate buttons */
|
|
.btn-primary.active,
|
|
.btn-warning.active,
|
|
.btn-danger.active,
|
|
.btn-success.active,
|
|
.btn-info.active,
|
|
.btn-inverse.active {
|
|
color: rgba(255, 255, 255, .75);
|
|
}
|
|
|
|
/* Set the backgrounds */
|
|
.btn-primary {
|
|
color: var(--white);
|
|
background-color: var(--btn-primary-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-primary-background), var(--btn-primary-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Warning appears as orange */
|
|
.btn-warning {
|
|
color: var(--white);
|
|
background-color: var(--btn-warning-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-warning-background), var(--btn-warning-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Danger and error appear as red */
|
|
.btn-danger {
|
|
color: var(--white);
|
|
background-color: var(--btn-danger-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-danger-background), var(--btn-danger-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Success appears as green */
|
|
.btn-success {
|
|
color: var(--white);
|
|
background-color: var(--btn-success-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-success-background), var(--btn-success-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Info appears as a neutral blue */
|
|
.btn-info {
|
|
color: var(--white);
|
|
background-color: var(--btn-info-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-info-background), var(--btn-info-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Inverse appears as dark gray */
|
|
.btn-inverse {
|
|
color: var(--white);
|
|
background-color: var(--btn-inverse-background);
|
|
background-image: linear-gradient(to bottom, var(--btn-inverse-background), var(--btn-inverse-background-highlight));
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Link buttons */
|
|
.btn-link,
|
|
.btn-link:active,
|
|
.btn-link[disabled] {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-link {
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
color: var(--link-color);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.btn-link:hover,
|
|
.btn-link:focus {
|
|
color: var(--link-color-hover);
|
|
text-decoration: underline;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn-link[disabled]:hover,
|
|
.btn-link[disabled]:focus {
|
|
color: var(--gray-dark);
|
|
text-decoration: none;
|
|
}
|