Edit icon size

This commit is contained in:
Paul Nicoué 2023-03-03 12:12:57 +01:00
parent 51fe86d804
commit 3730d53a49
3 changed files with 8 additions and 9 deletions

View file

@ -38,8 +38,7 @@
--small-content-width: Min(100%, 60rem); --small-content-width: Min(100%, 60rem);
--regular-icon-size: 2rem; --regular-icon-size: 2rem;
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem); --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
--small-icon-size: var(--text-font-height); --button-icon-size: var(--text-font-height);
--small-icon-wrapper-size: var(--small-icon-size);
--button-with-icon-gap: 0.5rem; --button-with-icon-gap: 0.5rem;
@ -205,16 +204,16 @@ button {
gap: var(--button-with-icon-gap); gap: var(--button-with-icon-gap);
span { span {
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2)); transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2));
transition: transform 200ms ease-in-out; transition: transform 200ms ease-in-out;
} }
svg { svg {
flex-shrink: 0; flex-shrink: 0;
opacity: 0; opacity: 0;
width: var(--small-icon-size); width: var(--button-icon-size);
height: var(--small-icon-size); height: var(--button-icon-size);
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2)); transform: translateX(calc((var(--button-with-icon-gap) + var(--button-icon-size)) / 2));
transition: transition:
opacity 200ms ease-in-out, opacity 200ms ease-in-out,
transform 200ms ease-in-out; transform 200ms ease-in-out;

View file

@ -67,7 +67,7 @@
&__logo { &__logo {
width: auto; width: auto;
height: var(--small-icon-size); height: var(--footnote-font-height);
&-background { &-background {
fill: var(--primary-color); fill: var(--primary-color);

View file

@ -64,8 +64,8 @@
gap: 1rem; gap: 1rem;
a { a {
width: var(--small-icon-wrapper-size); width: var(--text-font-height);
height: var(--small-icon-wrapper-size); height: var(--text-font-height);
svg { svg {
width: var(--h3-font-size); width: var(--h3-font-size);