1be02f5a85
On hover and active, buttons have a box shadow effect that is too heavy visually so we remove this effect for now.
134 lines
3.5 KiB
SCSS
134 lines
3.5 KiB
SCSS
.c__button {
|
|
align-items: center;
|
|
border-radius: var(--c--components--button--border-radius);
|
|
border: thin solid transparent;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: flex;
|
|
font-weight: var(--c--components--button--font-weight);
|
|
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
|
|
user-select: none;
|
|
|
|
&:hover, &:focus-visible, &:active, &.c__button--active {
|
|
border-radius: var(--c--components--button--border-radius--active);
|
|
}
|
|
|
|
&:focus-visible {
|
|
border-color: #FFF;
|
|
box-shadow: 0 0 0 4px var(--c--theme--colors--primary-400);
|
|
outline: none;
|
|
}
|
|
|
|
&:active, &.c__button--active {
|
|
border-color: currentColor;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--c--theme--colors--greyscale-200);
|
|
color: var(--c--theme--colors--greyscale-400);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&--medium {
|
|
height: var(--c--components--button--medium-height);
|
|
font-size: var(--c--components--button--medium-font-size);
|
|
padding: 0 var(--c--theme--spacings--s);
|
|
|
|
&.c__button--icon-only {
|
|
width: var(--c--components--button--medium-height);
|
|
}
|
|
}
|
|
|
|
&--small {
|
|
height: var(--c--components--button--small-height);
|
|
font-size: var(--c--components--button--small-font-size);
|
|
padding: 0 0.75rem;
|
|
|
|
&.c__button--icon-only {
|
|
width: var(--c--components--button--small-height);
|
|
}
|
|
}
|
|
|
|
&--icon-only {
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
&--with-icon--left, &--with-icon--right {
|
|
gap: var(--c--theme--spacings--t);
|
|
}
|
|
|
|
&--with-icon--left {
|
|
padding: 0 var(--c--theme--spacings--s) 0 var(--c--theme--spacings--t);
|
|
}
|
|
|
|
&--with-icon--right {
|
|
padding: 0 var(--c--theme--spacings--t) 0 var(--c--theme--spacings--s);
|
|
}
|
|
|
|
&--primary {
|
|
background-color: var(--c--theme--colors--primary-500);
|
|
color: var(--c--theme--colors--primary-text);
|
|
|
|
&:hover, &:focus-visible {
|
|
background-color: var(--c--theme--colors--primary-800);
|
|
color: var(--c--theme--colors--primary-text);
|
|
}
|
|
|
|
&:active, &.c__button--active {
|
|
background-color: var(--c--theme--colors--greyscale-000);
|
|
color: var(--c--theme--colors--primary-800);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: var(--c--theme--colors--primary-100);
|
|
color: var(--c--theme--colors--primary-700);
|
|
|
|
&:hover, &:focus-visible {
|
|
background-color: var(--c--theme--colors--primary-500);
|
|
color: var(--c--theme--colors--primary-text);
|
|
}
|
|
|
|
&:active, &.c__button--active {
|
|
background-color: var(--c--theme--colors--primary-text);
|
|
color: var(--c--theme--colors--primary-600);
|
|
}
|
|
}
|
|
|
|
&--tertiary {
|
|
background-color: transparent;
|
|
color: var(--c--theme--colors--greyscale-800);
|
|
|
|
&:hover, &:focus-visible {
|
|
background-color: var(--c--theme--colors--greyscale-200);
|
|
color: var(--c--theme--colors--greyscale-900);
|
|
}
|
|
|
|
&:active, &.c__button--active {
|
|
background-color: var(--c--theme--colors--greyscale-100);
|
|
color: var(--c--theme--colors--greyscale-800);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&--danger {
|
|
background-color: var(--c--theme--colors--danger-500);
|
|
color: var(--c--theme--colors--danger-text);
|
|
|
|
&:hover, &:focus-visible {
|
|
background-color: var(--c--theme--colors--danger-800);
|
|
color: var(--c--theme--colors--primary-text);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--c--theme--colors--greyscale-000);
|
|
color: var(--c--theme--colors--danger-800);
|
|
}
|
|
}
|
|
}
|