Updated all scss imports to be relative from src alias

Alias defined in webpack.config.js
This commit is contained in:
2022-03-05 08:45:34 +01:00
parent 3b0039b51b
commit d24a318de8
32 changed files with 64 additions and 64 deletions

View File

@@ -31,8 +31,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.button { .button {
font-size: 1.2rem; font-size: 1.2rem;

View File

@@ -287,7 +287,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
.wrapper { .wrapper {
padding: 2rem; padding: 2rem;

View File

@@ -5,9 +5,9 @@
v-for="result in searchResults" v-for="result in searchResults"
:key="`${result.index}-${result.title}-${result.type}`" :key="`${result.index}-${result.title}-${result.type}`"
@click="openPopup(result)" @click="openPopup(result)"
:class="`result di-${result.index} ${ :class="
result.index === index ? 'active' : '' `result di-${result.index} ${result.index === index ? 'active' : ''}`
}`" "
> >
<IconMovie v-if="result.type == 'movie'" class="type-icon" /> <IconMovie v-if="result.type == 'movie'" class="type-icon" />
<IconShow v-if="result.type == 'show'" class="type-icon" /> <IconShow v-if="result.type == 'show'" class="type-icon" />
@@ -131,9 +131,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
@import "./src/scss/main"; @import "src/scss/main";
$sizes: 22; $sizes: 22;
@for $i from 0 through $sizes { @for $i from 0 through $sizes {
@@ -223,7 +223,6 @@ li.result {
&:hover, &:hover,
&:active { &:active {
color: var(--text-color); color: var(--text-color);
// background-color: var(--background-color-secondary);
border-bottom: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green);
.type-icon { .type-icon {

View File

@@ -55,8 +55,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
header { header {
width: 100%; width: 100%;

View File

@@ -42,9 +42,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
@import "./src/scss/main"; @import "src/scss/main";
header { header {
width: 100%; width: 100%;

View File

@@ -329,10 +329,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/loading-placeholder"; @import "src/scss/loading-placeholder";
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
@import "./src/scss/main"; @import "src/scss/main";
header { header {
$duration: 0.2s; $duration: 0.2s;

View File

@@ -63,8 +63,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.movie-popup { .movie-popup {
position: fixed; position: fixed;

View File

@@ -110,9 +110,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
@import "./src/scss/main"; @import "src/scss/main";
.movie-item { .movie-item {
padding: 15px; padding: 15px;
@@ -190,7 +190,7 @@ export default {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
.progress { .progress {
position: absolute; position: absolute;

View File

@@ -63,8 +63,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.spacer { .spacer {
@include mobile-only { @include mobile-only {

View File

@@ -91,7 +91,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.navigation-icons { .navigation-icons {
display: inline-flex; display: inline-flex;

View File

@@ -131,8 +131,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.button--group { .button--group {
display: flex; display: flex;

View File

@@ -105,7 +105,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
section { section {
padding: 1.3rem; padding: 1.3rem;

View File

@@ -141,7 +141,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.load-button { .load-button {
display: flex; display: flex;

View File

@@ -156,9 +156,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
@import "./src/scss/main"; @import "src/scss/main";
.close-icon { .close-icon {
position: absolute; position: absolute;

View File

@@ -153,8 +153,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
a { a {
text-decoration: none; text-decoration: none;

View File

@@ -95,7 +95,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
section { section {
padding: 1.3rem; padding: 1.3rem;

View File

@@ -286,7 +286,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
.expanded { .expanded {
display: flex; display: flex;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;

View File

@@ -20,7 +20,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.nav__hamburger { .nav__hamburger {
display: block; display: block;

View File

@@ -7,7 +7,7 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
.loader { .loader {
display: flex; display: flex;
@@ -16,7 +16,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&--icon{ &--icon {
border: 2px solid $text-color-70; border: 2px solid $text-color-70;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
@@ -32,7 +32,7 @@
&:after { &:after {
border: 7px solid $green-90; border: 7px solid $green-90;
border-radius: 50%; border-radius: 50%;
content: ''; content: "";
left: 8px; left: 8px;
position: absolute; position: absolute;
top: 22px; top: 22px;
@@ -40,7 +40,9 @@
} }
} }
@keyframes load { @keyframes load {
100% { transform: rotate(360deg); } 100% {
transform: rotate(360deg);
}
} }
} }
</style> </style>

View File

@@ -22,6 +22,5 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/loading-placeholder"; @import "src/scss/loading-placeholder";
</style>
</style>

View File

@@ -64,7 +64,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.movie-description { .movie-description {
font-weight: 300; font-weight: 300;

View File

@@ -23,7 +23,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.movie-detail { .movie-detail {
margin-bottom: 20px; margin-bottom: 20px;

View File

@@ -35,7 +35,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.navigation-link { .navigation-link {
display: grid; display: grid;

View File

@@ -32,8 +32,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
button { button {
display: inline-block; display: inline-block;

View File

@@ -68,8 +68,8 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.group { .group {
display: flex; display: flex;

View File

@@ -47,8 +47,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.fade-enter-active { .fade-enter-active {
transition: opacity .4s; transition: opacity .4s;

View File

@@ -45,7 +45,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "src/scss/variables";
$background: $background-ui; $background: $background-ui;
$background-selected: $background-color-secondary; $background-selected: $background-color-secondary;

View File

@@ -24,7 +24,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
li.sidebar-list-element { li.sidebar-list-element {
display: flex; display: flex;

View File

@@ -1,5 +1,5 @@
@import "./src/scss/variables"; @import "src/scss/variables";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
.filter { .filter {
margin: 1rem; margin: 1rem;

View File

@@ -1,4 +1,4 @@
@import "./src/scss/variables"; @import "src/scss/variables";
// Loading placeholder styling // Loading placeholder styling
@mixin nth-children($points...) { @mixin nth-children($points...) {

View File

@@ -1,4 +1,4 @@
@import "./src/scss/variables"; @import "src/scss/variables";
.noselect { .noselect {
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */

View File

@@ -1,6 +1,6 @@
// Colors // Colors
// @import "./media-queries"; // @import "./media-queries";
@import "./src/scss/media-queries"; @import "src/scss/media-queries";
:root { :root {
color-scheme: light; color-scheme: light;