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>
<style lang="scss">
@import "@/scss/_mixins.scss";
.attack {
flex: 0 1 100%;
flex: var(--attack-item-flex);
display: flex;
flex-flow: row wrap;
flex-flow: var(--attack-item-flex-flow);
align-items: center;
margin: 0;
padding: 0.375em 0;
@include mq-desktop {
flex-flow: row nowrap;
&:nth-child(even) {
text-align: right;
text-align: var(--attack-item-nth-child-even-text-align);
}
.attack__illustration,
.attack__text {
&:nth-child(even) &__illustration,
&:nth-child(even) &__text {
&:first-child {
order: 1;
}
}
}
}
@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;
}
}
order: var(--attack-item-first-child-order);
}
}
&__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;
img {
max-width: 100%;
max-height: 100%;
}
@include mq-desktop {
flex: 0 0 15em;
height: 15em;
}
}
&__text {
flex: 1 1 auto;
@include mq-desktop {
padding: 0 1rem;
}
padding: var(--attack-item-text-padding);
}
&__name {
margin: 0 0 1em 0;
font-weight: bold;
margin: 0 0 1em 0;
}
}
</style>