Task 10: Create test helper files and base test templates
- Create helpers directory structure - Add api-helpers.ts with authentication and API mocking functions - Add ui-helpers.ts with common UI interaction utilities - Add data-helpers.ts with test data generators - Create base.spec.ts as reusable test template - Update support/index.ts to import and expose helper modules globally
This commit is contained in:
gnezim
@@ -0,0 +1,87 @@
|
||||
.button {
|
||||
min-height: 35px;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.2s;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
padding: 0 15px;
|
||||
|
||||
// Size variants
|
||||
&--small {
|
||||
min-height: 28px;
|
||||
font-size: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
min-height: 35px;
|
||||
font-size: 14px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&--large {
|
||||
min-height: 42px;
|
||||
font-size: 16px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
// Color variants
|
||||
&--primary {
|
||||
background-color: #0099ff;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #0080d9;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #b3d9ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: white;
|
||||
color: #666666;
|
||||
border: 1.3px solid #e0e0e0;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #b3d9ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #f9f9f9;
|
||||
color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
background-color: transparent;
|
||||
color: #0099ff;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: #b3d9ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&__loader {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from 'react'
|
||||
import './button.scss'
|
||||
|
||||
export interface ButtonProps
|
||||
extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'data-testid'> {
|
||||
variant?: 'primary' | 'secondary' | 'tertiary'
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
children: React.ReactNode
|
||||
'data-testid'?: string
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
disabled = false,
|
||||
loading = false,
|
||||
className = '',
|
||||
...props
|
||||
}) => {
|
||||
const { 'data-testid': dataTestId = 'button', ...buttonProps } = props as any
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`button button--${variant} button--${size} ${className}`.trim()}
|
||||
disabled={disabled || loading}
|
||||
data-testid={dataTestId}
|
||||
{...buttonProps}
|
||||
>
|
||||
{loading ? <span className="button__loader">Loading...</span> : props.children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { Button } from './button'
|
||||
export type { ButtonProps } from './button'
|
||||
@@ -59,7 +59,7 @@ a {
|
||||
border: 1.3px solid $border-blue !important;
|
||||
height: $medium-button-height;
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
background-image: url('~src/assets/img/arr-down.svg');
|
||||
background-image: url('../assets/img/arr-down.svg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -1px;
|
||||
|
||||
@@ -31,19 +31,19 @@
|
||||
}
|
||||
|
||||
.svg--share {
|
||||
background-image: url('~src/assets/img/share.svg');
|
||||
background-image: url('../assets/img/share.svg');
|
||||
}
|
||||
|
||||
.svg--print {
|
||||
background-image: url('~src/assets/img/print.svg');
|
||||
background-image: url('../assets/img/print.svg');
|
||||
}
|
||||
|
||||
.svg--pin {
|
||||
background-image: url('~src/assets/img/pin-24.svg');
|
||||
background-image: url('../assets/img/pin-24.svg');
|
||||
}
|
||||
|
||||
.svg--expand {
|
||||
background-image: url('~src/assets/img/expand.svg');
|
||||
background-image: url('../assets/img/expand.svg');
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -65,7 +65,7 @@ svg {
|
||||
}
|
||||
|
||||
.svg--calendar {
|
||||
background-image: url('~src/assets/img/calendar.svg');
|
||||
background-image: url('../assets/img/calendar.svg');
|
||||
}
|
||||
|
||||
.svg--arrow {
|
||||
|
||||
@@ -37,7 +37,7 @@ html {
|
||||
|
||||
body {
|
||||
background-color: $blue-dark !important;
|
||||
background-image: url('~src/assets/img/background.jpg');
|
||||
background-image: url('../assets/img/background.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
@@ -206,7 +206,7 @@ p-checkbox {
|
||||
@include control-border-shadow();
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('~src/assets/img/check.svg');
|
||||
background-image: url('../assets/img/check.svg');
|
||||
background-size: 0 auto;
|
||||
|
||||
&.p-highlight {
|
||||
@@ -278,23 +278,23 @@ body {
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
background-image: url('~src/assets/img/share/facebook.svg');
|
||||
background-image: url('../assets/img/share/facebook.svg');
|
||||
}
|
||||
|
||||
&.vk {
|
||||
background-image: url('~src/assets/img/share/vk.svg');
|
||||
background-image: url('../assets/img/share/vk.svg');
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background-image: url('~src/assets/img/share/twitter.svg');
|
||||
background-image: url('../assets/img/share/twitter.svg');
|
||||
}
|
||||
|
||||
&.copy {
|
||||
background-image: url('~src/assets/img/share/copy.svg');
|
||||
background-image: url('../assets/img/share/copy.svg');
|
||||
}
|
||||
|
||||
&.weibo {
|
||||
background-image: url('~src/assets/img/share/weibo.svg');
|
||||
background-image: url('../assets/img/share/weibo.svg');
|
||||
background-size: 29px;
|
||||
}
|
||||
}
|
||||
@@ -315,7 +315,7 @@ p-accordion .p-accordion-content button.button-clear {
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
.p-button-label {
|
||||
background-image: url('~src/assets/img/close.svg');
|
||||
background-image: url('../assets/img/close.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 10px;
|
||||
height: 100%;
|
||||
@@ -374,5 +374,5 @@ p-accordion .p-accordion-content button.button-clear {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
@import '~src/styles/pages/adaptive/layout-adaptive';
|
||||
@import '~src/styles/_layout-print';
|
||||
@import './pages/adaptive/layout-adaptive';
|
||||
@import './_layout-print';
|
||||
|
||||
@@ -35,161 +35,161 @@ $width-base: 120px;
|
||||
&--SU {
|
||||
@include scale($width-base, 0.258);
|
||||
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/large/en.png') !important;
|
||||
|
||||
&.ru {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--HZ {
|
||||
@include scale(80px, 0.5556);
|
||||
|
||||
background-image: url('~src/assets/img/airlines-logo/aurora/large/en.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aurora/large/en.svg') !important;
|
||||
|
||||
&.ru {
|
||||
background-image: url('~src/assets/img/airlines-logo/aurora/large/ru.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aurora/large/ru.svg') !important;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/aurora/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aurora/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--F7 {
|
||||
@include scale($width-base, 0.258);
|
||||
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/large/en.png') !important;
|
||||
|
||||
&.ru {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeroflot/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--FV {
|
||||
@include scale(90px, 0.1667);
|
||||
|
||||
background-image: url('~src/assets/img/airlines-logo/rossiya/large/en.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/rossiya/large/en.svg') !important;
|
||||
|
||||
&.ru {
|
||||
background-image: url('~src/assets/img/airlines-logo/rossiya/large/ru.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/rossiya/large/ru.svg') !important;
|
||||
}
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/rossiya/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/rossiya/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--RO {
|
||||
@include scale($width-base, 0.3334);
|
||||
|
||||
background-image: url('~src/assets/img/airlines-logo/tarom/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/tarom/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/tarom/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/tarom/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--DP {
|
||||
@include scale($width-base, 0.1889);
|
||||
background-image: url('~src/assets/img/airlines-logo/pobeda/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/pobeda/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/pobeda/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/pobeda/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--OM {
|
||||
background-image: url('~src/assets/img/airlines-logo/miat/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/miat/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/miat/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/miat/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--KL {
|
||||
@include scale($width-base, 0.4444);
|
||||
background-image: url('~src/assets/img/airlines-logo/klm/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/klm/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/klm/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/klm/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--AY {
|
||||
background-image: url('~src/assets/img/airlines-logo/finnair/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/finnair/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/finnair/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/finnair/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--DL {
|
||||
background-image: url('~src/assets/img/airlines-logo/delta/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/delta/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/delta/round.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/delta/round.png') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--OK {
|
||||
background-image: url('~src/assets/img/airlines-logo/czech-airline/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/czech-airline/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/czech-airline/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/czech-airline/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--JU {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-serbia/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-serbia/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-serbia/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-serbia/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--UX {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-europa/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-europa/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-europa/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-europa/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--BT {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-baltic/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-baltic/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/air-baltic/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/air-baltic/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--AM {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeromexico/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeromexico/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/aeromexico/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aeromexico/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--AR {
|
||||
background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--KM {
|
||||
background-image: url('~src/assets/img/airlines-logo/airmalta/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/airmalta/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -198,7 +198,7 @@ $width-base: 120px;
|
||||
|
||||
&--AF {
|
||||
@include scale($width-base, 0.1222);
|
||||
background-image: url('~src/assets/img/airlines-logo/airfrance/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/airfrance/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -207,7 +207,7 @@ $width-base: 120px;
|
||||
|
||||
&--AZ {
|
||||
@include scale($width-base, 0.2444);
|
||||
background-image: url('~src/assets/img/airlines-logo/alitalia/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/alitalia/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -215,7 +215,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--PG {
|
||||
background-image: url('~src/assets/img/airlines-logo/bangkok-airways/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/bangkok-airways/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -224,7 +224,7 @@ $width-base: 120px;
|
||||
|
||||
&--SN {
|
||||
@include scale($width-base, 0.1667);
|
||||
background-image: url('~src/assets/img/airlines-logo/brussels-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/brussels-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -233,7 +233,7 @@ $width-base: 120px;
|
||||
|
||||
&--FB {
|
||||
@include scale($width-base, 0.296);
|
||||
background-image: url('~src/assets/img/airlines-logo/bulgaria-air/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/bulgaria-air/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -242,7 +242,7 @@ $width-base: 120px;
|
||||
|
||||
&--CI {
|
||||
@include scale($width-base, 0.1556);
|
||||
background-image: url('~src/assets/img/airlines-logo/china-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/china-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -250,7 +250,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--MU {
|
||||
background-image: url('~src/assets/img/airlines-logo/china-eastern/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/china-eastern/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -258,7 +258,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--CZ {
|
||||
background-image: url('~src/assets/img/airlines-logo/china-southern/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/china-southern/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -266,7 +266,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--GA {
|
||||
background-image: url('~src/assets/img/airlines-logo/garuda-indonesia/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/garuda-indonesia/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -274,7 +274,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--FI {
|
||||
background-image: url('~src/assets/img/airlines-logo/icelandair/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/icelandair/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -282,7 +282,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--KO {
|
||||
background-image: url('~src/assets/img/airlines-logo/kenya-airways/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/kenya-airways/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -290,7 +290,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--KE {
|
||||
background-image: url('~src/assets/img/airlines-logo/korean-air/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/korean-air/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -298,7 +298,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--JL {
|
||||
background-image: url('~src/assets/img/airlines-logo/japan-airlines/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/japan-airlines/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -306,7 +306,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--LO {
|
||||
background-image: url('~src/assets/img/airlines-logo/polish-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/polish-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -314,7 +314,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--ME {
|
||||
background-image: url('~src/assets/img/airlines-logo/mea/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/mea/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -323,7 +323,7 @@ $width-base: 120px;
|
||||
|
||||
&--S7 {
|
||||
@include scale($width-base, 0.3333);
|
||||
background-image: url('~src/assets/img/airlines-logo/s7/large.svg') !important;
|
||||
background-image: url('../assets/img/airlines-logo/s7/large.svg') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -331,7 +331,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--SV {
|
||||
background-image: url('~src/assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -339,7 +339,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--VN {
|
||||
background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
@@ -347,7 +347,7 @@ $width-base: 120px;
|
||||
}
|
||||
|
||||
&--MF {
|
||||
background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||
background-image: url('../assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||
|
||||
&.round {
|
||||
background-image: none !important;
|
||||
|
||||
@@ -4,7 +4,7 @@ p-calendar {
|
||||
|
||||
.p-datepicker-header {
|
||||
.p-datepicker-prev {
|
||||
background-image: url('~src/assets/img/arrow-left.svg');
|
||||
background-image: url('../assets/img/arrow-left.svg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@@ -29,7 +29,7 @@ p-calendar {
|
||||
}
|
||||
|
||||
.p-datepicker-next {
|
||||
background-image: url('~src/assets/img/arrow-right.svg');
|
||||
background-image: url('../assets/img/arrow-right.svg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
@mixin box-shadow--focus-inset {
|
||||
box-shadow: inset 0 0 0 0.2em $focus-shadow !important;
|
||||
box-shadow: inset 0 0 0 0.2em colors.$focus-shadow !important;
|
||||
}
|
||||
|
||||
@mixin control-border-shadow {
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
/* Flights Map Feature Components */
|
||||
|
||||
@import './flights-map-body.component.scss';
|
||||
@import './flights-map-filter.component.scss';
|
||||
@import './flights-map-meta-tags.component.scss';
|
||||
@import './flights-map-start-page-title.component.scss';
|
||||
@import './flights-map-start-page.component.scss';
|
||||
@import './loader-sheet.component.scss';
|
||||
@import './no-directions-sheet.component.scss';
|
||||
@@ -0,0 +1,19 @@
|
||||
/* Component Styles - All components organized by feature area */
|
||||
|
||||
/* Shared UI Components */
|
||||
@import './shared/index.scss';
|
||||
|
||||
/* Feature-specific Components */
|
||||
@import './online-board/index.scss';
|
||||
@import './flights-map/index.scss';
|
||||
@import './schedule/index.scss';
|
||||
@import './popular-requests/index.scss';
|
||||
|
||||
/* Toolkit Components - Reusable UI elements */
|
||||
@import './toolkit/index.scss';
|
||||
|
||||
/* Module Components - Common components used across features */
|
||||
@import './modules-components/index.scss';
|
||||
|
||||
/* Module Pages - Page-specific components */
|
||||
@import './modules-pages/index.scss';
|
||||
@@ -0,0 +1,26 @@
|
||||
.app-version {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 2px 16px;
|
||||
background-color: #f37b09;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
z-index: 100000;
|
||||
opacity: 0.6;
|
||||
transition-duration: 0.2s;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-version:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-version > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-version:hover > div {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
@use 'src/styles/colors' as *;
|
||||
@use 'src/styles/fonts' as *;
|
||||
@use 'src/styles/screen' as *;
|
||||
|
||||
:host {
|
||||
// prevents component from growing in height due to font-size inheritance
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.captioned-time-group {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__caption {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.captioned-time-group--right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.captioned-time-group--mobile-right {
|
||||
@include mobile {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.captioned-time-group--mobile-left {
|
||||
@include gt-mobile {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
.day-change-square-legacy {
|
||||
border: 1px solid $blue-icon;
|
||||
color: $blue-light;
|
||||
border-radius: $border-radius;
|
||||
font-size: 10px;
|
||||
font-weight: $font-bold;
|
||||
width: $label-shift-width;
|
||||
background-color: $white;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@use 'src/styles/colors' as *;
|
||||
@use 'src/styles/fonts' as *;
|
||||
|
||||
.day-change-square {
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
|
||||
border: 1px solid $blue-icon;
|
||||
border-radius: 2px;
|
||||
|
||||
font-size: $font-size-xs;
|
||||
line-height: 11px;
|
||||
text-align: center;
|
||||
color: $blue-light;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include v-spacing($space-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.detail-header-badge-flight-number {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-weight: $font-medium;
|
||||
font-size: $font-size-xl;
|
||||
@include h-spacing($space-m);
|
||||
|
||||
& > div {
|
||||
@include v-spacing($space-s);
|
||||
|
||||
.description {
|
||||
@include mobile() {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
@include gt-mobile() {
|
||||
& > *:not(:last-child) {
|
||||
padding-right: $space-xl;
|
||||
margin-right: $space-xl;
|
||||
border-right: 1px solid $border;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
@include v-spacing($space-m);
|
||||
|
||||
details-header-badge {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
.duration {
|
||||
@include font-overflow;
|
||||
|
||||
&--clarifying {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@use './src/styles/layouts' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
|
||||
@mixin main-buttons() {
|
||||
buy-ticket-button,
|
||||
registration-button,
|
||||
flight-status-button,
|
||||
flight-details-button {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-buttons() {
|
||||
print-button,
|
||||
share-button {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > .k-space {
|
||||
flex: 1;
|
||||
|
||||
@include mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include gt-mobile() {
|
||||
@include h-spacing($space-m);
|
||||
|
||||
@include main-buttons() {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
@include v-spacing($space-l, true);
|
||||
|
||||
@include main-buttons() {
|
||||
order: 1;
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
@include small-buttons() {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
share-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.leg-point-brief {
|
||||
padding: $space-xl 0;
|
||||
margin: 0 $space-xl;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
time-group-legacy {
|
||||
font-size: $font-size-xl2;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leg-point-brief + .leg-point-brief {
|
||||
border-top: 1px dashed $border;
|
||||
}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
@use "src/styles/framework" as *;
|
||||
|
||||
.flight-details-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: $space-xl;
|
||||
width: 120px;
|
||||
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
border-radius: $border-radius;
|
||||
transition-duration: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-extra-light;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-direction: row;
|
||||
|
||||
padding: $space-m;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: $space-s2;
|
||||
|
||||
@include smTablet {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
margin-bottom: 0;
|
||||
margin-right: $space-m;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-s;
|
||||
line-height: 16px;
|
||||
font-weight: $font-medium;
|
||||
color: $blue-light;
|
||||
|
||||
white-space: normal !important;
|
||||
text-align: center;
|
||||
|
||||
@include mobile {
|
||||
font-size: $font-size-xs;
|
||||
line-height: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
.flight-details-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__caption {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
margin-right: $space-xl;
|
||||
width: 210px;
|
||||
|
||||
font-size: $font-size-s;
|
||||
line-height: 16px;
|
||||
color: $gray;
|
||||
|
||||
@include mobile {
|
||||
margin-right: 0;
|
||||
margin-bottom: $space-m;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
@include h-deep-spacing($space-xl);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
@mixin column-layout() {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
@include h-spacing(0);
|
||||
@include v-spacing($space-s2);
|
||||
}
|
||||
|
||||
.flight-events {
|
||||
display: flex;
|
||||
@include h-spacing($space-m);
|
||||
|
||||
&__event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 28px;
|
||||
padding: 0 $space-m;
|
||||
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $border;
|
||||
|
||||
@include h-spacing($space-m);
|
||||
}
|
||||
|
||||
&__event-description {
|
||||
font-size: $font-size-s;
|
||||
line-height: 16px;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&--column {
|
||||
@include column-layout;
|
||||
}
|
||||
|
||||
&--column-mobile {
|
||||
@include mobile {
|
||||
@include column-layout;
|
||||
}
|
||||
}
|
||||
|
||||
&--row-mobile {
|
||||
@include gt-mobile {
|
||||
@include column-layout;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
@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 *;
|
||||
|
||||
.flight-props {
|
||||
display: flex;
|
||||
color: $text-color;
|
||||
font-weight: $font-medium;
|
||||
position: relative;
|
||||
|
||||
&-caption {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include h-spacing($space-xl);
|
||||
|
||||
@include mobile() {
|
||||
flex: 100%;
|
||||
align-items: center;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
|
||||
column-gap: $space-l;
|
||||
row-gap: $space-l;
|
||||
|
||||
@include mobile() {
|
||||
grid-template-columns: 3fr 2fr;
|
||||
|
||||
margin-top: $space-xl;
|
||||
|
||||
&:empty {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablets() {
|
||||
grid-template-columns: repeat(4, var(--property-column-width, 1fr));
|
||||
}
|
||||
|
||||
@include desktop() {
|
||||
grid-template-columns: repeat(5, var(--property-column-width, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@include gt-mobile() {
|
||||
@include h-spacing($space-m);
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
time-note {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3; // span for 2 columns
|
||||
}
|
||||
|
||||
&.equal-columns {
|
||||
.flight-props-body {
|
||||
@include mobile() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
arrow-down-icon {
|
||||
@include mobile {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@use './src/styles/colors' as *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
&:not(.small) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-status-button {
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
@use "src/styles/variables" as vars;
|
||||
@use "src/styles/colors";
|
||||
@use "src/styles/layouts";
|
||||
|
||||
.flight-status {
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include layouts.h-spacing(vars.$space-s2);
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
width: vars.$status-indicator-size;
|
||||
height: vars.$status-indicator-size;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background-color: colors.$light-gray;
|
||||
border: 1px solid colors.$light-gray;
|
||||
|
||||
&--Finished {
|
||||
background-color: colors.$red;
|
||||
border-color: colors.$red;
|
||||
}
|
||||
|
||||
&--InProgress {
|
||||
background-color: colors.$green;
|
||||
border-color: colors.$green;
|
||||
}
|
||||
}
|
||||
}
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
@use 'src/styles/screen';
|
||||
@use 'src/styles/variables' as vars;
|
||||
@use '/src/styles/grid-sizes' as gridSizes;
|
||||
|
||||
@mixin intermediateScreens() {
|
||||
@media (min-width: vars.$media-breakpoint-desktop-min) and (max-width: 1180px) {
|
||||
@content;
|
||||
}
|
||||
|
||||
@media (min-width: vars.$media-breakpoint-small-tablet-min) and (max-width: 880px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin templateColumns($title: gridSizes.$title-column-width) {
|
||||
grid-template-columns:
|
||||
[title] $title
|
||||
[status] gridSizes.$status-width
|
||||
[beginning-time] gridSizes.$time-width
|
||||
[finish-time] minmax(gridSizes.$time-width, 1fr)
|
||||
[first-property] minmax(min-content, gridSizes.$time-group-width)
|
||||
[second-property] minmax(min-content, 160px);
|
||||
}
|
||||
|
||||
.transition {
|
||||
display: grid;
|
||||
grid-gap: gridSizes.$gap-medium;
|
||||
@include templateColumns;
|
||||
|
||||
@include screen.tablets {
|
||||
grid-gap: gridSizes.$gap-small;
|
||||
@include templateColumns(gridSizes.$title-column-width-tablets);
|
||||
}
|
||||
|
||||
&__first-property {
|
||||
grid-area: 1 / 5 / 2 / 6; // fifth column of the first row
|
||||
|
||||
@include intermediateScreens {
|
||||
grid-area: 2 / 2 / 3 / 3; // second column of the second row
|
||||
}
|
||||
}
|
||||
|
||||
&__second-property {
|
||||
grid-area: 1 / 6 / 2 / 7; // sixth column of the first row
|
||||
|
||||
@include intermediateScreens {
|
||||
grid-area: 2 / 3 / 3 / 4; // third column of the second row
|
||||
}
|
||||
}
|
||||
|
||||
&__third-property {
|
||||
grid-area: 2 / 2 / 3 / 4; // second and third columns of the second row
|
||||
|
||||
@include intermediateScreens {
|
||||
grid-area: 2 / 4 / 3 / 6; // fourth and fifth columns of the second row
|
||||
}
|
||||
}
|
||||
|
||||
&__bag-belt.transition__first-property {
|
||||
grid-area: 1 / 5 / 2 / 7; // fifth and sixth columns of the first row
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
@use "src/styles/screen";
|
||||
@use "src/styles/grid-sizes" as gridSizes;
|
||||
|
||||
.transition {
|
||||
@include screen.mobile {
|
||||
grid-gap: gridSizes.$gap-small;
|
||||
grid-template-columns: repeat(2, minmax(gridSizes.$time-width, 1fr));
|
||||
|
||||
&__title {
|
||||
grid-area: 1 / 1 / 2 / 2; // first column of first row
|
||||
}
|
||||
|
||||
&__status {
|
||||
grid-area: 2 / 1 / 3 / 2; // first column of second row
|
||||
}
|
||||
|
||||
&__beginning-time {
|
||||
grid-area: 3 / 1 / 4 / 2; // first column of third row
|
||||
}
|
||||
|
||||
&__finish-time {
|
||||
grid-area: 3 / 2 / 4 / 3; // second column of third row
|
||||
}
|
||||
|
||||
&__first-property {
|
||||
grid-area: 4 / 1 / 5 / 2; // first column of fourth row
|
||||
}
|
||||
|
||||
&__second-property {
|
||||
grid-area: 4 / 2 / 5 / 3; // second column of fourth row
|
||||
}
|
||||
|
||||
&__third-property {
|
||||
grid-area: 5 / 1 / 6 / 3; // first and second columns of fifth row
|
||||
}
|
||||
|
||||
&__bag-belt.transition__first-property {
|
||||
grid-area: 4 / 1 / 5 / 3; // first and second columns of fourth row
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/* Module Components - Common UI Components */
|
||||
|
||||
@import './app-version.component.scss';
|
||||
@import './buy-ticket-button.component.scss';
|
||||
@import './captioned-time-group.component.scss';
|
||||
@import './day-change-square-legacy.component.scss';
|
||||
@import './day-change-square.component.scss';
|
||||
@import './details-header-badge.component.scss';
|
||||
@import './details-header-badges.component.scss';
|
||||
@import './duration.component.scss';
|
||||
@import './flight-actions.component.scss';
|
||||
@import './flight-brief.component.scss';
|
||||
@import './flight-details-button.component.scss';
|
||||
@import './flight-details-icon.component.scss';
|
||||
@import './flight-details-section.component.scss';
|
||||
@import './flight-events.component.scss';
|
||||
@import './flight-props.component.scss';
|
||||
@import './flight-status-button.component.scss';
|
||||
@import './flight-status.component.scss';
|
||||
@import './flight-transition.component.layout.scss';
|
||||
@import './flight-transition.component.mobile-layout.scss';
|
||||
@import './index.scss';
|
||||
@import './last-update.component.scss';
|
||||
@import './link-to-old-version.component.scss';
|
||||
@import './note.component.scss';
|
||||
@import './operator-logo-and-model.component.scss';
|
||||
@import './operator-logo.component.scss';
|
||||
@import './page-empty-list.component.scss';
|
||||
@import './page-title.component.scss';
|
||||
@import './partners-redirect-note.component.scss';
|
||||
@import './print-button.component.scss';
|
||||
@import './property.component.scss';
|
||||
@import './registration-button.component.scss';
|
||||
@import './section-number.component.scss';
|
||||
@import './share-button.component.scss';
|
||||
@import './spin-lock.component.scss';
|
||||
@import './station-change.component.scss';
|
||||
@import './station.component.scss';
|
||||
@import './terminal-link.component.scss';
|
||||
@import './time-group-legacy.component.scss';
|
||||
@import './time-group-positioning.component.scss';
|
||||
@import './time-group-sizes.component.scss';
|
||||
@import './time-group.component.scss';
|
||||
@import './timeline.component.scss';
|
||||
@import './transfer-inline-extended.component.scss';
|
||||
@import './transfer-inline.component.scss';
|
||||
@import './transfer-section.component.scss';
|
||||
@import './transfer-time.component.scss';
|
||||
@import './warning-ifly-carrier-detail.component.scss';
|
||||
@import './warning-ifly-carrier-small.component.scss';
|
||||
@@ -0,0 +1,28 @@
|
||||
@use './src/styles/screen';
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
@include screen.gt-mobile() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@include screen.mobile() {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.last-update__description {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
share-button {
|
||||
@include screen.gt-mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
:host {
|
||||
a {
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background-color: #e2740b;
|
||||
padding: 3px 10px 4px 10px;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
height: 25px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@use "src/styles/variables" as vars;
|
||||
@use "src/styles/screen";
|
||||
|
||||
.note {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
::ng-deep .text {
|
||||
line-height: 17px !important;
|
||||
}
|
||||
|
||||
&__symbol {
|
||||
margin-right: vars.$space-s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
|
||||
operator-logo-and-model {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include gt-mobile() {
|
||||
@include v-spacing($space-s);
|
||||
}
|
||||
|
||||
.aircraft-name {
|
||||
&--right {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&--mobile-right {
|
||||
@include mobile {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile-left {
|
||||
@include mobile {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
|
||||
operator-logo {
|
||||
display: block;
|
||||
& > div.company-logo {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: left top;
|
||||
}
|
||||
@include v-spacing($space-s);
|
||||
|
||||
@include mobile() {
|
||||
& > div.description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@use 'src/styles/framework' as *;
|
||||
|
||||
.page-empty {
|
||||
padding: 50px 40px 50px 124px;
|
||||
|
||||
background-color: $white;
|
||||
background-image: url('../assets/img/icon-not-found.svg');
|
||||
background-position: 40px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 55px auto;
|
||||
|
||||
@include mobile {
|
||||
padding: 124px 40px 50px 40px;
|
||||
|
||||
background-position: center 40px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $space-s;
|
||||
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-bold;
|
||||
color: $text-color;
|
||||
|
||||
@include mobile {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: 80%;
|
||||
|
||||
font-size: $font-size-m;
|
||||
line-height: 22px;
|
||||
color: $gray;
|
||||
|
||||
@include mobile {
|
||||
text-align: center;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "src/styles/framework" as *;
|
||||
|
||||
:host {
|
||||
h1 {
|
||||
@include font-overflow();
|
||||
}
|
||||
|
||||
@include smTablet {
|
||||
h1 {
|
||||
font-size: $font-size-xxxl--tablet;
|
||||
margin-bottom: $space-m + $space-s;
|
||||
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
h1 {
|
||||
font-size: $font-size-xxxl--mobile;
|
||||
margin-bottom: $space-m + $space-s;
|
||||
margin-top: $space-m;
|
||||
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
|
||||
|
||||
:host {
|
||||
section.empty-list {
|
||||
padding: 124px 40px 50px 40px;
|
||||
border-radius: 0;
|
||||
background-image: url('../assets/img/icon-not-found.svg');
|
||||
background-position: center 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 55px auto;
|
||||
text-align: justify;
|
||||
|
||||
.text-header {
|
||||
font-size: $font-size-xl;
|
||||
color: $text-color;
|
||||
font-weight: $font-bold;
|
||||
margin-bottom: $space-s;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
font-size: $font-size-m;
|
||||
line-height: 22px;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
:host {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@use './src/styles/layouts' as *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
@include v-spacing(2px);
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .app-registration-btn .p-button-label {
|
||||
padding: 0.429em 0.8em;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
|
||||
.section-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid $blue-light2;
|
||||
|
||||
font-size: $font-size-m;
|
||||
line-height: 19px;
|
||||
color: $blue-dark;
|
||||
|
||||
&--small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
font-size: $font-size-s;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@use 'src/styles/framework' as *;
|
||||
|
||||
// Double class to increase style specificity.
|
||||
// Otherwise will be overwritten by .transparent
|
||||
.share-button.share-button {
|
||||
&:hover {
|
||||
border: none;
|
||||
|
||||
background-color: $blue-icon !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.spin-lock {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2000;
|
||||
opacity: 50%;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
overflow: hidden;
|
||||
|
||||
.city {
|
||||
@include desktop() {
|
||||
@include font-overflow;
|
||||
}
|
||||
}
|
||||
|
||||
@include v-spacing($space-s);
|
||||
|
||||
._row {
|
||||
display: flex;
|
||||
@include h-spacing($space-m);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: $gray;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@use 'src/styles/screen';
|
||||
|
||||
:host {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.station {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__city {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__old-city {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__terminal {
|
||||
// todo: remove after terminal-link deprecation
|
||||
@include screen.smTablet {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&--right {
|
||||
align-items: flex-end;
|
||||
|
||||
// todo: remove after terminal-link deprecation
|
||||
.station__terminal {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile-right {
|
||||
@include screen.mobile {
|
||||
align-items: flex-end;
|
||||
|
||||
// todo: remove after terminal-link deprecation
|
||||
.station__terminal {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile-left {
|
||||
@include screen.gt-mobile {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
terminal-link {
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
max-height: 16px;
|
||||
|
||||
@include tablets {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
|
||||
@include font-small();
|
||||
@include desktop() {
|
||||
@include font-overflow();
|
||||
}
|
||||
cursor: pointer;
|
||||
color: $light-gray;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: $blue-light !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-link--old,
|
||||
.terminal-link--old a{
|
||||
color: $red !important;
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
@use './src/styles/framework' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
time-group-legacy {
|
||||
// self
|
||||
@include v-spacing($space-s);
|
||||
|
||||
.time-group {
|
||||
&__container {
|
||||
display: flex;
|
||||
gap: $space-s;
|
||||
}
|
||||
|
||||
&__old-time {
|
||||
@include font-small();
|
||||
color: $orange;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__utc-offset {
|
||||
@include font-small();
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
&__date {
|
||||
@include font-small();
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// variations
|
||||
|
||||
&.right-layout {
|
||||
@include mobile {
|
||||
align-items: flex-end;
|
||||
|
||||
day-change-square-legacy {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.time-group__main {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.time-group__utc-offset {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sparse {
|
||||
.time-group__main {
|
||||
@include v-spacing($space-s);
|
||||
}
|
||||
}
|
||||
&.day-change-left {
|
||||
.time-group__main {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
day-change-square-legacy {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.day-change-floating {
|
||||
.time-group__container {
|
||||
position: relative;
|
||||
day-change-square-legacy {
|
||||
position: absolute;
|
||||
top: -$space-s;
|
||||
right: -6 * $space-s;
|
||||
background: $white;
|
||||
z-index: 1;
|
||||
padding: $space-s;
|
||||
}
|
||||
}
|
||||
|
||||
&.day-change-left {
|
||||
.time-group__container {
|
||||
day-change-square-legacy {
|
||||
left: -6 * $space-s;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini-list {
|
||||
.time-group {
|
||||
&__container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__main {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-medium;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
day-change-square-legacy {
|
||||
padding-top: math.div($space-s, 2);
|
||||
padding-right: math.div($space-s, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
@use 'src/styles/screen' as *;
|
||||
@use 'src/styles/variables' as *;
|
||||
|
||||
|
||||
@mixin right-to-left() {
|
||||
.time-group__day-change {
|
||||
order: 1;
|
||||
|
||||
margin-right: $space-s;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.time-group__times {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin right-layout {
|
||||
@include right-to-left;
|
||||
|
||||
.time-group__times {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.time-group--day-change-left {
|
||||
@include right-to-left;
|
||||
}
|
||||
|
||||
.time-group--day-change-mobile-left {
|
||||
@include mobile {
|
||||
@include right-to-left;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--day-change-mobile-right {
|
||||
@include gt-mobile {
|
||||
@include right-to-left;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--right {
|
||||
@include right-layout;
|
||||
}
|
||||
|
||||
.time-group--mobile-right {
|
||||
@include mobile {
|
||||
@include right-layout;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--mobile-left {
|
||||
@include gt-mobile {
|
||||
@include right-layout;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--day-change-absolute {
|
||||
position: relative;
|
||||
|
||||
.time-group__day-change {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--mobile-right.time-group--day-change-absolute {
|
||||
@include mobile {
|
||||
.time-group__day-change {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--right.time-group--day-change-absolute {
|
||||
.time-group__day-change {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@use 'src/styles/fonts' as *;
|
||||
|
||||
.time-group--medium {
|
||||
.time-group__day-change {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.time-group--small,
|
||||
.time-group--extra-small {
|
||||
.time-group__utc {
|
||||
margin-top: 0;
|
||||
|
||||
font-size: $font-size-xs;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.time-group__day-change {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@use 'src/styles/fonts' as *;
|
||||
@use 'src/styles/colors' as *;
|
||||
@use 'src/styles/variables' as *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-group {
|
||||
display: inline-flex;
|
||||
|
||||
&__times {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__actual {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__utc {
|
||||
margin-top: 2px;
|
||||
margin-left: $space-s;
|
||||
}
|
||||
|
||||
&__day-change {
|
||||
margin-top: $space-s;
|
||||
margin-left: $space-s;
|
||||
}
|
||||
|
||||
&__old-time {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__specifying {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
.time-line-station {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
station.time-line-station {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.k-timeline-content {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
padding: $space-xl;
|
||||
|
||||
@include v-spacing($space-xl);
|
||||
}
|
||||
.k-timeline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@include h-spacing($space-s);
|
||||
|
||||
.time-line-station--change {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.k-timeline-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.k-timeline-duration {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 24px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.k-separator {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
margin-top: 11px;
|
||||
|
||||
background-color: $border;
|
||||
}
|
||||
|
||||
section-number {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
transfer-time {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.k-timeline-point {
|
||||
display: flex;
|
||||
font-size: $font-size-xl1;
|
||||
background: $white;
|
||||
@include h-spacing($space-s);
|
||||
.k-separator {
|
||||
min-width: $space-s;
|
||||
}
|
||||
}
|
||||
|
||||
.k-timeline-navigation {
|
||||
//transform: rotate(90deg);
|
||||
align-self: stretch;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $space-xl;
|
||||
|
||||
&[role='previous'] {
|
||||
margin-right: -$space-xl;
|
||||
&:hover {
|
||||
background-image: linear-gradient(to left, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
|
||||
}
|
||||
::ng-deep svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
&[role='next'] {
|
||||
margin-left: -$space-xl;
|
||||
&:hover {
|
||||
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
|
||||
}
|
||||
::ng-deep svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-duration--specifying {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
background-color: $white;
|
||||
border-left: 1px dashed $border;
|
||||
border-right: 1px dashed $border;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: $font-size-s;
|
||||
margin-bottom: -$space-s;
|
||||
margin-top: -$space-s;
|
||||
position: relative;
|
||||
|
||||
.transfer {
|
||||
&-box {
|
||||
align-items: center;
|
||||
background: $white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $border;
|
||||
display: flex;
|
||||
@include h-spacing($space-s);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
|
||||
@include mobile() {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
|
||||
padding: $space-m2 $space-m 0;
|
||||
|
||||
border-right: 1px solid $border;
|
||||
|
||||
svg {
|
||||
fill: $orange;
|
||||
height: 6.5px;
|
||||
width: 20.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-caption {
|
||||
font-weight: $font-medium;
|
||||
|
||||
@include mobile() {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-time {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@include h-spacing($space-s);
|
||||
}
|
||||
|
||||
&-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: $space-s;
|
||||
|
||||
@include gt-mobile() {
|
||||
@include h-spacing($space-s);
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
@include v-spacing($space-s);
|
||||
flex-wrap: wrap;
|
||||
& > * {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-top: 1px dotted $border;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
padding: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
||||
.flight-options-icon__icon {
|
||||
align-items: flex-start;
|
||||
|
||||
padding-top: $space-m;
|
||||
height: 100%;
|
||||
border-right: 1px solid $border;
|
||||
}
|
||||
|
||||
.transfer-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
padding: $space-s $space-m;
|
||||
|
||||
span {
|
||||
@include font-small();
|
||||
@include font-overflow();
|
||||
|
||||
&.embolded {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-transfers {
|
||||
display: flex;
|
||||
|
||||
@include h-spacing($space-s);
|
||||
}
|
||||
|
||||
.dash {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include h-spacing($space-s);
|
||||
|
||||
@include mobile() {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
@include v-spacing($space-s);
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include font-small();
|
||||
@include h-spacing($space-s);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
color: $text-color;
|
||||
|
||||
span {
|
||||
@include font-overflow();
|
||||
|
||||
&.embolded {
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex-wrap: wrap;
|
||||
@include v-spacing($space-s, true);
|
||||
|
||||
.transfer {
|
||||
&-change {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
&-city {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
transfer-time {
|
||||
display: inline-flex;
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
.flights-warning-container {
|
||||
display: flex;
|
||||
align-items: center; /* Вертикальное выравнивание по центру */
|
||||
padding: 10px 20px;
|
||||
/* По горизонтали элементы располагаются слева направо (по умолчанию), поэтому justify-content не нужен */
|
||||
}
|
||||
|
||||
.vertical-bar {
|
||||
width: 0.3rem; /* Толщина полосы */
|
||||
height: 80px; /* Высота полосы */
|
||||
background-color: #e2740b;
|
||||
// margin: 0 15px; /* Отступы слева и справа по 15px */
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
text-align: left; /* Текст выравнивается по левому краю */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.warning-highlight {
|
||||
font-weight: bold; /* Жирное начертание */
|
||||
color: #e2740b; /* Оранжевый цвет */
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
@use './src/styles/variables' as *;
|
||||
|
||||
:host{
|
||||
display: block;
|
||||
padding: $space-l $space-xl;
|
||||
}
|
||||
|
||||
.warning-highlight {
|
||||
font-weight: bold; /* Жирное начертание */
|
||||
color: #e2740b; /* Оранжевый цвет */
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@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 *;
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template: auto auto / auto auto;
|
||||
padding: $space-l $space-xl;
|
||||
align-items: start;
|
||||
gap: $space-m;
|
||||
|
||||
@include mobile() {
|
||||
grid-template: auto / auto;
|
||||
|
||||
::ng-deep {
|
||||
flight-actions share-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
last-update {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
flight-actions {
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-right: -$space-m;
|
||||
|
||||
::ng-deep .flight-actions__action {
|
||||
flex-shrink: 1;
|
||||
|
||||
margin-bottom: $space-m;
|
||||
}
|
||||
::ng-deep .flight-actions__action:last-child {
|
||||
margin-right: $space-m;
|
||||
|
||||
@include mobile {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-route-update {
|
||||
display: flex;
|
||||
@include h-spacing($space-m);
|
||||
|
||||
last-update {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@include gt-mobile() {
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@use './src/styles/screen' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
|
||||
:host {
|
||||
--property-column-width: 100px;
|
||||
|
||||
::ng-deep .flight-props-caption {
|
||||
width: 200px;
|
||||
|
||||
@include tablets() {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .code-sharing__description {
|
||||
width: 200px;
|
||||
|
||||
white-space: initial;
|
||||
text-overflow: initial;
|
||||
overflow: initial;
|
||||
|
||||
@include tablets() {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
code-sharing {
|
||||
margin: 0 $space-xl;
|
||||
padding: $space-m 0;
|
||||
|
||||
border-bottom: 1px dotted $border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use './src/styles/variables' as *;
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
margin-top: $space-l;
|
||||
}
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include mobile() {
|
||||
.flight {
|
||||
grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: $space-l 0;
|
||||
grid-template-areas:
|
||||
'logo logo status status number number'
|
||||
'depart-at depart-at depart-at arrive-at arrive-at arrive-at'
|
||||
'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
|
||||
|
||||
operator-logo {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
&-status {
|
||||
grid-area: status;
|
||||
.status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-number {
|
||||
grid-area: number;
|
||||
justify-self: end;
|
||||
.status {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
time-group {
|
||||
&:first-of-type {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-at;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
station {
|
||||
&:first-of-type {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-to;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
flex-wrap: wrap;
|
||||
@include v-spacing($space-m);
|
||||
|
||||
transfer-inline {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
padding: $space-xl;
|
||||
@include v-spacing($space-xl);
|
||||
|
||||
&:hover {
|
||||
.arrow-icon {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow-icon--visible {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.flight {
|
||||
display: grid;
|
||||
grid-template: auto / [number] 80px [logo] 120px [departure-time] 100px [departure-station] minmax(45px, 145px) [status] minmax(85px, 145px) [arrival-time] 120px [arrival-station] minmax(45px, 145px) [arrow] 10px;
|
||||
gap: 0 $space-l;
|
||||
|
||||
.flight-number {
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-regular;
|
||||
|
||||
.status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
display: flex;
|
||||
@include h-spacing($space-m);
|
||||
|
||||
flight-events:empty {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include tablets {
|
||||
padding: $space-l;
|
||||
|
||||
.arrow-icon {
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.flight {
|
||||
display: grid;
|
||||
grid-template: auto / [number] 70px [logo] 90px [departure-time] 90px [departure-station] 1fr [status] 85px [arrival-time] 90px [arrival-station] 1fr [arrow] 10px;
|
||||
gap: 0 $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
|
||||
:host {
|
||||
::ng-deep .code-sharing__description {
|
||||
width: 200px;
|
||||
|
||||
white-space: initial;
|
||||
text-overflow: initial;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
::ng-deep .flight-props-caption {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.with-top-border {
|
||||
border-top: 1px dotted $border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
|
||||
.description {
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
|
||||
.code-sharing-flight-number {
|
||||
color: $gray;
|
||||
font-size: $font-size-s;
|
||||
}
|
||||
|
||||
@include gap($space-m);
|
||||
|
||||
@include mobile() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// variations
|
||||
&.boxed {
|
||||
padding: $space-m $space-xl;
|
||||
|
||||
border-radius: 3px;
|
||||
background-color: $white;
|
||||
border: 1px dashed $border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@use './src/styles/variables' as *;
|
||||
|
||||
:host {
|
||||
flight-details-body-actions {
|
||||
margin-top: $space-m;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
@use './src/styles/screen' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding-top: 1rem;
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
@include v-spacing(2rem);
|
||||
@include h-spacing(2rem);
|
||||
padding: 2rem;
|
||||
|
||||
@include desktop() {
|
||||
padding-top: 3rem;
|
||||
max-width: 960px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.error-page {
|
||||
&-girl {
|
||||
flex: 30%;
|
||||
background-image: url('../assets/img/lady404.png');
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-bottom: -2rem;
|
||||
|
||||
@include mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-code {
|
||||
font-size: 8rem;
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 3rem;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&-search {
|
||||
width: 100%;
|
||||
|
||||
@include desktop() {
|
||||
width: 17rem;
|
||||
}
|
||||
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&-control {
|
||||
position: relative;
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: no-repeat;
|
||||
background-image: url('../assets/img/icon--search.svg');
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-image: url('../assets/img/icon--search-blue.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #dfdfdf;
|
||||
background: #fff;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
transition: all 0.2s;
|
||||
outline: 0 solid transparent;
|
||||
border-radius: 0.1875rem;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #b7d3f3;
|
||||
box-shadow: 0 0.0625rem 0.1875rem #cad6e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 70%;
|
||||
@include v-spacing(1rem);
|
||||
|
||||
@include mobile() {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
padding: 2rem 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include gt-mobile() {
|
||||
@include h-spacing(1rem);
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
flex-wrap: wrap;
|
||||
@include v-spacing(1rem);
|
||||
}
|
||||
|
||||
a {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::ng-deep .p-button-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include mobile() {
|
||||
|
||||
&[name='buy-ticket'] {
|
||||
justify-content: center;
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include mobile() {
|
||||
.multileg-flight-header {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
|
||||
&__bottom,
|
||||
&__top {
|
||||
width: 100%;
|
||||
|
||||
@include h-spacing($space-m);
|
||||
}
|
||||
|
||||
&__top {
|
||||
margin-bottom: $space-s;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
order: 2;
|
||||
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&__events {
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
|
||||
margin-right: $space-m;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-route {
|
||||
margin-bottom: $space-m;
|
||||
font-size: $font-size-xl3;
|
||||
grid-template: auto auto auto auto auto / 100px auto;
|
||||
grid-template-areas:
|
||||
'depart-at depart-from'
|
||||
'scheduled-depart-at latest-depart-at'
|
||||
'status status'
|
||||
'arrive-at arrive-to'
|
||||
'scheduled-arrive-at latest-arrive-at'
|
||||
'note note';
|
||||
|
||||
time-group[role^='primary'] {
|
||||
&:first-of-type {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-at;
|
||||
}
|
||||
}
|
||||
|
||||
captioned-time-group[role^='secondary'] {
|
||||
&[role*='latest'] {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
route-status {
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
station {
|
||||
&:first-of-type {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
background: $white;
|
||||
|
||||
.multileg-flight-header {
|
||||
display: flex;
|
||||
|
||||
&__bottom,
|
||||
&__top {
|
||||
display: flex;
|
||||
|
||||
@include h-spacing($space-xl);
|
||||
}
|
||||
|
||||
arrow-down-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-route {
|
||||
margin-bottom: $space-xl;
|
||||
padding: $space-xl $space-xl 0 $space-xl;
|
||||
font-size: $font-size-xxl;
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template: auto auto auto/
|
||||
[depart-at] fit-content(120px)
|
||||
[depart-to] fit-content(30%)
|
||||
[status] minmax(150px, 1fr)
|
||||
[arrive-at] fit-content(120px)
|
||||
[arrive-to] fit-content(30%);
|
||||
grid-template-areas:
|
||||
'. . . . .'
|
||||
'scheduled-depart-at latest-depart-at . scheduled-arrive-at latest-arrive-at'
|
||||
'note note note note .';
|
||||
gap: $space-xl $space-m;
|
||||
|
||||
time-group,
|
||||
captioned-time-group {
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
note {
|
||||
grid-area: note;
|
||||
}
|
||||
|
||||
captioned-time-group[role^='secondary'] {
|
||||
&[role*='scheduled departure'] {
|
||||
grid-area: scheduled-depart-at;
|
||||
}
|
||||
&[role*='latest departure'] {
|
||||
grid-area: latest-depart-at;
|
||||
}
|
||||
&[role*='scheduled arrival'] {
|
||||
grid-area: scheduled-arrive-at;
|
||||
}
|
||||
&[role*='latest arrival'] {
|
||||
grid-area: latest-arrive-at;
|
||||
}
|
||||
}
|
||||
|
||||
&__departure,
|
||||
&__arrival {
|
||||
max-width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.details-accordion__header {
|
||||
justify-content: space-between;
|
||||
.block-route-update {
|
||||
flex: 1;
|
||||
|
||||
.block-route {
|
||||
margin-right: $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
leg-time-pair {
|
||||
font-size: $font-size-l;
|
||||
}
|
||||
|
||||
flight-events {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include mobile() {
|
||||
code-sharing {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.k-leg {
|
||||
gap: $space-l 0;
|
||||
grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'section-number logo logo logo flight-number flight-number'
|
||||
'depart-at depart-at duration duration arrive-at arrive-at'
|
||||
'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
|
||||
|
||||
section-number {
|
||||
grid-area: section-number;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&-flight-number {
|
||||
grid-area: flight-number;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
&-duration {
|
||||
grid-area: duration;
|
||||
}
|
||||
|
||||
operator-logo-and-model {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.departure-time-group {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
|
||||
.arrival-time-group {
|
||||
grid-area: arrive-at;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.departure-station {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
|
||||
.arrival-station {
|
||||
grid-area: arrive-to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding: $space-l $space-xl;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-regular;
|
||||
@include v-spacing($space-l);
|
||||
|
||||
.k-leg {
|
||||
display: grid;
|
||||
grid-template: auto / [number] 30px [flight-number] 80px [logo] 120px [departure-time] 70px [departure-station] minmax(45px, 240px) [duration] 100px [arrival-time] 70px [arrival-station] minmax(45px, 240px);
|
||||
gap: 0 $space-l;
|
||||
|
||||
&-duration {
|
||||
align-self: center;
|
||||
border-top: 1px solid $border;
|
||||
flex: 1;
|
||||
margin-top: $space-s;
|
||||
padding-top: $space-s;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
code-sharing {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include tablets() {
|
||||
padding: $space-m $space-l;
|
||||
|
||||
.k-leg {
|
||||
grid-template: auto / [number] 30px [flight-number] 70px [logo] 90px [departure-time] 65px [departure-station] minmax(45px, 240px) [duration] 70px [arrival-time] 65px [arrival-station] minmax(45px, 240px);
|
||||
gap: 0 $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@use './src/styles/screen' as *;
|
||||
:host {
|
||||
@include mobile() {
|
||||
property {
|
||||
order: 0;
|
||||
|
||||
&[name='airplane-title'] {
|
||||
order: 1;
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
&[name='airplane-previous'] {
|
||||
order: 2;
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
@use './src/styles/variables' as *;
|
||||
|
||||
:host {
|
||||
flight-actions {
|
||||
padding-top: $space-m;
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
@use 'src/styles/fonts';
|
||||
@use 'src/styles/screen';
|
||||
|
||||
:host {
|
||||
font-size: fonts.$font-size-xl2;
|
||||
|
||||
timeline {
|
||||
@include screen.mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@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 *;
|
||||
|
||||
.flight-meal {
|
||||
::ng-deep .flight-details-section__content {
|
||||
margin-left: -$space-m;
|
||||
}
|
||||
|
||||
&__caption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include h-spacing($space-xl);
|
||||
}
|
||||
|
||||
&__caption-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin-right: $space-xl;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/variables' as *;
|
||||
|
||||
:host {
|
||||
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@use 'src/styles/fonts';
|
||||
@use 'src/styles/screen';
|
||||
@use 'src/styles/colors';
|
||||
@use 'src/styles/variables' as vars;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding: vars.$space-xl 0;
|
||||
margin: 0 vars.$space-xl;
|
||||
font-weight: fonts.$font-regular;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px dotted colors.$border;
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@use './src/styles/variables' as vars;
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
|
||||
:host {
|
||||
font-weight: $font-regular;
|
||||
|
||||
&:not(:first-child) {
|
||||
.deboarding {
|
||||
padding: vars.$space-xl 0;
|
||||
margin: 0 vars.$space-xl;
|
||||
|
||||
border-top: 1px dotted $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding: $space-l $space-xl;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-regular;
|
||||
@include v-spacing($space-l);
|
||||
|
||||
.k-leg {
|
||||
@include mobile() {
|
||||
&-status {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
gap: $space-l 0;
|
||||
grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'number logo logo logo status status'
|
||||
'depart-at depart-at depart-at arrive-at arrive-at arrive-at'
|
||||
'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
|
||||
|
||||
section-number {
|
||||
grid-area: number;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
operator-logo-and-model {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
&-status {
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
time-group-legacy {
|
||||
&:first-of-type {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-at;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
station {
|
||||
&:first-of-type {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding: $space-l $space-xl;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-regular;
|
||||
@include v-spacing($space-l);
|
||||
|
||||
.k-leg {
|
||||
display: grid;
|
||||
grid-template: auto / [number] 60px [logo] 120px [departure-time] 100px [departure-station] 1fr [status] minmax(85px, 145px) [arrival-time] 120px [arrival-station] 1fr;
|
||||
gap: 0 $space-l;
|
||||
|
||||
&-status {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
|
||||
@include tablets() {
|
||||
padding: $space-l;
|
||||
|
||||
.k-leg {
|
||||
display: grid;
|
||||
grid-template: auto / [number] 50px [logo] 90px [departure-time] 100px [departure-station] 1fr [status] 85px [arrival-time] 100px [arrival-station] 1fr;
|
||||
gap: 0 $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
@use './src/styles/framework' as *;
|
||||
@use '/src/styles/grid-sizes' as gridSizes;
|
||||
|
||||
:host {
|
||||
.registration {
|
||||
padding: $space-l 0;
|
||||
margin: 0 $space-xl;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
.registration {
|
||||
border-top: 1px dotted $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
:host {
|
||||
@include mobile() {
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
grid-template-areas:
|
||||
'description description'
|
||||
'scheduled-departure scheduled-arrival'
|
||||
'latest-departure latest-arrival';
|
||||
|
||||
& > .description {
|
||||
grid-area: description;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
:host {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
grid-template-columns: [description] 195px [time] 100px [time] 1fr [space] minmax(0, 145px) [time] 120px [time] 1fr;
|
||||
@include tablets() {
|
||||
grid-template-columns: [description] 145px [time] 100px [time] 1fr [space] minmax(0, 80px) [time] 120px [time] 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
grid-template-areas: 'description scheduled-departure latest-departure . scheduled-arrival latest-arrival';
|
||||
|
||||
padding: $space-l 0;
|
||||
margin: 0 25px 0 $space-xl;
|
||||
|
||||
font-weight: $font-medium;
|
||||
|
||||
captioned-time-group {
|
||||
&[role*='scheduled departure'] {
|
||||
grid-area: scheduled-departure;
|
||||
}
|
||||
&[role*='scheduled arrival'] {
|
||||
grid-area: scheduled-arrival;
|
||||
}
|
||||
&[role*='latest departure'] {
|
||||
grid-area: latest-departure;
|
||||
}
|
||||
&[role*='latest arrival'] {
|
||||
grid-area: latest-arrival;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@use './src/styles/variables' as *;
|
||||
@use './src/styles/layouts' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
|
||||
:host {
|
||||
::ng-deep .flight-details-section__content {
|
||||
margin-left: -$space-m;
|
||||
}
|
||||
|
||||
.flight-details-services__caption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include h-spacing($space-xl);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@use './src/styles/fonts' as *;
|
||||
@use './src/styles/colors' as *;
|
||||
@use './src/styles/screen' as *;
|
||||
|
||||
:host {
|
||||
//details-accordion__header is used in many places;
|
||||
//Set !important can break layout in many places
|
||||
//So just added .flight-details__header with !important
|
||||
.details-accordion__header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flight-details__header {
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
|
||||
font-size: $font-size-m !important;
|
||||
color: $light-gray !important;
|
||||
|
||||
@include mobile {
|
||||
font-size: $font-size-s !important;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: $font-size-l;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
:host {
|
||||
& > div {
|
||||
padding: 0 !important; // canceling complex styles
|
||||
}
|
||||
}
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
@include mobile() {
|
||||
::ng-deep {
|
||||
flight-actions {
|
||||
flight-status-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flight-route {
|
||||
font-size: $font-size-xl3;
|
||||
grid-template: auto auto auto / 100px auto;
|
||||
grid-template-areas:
|
||||
'depart-at depart-from'
|
||||
'status status'
|
||||
'arrive-at arrive-to';
|
||||
|
||||
time-group-legacy {
|
||||
&:first-of-type {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-at;
|
||||
}
|
||||
}
|
||||
|
||||
.status-line {
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
station {
|
||||
&:first-of-type {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
&:last-of-type {
|
||||
grid-area: arrive-to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
background: $white;
|
||||
|
||||
.flight-route {
|
||||
padding: $space-xl;
|
||||
font-size: $font-size-xxl;
|
||||
|
||||
display: grid;
|
||||
grid-template: auto /
|
||||
[depart-at] 100px
|
||||
[depart-to] minmax(80px, 260px)
|
||||
[status] minmax(150px, 1fr)
|
||||
[arrive-at] 100px
|
||||
[arrive-to] minmax(80px, 260px);
|
||||
|
||||
gap: $space-xl $space-m;
|
||||
|
||||
.status-line {
|
||||
height: 1px;
|
||||
align-self: center;
|
||||
background-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
font-size: $font-size-l;
|
||||
flight-props {
|
||||
padding: $space-xl;
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
font-size: $font-size-m;
|
||||
color: $light-gray;
|
||||
font-weight: $font-medium;
|
||||
|
||||
@include mobile {
|
||||
font-size: $font-size-s;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep property,
|
||||
::ng-deep time-group-legacy {
|
||||
.description {
|
||||
color: $light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
grid-column: 1 / -1; // span all columns
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
@include h-spacing($space-m);
|
||||
@include v-spacing($space-m);
|
||||
|
||||
.day {
|
||||
@include font-small();
|
||||
background-color: $day-color;
|
||||
border-radius: $border-radius;
|
||||
padding: $space-s $space-m;
|
||||
&.inactive {
|
||||
background-color: $day-color-inactive;
|
||||
color: transparentize($color: $gray, $amount: 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
note {
|
||||
grid-column: 1 / -1; // span all columns
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
@use './src/styles/framework' as *;
|
||||
|
||||
:host {
|
||||
&.selected {
|
||||
.flight-card {
|
||||
border: 2px solid $blue-light;
|
||||
}
|
||||
|
||||
.flight-card-wrapper {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
time-group-legacy {
|
||||
font-size: $font-size-xl1;
|
||||
font-weight: $font-medium;
|
||||
color: $blue-dark;
|
||||
}
|
||||
|
||||
.flight-card-wrapper {
|
||||
padding: 0 $space-s2;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
&:last-of-type .flight-card-wrapper {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flight-card {
|
||||
padding: $space-m2;
|
||||
|
||||
&__content {
|
||||
display: grid;
|
||||
column-gap: $space-s;
|
||||
row-gap: $space-m;
|
||||
grid-template: auto auto / 1fr $space-m $space-m 1fr;
|
||||
grid-template-areas:
|
||||
'depart-at status status arrive-at'
|
||||
'depart-from depart-from arrive-to arrive-to';
|
||||
}
|
||||
|
||||
time-group-legacy {
|
||||
&:first-of-type {
|
||||
grid-area: depart-at;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
grid-area: arrive-at;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
flight-status-icon {
|
||||
grid-area: status;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
station {
|
||||
max-width: 100%;
|
||||
&:first-of-type {
|
||||
grid-area: depart-from;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
grid-area: arrive-to;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__flight-number {
|
||||
margin-bottom: 2px;
|
||||
|
||||
font-size: $font-size-xs;
|
||||
line-height: 13px;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&__station {
|
||||
font-size: $font-size-s;
|
||||
font-weight: $font-bold;
|
||||
color: $blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@use '../../../../../../styles/variables.scss' as *;
|
||||
@use '../../../../../../styles/colors.scss' as *;
|
||||
@use '../../../../../../styles/fonts.scss' as *;
|
||||
|
||||
.flights-details-list-schedule-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
|
||||
h3 {
|
||||
margin-top: $text-margin-bottom;
|
||||
color: $blue;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* Module Pages - Page-specific Components */
|
||||
|
||||
/* Board Page Components */
|
||||
@import './board-details-header.component.scss';
|
||||
@import './board-flight-body.component.scss';
|
||||
@import './board-flight-bottom.component.scss';
|
||||
@import './board-flight-header.component.mobile.scss';
|
||||
@import './board-flight-header.component.scss';
|
||||
@import './board-flight-header.component.tablets.scss';
|
||||
@import './board-multi-flight-body.component.scss';
|
||||
@import './code-sharing.component.scss';
|
||||
|
||||
/* Flight Details Components */
|
||||
@import './board-details-header.component.scss';
|
||||
@import './flight-board-details.component.mobile.scss';
|
||||
@import './flight-board-details.component.scss';
|
||||
@import './flight-details-airplane.component.scss';
|
||||
@import './flight-details-boarding.component.scss';
|
||||
@import './flight-details-body-actions.component.scss';
|
||||
@import './flight-details-deboarding.component.scss';
|
||||
@import './flight-details-full-route.component.scss';
|
||||
@import './flight-details-meal.component.scss';
|
||||
@import './flight-details-registration.component.scss';
|
||||
@import './flight-details-row-boarding.component.scss';
|
||||
@import './flight-details-row-disembarkation.component.scss';
|
||||
@import './flight-details-row-part-header.component.mobile.scss';
|
||||
@import './flight-details-row-part-header.component.scss';
|
||||
@import './flight-details-row-part-header.component.tablets.scss';
|
||||
@import './flight-details-row-registrations.component.scss';
|
||||
@import './flight-details-row-time.component.mobile.scss';
|
||||
@import './flight-details-row-time.component.scss';
|
||||
@import './flight-details-services.component.scss';
|
||||
@import './flight-details-wrapper.component.scss';
|
||||
@import './flight-schedule-details.component.mobile.scss';
|
||||
@import './flight-schedule-details.component.scss';
|
||||
@import './flight-schedule.component.scss';
|
||||
|
||||
/* Schedule Page Components */
|
||||
@import './connecting-flight-body.component.scss';
|
||||
@import './flight-body-part-header.component.mobile.scss';
|
||||
@import './flight-body-part-header.component.scss';
|
||||
@import './flight-body-part-header.component.tablets.scss';
|
||||
@import './flight-legs-switcher.component.scss';
|
||||
@import './schedule-details-header.component.scss';
|
||||
@import './schedule-list-flight-header.component.mobile.scss';
|
||||
@import './schedule-list-flight-header.component.scss';
|
||||
@import './schedule-list-flight-header.component.tablets.scss';
|
||||
|
||||
/* Other Components */
|
||||
@import './error-page.component.scss';
|
||||
@import './flights-details-list-flight.component.scss';
|
||||
@import './flights-details-list-schedule-header.component.scss';
|
||||
@import './index.scss';
|
||||
@import './route-status.component.scss';
|
||||
@import './transfer.component.scss';
|
||||
@@ -0,0 +1,47 @@
|
||||
@use './src/styles/colors' as *;
|
||||
|
||||
:host {
|
||||
background: $white;
|
||||
display: flex;
|
||||
|
||||
.status--text-center {
|
||||
display: flex;
|
||||
padding-right: 32px;
|
||||
margin-left: -100%;
|
||||
overflow: visible;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status--text-right {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.status--text-left {
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-route {
|
||||
&__in-flight-status {
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__in-flight-status-text {
|
||||
position: relative;
|
||||
right: calc(-50% + 16px);
|
||||
}
|
||||
|
||||
&__in-flight-status-text-container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flight-route__in-flight-status--right {
|
||||
.flight-route__in-flight-status-text {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@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 *;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $space-l $space-xl;
|
||||
|
||||
@include mobile() {
|
||||
flex-direction: column;
|
||||
@include v-spacing($space-l);
|
||||
}
|
||||
|
||||
.schedule-details-header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include gt-mobile() {
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
@include v-spacing($space-m);
|
||||
}
|
||||
|
||||
@include mobile() {
|
||||
@include v-spacing($space-m);
|
||||
|
||||
::ng-deep {
|
||||
flight-actions {
|
||||
share-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user