mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
5592687df1
* Updating design tokens v1.8 and shadows * Adding missing stories * Some fixes and updates to css and stories * removing unneeded story * Fixing story order
352 lines
6.8 KiB
SCSS
352 lines
6.8 KiB
SCSS
/*
|
|
Buttons
|
|
*/
|
|
|
|
.button {
|
|
@include H6;
|
|
|
|
font-weight: 500;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
transition: border-color 0.3s ease, background-color 0.3s ease;
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
cursor: auto;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.btn-secondary {
|
|
color: var(--color-primary-default);
|
|
border: 1px solid var(--color-primary-muted);
|
|
background-color: var(--color-background-default);
|
|
|
|
&:hover {
|
|
border-color: var(--color-primary-default);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-primary-muted);
|
|
border-color: var(--color-primary-default);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
opacity: 1;
|
|
color: var(--color-primary-muted);
|
|
}
|
|
}
|
|
|
|
.btn-warning {
|
|
color: var(--color-text-default);
|
|
border: 1px solid var(--color-warning-default);
|
|
background-color: var(--color-background-default);
|
|
|
|
&:hover {
|
|
border: 1px solid var(--color-warning-default);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-warning-muted);
|
|
border: 1px solid var(--color-warning-alternative);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
opacity: 1;
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
color: var(--color-error-default);
|
|
border: 1px solid var(--color-error-muted);
|
|
background-color: var(--color-background-default);
|
|
|
|
&:hover {
|
|
border-color: var(--color-error-default);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-error-muted);
|
|
border-color: var(--color-error-default);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
opacity: 1;
|
|
color: var(--color-error-disabled);
|
|
}
|
|
}
|
|
|
|
.btn-danger-primary {
|
|
color: var(--color-error-inverse);
|
|
border: 1px solid;
|
|
border-color: var(--color-error-default);
|
|
background-color: var(--color-error-default);
|
|
|
|
&:hover {
|
|
border-color: var(--color-error-alternative);
|
|
background-color: var(--color-error-alternative);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-error-alternative0);
|
|
border-color: var(--color-error-alternative);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
opacity: 1;
|
|
border-color: var(--color-error-disabled);
|
|
background-color: var(--color-error-disabled);
|
|
}
|
|
}
|
|
|
|
.btn-default {
|
|
color: var(--color-text-alternative);
|
|
border: 1px solid var(--color-border-default);
|
|
background: var(--color-background-default);
|
|
|
|
&:hover {
|
|
border-color: var(--color-border-default);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-background-alternative);
|
|
border-color: var(--color-border-default);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
opacity: 1;
|
|
color: var(--color-text-muted);
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
color: var(--color-primary-inverse);
|
|
border: 1px solid var(--color-primary-default);
|
|
background-color: var(--color-primary-default);
|
|
|
|
&:hover {
|
|
border-color: var(--color-primary-alternative);
|
|
background-color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-primary-alternative);
|
|
border-color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
border-color: var(--color-primary-disabled);
|
|
background-color: var(--color-primary-disabled);
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
@include H4;
|
|
|
|
color: var(--color-primary-default);
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
cursor: auto;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
color: var(--color-primary-disabled);
|
|
}
|
|
}
|
|
|
|
.btn--large {
|
|
min-height: 54px;
|
|
}
|
|
|
|
/**
|
|
All Buttons styles are deviations from design guide
|
|
*/
|
|
|
|
.btn-raised {
|
|
color: var(--color-primary-default);
|
|
background-color: var(--color-background-default);
|
|
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
|
padding: 6px;
|
|
height: initial;
|
|
min-height: initial;
|
|
width: initial;
|
|
min-width: initial;
|
|
}
|
|
|
|
button[disabled],
|
|
input[type="submit"][disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.btn--rounded {
|
|
border-radius: 100px;
|
|
will-change: box-shadow;
|
|
transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms;
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
|
}
|
|
|
|
&.btn-secondary {
|
|
border: 1px solid var(--color-primary-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
border-color: var(--color-primary-disabled);
|
|
color: var(--color-primary-disabled);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--color-primary-alternative);
|
|
}
|
|
}
|
|
|
|
&.btn-default {
|
|
border: 1px solid var(--color-icon-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
border-color: var(--color-border-muted);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--color-text-alternative);
|
|
}
|
|
}
|
|
|
|
&.btn-danger {
|
|
border: 1px solid var(--color-error-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
border-color: var(--color-error-disabled);
|
|
color: var(--color-error-disabled);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--color-error-alternative);
|
|
}
|
|
}
|
|
|
|
&.btn-warning {
|
|
border: 1px solid var(--color-warning-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
border-color: var(--color-warning-alternative);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--color-warning-alternative);
|
|
}
|
|
}
|
|
|
|
&.btn-primary {
|
|
background-color: var(--color-primary-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
background-color: var(--color-primary-disabled);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--color-primary-alternative);
|
|
}
|
|
}
|
|
|
|
&.btn-danger-primary {
|
|
background-color: var(--color-error-default);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
background-color: var(--color-error-disabled);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--color-error-alternative);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn--inline {
|
|
display: inline;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
width: auto;
|
|
color: var(--color-primary-default);
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-primary-alternative);
|
|
}
|
|
|
|
&--disabled,
|
|
&[disabled] {
|
|
cursor: auto;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
color: var(--color-primary-disabled);
|
|
}
|
|
}
|