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

refactor: import specific SCSS mixins

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-11 20:47:25 +01:00
parent 25e8b0ad65
commit f2948005e1
7 changed files with 23 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/DataTable.vue
View file

@ -63,14 +63,22 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.datatable { .datatable {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
max-width: 55rem;
margin: auto; margin: auto;
@include mq-desktop {
max-width: 45rem;
}
@include mq-bigscreen {
max-width: 55rem;
}
&__heading, &__heading,
&__cell { &__cell {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;

4
src/components/Navigation.vue
View file

@ -23,7 +23,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.nav { .nav {
overflow: auto; overflow: auto;
@ -89,7 +90,6 @@ export default {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0.125em; height: 0.125em;
// background-color: $copy-color;
bottom: 0; bottom: 0;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }

2
src/components/NsfwSwitch.vue
View file

@ -25,7 +25,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_variables.scss";
.nsfw-switch { .nsfw-switch {
font-family: "apple color emoji", "segoe ui emoji", "noto color emoji", font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",

10
src/components/Prose.vue
View file

@ -5,7 +5,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_mixins.scss";
.prose { .prose {
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
@ -16,18 +16,22 @@
p, p,
.quickfacts, .quickfacts,
.btn-group { .btn-group {
max-width: 55rem;
margin: { margin: {
left: 1rem; left: 1rem;
right: 1rem; right: 1rem;
} }
@media (min-width: 55em) { @include mq-desktop {
max-width: 45rem;
margin: { margin: {
left: auto; left: auto;
right: auto; right: auto;
} }
} }
@include mq-bigscreen {
max-width: 55rem;
}
} }
} }
</style> </style>

6
src/components/QuickFacts.vue
View file

@ -24,7 +24,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_variables.scss";
.quickfacts { .quickfacts {
border-radius: 1em; border-radius: 1em;
@ -83,10 +83,6 @@ export default {
ul { ul {
margin: 0; margin: 0;
padding: 0 0.5em; padding: 0 0.5em;
@media (min-width: 40em) {
columns: 2 auto;
}
} }
li { li {

2
src/views/Abilities.vue
View file

@ -101,7 +101,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_mixins.scss";
.attacks { .attacks {
display: flex; display: flex;

2
src/views/Home.vue
View file

@ -38,7 +38,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/base.scss"; @import "@/scss/_mixins.scss";
.btn-group { .btn-group {
justify-content: space-evenly; justify-content: space-evenly;