SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate AttackItem component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:34:03 +01:00
parent 97ff935b13
commit 3ba5e0aa2b
1 changed files with 17 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/AttackItem.vue
View file

@ -17,76 +17,51 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import "@/scss/_mixins.scss";
.attack { .attack {
flex: 0 1 100%; flex: var(--attack-item-flex);
display: flex; display: flex;
flex-flow: row wrap; flex-flow: var(--attack-item-flex-flow);
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0.375em 0; padding: 0.375em 0;
@include mq-desktop {
flex-flow: row nowrap;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: var(--attack-item-nth-child-even-text-align);
}
.attack__illustration, &:nth-child(even) &__illustration,
.attack__text { &:nth-child(even) &__text {
&:first-child { &:first-child {
order: 1; order: var(--attack-item-first-child-order);
}
}
}
}
@media (min-width: 70em) {
text-align: left;
flex: 0 1 50%;
&:nth-child(even) {
text-align: left;
.attack__illustration,
.attack__text {
&:first-child {
order: 0;
}
}
} }
} }
&__illustration { &__illustration {
flex: 1 1 auto; flex: var(--attack-item-illustration-flex);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center; text-align: center;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
@include mq-desktop {
flex: 0 0 15em;
height: 15em;
}
} }
&__text { &__text {
flex: 1 1 auto; flex: 1 1 auto;
padding: var(--attack-item-text-padding);
@include mq-desktop {
padding: 0 1rem;
}
} }
&__name { &__name {
margin: 0 0 1em 0;
font-weight: bold; font-weight: bold;
margin: 0 0 1em 0;
} }
} }
</style> </style>