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

refactor: use button component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-07 21:27:46 +01:00
parent 3bc6fc630f
commit 891c3a3dec
1 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/NsfwWarning.vue
View file

@ -7,12 +7,13 @@
<p><slot name="message"></slot></p>
<div class="btn-container">
<a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
<btn href="#" class="positive" @click.prevent="confirmNsfw(true)">
<slot name="yes"></slot>
</a>
<a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
</btn>
<btn href="#" class="negative" @click.prevent="confirmNsfw(false)">
<slot name="no"></slot>
</a>
</btn>
</div>
</div>
</div>
@ -20,7 +21,10 @@
</template>
<script>
import btn from "@/components/Button.vue";
export default {
components: { btn },
methods: {
confirmNsfw(input) {
this.$root.nsfw = input;
@ -94,24 +98,32 @@ export default {
.btn {
flex: 0 1 100%;
background-color: $bg-color-light;
border-radius: 0.25em;
font-size: 1.5em;
font-weight: bold;
padding: 0.25em 0.5em;
margin: 0 0 1em 0;
text-decoration: none;
@include mq-desktop {
flex: 0 1 100%;
}
margin: 0.75em 0;
&.positive {
background-color: green;
box-shadow: 0 0.5em 0 0 darken($btn-color-positive, 10%);
background-color: $btn-color-positive;
&:hover {
box-shadow: 0 0.75em 0 0 darken($btn-color-positive, 10%);
}
&:active {
box-shadow: 0 0.25em 0 0 darken($btn-color-positive, 10%);
}
}
&.negative {
background-color: red;
box-shadow: 0 0.5em 0 0 darken($btn-color-negative, 10%);
background-color: $btn-color-negative;
&:hover {
box-shadow: 0 0.75em 0 0 darken($btn-color-negative, 10%);
}
&:active {
box-shadow: 0 0.25em 0 0 darken($btn-color-negative, 10%);
}
}
}
</style>