Edit icon size
This commit is contained in:
parent
51fe86d804
commit
3730d53a49
3 changed files with 8 additions and 9 deletions
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue