host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit button style

Browse source
This commit is contained in:
Paul Nicoué 2023-02-14 17:50:36 +01:00
parent b82fd9f9ee
commit 12da502e99
3 changed files with 6 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/styles/main.scss
View file

@ -40,7 +40,7 @@
--regular-icon-size: 2rem;
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
--button-gap: 0.5rem;
--button-with-icon-gap: 0.5rem;
// Colors
@ -192,22 +192,21 @@ button {
display: flex;
justify-content: center;
align-items: center;
gap: var(--button-with-icon-gap);
&__text,
&-text {
transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
transition: transform 200ms ease-in-out;
}
&__icon,
&-icon {
display: inherit;
flex-shrink: 0;
opacity: 0;
width: var(--small-icon-size);
height: var(--small-icon-size);
margin: 0 0 0 var(--button-gap);
transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
transition:
opacity 200ms ease-in-out,
transform 200ms ease-in-out;