fix: correct SCSS relative import depths for nested components

- Fixed all component SCSS files using single '../' to use '../../' to properly reach root styles directory
- Replaced incorrect './src/styles/' absolute-style paths with proper relative paths
- Fixed page directory imports with incorrect depth (../../../pages to ../../)
- All files in src/styles/components/* now use '../../' to reach framework, colors, variables, etc
- All files in src/styles/pages/* now use correct relative depth to reach sibling directories
- 86 SCSS files corrected
This commit is contained in:
gnezim
2026-04-05 23:00:38 +03:00
parent c4b02ccb6b
commit 64c919afa0
86 changed files with 259 additions and 259 deletions
@@ -1,6 +1,6 @@
@use '../colors' as *;
@use '../fonts' as *;
@use '../screen' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
// prevents component from growing in height due to font-size inheritance
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
.day-change-square-legacy {
border: 1px solid $blue-icon;
@@ -1,5 +1,5 @@
@use '../colors' as *;
@use '../fonts' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
.day-change-square {
box-sizing: border-box;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
@include v-spacing($space-m);
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
.duration {
@include font-overflow;
@@ -1,6 +1,6 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../screen' as *;
@mixin main-buttons() {
buy-ticket-button,
@@ -1,7 +1,7 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/layouts' as *;
@use './src/styles/fonts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../layouts' as *;
@use '../../fonts' as *;
:host {
display: block;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
.flight-details-section {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
@mixin column-layout() {
flex-direction: column;
@@ -1,8 +1,8 @@
@use './src/styles/variables' as *;
@use './src/styles/screen' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/layouts' as *;
@use '../../variables' as *;
@use '../../screen' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../layouts' as *;
.flight-props {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/colors' as *;
@use '../../colors' as *;
:host {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/screen';
@use '../../screen';
:host {
display: flex;
@@ -1,6 +1,6 @@
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
operator-logo-and-model {
display: flex;
@@ -1,6 +1,6 @@
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
operator-logo {
display: block;
@@ -1,4 +1,4 @@
@use '../framework' as *;
@use '../../framework' as *;
.page-empty {
padding: 50px 40px 50px 124px;
@@ -1,6 +1,6 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
:host {
@@ -1,4 +1,4 @@
@use './src/styles/layouts' as *;
@use '../../layouts' as *;
:host {
display: block;
@@ -1,6 +1,6 @@
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../variables' as *;
.section-number {
display: flex;
@@ -1,4 +1,4 @@
@use '../framework' as *;
@use '../../framework' as *;
// Double class to increase style specificity.
// Otherwise will be overwritten by .transparent
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/variables' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../variables' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
overflow: hidden;
@@ -1,4 +1,4 @@
@use '../screen';
@use '../../screen';
:host {
font-size: 0;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
terminal-link {
overflow: hidden;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
@use 'sass:math';
time-group-legacy {
@@ -1,5 +1,5 @@
@use '../screen' as *;
@use '../variables' as *;
@use '../../screen' as *;
@use '../../variables' as *;
@mixin right-to-left() {
@@ -1,4 +1,4 @@
@use '../fonts' as *;
@use '../../fonts' as *;
.time-group--medium {
.time-group__day-change {
@@ -1,6 +1,6 @@
@use '../fonts' as *;
@use '../colors' as *;
@use '../variables' as *;
@use '../../fonts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
:host {
display: flex;
@@ -1,7 +1,7 @@
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
:host {
display: flex;
@@ -1,8 +1,8 @@
@use '../colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
background-color: $white;
@@ -1,9 +1,9 @@
@use 'sass:math';
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
padding: 0 !important;
@@ -1,9 +1,9 @@
@use 'sass:math';
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include font-small();
@@ -1,4 +1,4 @@
@use './src/styles/variables' as *;
@use '../../variables' as *;
:host{
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
:host {
display: grid;
grid-template: auto auto / auto auto;
@@ -1,6 +1,6 @@
@use './src/styles/screen' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use '../../screen' as *;
@use '../../variables' as *;
@use '../../colors' as *;
:host {
--property-column-width: 100px;
@@ -1,4 +1,4 @@
@use './src/styles/variables' as *;
@use '../../variables' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include mobile() {
@@ -1,8 +1,8 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
position: relative;
@@ -1,8 +1,8 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include tablets {
@@ -1,5 +1,5 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use '../../variables' as *;
@use '../../colors' as *;
:host {
::ng-deep .code-sharing__description {
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/variables' as *;
@use '../../variables' as *;
:host {
flight-details-body-actions {
@@ -1,7 +1,7 @@
@use './src/styles/screen' as *;
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use '../../screen' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include mobile() {
@@ -1,9 +1,9 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
:host {
background: $white;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
@include mobile() {
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
@include tablets() {
@@ -1,4 +1,4 @@
@use './src/styles/screen' as *;
@use '../../screen' as *;
:host {
@include mobile() {
property {
@@ -1,4 +1,4 @@
@use './src/styles/variables' as *;
@use '../../variables' as *;
:host {
flight-actions {
@@ -1,5 +1,5 @@
@use '../fonts';
@use '../screen';
@use '../../fonts';
@use '../../screen';
:host {
font-size: fonts.$font-size-xl2;
@@ -1,8 +1,8 @@
@use './src/styles/_variables' as *;
@use './src/styles/_layouts' as *;
@use './src/styles/_fonts' as *;
@use './src/styles/_colors' as *;
@use './src/styles/_screen' as *;
@use '../../_variables' as *;
@use '../../_layouts' as *;
@use '../../_fonts' as *;
@use '../../_colors' as *;
@use '../../_screen' as *;
.flight-meal {
::ng-deep .flight-details-section__content {
@@ -1,6 +1,6 @@
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../variables' as *;
:host {
@@ -1,7 +1,7 @@
@use '../fonts';
@use '../screen';
@use '../colors';
@use '../variables' as vars;
@use '../../fonts';
@use '../../screen';
@use '../../colors';
@use '../../variables' as vars;
:host {
display: block;
@@ -1,6 +1,6 @@
@use './src/styles/variables' as vars;
@use './src/styles/fonts' as *;
@use './src/styles/colors' as *;
@use '../../variables' as vars;
@use '../../fonts' as *;
@use '../../colors' as *;
:host {
font-weight: $font-regular;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use '../../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
:host {
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
:host {
@include mobile() {
@@ -1,7 +1,7 @@
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../colors' as *;
:host {
display: grid;
gap: 15px;
@@ -1,6 +1,6 @@
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
:host {
::ng-deep .flight-details-section__content {
@@ -1,6 +1,6 @@
@use './src/styles/fonts' as *;
@use './src/styles/colors' as *;
@use './src/styles/screen' as *;
@use '../../fonts' as *;
@use '../../colors' as *;
@use '../../screen' as *;
:host {
//details-accordion__header is used in many places;
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include mobile() {
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
background: $white;
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
font-size: $font-size-l;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
:host {
&.selected {
@@ -1,6 +1,6 @@
@use '../../../../../../styles/variables.scss' as *;
@use '../../../../../../styles/colors.scss' as *;
@use '../../../../../../styles/fonts.scss' as *;
@use '../../_variables' as *;
@use '../../_colors' as *;
@use '../../_fonts' as *;
.flights-details-list-schedule-header {
display: flex;
@@ -1,4 +1,4 @@
@use './src/styles/colors' as *;
@use '../../colors' as *;
:host {
background: $white;
@@ -1,8 +1,8 @@
@use './src/styles/colors' as *;
@use './src/styles/variables' as *;
@use './src/styles/fonts' as *;
@use './src/styles/layouts' as *;
@use './src/styles/screen' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../fonts' as *;
@use '../../layouts' as *;
@use '../../screen' as *;
:host {
display: flex;
@@ -1,6 +1,6 @@
@use './src/styles/screen' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use '../../screen' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
:host {
@include mobile() {
@@ -1,7 +1,7 @@
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../variables' as *;
@use '../../layouts' as *;
:host {
display: block;
@@ -1,8 +1,8 @@
@use './src/styles/variables' as *;
@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
:host {
@include tablets {
@@ -1,8 +1,8 @@
@use '../variables' as *;
@use '../colors' as *;
@use '../fonts' as *;
@use '../screen' as *;
@use '../layouts' as *;
@use '../../variables' as *;
@use '../../colors' as *;
@use '../../fonts' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
@mixin _layout($space: $space-m) {
display: flex;
@@ -1,5 +1,5 @@
@use '../variables' as *;
@use '../screen';
@use '../../variables' as *;
@use '../../screen';
:host {
::ng-deep .flight-props-caption {
@@ -1,5 +1,5 @@
@use '../variables' as vars;
@use '../screen';
@use '../../variables' as vars;
@use '../../screen';
.board-day-selector {
@include screen.mobile {
@@ -1,4 +1,4 @@
@use '../colors';
@use '../../colors';
.request-info {
color: colors.$blue-link;
@@ -1,4 +1,4 @@
@use './src/styles/framework' as *;
@use '../../framework' as *;
.schedule-direction-switch {
display: flex;
@@ -1,5 +1,5 @@
@use './src/styles/variables' as *;
@use './src/styles/screen';
@use '../../variables' as *;
@use '../../screen';
:host {
::ng-deep .flight-props-caption {
@@ -1,4 +1,4 @@
@use './src/styles/colors' as *;
@use '../../colors' as *;
:host {
& > section:last-child {
@@ -1,7 +1,7 @@
@use './src/styles/variables' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use './src/styles/colors' as *;
@use '../../variables' as *;
@use '../../screen' as *;
@use '../../layouts' as *;
@use '../../colors' as *;
:host {
.schedule-home-page-header {
@@ -1,4 +1,4 @@
@use '../framework' as *;
@use '../../framework' as *;
.feedback-button {
box-sizing: border-box;
@@ -1,4 +1,4 @@
@use '../colors';
@use '../../colors';
.search-history-item {
display: flex !important;
@@ -1,4 +1,4 @@
@use '../colors' as *;
@use '../../colors' as *;
.arrow-svg {
display: flex;
@@ -1,6 +1,6 @@
@use '../colors' as *;
@use '../variables' as *;
@use '../shadows' as *;
@use '../../colors' as *;
@use '../../variables' as *;
@use '../../shadows' as *;
.card {
background-color: $white;
@@ -1,8 +1,8 @@
@use '../variables' as vars;
@use '../layouts';
@use '../mixins';
@use '../fonts';
@use '../colors';
@use '../../variables' as vars;
@use '../../layouts';
@use '../../mixins';
@use '../../fonts';
@use '../../colors';
.select {
display: flex;
@@ -1,5 +1,5 @@
@use '../mixins';
@use '../colors';
@use '../../mixins';
@use '../../colors';
.tab-button {
@include mixins.button(colors.$blue-extra-light);
@@ -232,5 +232,5 @@ flights-map-filter {
}
}
@import '../../../pages/adaptive/_page-filters-adaptive.scss';
@import '../../../pages/adaptive/fligjts-map-filters-adaptive.scss';
@import '../../adaptive/_page-filters-adaptive.scss';
@import '../../adaptive/fligjts-map-filters-adaptive.scss';