styles: copy global and component SCSS files from Angular to React
- Copy 30+ global SCSS files to apps/react/src/styles/ - Copy 75+ component SCSS files to apps/react/src/styles/components/ - Organize by feature: online-board, schedule, flights-map, popular-requests, shared, toolkit - Organize pages styles: board, schedule, adaptive - Update main.tsx to import styles entry point
This commit is contained in:
gnezim
@@ -0,0 +1,45 @@
|
|||||||
|
.banner--top {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: $space-xl;
|
||||||
|
padding-right: $space-xl;
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
padding-left: $space-m;
|
||||||
|
padding-right: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner--bottom {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: $space-xl;
|
||||||
|
padding-right: $space-xl;
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
padding-left: $space-m;
|
||||||
|
padding-right: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: calc(100% - #{$left-aside-width} - #{$column-spacing});
|
||||||
|
margin-left: calc(#{$left-aside-width} + #{$column-spacing});
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-desktop) {
|
||||||
|
width: calc(
|
||||||
|
100% - #{$left-aside-width-desktop} - #{$column-spacing}
|
||||||
|
);
|
||||||
|
margin-left: calc(
|
||||||
|
#{$left-aside-width-desktop} + #{$column-spacing}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-tablet) {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,217 @@
|
|||||||
|
button {
|
||||||
|
min-height: 35px;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
@include font-small();
|
||||||
|
font-weight: $font-medium;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.color {
|
||||||
|
border: none !important;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
background-color: $blue;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue--hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.white {
|
||||||
|
background-color: $white;
|
||||||
|
border: 1.3px solid $border !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download-button {
|
||||||
|
border: 1.3px solid $border-blue !important;
|
||||||
|
height: $medium-button-height;
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
width: 100%;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
font-weight: $font-medium;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download-button-options {
|
||||||
|
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-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-left: -1px;
|
||||||
|
width: $medium-button-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.orange {
|
||||||
|
background-color: $orange;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $orange--hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue-light {
|
||||||
|
background-color: $blue-light;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-light--hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-only {
|
||||||
|
border-color: none;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
border-color: $blue-light--hover;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue-light--hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue-glow {
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
padding: 0px;
|
||||||
|
font-size: $font-size-m;
|
||||||
|
color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
padding: $space-s;
|
||||||
|
margin: -$space-s;
|
||||||
|
background: $blue-icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue-home {
|
||||||
|
background: transparent;
|
||||||
|
border: 1.3px solid $blue-light !important;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1.3px solid $blue !important;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.square {
|
||||||
|
.p-button-label {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-icon-left {
|
||||||
|
display: inline-block;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
width: $small-button-height;
|
||||||
|
height: $small-button-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.medium {
|
||||||
|
width: $medium-button-height;
|
||||||
|
height: $medium-button-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.standart {
|
||||||
|
width: $standard-button-height;
|
||||||
|
height: $standard-button-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.big {
|
||||||
|
width: $big-button-height;
|
||||||
|
height: $big-button-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-color: $border !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.close {
|
||||||
|
.p-button-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-left {
|
||||||
|
padding-left: 30px;
|
||||||
|
background-position: 1em center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
@include font-overflow();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button--spinner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.pi {
|
||||||
|
display: none;
|
||||||
|
color: $gray;
|
||||||
|
margin-left: $space-m + $space-s;
|
||||||
|
|
||||||
|
&.show-spinner {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
$white: #ffffff;
|
||||||
|
|
||||||
|
$text-color: #333333;
|
||||||
|
|
||||||
|
$extra-blue: #065398;
|
||||||
|
$blue-dark: #022040;
|
||||||
|
|
||||||
|
$blue: #1b62b4;
|
||||||
|
$blue-light: #4a90e2;
|
||||||
|
$blue-light2: #d1dcea;
|
||||||
|
$blue-link: #0074D9;
|
||||||
|
$blue-extra-light: #f3f9ff;
|
||||||
|
$dark-blue-opacity: rgba(32, 32, 32, 0.2);
|
||||||
|
$blue-icon: #e3f0fd;
|
||||||
|
|
||||||
|
$blue--hover: #1a5ba6;
|
||||||
|
$blue-light--hover: #4286d5;
|
||||||
|
$orange--hover: #e2740b;
|
||||||
|
|
||||||
|
$focus-shadow: #8dcdff;
|
||||||
|
|
||||||
|
$gray: #333333;
|
||||||
|
$light-gray: #657282;
|
||||||
|
|
||||||
|
$orange: #f37b09;
|
||||||
|
$orange-light: #fbf0e5;
|
||||||
|
$green: #25a24e;
|
||||||
|
$red: #c8102e;
|
||||||
|
|
||||||
|
$border: #d1dcea;
|
||||||
|
$border-input: #dcdcdc;
|
||||||
|
$border-blue: #bdccde;
|
||||||
|
|
||||||
|
$day-color: #e6f1fb;
|
||||||
|
$day-color-inactive: #f6f6f6;
|
||||||
|
|
||||||
|
$breadcrumb-item-active-color: hsla(0, 0%, 100%, 0.75);
|
||||||
|
$breadcrumb-item-separator: hsla(0, 0%, 100%, 0.3);
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
.expanded-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
width: math.div($space-xl, 3);
|
||||||
|
background-color: $blue-light;
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
width: math.div($space-xl, 6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-list-item {
|
||||||
|
cursor: pointer;
|
||||||
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background: $blue-extra-light;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-button-label {
|
||||||
|
.p-button-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner--top {
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-header {
|
||||||
|
z-index: 1002;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
// moved from _fonts.scss
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size-xxxl;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size-xxl;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size-xl;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size-l;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size-m;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text--white {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embolded {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
// dont' put classes here, only variables and mixins.
|
||||||
|
// this is needed until we migration to @use/@forward
|
||||||
|
@use './colors' as colors;
|
||||||
|
/* Font size */
|
||||||
|
$font-size-xs: 10px;
|
||||||
|
$font-size-s: 12px;
|
||||||
|
$font-size-m: 14px;
|
||||||
|
$font-size-l: 16px;
|
||||||
|
$font-size-xl: 18px;
|
||||||
|
$font-size-xl1: 20px;
|
||||||
|
$font-size-xl2: 22px;
|
||||||
|
$font-size-xl3: 26px;
|
||||||
|
$font-size-xxl: 30px;
|
||||||
|
$font-size-xxxl: 42px;
|
||||||
|
$font-size-xxxl--tablet: 36px;
|
||||||
|
$font-size-xxxl--mobile: 22px;
|
||||||
|
|
||||||
|
$font-family: 'Roboto', Arial, Helvetica, sans-serif;
|
||||||
|
|
||||||
|
$font-light: 300;
|
||||||
|
$font-regular: 400;
|
||||||
|
$font-medium: 500;
|
||||||
|
$font-bold: 700;
|
||||||
|
|
||||||
|
// 44 usages
|
||||||
|
@mixin font-small($color-font-small: colors.$gray) {
|
||||||
|
font-size: $font-size-s;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
color: $color-font-small;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-overflow {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin link {
|
||||||
|
color: $blue-light;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
$time-group-width: 120px; // time group which can have day change
|
||||||
|
$time-width: 100px; // time groups without day change
|
||||||
|
$title-column-width: 195px; // first column in boarding/registrations sections
|
||||||
|
$title-column-width-tablets: 145px;
|
||||||
|
$status-width: 100px; // flight status width
|
||||||
|
$gap-small: 10px;
|
||||||
|
$gap-medium: 15px;
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
.p-accordion-header.p-highlight {
|
||||||
|
arrow-down-icon svg {
|
||||||
|
transform: rotate(0deg) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--plane {
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
fill: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--change-city {
|
||||||
|
width: 25px;
|
||||||
|
height: 12px;
|
||||||
|
fill: $blue;
|
||||||
|
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--details__body {
|
||||||
|
width: 47.488px;
|
||||||
|
min-width: 47.488px;
|
||||||
|
height: 46.928px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-icon {
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--share {
|
||||||
|
background-image: url('~src/assets/img/share.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--print {
|
||||||
|
background-image: url('~src/assets/img/print.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--pin {
|
||||||
|
background-image: url('~src/assets/img/pin-24.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--expand {
|
||||||
|
background-image: url('~src/assets/img/expand.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
&.green {
|
||||||
|
fill: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.red {
|
||||||
|
fill: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.orange {
|
||||||
|
fill: $orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
fill: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--calendar {
|
||||||
|
background-image: url('~src/assets/img/calendar.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--arrow {
|
||||||
|
width: 6.667px;
|
||||||
|
height: 3.333px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg--close {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.flight-transfer {
|
||||||
|
width: 19.5px !important;
|
||||||
|
height: 6.5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.icon-return {
|
||||||
|
width: 13px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.icon-change {
|
||||||
|
width: 22px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
.p-d-none {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
color-adjust: exact !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-print-none {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tooltip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-print-block {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: none !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-flight-details-view,
|
||||||
|
online-board-flight-details-page {
|
||||||
|
.flight-route,
|
||||||
|
.full-route__icons-status,
|
||||||
|
.details-accordion__header.flight-info {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.frame {
|
||||||
|
box-shadow: none !important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-route,
|
||||||
|
.full-route__icons-status,
|
||||||
|
.details-accordion__header {
|
||||||
|
padding: 20px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left__part2.departure--time,
|
||||||
|
.right__part2.arrival--time {
|
||||||
|
margin-top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
note {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status--texts {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-accordion__body {
|
||||||
|
padding: 0 !important;
|
||||||
|
padding-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__body__row {
|
||||||
|
svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__data {
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,378 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
@mixin custom-input {
|
||||||
|
@include flex-center-align();
|
||||||
|
@include control-border-shadow();
|
||||||
|
height: $standard-button-height;
|
||||||
|
padding: 0 $space-l;
|
||||||
|
font-size: $font-size-l;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
color: $text-color;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
@include font-overflow();
|
||||||
|
|
||||||
|
&:enabled:hover:not(.p-state-error) {
|
||||||
|
border-color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:enabled:focus:not(.p-state-error) {
|
||||||
|
box-shadow: 0 0 0 0.2em $focus-shadow;
|
||||||
|
border-color: $blue-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $blue-dark !important;
|
||||||
|
background-image: url('~src/assets/img/background.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
font-size: $font-size-m;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
span.pi {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
flights-root {
|
||||||
|
display: block;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
|
||||||
|
.main-module__footer {
|
||||||
|
margin-top: $space-xxxl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
width: auto;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p-breadcrumb {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.frame {
|
||||||
|
background-color: $white;
|
||||||
|
@include box-shadow-small;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-text-hide {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include font-small();
|
||||||
|
@include font-overflow();
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-center-align {
|
||||||
|
@warn 'dont use flex-center-align; use just "display: flex; align-items: center;';
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll--panel--custom {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
height: 400px; //window-height
|
||||||
|
|
||||||
|
.p-scrollpanel {
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
background-color: $blue-light;
|
||||||
|
transition: background-color 0.3s, opacity 0.3s;
|
||||||
|
width: 5px;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar:hover,
|
||||||
|
.p-scrollpanel-grabbed {
|
||||||
|
background-color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar-x {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-content {
|
||||||
|
padding-right: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
overflow: scroll !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.you-search-panel {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin scrollBarY {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $blue-light;
|
||||||
|
width: 4px;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content--scroll-panel {
|
||||||
|
.p-scrollpanel {
|
||||||
|
padding: $space-s 0;
|
||||||
|
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
padding: $space-xl - $space-s 0;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 0 0 $space-xl;
|
||||||
|
|
||||||
|
&.country-start-row {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contry {
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar-y {
|
||||||
|
@include scrollBarY();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tooltip {
|
||||||
|
z-index: 100001 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p-checkbox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.p-checkbox div.p-checkbox-box {
|
||||||
|
@include control-border-shadow();
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url('~src/assets/img/check.svg');
|
||||||
|
background-size: 0 auto;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
border-color: $blue-light;
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
background-size: 13.65px auto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-checkbox .p-checkbox-box:not(.p-state-disabled):hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
border-color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.p-checkbox-box:not(.p-state-disabled):hover {
|
||||||
|
border-color: $blue-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
.p-overlaypanel {
|
||||||
|
border: 1px solid $border-blue;
|
||||||
|
box-shadow: 0 2px 2px #b1b1b125;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
border-bottom-color: $border-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-overlaypanel-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.share-elements {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
> div + div {
|
||||||
|
margin-left: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-element {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
@include font-small();
|
||||||
|
font-size: 10px;
|
||||||
|
width: 60px;
|
||||||
|
height: 55px;
|
||||||
|
margin-right: 15px;
|
||||||
|
background-position: center top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
cursor: pointer;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.facebook {
|
||||||
|
background-image: url('~src/assets/img/share/facebook.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vk {
|
||||||
|
background-image: url('~src/assets/img/share/vk.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.twitter {
|
||||||
|
background-image: url('~src/assets/img/share/twitter.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.copy {
|
||||||
|
background-image: url('~src/assets/img/share/copy.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.weibo {
|
||||||
|
background-image: url('~src/assets/img/share/weibo.svg');
|
||||||
|
background-size: 29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p-accordion .p-accordion-content button.button-clear {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: $buttons-width;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: $buttons-width !important;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
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-repeat: no-repeat;
|
||||||
|
background-size: 10px 10px;
|
||||||
|
height: 100%;
|
||||||
|
background-position: center center;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
background-color: $border-input;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-opened {
|
||||||
|
.p-button-label {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $white !important;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-show-debug {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: auto;
|
||||||
|
border: none;
|
||||||
|
background-color: #e2740b;
|
||||||
|
padding: 3px 10px 4px 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 25px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-hide-debug {
|
||||||
|
width: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '~src/styles/pages/adaptive/layout-adaptive';
|
||||||
|
@import '~src/styles/_layout-print';
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
@use './screen' as screen;
|
||||||
|
|
||||||
|
@mixin h-spacing($size, $withLast: false) {
|
||||||
|
@if $withLast {
|
||||||
|
& > * {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h-deep-spacing($size, $withLast: false) {
|
||||||
|
@if $withLast {
|
||||||
|
&::ng-deep > * {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
&::ng-deep > *:not(:last-child) {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin v-deep-spacing($size, $withLast: false) {
|
||||||
|
@if $withLast {
|
||||||
|
&::ng-deep > * {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
&::ng-deep > *:not(:last-child) {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin v-spacing($size, $withLast: false) {
|
||||||
|
@if $withLast {
|
||||||
|
& > * {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin gap($size) {
|
||||||
|
// dont' remove, wip
|
||||||
|
@supports (gap: $size) {
|
||||||
|
gap: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports not (gap: $size) {
|
||||||
|
@include screen.mobile() {
|
||||||
|
flex-direction: column;
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-bottom: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include screen.gt-mobile() {
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-right: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
|
||||||
|
.leaflet-tooltip.city-label {
|
||||||
|
background : transparent;
|
||||||
|
border : none;
|
||||||
|
box-shadow : none;
|
||||||
|
|
||||||
|
font-family: 'Inter', 'Roboto', Arial, sans-serif;
|
||||||
|
color : #1f1f1f;
|
||||||
|
font-size : 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
|
||||||
|
text-shadow:
|
||||||
|
-1px 0 #ffffff88,
|
||||||
|
1px 0 #ffffff88,
|
||||||
|
0 1px #ffffff88,
|
||||||
|
0 -1px #ffffff88;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* убираем треугольный «хвостик» */
|
||||||
|
.leaflet-tooltip.city-label::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header-test{
|
||||||
|
//display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper{
|
||||||
|
border-radius: 3px !important;
|
||||||
|
|
||||||
|
.popup-buy-ticket{
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: #F37B09;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,356 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
@use './screen' as *;
|
||||||
|
|
||||||
|
$height-base: 36px;
|
||||||
|
$width-base: 120px;
|
||||||
|
|
||||||
|
@mixin scale($base, $ratio: 0.25, $scale: 1.5) {
|
||||||
|
width: $base;
|
||||||
|
height: $base * $ratio;
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: $base * $scale;
|
||||||
|
height: $base * $scale * $ratio;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include tablets() {
|
||||||
|
width: $base * 0.75;
|
||||||
|
height: $base * $ratio * 0.75;
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: $base * $scale * 0.75;
|
||||||
|
height: $base * $scale * $ratio * 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo {
|
||||||
|
@include scale($width-base);
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
width: $height-base !important;
|
||||||
|
height: $height-base !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--SU {
|
||||||
|
@include scale($width-base, 0.258);
|
||||||
|
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
|
||||||
|
|
||||||
|
&.ru {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.ru {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aurora/large/ru.svg') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.ru {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.ru {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/rossiya/large/ru.svg') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/pobeda/round.png') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--OM {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/miat/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/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;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/klm/round.png') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--AY {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/finnair/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/finnair/round.png') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--DL {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/delta/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/delta/round.png') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--OK {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/czech-airline/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/czech-airline/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--JU {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-serbia/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-serbia/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--UX {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-europa/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-europa/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--BT {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-baltic/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/air-baltic/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--AM {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aeromexico/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aeromexico/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--AR {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--KM {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/airmalta/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--AF {
|
||||||
|
@include scale($width-base, 0.1222);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/airfrance/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--AZ {
|
||||||
|
@include scale($width-base, 0.2444);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/alitalia/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--PG {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/bangkok-airways/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--SN {
|
||||||
|
@include scale($width-base, 0.1667);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/brussels-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--FB {
|
||||||
|
@include scale($width-base, 0.296);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/bulgaria-air/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--CI {
|
||||||
|
@include scale($width-base, 0.1556);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/china-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--MU {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/china-eastern/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--CZ {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/china-southern/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--GA {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/garuda-indonesia/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--FI {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/icelandair/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--KO {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/kenya-airways/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--KE {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/korean-air/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--JL {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/japan-airlines/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--LO {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/polish-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--ME {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/mea/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--S7 {
|
||||||
|
@include scale($width-base, 0.3333);
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/s7/large.svg') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--SV {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--VN {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--MF {
|
||||||
|
background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
|
||||||
|
|
||||||
|
&.round {
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
@use 'src/styles/colors';
|
||||||
|
@use 'src/styles/shadows';
|
||||||
|
@use 'src/styles/fonts';
|
||||||
|
@use 'src/styles/variables' as vars;
|
||||||
|
|
||||||
|
@mixin button($background-color: colors.$blue-light) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
padding: 16px 0;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
outline: 0 none;
|
||||||
|
background-color: $background-color;
|
||||||
|
border-radius: vars.$border-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 0.2em colors.$focus-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@include shadows.control-border-shadow();
|
||||||
|
|
||||||
|
height: vars.$standard-button-height;
|
||||||
|
padding: 0 vars.$space-l;
|
||||||
|
font-size: fonts.$font-size-l;
|
||||||
|
font-weight: fonts.$font-regular;
|
||||||
|
color: colors.$text-color;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
@include fonts.font-overflow();
|
||||||
|
|
||||||
|
&:enabled:hover:not(.ui-state-error) {
|
||||||
|
border-color: colors.$blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:enabled:focus:not(.ui-state-error) {
|
||||||
|
box-shadow: 0 0 0 0.2em colors.$focus-shadow;
|
||||||
|
border-color: colors.$blue-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
a:focus {
|
||||||
|
// !important to reset styles in https://aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
$base-z-index: 1000;
|
||||||
|
$sticky-elements-z-index: $base-z-index;
|
||||||
|
|
||||||
|
$sticky-threshold: 20px;
|
||||||
@@ -0,0 +1,184 @@
|
|||||||
|
p-calendar {
|
||||||
|
.p-calendar {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.p-datepicker-header {
|
||||||
|
.p-datepicker-prev {
|
||||||
|
background-image: url('~src/assets/img/arrow-left.svg');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker-title {
|
||||||
|
.p-datepicker-month,
|
||||||
|
.p-datepicker-year {
|
||||||
|
border: none;
|
||||||
|
color: $blue;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker-year {
|
||||||
|
margin-left: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker-next {
|
||||||
|
background-image: url('~src/assets/img/arrow-right.svg');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker-prev,
|
||||||
|
.p-datepicker-next {
|
||||||
|
width: 1.8em;
|
||||||
|
height: 1.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker-calendar-container {
|
||||||
|
.p-datepicker-calendar {
|
||||||
|
margin-top: $space-m;
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
padding: 2px;
|
||||||
|
padding-bottom: $space-m;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
&.p-datepicker-today {
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
border: 1px solid $blue;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background-color: $blue-icon;
|
||||||
|
color: $extra-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
padding: 5px 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
color: $extra-blue;
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background-color: $blue-icon;
|
||||||
|
color: $extra-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.p-highlight):hover {
|
||||||
|
background-color: $blue-icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.p-disabled {
|
||||||
|
color: $gray;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar--mobile {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.digit {
|
||||||
|
width: 100%;
|
||||||
|
@include control-border-shadow();
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: $space-m;
|
||||||
|
background-color: $white;
|
||||||
|
@include font-overflow();
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
border-color: $border-blue;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light !important;
|
||||||
|
border-color: $border-blue !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $border-input !important;
|
||||||
|
background-color: $white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $font-size-xl3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
@include font-small();
|
||||||
|
margin-bottom: $text-margin-bottom;
|
||||||
|
margin-left: $space-s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.month {
|
||||||
|
@include font-overflow();
|
||||||
|
margin-top: $text-margin-bottom;
|
||||||
|
@include font-small();
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .digit {
|
||||||
|
margin-left: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,342 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0-modified | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
span,
|
||||||
|
applet,
|
||||||
|
object,
|
||||||
|
iframe,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
acronym,
|
||||||
|
address,
|
||||||
|
big,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
del,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
img,
|
||||||
|
ins,
|
||||||
|
kbd,
|
||||||
|
q,
|
||||||
|
s,
|
||||||
|
samp,
|
||||||
|
small,
|
||||||
|
strike,
|
||||||
|
strong,
|
||||||
|
sub,
|
||||||
|
sup,
|
||||||
|
tt,
|
||||||
|
var,
|
||||||
|
b,
|
||||||
|
u,
|
||||||
|
i,
|
||||||
|
center,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
fieldset,
|
||||||
|
form,
|
||||||
|
label,
|
||||||
|
legend,
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
canvas,
|
||||||
|
details,
|
||||||
|
embed,
|
||||||
|
figure,
|
||||||
|
figcaption,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
output,
|
||||||
|
ruby,
|
||||||
|
section,
|
||||||
|
summary,
|
||||||
|
time,
|
||||||
|
mark,
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus,
|
||||||
|
*:focus {
|
||||||
|
outline: 0 none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote:before,
|
||||||
|
blockquote:after,
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='search']::-webkit-search-cancel-button,
|
||||||
|
input[type='search']::-webkit-search-decoration,
|
||||||
|
input[type='search']::-webkit-search-results-button,
|
||||||
|
input[type='search']::-webkit-search-results-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='search'] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
vertical-align: top;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
// !important to reset styles in https://aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css
|
||||||
|
outline: 0 none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
white-space: normal;
|
||||||
|
*margin-left: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
*vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type='button'],
|
||||||
|
input[type='reset'],
|
||||||
|
input[type='submit'] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
cursor: pointer;
|
||||||
|
*overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
html input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='checkbox'],
|
||||||
|
input[type='radio'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
*height: 13px;
|
||||||
|
*width: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='search'] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='search']::-webkit-search-cancel-button,
|
||||||
|
input[type='search']::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: #b3d4fc;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #b3d4fc;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chromeframe {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
background: #ccc;
|
||||||
|
color: #000;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-header {
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after,
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
@use './variables' as variables;
|
||||||
|
|
||||||
|
|
||||||
|
// $media-breakpoint-desktop: 1300px;
|
||||||
|
// $media-breakpoint-tablet: 1050px;
|
||||||
|
// $media-breakpoint-tablet-2: 768px;
|
||||||
|
// $media-breakpoint-mobile: 640px;
|
||||||
|
|
||||||
|
@mixin mobile() {
|
||||||
|
@media (max-width: variables.$media-breakpoint-mobile) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin desktop() {
|
||||||
|
@media (min-width: variables.$media-breakpoint-desktop-min) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin gt-mobile() {
|
||||||
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin smTablet() {
|
||||||
|
@media (max-width: variables.$media-breakpoint-tablet) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin tablet() {
|
||||||
|
@media (min-width: variables.$media-breakpoint-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin tablet-small() {
|
||||||
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-small-tablet) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin tablets() {
|
||||||
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin print() {
|
||||||
|
@media print {
|
||||||
|
@content();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
.afl-scrollbar,
|
||||||
|
.ui-autocomplete-panel {
|
||||||
|
/* width */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
|
background-clip: padding-box;
|
||||||
|
border-radius: 1000px;
|
||||||
|
background-color: $blue-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0);
|
||||||
|
background-clip: padding-box;
|
||||||
|
border-radius: 1000px;
|
||||||
|
background-color: $blue--hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper::-webkit-scrollbar-track-piece:end {
|
||||||
|
background: transparent;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper::-webkit-scrollbar-track-piece:start {
|
||||||
|
background: transparent;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
@use './colors' as colors;
|
||||||
|
@use './variables' as variables;
|
||||||
|
|
||||||
|
@mixin box-shadow-small {
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow-big {
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow--focus-inset {
|
||||||
|
box-shadow: inset 0 0 0 0.2em $focus-shadow !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin control-border-shadow {
|
||||||
|
border: 1px solid colors.$border-input;
|
||||||
|
border-radius: variables.$border-radius;
|
||||||
|
box-shadow: 0 2px 2px transparentize($color: #b1b1b1, $amount: 0.84);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
.afl-tooltip {
|
||||||
|
.p-tooltip-text {
|
||||||
|
@include font-small();
|
||||||
|
color: $gray !important;
|
||||||
|
background-color: $white !important;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tooltip-arrow {
|
||||||
|
border-top-color: $white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include smTablet {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip--one-line {
|
||||||
|
max-width: 100% !important;
|
||||||
|
.p-tooltip-text {
|
||||||
|
@include font-overflow();
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
$border-radius: 3px;
|
||||||
|
|
||||||
|
/* Paddings and Margins */
|
||||||
|
$space-s: 5px;
|
||||||
|
$space-s2: 8px;
|
||||||
|
$space-m: 10px;
|
||||||
|
$space-m2: 12px;
|
||||||
|
$space-l: 15px;
|
||||||
|
$space-xl: 20px;
|
||||||
|
$space-xxl: 40px;
|
||||||
|
$space-xxxl: 80px;
|
||||||
|
|
||||||
|
$space-top-site: 32px;
|
||||||
|
|
||||||
|
// SITE WIDTH
|
||||||
|
$site-width: 1440px;
|
||||||
|
$left-aside-width: 285px;
|
||||||
|
$left-aside-width-desktop: 23.875%;
|
||||||
|
$column-spacing: 1.5%;
|
||||||
|
|
||||||
|
// MEDIA
|
||||||
|
// When changing the size of breakpoints, you also need to change in the file screen-size.service.ts
|
||||||
|
$media-breakpoint-desktop: 1300px;
|
||||||
|
$media-breakpoint-desktop-min: 1051px;
|
||||||
|
$media-breakpoint-tablet: 1050px;
|
||||||
|
$media-breakpoint-tablet-min: 769px;
|
||||||
|
$media-breakpoint-small-tablet: 768px;
|
||||||
|
$media-breakpoint-small-tablet-min: 641px;
|
||||||
|
$media-breakpoint-mobile: 640px;
|
||||||
|
|
||||||
|
//BUTTON
|
||||||
|
$button-height: 48px;
|
||||||
|
$button-height--mobile: 38px;
|
||||||
|
$button-sort-height: 12px;
|
||||||
|
$small-button-height: 35px;
|
||||||
|
$medium-button-height: 40px;
|
||||||
|
$standard-button-height: 48px;
|
||||||
|
$big-button-height: 56px;
|
||||||
|
$slider-handle-size: 16px;
|
||||||
|
$buttons-width: 32px;
|
||||||
|
|
||||||
|
// MEDIA
|
||||||
|
$desktopHeaderHeight: 103px;
|
||||||
|
$tabletHeaderHeight: 103px;
|
||||||
|
$mobileHeaderHeight: 103px;
|
||||||
|
|
||||||
|
// FLIGHT
|
||||||
|
$text-margin-bottom: 2px;
|
||||||
|
$flight-height: 40px;
|
||||||
|
$width-flight-number: 60px;
|
||||||
|
$width-background-company: 120px;
|
||||||
|
$width-dep-arr: 40%;
|
||||||
|
$width-status: 20%;
|
||||||
|
$width-flight-time: 75px;
|
||||||
|
$width-flight-day-change: 25px;
|
||||||
|
$button-expand-size: 32px;
|
||||||
|
$label-shift-width: 20px;
|
||||||
|
$label-shift-height: 18px;
|
||||||
|
$status-indicator-size: 8px;
|
||||||
|
$status-width: 100px;
|
||||||
|
$flight-details-fit: 2%;
|
||||||
|
//FLIGHT-DETAILS
|
||||||
|
$margin-details-title: 20%;
|
||||||
|
|
||||||
|
// FILTERS
|
||||||
|
$label-margin-bottom: 10px;
|
||||||
|
|
||||||
|
$scroll-width: 6px;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
.map-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 800px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
.flights-map-filter-header{
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flights-map-filter-info{
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt2{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .svg--change-city {
|
||||||
|
// transform: rotate(180deg) !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .change-container {
|
||||||
|
// justify-content: right !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
:host {
|
||||||
|
--loader-color: #2b62ab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-sheet {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0; // top:0; right:0; bottom:0; left:0;
|
||||||
|
background: rgba(180, 180, 180, 0.302); // затемнение карты
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000; // поверх карты
|
||||||
|
pointer-events: all; // блокирует клики по карте
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-loader__loader {
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
color: var(--loader-color); // для svg
|
||||||
|
|
||||||
|
.loader-circle {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset 0 0 0 2px var(--loader-color);
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-line-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transform-origin: 30px 30px;
|
||||||
|
animation: rotate 1.2s infinite linear;
|
||||||
|
|
||||||
|
.loader-line {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
.no-directions-sheet {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(180, 180, 180, 0.302);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: all;
|
||||||
|
padding: 16px; // чтобы не прилипало к краям на мобилках
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-directions-card {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 18px;
|
||||||
|
border-radius: 5px;
|
||||||
|
max-width: 520px;
|
||||||
|
width: min(520px, 100%);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-directions-card p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: rgba(0, 0, 0, 0.78);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
@use 'src/styles/variables' as *;
|
||||||
|
@use 'src/styles/screen';
|
||||||
|
|
||||||
|
:host {
|
||||||
|
::ng-deep .flight-props-caption {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// todo: remove after removing all usages of flight-props component
|
||||||
|
::ng-deep .flight-details-section__caption {
|
||||||
|
width: calc(30% - #{$space-xl}) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
online-board-flights-mini-list {
|
||||||
|
@include screen.smTablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-details-day-selector {
|
||||||
|
@include screen.mobile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
padding: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
@use 'src/styles/variables' as vars;
|
||||||
|
@use 'src/styles/screen';
|
||||||
|
|
||||||
|
.board-day-selector {
|
||||||
|
@include screen.mobile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
padding: vars.$space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
@use "src/styles/variables" as vars;
|
||||||
|
@use "src/styles/fonts";
|
||||||
|
@use "src/styles/screen";
|
||||||
|
|
||||||
|
.popular-request {
|
||||||
|
font-size: fonts.$font-size-m;
|
||||||
|
padding-bottom: vars.$space-xl;
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
@use "src/styles/colors";
|
||||||
|
@use "src/styles/variables" as vars;
|
||||||
|
@use "src/styles/fonts";
|
||||||
|
@use "src/styles/screen";
|
||||||
|
|
||||||
|
.popular-requests {
|
||||||
|
background-color: colors.$blue-extra-light;
|
||||||
|
border-top: 1px solid colors.$border;
|
||||||
|
padding: 50px 50px 30px;
|
||||||
|
border-radius: 0 0 vars.$border-radius vars.$border-radius;
|
||||||
|
|
||||||
|
@include screen.mobile {
|
||||||
|
padding: 20px !important;
|
||||||
|
padding-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
font-weight: fonts.$font-regular;
|
||||||
|
|
||||||
|
@include screen.mobile {
|
||||||
|
padding-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
@include screen.mobile {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
@use 'src/styles/colors';
|
||||||
|
|
||||||
|
.request-info {
|
||||||
|
color: colors.$blue-link;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
@use "src/styles/colors";
|
||||||
|
@use "src/styles/variables" as vars;
|
||||||
|
@use "src/styles/fonts";
|
||||||
|
@use "src/styles/screen";
|
||||||
|
|
||||||
|
.bottom-description-frame{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.bottom-description-container{
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-description-title{
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: fonts.$font-regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-description-text{
|
||||||
|
margin-top: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-description-text p {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-description-text p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
@use './src/styles/framework' as *;
|
||||||
|
|
||||||
|
.schedule-direction-switch {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
background-color: $white;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
line-height: 16px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
border: 1px solid $extra-blue;
|
||||||
|
|
||||||
|
@include font-small($extra-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button--direct {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button--return {
|
||||||
|
border-left: none;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button--active {
|
||||||
|
background-color: $extra-blue;
|
||||||
|
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
@use './src/styles/variables' as *;
|
||||||
|
@use './src/styles/screen';
|
||||||
|
|
||||||
|
:host {
|
||||||
|
::ng-deep .flight-props-caption {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// todo: remove after removing all usages of flight-props component
|
||||||
|
::ng-deep .flight-details-section__caption {
|
||||||
|
@include screen.gt-mobile {
|
||||||
|
width: calc(30% - #{$space-xl}) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-flights-mini-list {
|
||||||
|
@include screen.smTablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-day-selector {
|
||||||
|
@include screen.mobile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
padding: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
@use './src/styles/colors' as *;
|
||||||
|
|
||||||
|
:host {
|
||||||
|
& > section:last-child {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
@use './src/styles/variables' as *;
|
||||||
|
@use './src/styles/screen' as *;
|
||||||
|
@use './src/styles/layouts' as *;
|
||||||
|
@use './src/styles/colors' as *;
|
||||||
|
|
||||||
|
:host {
|
||||||
|
.schedule-home-page-header {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
schedule-direction-switch {
|
||||||
|
@include gt-mobile() {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile() {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-controls {
|
||||||
|
::ng-deep .card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-home-page-header {
|
||||||
|
margin: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-home-page-header-border {
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
.schedule-home-page-header {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-home-page-header-border {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .card {
|
||||||
|
padding: $space-xl $space-xl 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
@use "src/styles/framework" as *;
|
||||||
|
|
||||||
|
.city-autocomplete__item {
|
||||||
|
white-space: nowrap;
|
||||||
|
height: $button-height;
|
||||||
|
border-bottom: 1.5px solid $border-input !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 0.429em;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--airport {
|
||||||
|
padding-left: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.country {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.airport {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
@use "src/styles/framework" as *;
|
||||||
|
|
||||||
|
.city-autocomplete {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&__labels-container {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
@include font-overflow();
|
||||||
|
@include font-small($gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@include control-border-shadow();
|
||||||
|
}
|
||||||
|
|
||||||
|
&__search-button {
|
||||||
|
width: $buttons-width !important;
|
||||||
|
min-width: $buttons-width;
|
||||||
|
border-radius: 0 $border-radius $border-radius 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
border-left: 1px solid white !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
height: $standard-button-height - 2px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $white !important;
|
||||||
|
border-left-color: $border-input !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input--has-value {
|
||||||
|
.button-clear {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete__search-button {
|
||||||
|
border-left: 1px solid $border-input !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input--has-error {
|
||||||
|
border-color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
@use "src/styles/framework" as *;
|
||||||
|
|
||||||
|
.city-autocomplete-popup {
|
||||||
|
position: absolute;
|
||||||
|
width: 630px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
opacity: 1;
|
||||||
|
@include control-border-shadow();
|
||||||
|
z-index: 10000;
|
||||||
|
margin-top: $space-s;
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
height: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid $border;
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
border-right: 1px solid $border;
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $white;
|
||||||
|
border-bottom: 1px solid $white;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: $border-radius 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 $border-radius 0 0;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-footer {
|
||||||
|
width: 100%;
|
||||||
|
background: #f3f9ff;
|
||||||
|
|
||||||
|
.gps-contaner {
|
||||||
|
width: 100%;
|
||||||
|
padding: $space-xl;
|
||||||
|
border-top: 1px solid $border;
|
||||||
|
|
||||||
|
.gps-button {
|
||||||
|
height: $standard-button-height;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $blue-light;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
font-size: $font-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gps-label-help {
|
||||||
|
margin-top: $space-l;
|
||||||
|
@include font-small($gray);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
&.contry {
|
||||||
|
align-self: flex-start;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
padding: 7.5px $space-m 7.5px 7.5px;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.city {
|
||||||
|
flex: 1;
|
||||||
|
padding-right: $space-m;
|
||||||
|
@include font-overflow();
|
||||||
|
|
||||||
|
.city--item {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
@include font-overflow();
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
padding: math.div($space-l, 2) math.div($space-l, 2);
|
||||||
|
transition-duration: 0.1s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.airports-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
|
||||||
|
.city--item {
|
||||||
|
color: $light-gray;
|
||||||
|
margin-right: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
@use 'src/styles/framework' as *;
|
||||||
|
|
||||||
|
.feedback-button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
padding: 3px 10px;
|
||||||
|
height: 25px;
|
||||||
|
min-height: 25px;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
background-color: $orange--hover;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
font-size: $font-size-s;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
@use "src/styles/framework" as *;
|
||||||
|
|
||||||
|
.feedback-form {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
z-index: 1009;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
background-color: $dark-blue-opacity;
|
||||||
|
|
||||||
|
@include mobile() {
|
||||||
|
padding: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__iframe {
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
|
||||||
|
@include mobile() {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
@include mobile() {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,164 @@
|
|||||||
|
@use "src/styles/framework" as *;
|
||||||
|
@use "src/styles/positioning";
|
||||||
|
|
||||||
|
.page-layout {
|
||||||
|
&__row {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $site-width;
|
||||||
|
|
||||||
|
@include print {
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include smTablet {
|
||||||
|
flex-flow: column wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__column-left {
|
||||||
|
position: sticky;
|
||||||
|
top: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
z-index: 1001;
|
||||||
|
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 1.5%;
|
||||||
|
width: $left-aside-width;
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-desktop) {
|
||||||
|
width: $left-aside-width-desktop;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-tablet) {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__column-right {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - #{$left-aside-width} - #{$column-spacing});
|
||||||
|
|
||||||
|
@include print {
|
||||||
|
width: 100% !important;
|
||||||
|
margin-top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-desktop) {
|
||||||
|
width: calc(100% - #{$left-aside-width-desktop} - 1.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-tablet) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-right {
|
||||||
|
margin-top: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@include smTablet {
|
||||||
|
flex-direction: column;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-left {
|
||||||
|
margin-top: auto;
|
||||||
|
|
||||||
|
@include smTablet {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
width: calc(100% - 120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title--fullwidth {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1001;
|
||||||
|
|
||||||
|
padding-top: $space-top-site;
|
||||||
|
margin-bottom: $space-xl;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content &__column-left{
|
||||||
|
@include smTablet {
|
||||||
|
margin-bottom: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content &__column-left:empty {
|
||||||
|
@include smTablet {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__feedback-button {
|
||||||
|
margin-top: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
@include smTablet {
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__scroll-overlay {
|
||||||
|
@include mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: positioning.$sticky-elements-z-index - 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: calc(100% - 20px); // set width less than viewport to prevent scroll clipping on windows
|
||||||
|
height: positioning.$sticky-threshold + 5px; // increase height to prevent content revealing when sticky element corners rounded
|
||||||
|
|
||||||
|
background-color: $blue-dark !important;
|
||||||
|
background-image: url('~src/assets/img/background.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sticky-content {
|
||||||
|
@include gt-mobile {
|
||||||
|
position: sticky;
|
||||||
|
z-index: positioning.$sticky-elements-z-index;
|
||||||
|
top: positioning.$sticky-threshold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
@use "./src/styles/colors";
|
||||||
|
@use "./src/styles/screen";
|
||||||
|
|
||||||
|
.scroll-up {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&--visible {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
right: 30px;
|
||||||
|
bottom: 80px;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
position: static;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
background-color: colors.$extra-blue;
|
||||||
|
background-image: url("~src/assets/img/arrow-up.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid colors.$blue-extra-light;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#observer-target {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
@include screen.gt-mobile {
|
||||||
|
top: -20px;
|
||||||
|
|
||||||
|
width: 10px;
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
@use "src/styles/variables" as *;
|
||||||
|
@use "src/styles/screen" as *;
|
||||||
|
|
||||||
|
.search-history {
|
||||||
|
margin: $space-xl 0;
|
||||||
|
|
||||||
|
@include tablets() {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile() {
|
||||||
|
margin-top: $space-m;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
max-height: 600px;
|
||||||
|
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additional-services-svg {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-clock-svg {
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
@use 'src/styles/colors' as *;
|
||||||
|
|
||||||
|
.arrow-svg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
|
transform: rotate(180deg);
|
||||||
|
transform-origin: center;
|
||||||
|
|
||||||
|
&--blue {
|
||||||
|
fill: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--gray {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--rotated {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
@use 'src/styles/colors' as *;
|
||||||
|
@use 'src/styles/variables' as *;
|
||||||
|
@use 'src/styles/shadows' as *;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
@include box-shadow-small;
|
||||||
|
|
||||||
|
&--rounded {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--rounded-top {
|
||||||
|
border-radius: $border-radius $border-radius 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--rounded-bottom {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-route-svg {
|
||||||
|
width: 19px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
@use 'src/styles/variables' as vars;
|
||||||
|
@use 'src/styles/layouts';
|
||||||
|
@use 'src/styles/mixins';
|
||||||
|
@use 'src/styles/fonts';
|
||||||
|
@use 'src/styles/colors';
|
||||||
|
|
||||||
|
.select {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@include layouts.v-spacing(vars.$space-s2);
|
||||||
|
|
||||||
|
::ng-deep .p-dropdown {
|
||||||
|
width: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
@include mixins.input();
|
||||||
|
|
||||||
|
.p-dropdown-label {
|
||||||
|
font-size: fonts.$font-size-l;
|
||||||
|
font-weight: fonts.$font-regular;
|
||||||
|
color: colors.$text-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dropdown-trigger {
|
||||||
|
background-image: url('~src/assets/img/arr-down.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 9px 4px;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
@use "src/styles/variables" as vars;
|
||||||
|
@use "src/styles/colors";
|
||||||
|
@use "src/styles/screen";
|
||||||
|
|
||||||
|
@mixin prevIcon($url) {
|
||||||
|
display: flex !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
|
background-image: $url;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 25px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tabs {
|
||||||
|
@include screen.mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-indicators {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-next,
|
||||||
|
::ng-deep .p-carousel-prev {
|
||||||
|
margin: 0 !important;
|
||||||
|
width: 50px;
|
||||||
|
max-height: 48px;
|
||||||
|
|
||||||
|
border: none !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-next {
|
||||||
|
border-radius: 0 vars.$border-radius 0 0 !important;
|
||||||
|
|
||||||
|
&.p-state-disabled {
|
||||||
|
.p-carousel-next-icon {
|
||||||
|
&::before {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-prev {
|
||||||
|
border-radius: vars.$border-radius 0 0 0 !important;
|
||||||
|
|
||||||
|
&.p-state-disabled {
|
||||||
|
.p-carousel-prev-icon {
|
||||||
|
&::before {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-prev-icon.pi-chevron-left {
|
||||||
|
@include prevIcon(url("~src/assets/img/arrow-left.svg"));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
right: -25px;
|
||||||
|
background: transparent linear-gradient(270deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .p-carousel-next-icon.pi-chevron-right,
|
||||||
|
::ng-deep .p-carousel-prev-icon.pi-chevron-right {
|
||||||
|
@include prevIcon(url("~src/assets/img/arrow-right.svg"));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: -25px;
|
||||||
|
background: transparent linear-gradient(90deg, transparent 0%, colors.$border 100%) 0 0 no-repeat padding-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-select {
|
||||||
|
@include screen.gt-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dining-svg {
|
||||||
|
width: 44px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-transfer-svg {
|
||||||
|
width: 21px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intermediate-landing-svg {
|
||||||
|
width: 21px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-landings-svg {
|
||||||
|
width: 21px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plane-svg {
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
@use 'src/styles/mixins';
|
||||||
|
@use 'src/styles/colors';
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
@include mixins.button(colors.$blue-extra-light);
|
||||||
|
|
||||||
|
padding-bottom: 15px;
|
||||||
|
max-height: 48px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
border-right: 1px solid colors.$border;
|
||||||
|
border-bottom: 1px solid colors.$border;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: colors.$white;
|
||||||
|
border-bottom-color: colors.$white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "src/styles/colors";
|
||||||
|
@use "src/styles/fonts";
|
||||||
|
@use "src/styles/screen";
|
||||||
|
|
||||||
|
$sizes: (
|
||||||
|
"10": fonts.$font-size-xs,
|
||||||
|
"12": fonts.$font-size-s,
|
||||||
|
"14": fonts.$font-size-m,
|
||||||
|
"16": fonts.$font-size-l,
|
||||||
|
"18": fonts.$font-size-xl,
|
||||||
|
"20": fonts.$font-size-xl1,
|
||||||
|
"22": fonts.$font-size-xl2,
|
||||||
|
"24": 24px,
|
||||||
|
"26": fonts.$font-size-xl3,
|
||||||
|
"30": fonts.$font-size-xxl,
|
||||||
|
"36": fonts.$font-size-xxxl--tablet,
|
||||||
|
"42": fonts.$font-size-xxxl,
|
||||||
|
);
|
||||||
|
|
||||||
|
$line-heights: (
|
||||||
|
"10": 13px,
|
||||||
|
"12": 16px,
|
||||||
|
"14": 19px,
|
||||||
|
"16": 21px,
|
||||||
|
"18": 24px,
|
||||||
|
"20": 26px,
|
||||||
|
"22": 29px,
|
||||||
|
"24": 31px,
|
||||||
|
"26": 34px,
|
||||||
|
"30": 39px,
|
||||||
|
"36": 47px,
|
||||||
|
"42": 55px,
|
||||||
|
);
|
||||||
|
|
||||||
|
$weights: (
|
||||||
|
"light": fonts.$font-light,
|
||||||
|
"regular": fonts.$font-regular,
|
||||||
|
"medium": fonts.$font-medium,
|
||||||
|
"bold": fonts.$font-bold,
|
||||||
|
);
|
||||||
|
|
||||||
|
$colors: (
|
||||||
|
"default": colors.$text-color,
|
||||||
|
"dark-blue": colors.$blue-dark,
|
||||||
|
"blue": colors.$blue,
|
||||||
|
"light-gray": colors.$light-gray,
|
||||||
|
"light-blue": colors.$blue-light,
|
||||||
|
"red": colors.$red,
|
||||||
|
"orange": colors.$orange,
|
||||||
|
"white": colors.$white,
|
||||||
|
);
|
||||||
|
|
||||||
|
// name from ITextAlign; text-align value; isMobile;
|
||||||
|
$aligns:
|
||||||
|
"left" start false,
|
||||||
|
"right" end false,
|
||||||
|
"center" center false,
|
||||||
|
"justify" justify false,
|
||||||
|
"mobile-left" start true,
|
||||||
|
"mobile-right" end true;
|
||||||
|
|
||||||
|
:host {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
font-size: fonts.$font-size-m;
|
||||||
|
font-family: fonts.$font-family;
|
||||||
|
font-weight: fonts.$font-regular;
|
||||||
|
line-height: map.get($line-heights, "14");
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: colors.$text-color;
|
||||||
|
|
||||||
|
&--ellipsis {
|
||||||
|
@include screen.desktop {
|
||||||
|
@include fonts.font-overflow;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $value in $sizes {
|
||||||
|
.text--#{$name} {
|
||||||
|
@include screen.gt-mobile {
|
||||||
|
font-size: $value;
|
||||||
|
line-height: map.get($line-heights, $name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text--mobile-#{$name} {
|
||||||
|
@include screen.mobile {
|
||||||
|
font-size: $value;
|
||||||
|
line-height: map.get($line-heights, $name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $value in $weights {
|
||||||
|
.text--#{$name} {
|
||||||
|
font-weight: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text--mobile-#{$name} {
|
||||||
|
@include screen.mobile {
|
||||||
|
font-weight: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $value in $colors {
|
||||||
|
.text--#{$name} {
|
||||||
|
color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $value, $isMobile in $aligns {
|
||||||
|
.text--#{$name} {
|
||||||
|
@if $isMobile {
|
||||||
|
@include screen.mobile {
|
||||||
|
text-align: $value;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
text-align: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
@use "src/styles/framework" as *;
|
||||||
|
|
||||||
|
time-selector {
|
||||||
|
.p-carousel {
|
||||||
|
.p-carousel-content {
|
||||||
|
padding: 0px;
|
||||||
|
height: $button-height + 1px;
|
||||||
|
|
||||||
|
.p-carousel-container {
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.p-carousel-items-content {
|
||||||
|
border-left: 1px solid $border;
|
||||||
|
border-right: 1px solid $border;
|
||||||
|
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
|
||||||
|
.sticky-panel--active & {
|
||||||
|
border-top: 1px solid $border;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-items-container {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.p-carousel-item {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 1px;
|
||||||
|
background-color: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.tab-button {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.p-button-label {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: $white !important;
|
||||||
|
border-bottom: 1px solid $white;
|
||||||
|
cursor: initial;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
color: #333333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: -1px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 1px;
|
||||||
|
background-color: $border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
color: $blue;
|
||||||
|
font-size: $font-size-s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-prev,
|
||||||
|
.p-carousel-next {
|
||||||
|
margin: 0px;
|
||||||
|
width: $button-height;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 7.41px 12px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 21px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-prev.p-state-disabled,
|
||||||
|
.p-carousel-next.p-state-disabled {
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-next {
|
||||||
|
// margin-left: -1px;
|
||||||
|
background-image: url('~src/assets/img/arrow-right.svg');
|
||||||
|
border-radius: 0 $border-radius 0 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: -21px;
|
||||||
|
background-image: url('~src/assets/img/tabs-shadow-right.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-prev {
|
||||||
|
background-image: url('~src/assets/img/arrow-left.svg');
|
||||||
|
border-radius: $border-radius 0 0 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
right: -21px;
|
||||||
|
background-image: url('~src/assets/img/tabs-shadow-left.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-dots-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
// ==== константы ====
|
||||||
|
$switch-width : 42px;
|
||||||
|
$switch-height: 24px;
|
||||||
|
$thumb-size : 20px;
|
||||||
|
$padding : 2px;
|
||||||
|
$anim : .25s ease;
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
/* опционально: тот же вертикальный зазор, что у PrimeNG .p-field */
|
||||||
|
margin: 0 0 .5rem 0;
|
||||||
|
}
|
||||||
|
// ==== контейнер ====
|
||||||
|
.toggle-container {
|
||||||
|
display: inline-flex; // в одну строку
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: .4;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible .switch {
|
||||||
|
box-shadow: 0 0 0 3px rgba(#3f51b5, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==== дорожка тумблера ====
|
||||||
|
.switch {
|
||||||
|
width: $switch-width;
|
||||||
|
min-width: $switch-width; // фиксируем минимум
|
||||||
|
flex: 0 0 $switch-width; // запрещаем рост/сжатие
|
||||||
|
height: $switch-height;
|
||||||
|
border-radius: $switch-height;
|
||||||
|
background: #9e9e9e; // «выкл»
|
||||||
|
position: relative;
|
||||||
|
transition: background $anim;
|
||||||
|
|
||||||
|
&.checked {
|
||||||
|
background: #3f51b5; // «вкл»
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
transform: translateX(calc(#{$switch-width - $thumb-size - 2 * $padding}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
position: absolute;
|
||||||
|
top: $padding;
|
||||||
|
left: $padding;
|
||||||
|
width: $thumb-size;
|
||||||
|
height: $thumb-size;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 1px 3px rgba(#000, .4);
|
||||||
|
transition: transform $anim;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==== подпись ====
|
||||||
|
.label {
|
||||||
|
display: inline-block; // перекрываем global .p-field label {display:block;}
|
||||||
|
margin-left: .5em; // как у PrimeNG p-checkbox
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
@use "src/styles/colors" as *;
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
color: $light-gray;
|
||||||
|
border-left: 4px solid $red;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background: $white 0 0 no-repeat padding-box;
|
||||||
|
box-shadow: 0 4px 10px #2424243b;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 10000;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
@forward './colors';
|
||||||
|
@forward './variables';
|
||||||
|
@forward './fonts';
|
||||||
|
@forward './shadows';
|
||||||
|
@forward './screen';
|
||||||
|
@forward './layouts';
|
||||||
@@ -1,41 +1,25 @@
|
|||||||
/* Main styles for Aeroflot Flights React App */
|
/* Global styles for Aeroflot Flights React App */
|
||||||
|
/* Imported from Angular migration */
|
||||||
|
|
||||||
* {
|
// Import framework styles from Angular
|
||||||
margin: 0;
|
@import './framework';
|
||||||
padding: 0;
|
@import './reset';
|
||||||
box-sizing: border-box;
|
@import './common';
|
||||||
}
|
@import './mixins';
|
||||||
|
@import './buttons';
|
||||||
|
@import './icons';
|
||||||
|
@import './logos';
|
||||||
|
@import './banners';
|
||||||
|
@import './layouts';
|
||||||
|
@import './layout';
|
||||||
|
@import './layout-print';
|
||||||
|
@import './positioning';
|
||||||
|
@import './scrollbar';
|
||||||
|
@import './tooltips';
|
||||||
|
@import './prime-styles';
|
||||||
|
@import './prime-calendar';
|
||||||
|
@import './leaflet-popup';
|
||||||
|
|
||||||
body {
|
// Page-specific styles
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
@import './pages/board/index';
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
@import './pages/schedule/index';
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,25 @@
|
|||||||
|
@media (max-width: $media-breakpoint-small-tablet) {
|
||||||
|
schedule-days schedule-search-result-flight-body
|
||||||
|
.flight-details__full-route{
|
||||||
|
flex-wrap: wrap !important;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__status {
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
schedule-days
|
||||||
|
schedule-search-result-flight-body
|
||||||
|
.flight-details__full-route {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
@media (max-width: $media-breakpoint-small-tablet) {
|
||||||
|
@media screen {
|
||||||
|
online-board-flight-details-page {
|
||||||
|
flight-board-details,
|
||||||
|
flight-schedule-details
|
||||||
|
.details-accordion.flight-accordion
|
||||||
|
> .p-accordion
|
||||||
|
> p-accordiontab
|
||||||
|
> .p-accordion-content-wrapper
|
||||||
|
> .p-accordion-content
|
||||||
|
.details-accordion__body.flight-route {
|
||||||
|
padding-top: $space-m !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-flight-details-view {
|
||||||
|
flight-board-details,
|
||||||
|
flight-schedule-details
|
||||||
|
.details-accordion.flight-accordion
|
||||||
|
> .p-accordion
|
||||||
|
> p-accordiontab
|
||||||
|
> .p-accordion-content-wrapper
|
||||||
|
> .p-accordion-content
|
||||||
|
.details-accordion__body.flight-route {
|
||||||
|
padding-top: $space-xxl !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
.flight-details__full-route {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
flights-root {
|
||||||
|
@media (max-width: $media-breakpoint-tablet) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ap-d-desktop {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.ap-d-tablet {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.ap-d-tablet-2 {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.ap-d-mobile {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000000px) and (min-width: $media-breakpoint-tablet) {
|
||||||
|
.ap-d-desktop {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-tablet) and (min-width: $media-breakpoint-tablet-min) {
|
||||||
|
.ap-d-tablet {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-small-tablet) and (min-width: $media-breakpoint-small-tablet-min) {
|
||||||
|
.ap-d-tablet-2 {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
.ap-d-mobile {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-tablet) {
|
||||||
|
.footer .main-module__footer {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: calc(100% - 40px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-desktop) {
|
||||||
|
.main-module__header__link-buy {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
flights-page-tabs .tabs,
|
||||||
|
schedule-direction-switch .tabs {
|
||||||
|
.tabs__tab {
|
||||||
|
height: $button-height--mobile;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .main-module__footer {
|
||||||
|
margin-top: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
board-search-result section.frame {
|
||||||
|
border-radius: $border-radius !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
page-empty-list section.empty-list {
|
||||||
|
padding: 40px;
|
||||||
|
padding-top: 150px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background-position: center 40px;
|
||||||
|
background-size: 65px auto;
|
||||||
|
|
||||||
|
.text-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-info {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
|
||||||
|
online-board-filter,
|
||||||
|
schedule-filter,
|
||||||
|
flights-map-filter {
|
||||||
|
.filter-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> *:first-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> *:last-child {
|
||||||
|
padding-left: $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-container {
|
||||||
|
width: auto;
|
||||||
|
padding-right: $space-m;
|
||||||
|
padding-left: $space-m;
|
||||||
|
|
||||||
|
.button-change {
|
||||||
|
margin-top: 14px;
|
||||||
|
height: $standard-button-height;
|
||||||
|
width: 45px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
online-board-route-filter {
|
||||||
|
calendar-input {
|
||||||
|
padding-left: $space-m !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
online-board-filter,
|
||||||
|
schedule-filter,
|
||||||
|
flights-map-filter {
|
||||||
|
.p-calendar {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.p-datepicker-calendar-container .p-datepicker-calendar td a,
|
||||||
|
.p-datepicker-calendar-container .p-datepicker-calendar td span {
|
||||||
|
font-size: $font-size-m !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button:first-child {
|
||||||
|
flex-grow: 4;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button {
|
||||||
|
height: $button-height--mobile;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row
|
||||||
|
.cell.contry {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row.country-start-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.cell.contry {
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row
|
||||||
|
.cell.city
|
||||||
|
.airports-column {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 360px) {
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .content .content--scroll-panel .p-scrollpanel .p-scrollpanel-wrapper .row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
.mobile-view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-filter-content--checkboxes {
|
||||||
|
p-checkbox {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
|
||||||
|
schedule-filter {
|
||||||
|
.schedule-filter-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
@include h-spacing($space-xl);
|
||||||
|
|
||||||
|
city-autocomplete {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-container {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--direct,
|
||||||
|
&--checkboxes,
|
||||||
|
&--back {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
time-selector
|
||||||
|
.wrapper--time-selector.compact-view {
|
||||||
|
margin-top: 0px;
|
||||||
|
padding-bottom: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-schedule {
|
||||||
|
min-width: 220px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-top: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
calendar-input {
|
||||||
|
width: calc(50% - 33px);
|
||||||
|
margin-right: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
time-selector {
|
||||||
|
width: calc(50% - 33px);
|
||||||
|
|
||||||
|
.wrapper--time-selector.compact-view
|
||||||
|
.time-selector__label-value {
|
||||||
|
margin-bottom: 27px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
.time-selector__label {
|
||||||
|
max-width: 100px;
|
||||||
|
@include font-overflow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--checkboxes {
|
||||||
|
@include h-spacing($space-xl);
|
||||||
|
|
||||||
|
p-checkbox {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
time-selector {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-fiter-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-container {
|
||||||
|
width: auto;
|
||||||
|
padding-right: $space-m;
|
||||||
|
padding-left: $space-m;
|
||||||
|
|
||||||
|
.button-change {
|
||||||
|
margin-top: 14px;
|
||||||
|
height: $standard-button-height;
|
||||||
|
width: 45px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
.mobile-view {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky-panel {
|
||||||
|
position: relative !important;
|
||||||
|
top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-search-view {
|
||||||
|
time-selector,
|
||||||
|
schedule-search-result-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-days {
|
||||||
|
.frame {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
.flights-map-filter-content-checkboxes {
|
||||||
|
p-checkbox {
|
||||||
|
margin-top: $space-l;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
|
||||||
|
flights-map-filter {
|
||||||
|
.flights-map-filter-content {
|
||||||
|
|
||||||
|
.flights-map-filter-header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flights-map-filter-content-cities{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.change-container {
|
||||||
|
width: auto;
|
||||||
|
padding-right: $space-m;
|
||||||
|
padding-left: $space-m;
|
||||||
|
|
||||||
|
.button-change {
|
||||||
|
margin-top: 14px;
|
||||||
|
height: $standard-button-height;
|
||||||
|
width: 45px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flights-map-filter-info{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flights-map-filter-content-checkboxes{
|
||||||
|
@include h-spacing($space-xl);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
p-checkbox {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: $media-breakpoint-mobile) {
|
||||||
|
flights-map-filter {
|
||||||
|
.p-calendar {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.p-datepicker-calendar-container .p-datepicker-calendar td a,
|
||||||
|
.p-datepicker-calendar-container .p-datepicker-calendar td span {
|
||||||
|
font-size: $font-size-m !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button:first-child {
|
||||||
|
flex-grow: 4;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper .city-autocomplete-popup .tabs .tab-button {
|
||||||
|
height: $button-height--mobile;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row
|
||||||
|
.cell.contry {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row.country-start-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.cell.contry {
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-autocomplete-popup-wrapper
|
||||||
|
.city-autocomplete-popup
|
||||||
|
.content
|
||||||
|
.content--scroll-panel
|
||||||
|
.p-scrollpanel
|
||||||
|
.p-scrollpanel-wrapper
|
||||||
|
.row
|
||||||
|
.cell.city
|
||||||
|
.airports-column {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flights-map-filter-header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
board-flight-body,
|
||||||
|
board-multi-flight-body {
|
||||||
|
.flight-details,
|
||||||
|
flight-board-details,
|
||||||
|
flight-schedule-details {
|
||||||
|
padding: $text-margin-bottom $space-xl $space-m $space-xl;
|
||||||
|
|
||||||
|
&__full-route {
|
||||||
|
border: 1px solid $border;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background-color: $white;
|
||||||
|
padding: $space-xl;
|
||||||
|
margin-bottom: $space-xl;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background-color: $white;
|
||||||
|
border: 1px dashed $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: $space-m;
|
||||||
|
|
||||||
|
&__left,
|
||||||
|
&__right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-right: $space-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
board-flight-header {
|
||||||
|
$flight-height: 100%;
|
||||||
|
|
||||||
|
.flight-status {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
@include font-overflow();
|
||||||
|
|
||||||
|
.status {
|
||||||
|
@include font-overflow();
|
||||||
|
@include font-small();
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
board-search-result {
|
||||||
|
section.frame {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
padding-top: 3px;
|
||||||
|
|
||||||
|
p-accordiontab {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
.p-accordion-header {
|
||||||
|
margin-top: 0px !important;
|
||||||
|
position: relative;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0px;
|
||||||
|
padding: 0 !important;
|
||||||
|
position: relative;
|
||||||
|
color: $text-color;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-highlight {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-content-wrapper {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
|
||||||
|
> .p-accordion-content {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 1.3px;
|
||||||
|
left: $space-xl;
|
||||||
|
right: $space-xl;
|
||||||
|
background-color: $border;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::after,
|
||||||
|
&.active::after {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover + p-accordiontab::after,
|
||||||
|
&.active + p-accordiontab::after {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
.city-autocomplete__search-button.p-button {
|
||||||
|
background-image: url('~src/assets/img/arr-down.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 9px 4px;
|
||||||
|
background-position: center center;
|
||||||
|
transform-origin: center center;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
city-autocomplete {
|
||||||
|
p-autocomplete,
|
||||||
|
.p-autocomplete {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.p-inputtext {
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-panel {
|
||||||
|
min-width: calc(100% + #{$buttons-width}) !important;
|
||||||
|
max-width: 400px;
|
||||||
|
margin-top: $space-s;
|
||||||
|
@include control-border-shadow();
|
||||||
|
|
||||||
|
.mCSB_scrollTools {
|
||||||
|
width: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_inside > .mCSB_container {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_inside > .mCSB_container.mCS_y_hidden {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_draggerContainer {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
|
||||||
|
background-color: $blue-light;
|
||||||
|
width: $scroll-width;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_scrollTools .mCSB_buttonUp,
|
||||||
|
.mCSB_scrollTools .mCSB_buttonDown {
|
||||||
|
height: $space-m !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-list-item {
|
||||||
|
padding: 0px !important;
|
||||||
|
|
||||||
|
&.p-state-highlight {
|
||||||
|
.country,
|
||||||
|
.airport {
|
||||||
|
color: #ffffffbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-active {
|
||||||
|
font-weight: $font-bold;
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
@mixin details-accordion {
|
||||||
|
.details-accordion {
|
||||||
|
.p-accordion {
|
||||||
|
.p-accordion-header {
|
||||||
|
margin-top: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
position: relative;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.details-accordion__header {
|
||||||
|
@include font-small();
|
||||||
|
font-weight: $font-medium;
|
||||||
|
padding: $space-xl;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
.details-accordion__header__values {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 1px;
|
||||||
|
left: $space-xl;
|
||||||
|
right: $space-xl;
|
||||||
|
border-top: 1.3px dotted $border;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-state-active {
|
||||||
|
.details-accordion__header__values {
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-content {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius !important;
|
||||||
|
padding: 0px;
|
||||||
|
.details-accordion__body {
|
||||||
|
padding: $space-xl;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-accordion__title {
|
||||||
|
white-space: normal;
|
||||||
|
width: $margin-details-title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion--open + flight-details-schedule {
|
||||||
|
.p-accordion-header {
|
||||||
|
&::after {
|
||||||
|
left: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
border-top-style: solid !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
online-board-flight-details-page {
|
||||||
|
@include details-accordion();
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '../../../adaptive/_flights-board-details-page-adaptive';
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
.details-back {
|
||||||
|
height: $button-height;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left !important;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pi {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 15px;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
flight-details-full-route {
|
||||||
|
.frame {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius !important;
|
||||||
|
margin-bottom: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
.aeroport-name {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
+22
@@ -0,0 +1,22 @@
|
|||||||
|
.full-route__icons-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: $space-xl $space-xl 0 $space-xl;
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-update {
|
||||||
|
@include font-small();
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-weight: $font-medium;
|
||||||
|
@include font-overflow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
@mixin flight-number-company {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@include h-spacing($space-xl);
|
||||||
|
|
||||||
|
.flight-number {
|
||||||
|
&__code {
|
||||||
|
font-size: $font-size-l;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
color: $text-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__code-sharing {
|
||||||
|
@include font-small();
|
||||||
|
display: flex;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-company {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-actions {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: $medium-button-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
button + button {
|
||||||
|
margin-left: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$wcol: 7%;
|
||||||
|
|
||||||
|
.block-route-update {
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.block-route {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid #d0dcea;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: $space-xxl;
|
||||||
|
min-height: $space-xl * 1.5;
|
||||||
|
@include h-spacing($space-s);
|
||||||
|
}
|
||||||
|
.date-block {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
&.icon-return {
|
||||||
|
width: 13px;
|
||||||
|
height: 7px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
&.icon-change {
|
||||||
|
width: 22px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-column,
|
||||||
|
.left-column {
|
||||||
|
display: inline-flex;
|
||||||
|
min-width: $wcol * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-column {
|
||||||
|
display: inline-flex;
|
||||||
|
min-width: $wcol * 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-container {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
margin: 20px;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 40px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-line {
|
||||||
|
margin: 0;
|
||||||
|
height: 0;
|
||||||
|
border: none;
|
||||||
|
border-top: 1.3px dotted $border;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
online-board-flights-mini-list,
|
||||||
|
schedule-flights-mini-list,
|
||||||
|
{
|
||||||
|
section.frame-left-panel,
|
||||||
|
section.frame-left-panel-accordion {
|
||||||
|
padding-bottom: $space-s;
|
||||||
|
padding-top: $space-s;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
section.single-flights-details {
|
||||||
|
max-height: calc(100vh - 170px);
|
||||||
|
}
|
||||||
|
section.frame {
|
||||||
|
background-color: $white;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
//max-height: calc(100vh - 220px);
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
flights-details-list-flight.selected
|
||||||
|
+ flights-details-list-flight.selected {
|
||||||
|
.flight-card {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_draggerRail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_inside > .mCSB_container {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_dragger .mCSB_dragger_bar {
|
||||||
|
background-color: $blue-light !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mCSB_scrollTools .mCSB_draggerContainer {
|
||||||
|
top: 10px !important;
|
||||||
|
bottom: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
flight-details-schedule {
|
||||||
|
}
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
flight-details-wrapper {
|
||||||
|
.boarding-status-Scheduled {
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boarding-status-InProgress {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boarding-status-Finished {
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__body__row--wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& + .details__body__row--wrapper {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__body__row {
|
||||||
|
@include flex-center-align();
|
||||||
|
|
||||||
|
.details__title {
|
||||||
|
min-width: 29%;
|
||||||
|
max-width: 29%;
|
||||||
|
margin-right: $space-xl;
|
||||||
|
@include flex-center-align();
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-right: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__data {
|
||||||
|
@include flex-center-align();
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icons-component {
|
||||||
|
.details__body__row {
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.details__data {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: -$space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-wrapper.separator {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
height: 3px;
|
||||||
|
@include flex-center-align();
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 1.3px dotted $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
display: none;
|
||||||
|
height: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 1px);
|
||||||
|
left: 0px;
|
||||||
|
background-color: $green;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.row-with-progress {
|
||||||
|
.progress-wrapper.separator {
|
||||||
|
.progress {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details__body__row--wrapper:last-child {
|
||||||
|
.progress-wrapper.separator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
flight-board-details,
|
||||||
|
flight-schedule-details {
|
||||||
|
.frame.single-flight {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-header {
|
||||||
|
&.p-state-active {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-accordion__header.flight-info {
|
||||||
|
@include flight-number-company();
|
||||||
|
padding: $space-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-content {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
.flight-route {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: $space-xl;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
.single-flight & {
|
||||||
|
padding-top: $space-xxl + $space-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flight-route__status {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
.status--line {
|
||||||
|
height: $medium-button-height;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.status--execute {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
min-width: 29px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
padding: 0 $space-s;
|
||||||
|
width: 29px;
|
||||||
|
background-color: $white;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
height: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 1px);
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
background-color: $green;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
height: 1.3px;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 1px);
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #d1dcea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status--texts {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
property {
|
||||||
|
.status {
|
||||||
|
width: $status-indicator-size;
|
||||||
|
height: $status-indicator-size;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: $border;
|
||||||
|
border: 1px solid $border;
|
||||||
|
margin-right: $space-s;
|
||||||
|
|
||||||
|
&--Finished {
|
||||||
|
background-color: $red;
|
||||||
|
border-color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--InProgress {
|
||||||
|
background-color: $green;
|
||||||
|
border-color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
@mixin intermediate-landing-size {
|
||||||
|
.svg {
|
||||||
|
width: 20.5px;
|
||||||
|
height: 6.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
transfer-inline {
|
||||||
|
display: flex;
|
||||||
|
margin-right: $space-m;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
&.flight-options-icon,
|
||||||
|
.flight-options-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: $space-s 0;
|
||||||
|
width: 38px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flight-details-full-route &,
|
||||||
|
.single-flight & {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
@include font-small();
|
||||||
|
@include font-overflow();
|
||||||
|
display: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
max-height: $label-shift-height;
|
||||||
|
max-width: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hit-rate {
|
||||||
|
background-color: transparentize($orange, 0.8);
|
||||||
|
|
||||||
|
.flight-options-icon__icon {
|
||||||
|
.svg {
|
||||||
|
width: 14.935px;
|
||||||
|
height: 15.11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.stock {
|
||||||
|
background-color: $blue-icon;
|
||||||
|
|
||||||
|
.flight-options-icon__icon {
|
||||||
|
.svg {
|
||||||
|
width: 14.935px;
|
||||||
|
height: 15.11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.intermediate-landing {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid $border;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
.flight-options-icon__icon {
|
||||||
|
padding-left: $space-m;
|
||||||
|
padding-right: $space-m;
|
||||||
|
|
||||||
|
@include intermediate-landing-size();
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.flight-transfer {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid $border;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
.flight-options-icon__icon {
|
||||||
|
padding-left: $space-m;
|
||||||
|
padding-right: $space-m;
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
width: 20.5px;
|
||||||
|
height: 6.5px;
|
||||||
|
fill: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-header.p-highlight &.intermediateLanding,
|
||||||
|
.p-accordion-header.p-highlight &.intermediateLandingMulti,
|
||||||
|
.p-accordion-header.p-highlight &.flightTransfer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
.number-input-composite {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
p-autocomplete,
|
||||||
|
.ui-autocomplete {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include control-border-shadow();
|
||||||
|
|
||||||
|
input.ui-inputtext {
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.number-input-composite {
|
||||||
|
.button-clear {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
.prefix {
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid #dcdcdc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-value {
|
||||||
|
.button-clear {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-error {
|
||||||
|
border-color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
flights-page-breadcrumbs {
|
||||||
|
.p-breadcrumb {
|
||||||
|
body & {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: auto;
|
||||||
|
border: none;
|
||||||
|
background-color: $dark-blue-opacity;
|
||||||
|
padding: 3px 10px 4px 10px;
|
||||||
|
margin-bottom: $space-s;
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
& .p-menuitem-link {
|
||||||
|
color: $white !important;
|
||||||
|
@include font-small($white);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child a {
|
||||||
|
color: $breadcrumb-item-active-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.p-breadcrumb-chevron {
|
||||||
|
margin: 0 $space-s;
|
||||||
|
@include font-small($breadcrumb-item-separator);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '/';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
@@ -0,0 +1,236 @@
|
|||||||
|
@mixin left-accordeon {
|
||||||
|
section.frame {
|
||||||
|
background-color: $blue-extra-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion {
|
||||||
|
p-accordiontab {
|
||||||
|
// Header
|
||||||
|
.p-accordion-header {
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $blue;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0 $space-l 0 $space-xl;
|
||||||
|
height: $button-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
|
||||||
|
p-header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active header
|
||||||
|
&:not(.p-state-disabled).p-highlight {
|
||||||
|
a {
|
||||||
|
background-color: $white;
|
||||||
|
border: none;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Content
|
||||||
|
.p-accordion-content {
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
@include box-shadow-small;
|
||||||
|
padding: $space-s $space-xl $space-xl $space-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
// First tab
|
||||||
|
&:first-child {
|
||||||
|
.p-accordion-header {
|
||||||
|
a {
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not last tab
|
||||||
|
&:not(:nth-last-child(1)) {
|
||||||
|
.p-accordion-header {
|
||||||
|
border-bottom: 1px solid $border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Last tab
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
.p-accordion-content {
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label--filter {
|
||||||
|
display: block;
|
||||||
|
margin-right: $space-xl;
|
||||||
|
@include font-overflow();
|
||||||
|
@include font-small($gray);
|
||||||
|
margin-bottom: $label-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-input-composite {
|
||||||
|
@include flex-center-align();
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
@include custom-input();
|
||||||
|
border-right: none;
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
&--filter {
|
||||||
|
@include custom-input();
|
||||||
|
padding-left: $space-m !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--flight-number {
|
||||||
|
display: block !important;
|
||||||
|
border-left: 1px dotted $border-input;
|
||||||
|
border-radius: 0 $border-radius $border-radius 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--calendar {
|
||||||
|
padding-right: 32px;
|
||||||
|
background-image: url('~src/assets/img/calendar.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
background-position: right 8px center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-autocomplete-input {
|
||||||
|
@include custom-input();
|
||||||
|
width: 100%;
|
||||||
|
height: $standard-button-height - 2px;
|
||||||
|
padding-left: $space-m !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
|
||||||
|
.calendar-controls-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.button-clear {
|
||||||
|
top: 1px !important;
|
||||||
|
bottom: 1px !important;
|
||||||
|
border-right: 1px solid $border-input;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-control-hidden {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.p-inputtext {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
display: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datepicker {
|
||||||
|
@include control-border-shadow();
|
||||||
|
top: $space-s !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-value {
|
||||||
|
.button-clear {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.button-change {
|
||||||
|
margin-top: $space-m;
|
||||||
|
margin-bottom: -$space-m;
|
||||||
|
display: inline-flex;
|
||||||
|
height: $medium-button-height;
|
||||||
|
width: 35px;
|
||||||
|
background-color: $white;
|
||||||
|
@include control-border-shadow();
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
margin-top: $space-xl;
|
||||||
|
width: 100%;
|
||||||
|
height: $standard-button-height;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: $font-bold;
|
||||||
|
font-size: $font-size-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-value {
|
||||||
|
border-color: red;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
online-board-filter,
|
||||||
|
schedule-filter,
|
||||||
|
flights-map-filter {
|
||||||
|
@include left-accordeon;
|
||||||
|
}
|
||||||
|
|
||||||
|
schedule-filter,
|
||||||
|
flights-map-filter {
|
||||||
|
.p-accordion-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-accordion-content {
|
||||||
|
border-radius: $border-radius !important;
|
||||||
|
padding: $space-xl !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '~src/styles/pages/adaptive/_page-filters-adaptive.scss';
|
||||||
|
@import '~src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss';
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
page-loader {
|
||||||
|
z-index: 10000000;
|
||||||
|
position: inherit;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.page-loader__button-area {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.page-loader__background {
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.page-loader__loader {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
.loader-circle {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset 0 0 0 3px rgb(74, 144, 226);
|
||||||
|
margin-left: -60px;
|
||||||
|
margin-top: -60px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-line-mask {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
width: 60px;
|
||||||
|
height: 120px;
|
||||||
|
margin-left: -60px;
|
||||||
|
margin-top: -60px;
|
||||||
|
overflow: hidden;
|
||||||
|
transform-origin: 60px 60px;
|
||||||
|
//-webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
||||||
|
animation: rotate 1.2s infinite linear;
|
||||||
|
|
||||||
|
.loader-line {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-cancel {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
height: $medium-button-height;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $white !important;
|
||||||
|
border-color: $white !important;
|
||||||
|
.p-button-label {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button-label {
|
||||||
|
padding: 0 !important;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: $font-size-m;
|
||||||
|
font-weight: $font-medium;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user