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

12
components/AppError.vue
View file

@ -99,19 +99,9 @@
} }
&__button { &__button {
@include button-with-icon;
grid-area: button; grid-area: button;
margin: 0 2rem; margin: 0 2rem;
&-icon {
display: none;
}
}
@media screen and (min-width: $tablet-media-query) {
&__button {
@include button-with-icon;
}
} }
} }

2
components/ContactFormValidation.vue
View file

@ -80,8 +80,8 @@
row-gap: 0.5rem; row-gap: 0.5rem;
&__button { &__button {
grid-area: button;
@include button-with-icon; @include button-with-icon;
grid-area: button;
} }
&__loader { &__loader {