Blockchain explorer for Ethereum based network and a tool for inspecting and analyzing EVM based blockchains.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
blockscout/apps/block_scout_web/assets/css/components/_button.scss

105 lines
2.0 KiB

$button-primary-color: $primary !default;
$button-secondary-color: $secondary !default;
.button, .btn {
border-radius: 2px;
border: none;
cursor: pointer;
display: inline-block;
line-height: 1.2;
padding: 10px 16px;
text-align: center;
text-decoration: none;
transition: $transition-cont;
white-space: nowrap;
&-primary {
background-color: $button-primary-color;
border: 1px solid $button-primary-color;
color: #fff;
&:hover,
&:focus {
background-color: darken($button-primary-color, 10%);
border-color: darken($button-primary-color, 10%);
color: #fff;
outline: none !important;
text-decoration: none;
}
&:disabled {
background-color: $gray-300;
color: $gray-800;
text-decoration: none;
}
}
&-secondary {
background-color: #fff;
border: 1px solid $button-secondary-color;
color: $button-secondary-color;
font-weight: 400;
&:hover,
&:focus {
background-color: darken($button-secondary-color, 10%);
border-color: darken($button-secondary-color, 10%);
color: #fff;
outline: none !important;
text-decoration: none;
}
}
&-xs {
font-size: 11px;
padding: 6px 9px 6px !important;
}
&-sm {
font-size: 12px;
padding: 10px 20px 10px;
}
&-md {
font-size: 1.5rem;
padding: 15px 30px 15px;
}
&-lg {
font-size: 1.5rem;
padding: 20px 60px 20px;
}
&-danger {
background-color: #dc3545 !important;
border: 1px solid #dc3545 !important;
}
// Block button
// -------------------------
&-block {
display: block;
width: 100%;
}
&-disabled,
&:disabled {
background-color: $gray-300;
color: $gray-500;
text-decoration: none;
}
}
// Vertically space out multiple block buttons
.button-block + .button-block {
margin-top: 5px;
}
.spinner {
background-image: url('/images/spinner.svg');
background-position: right;
background-repeat: no-repeat;
background-size: 30px;
}