|
// default abtract btn definition |
|
%btn { |
|
font-family: 'Logical-Regular'; |
|
width: fit-content; |
|
height: fit-content; |
|
padding: 4px 18px; // -2px for the border |
|
border-radius: var(--radius-m); |
|
transition: filter 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out; |
|
border: 2px solid transparent; |
|
|
|
/** Default layout */ |
|
display: flex; |
|
align-items: center; |
|
|
|
/** state in which the button is already clicked or pressed and the action should not be done again */ |
|
&.activated { |
|
color: var(--color-activated, inherit); |
|
border-color: var(--border-color-activated, inherit); |
|
background-color: var(--bg-color-activated, transparent); |
|
} |
|
|
|
&:not(.activated):disabled, |
|
&:not(.activated).disabled { |
|
cursor: default; |
|
filter: opacity(0.5); |
|
} |
|
|
|
&:not(:disabled, .disabled, .activated) { |
|
cursor: pointer; |
|
|
|
&:hover, |
|
&:focus { |
|
color: var(--color-hover); |
|
background-color: var(--bg-color-hover); |
|
} |
|
} |
|
} |
|
|
|
// Practical definition of the buttons |
|
.btn { |
|
&-neutral { |
|
@extend %btn; |
|
border: 0; |
|
padding: 0; |
|
color: inherit; |
|
background-color: inherit; |
|
} |
|
|
|
&-primary { |
|
@extend %btn; |
|
color: var(--text-color); |
|
background-color: var(--es-blue-dark); |
|
--bg-color-hover: var(--es-blue-light); |
|
|
|
--color-activated: var(--es-blue-light); |
|
--border-color-activated: var(--es-blue-light); |
|
} |
|
|
|
&-secondary { |
|
@extend %btn; |
|
color: var(--text-color); |
|
background-color: var(--es-dark); |
|
--color-hover: var(--text-color); |
|
--bg-color-hover: var(--es-black-dark); |
|
|
|
--color-activated: var(--grey-secondary); |
|
--border-color-activated: var(--es-dark); |
|
} |
|
|
|
&-tertiary { |
|
@extend %btn; |
|
color: var(--bg-color); |
|
background-color: var(--text-color); |
|
--color-hover: white; |
|
--bg-color-hover: var(--es-dark); |
|
|
|
--color-activated: var(--text-color); |
|
} |
|
} |
