Initial commit: Aeroflot Flights Web Angular 12 application
This commit is contained in:
@@ -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,6 @@
|
||||
@forward './colors';
|
||||
@forward './variables';
|
||||
@forward './fonts';
|
||||
@forward './shadows';
|
||||
@forward './screen';
|
||||
@forward './layouts';
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
flights-page-tabs,
|
||||
schedule-direction-switch {
|
||||
.tabs {
|
||||
|
||||
.tabs__row{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs__tab {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $button-height;
|
||||
border: 1px solid $white;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
|
||||
@include font-overflow();
|
||||
|
||||
&:first-child {
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $white;
|
||||
font-weight: $font-bold;
|
||||
color: $blue;
|
||||
|
||||
.p-button-label {
|
||||
font-weight: $font-bold;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tab--full {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
schedule-direction-switch {
|
||||
.tabs__tab {
|
||||
flex-basis: auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
@use 'sass:math';
|
||||
|
||||
schedule-page-time-selector-component,
|
||||
time-selector {
|
||||
.wrapper--time-selector {
|
||||
padding: 0 $space-xl;
|
||||
height: calc(#{$button-height} + 10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.time-selector {
|
||||
width: 100%;
|
||||
|
||||
.p-slider {
|
||||
background-color: $blue-light2;
|
||||
|
||||
&.p-slider-horizontal {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background-color: $blue-light;
|
||||
}
|
||||
|
||||
.p-slider-handle {
|
||||
background-color: $blue-light;
|
||||
height: $slider-handle-size;
|
||||
width: $slider-handle-size;
|
||||
border: 2px solid $white;
|
||||
margin-top: math.div(-$slider-handle-size, 2);
|
||||
transition-duration: 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-selector__label {
|
||||
margin-right: $space-xl;
|
||||
white-space: nowrap;
|
||||
@include font-small($gray);
|
||||
}
|
||||
|
||||
.time-selector__value {
|
||||
margin-left: $space-xl;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-l;
|
||||
}
|
||||
|
||||
&.compact-view {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin-top: $space-xl;
|
||||
padding-bottom: $space-s;
|
||||
|
||||
.time-selector__label-value {
|
||||
@include flex-center-align();
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $space-m;
|
||||
width: 100%;
|
||||
|
||||
.time-selector__value {
|
||||
@include font-small($text-color);
|
||||
margin-bottom: $space-s;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.time-selector__label {
|
||||
margin-bottom: $space-s;
|
||||
}
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
search-history {
|
||||
section.frame {
|
||||
.p-accordion-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.malihu-scrollbar--afl {
|
||||
.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: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include left-accordeon;
|
||||
|
||||
.row {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.2s;
|
||||
padding: $space-m 0;
|
||||
|
||||
.svg--plane {
|
||||
fill: $gray;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-extra-light;
|
||||
|
||||
.description-row,
|
||||
.row-city {
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
|
||||
.svg--plane {
|
||||
fill: #1b62b4;
|
||||
}
|
||||
}
|
||||
|
||||
.row-icon {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 0 $space-xl;
|
||||
}
|
||||
|
||||
.row-data {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
.description-row {
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import 'components/page-time-selector';
|
||||
@import 'components/page-tabs';
|
||||
@import 'components/page-filters';
|
||||
@import 'components/page-your-search';
|
||||
@import 'components/page-date-tab-selector';
|
||||
@import 'components/page-breadcrumds';
|
||||
@import 'components/flight-icons';
|
||||
@import 'components/city-autocomplite.scss';
|
||||
@import 'components/page-loader';
|
||||
@import 'components/flight-number-filter.scss';
|
||||
@import 'board-search-result';
|
||||
@import 'board-flight-header';
|
||||
@import 'board-flight-body';
|
||||
@import 'start';
|
||||
@import 'components/flight-details-row/flight-details-row';
|
||||
@import 'components/details/board-details';
|
||||
@import 'components/details/flight-details-info';
|
||||
@import 'components/details/flight-details';
|
||||
@import 'components/details/flight-details-schedule';
|
||||
@import 'components/details/flight-details-wrapper';
|
||||
@import 'components/details/flight-details-full-route';
|
||||
@import 'components/details/flight-details-icons-update-time';
|
||||
@import 'components/details/flight-details-list';
|
||||
@import 'components/details/details-back.scss';
|
||||
@import '../adaptive/schedule-page-filters-adaptive';
|
||||
@import '../adaptive/flight_details-row';
|
||||
@@ -0,0 +1,152 @@
|
||||
online-board-start-page,
|
||||
schedule-start {
|
||||
section.frame {
|
||||
padding: 0;
|
||||
|
||||
h2 {
|
||||
padding: 50px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.titles-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.title {
|
||||
width: 50%;
|
||||
padding: 30px;
|
||||
padding-right: 50px;
|
||||
padding-left: 65px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
|
||||
a {
|
||||
cursor: default;
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
|
||||
div {
|
||||
color: $gray;
|
||||
padding-top: $space-s;
|
||||
}
|
||||
|
||||
&.title1 {
|
||||
background-image: url('~src/assets/img/title-icon-1.svg');
|
||||
}
|
||||
|
||||
&.title2 {
|
||||
background-image: url('~src/assets/img/title-icon-2.svg');
|
||||
}
|
||||
|
||||
&.title3 {
|
||||
background-image: url('~src/assets/img/title-icon-3.svg');
|
||||
}
|
||||
|
||||
&.title4 {
|
||||
background-image: url('~src/assets/img/title-icon-4.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-found-location {
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-image: url('~src/assets/img/not-found-location.svg');
|
||||
padding-left: 40px;
|
||||
@include font-small();
|
||||
color: transparentize($color: $white, $amount: 0.3);
|
||||
font-size: $font-size-s;
|
||||
max-width: 620px;
|
||||
margin-top: $space-xl;
|
||||
white-space: pre-line;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
section.frame h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
section.frame h2 {
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
padding-bottom: 0px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.titles-container {
|
||||
padding: 20px !important;
|
||||
padding-top: 0 !important;
|
||||
|
||||
div.title {
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
padding-left: 50px !important;
|
||||
background-size: 35px auto !important;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
schedule-start {
|
||||
.titles-container {
|
||||
.title {
|
||||
&.title1 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-1.svg') !important;
|
||||
}
|
||||
|
||||
&.title2 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-2.svg') !important;
|
||||
}
|
||||
|
||||
&.title3 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-3.svg') !important;
|
||||
}
|
||||
|
||||
&.title4 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-4.svg') !important;
|
||||
}
|
||||
|
||||
&.title5 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-5.svg') !important;
|
||||
}
|
||||
|
||||
&.title6 {
|
||||
background-image: url('~src/assets/img/schedule-title-icon-6.svg') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-chapters-container {
|
||||
background-color: $blue-extra-light;
|
||||
border-top: 1px solid $border;
|
||||
padding: 50px 50px 30px;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
font-weight: $font-regular;
|
||||
padding-bottom: 20px !important;
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titles-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
schedule-flight-details-view {
|
||||
@include details-accordion();
|
||||
|
||||
p-accordiontab:not(:nth-last-child(1)) {
|
||||
.p-accordion-header {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-flight--details {
|
||||
border-radius: 0 0 3px 3px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section.frame.sticky-panel {
|
||||
border-radius: 3px 3px 0 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
$right-part-width: 200px;
|
||||
|
||||
download-schedule-dialog {
|
||||
.p-overlaypanel {
|
||||
position: relative;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
z-index: 100;
|
||||
margin: 0;
|
||||
margin-top: -1px;
|
||||
border: 1.3px solid $border-blue;
|
||||
box-shadow: 0 2px 2px #b1b1b134;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-overlaypanel-content {
|
||||
padding: 0 !important;
|
||||
|
||||
.p-tabview {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0;
|
||||
|
||||
.p-tabview-nav {
|
||||
background-color: $blue-extra-light;
|
||||
margin-bottom: 0;
|
||||
border-left: 1.3px solid $border-blue;
|
||||
border-radius: 0;
|
||||
|
||||
li {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
border: none;
|
||||
float: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
margin-left: -1.3px;
|
||||
|
||||
a {
|
||||
font-weight: $font-regular;
|
||||
color: $blue;
|
||||
padding: $space-l $space-xl;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.p-tabview-selected {
|
||||
background-color: $white;
|
||||
border-top: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
|
||||
&:hover {
|
||||
border-top: 1px solid $border !important;
|
||||
border-bottom: 1px solid $border !important;
|
||||
border-radius: 0;
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none !important;
|
||||
border-top: 1px solid transparent !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
border-radius: 0;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(1) {
|
||||
&.p-tabview-selected {
|
||||
border-top: 1px solid $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-panels {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
.p-calendar {
|
||||
padding: 20px;
|
||||
|
||||
.p-datepicker-next,
|
||||
.p-datepicker-prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.two-calendars {
|
||||
.p-datepicker-next,
|
||||
.p-datepicker-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
.p-calendar {
|
||||
padding-right: $space-m;
|
||||
}
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
.p-calendar {
|
||||
padding-left: $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
border: none;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-bottom {
|
||||
padding: $space-xl;
|
||||
border-top: 1.3px solid $border-blue;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.download-schedule-button {
|
||||
height: $small-button-height;
|
||||
width: $right-part-width - $space-xl;
|
||||
margin-left: $space-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-small-tablet) {
|
||||
download-schedule-dialog {
|
||||
.p-overlaypanel {
|
||||
.p-overlaypanel-content {
|
||||
.p-tabview {
|
||||
flex-direction: column;
|
||||
|
||||
.p-tabview-nav {
|
||||
border-left: none;
|
||||
border-bottom: 1.3px solid $border-blue;
|
||||
|
||||
li {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-bottom {
|
||||
flex-direction: column;
|
||||
|
||||
.download-schedule-button {
|
||||
width: 100%;
|
||||
margin-top: $space-xl;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
.p-tabview-panel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
table.two-calendars {
|
||||
> tr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
connecting-flight-body,
|
||||
multi-flight-body,
|
||||
schedule-search-result-flight-body {
|
||||
.flight-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;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__container {
|
||||
border-radius: $border-radius;
|
||||
background-color: $white;
|
||||
border: 1px dashed $border;
|
||||
padding: $space-s 0;
|
||||
}
|
||||
|
||||
flight-details-body-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
button + button,
|
||||
a + button,
|
||||
button + a {
|
||||
margin-left: $space-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
.schedule-view-button {
|
||||
margin-top: $space-xl !important;
|
||||
width: 100%;
|
||||
height: $standard-button-height;
|
||||
}
|
||||
|
||||
.schedule-title-tabs {
|
||||
@include flex-center-align();
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-tabs-desktop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.checkbox-schedule {
|
||||
margin-top: $space-xl;
|
||||
}
|
||||
|
||||
.page-footer-note {
|
||||
padding: $space-xl;
|
||||
background-color: $blue-extra-light;
|
||||
border-top: 1px solid $border;
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
|
||||
.page-footer-note--container {
|
||||
max-width: 700px;
|
||||
@include font-small();
|
||||
line-height: 16px;
|
||||
|
||||
b {
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
.line:not(:last-child) {
|
||||
margin-bottom: $space-m;
|
||||
}
|
||||
|
||||
.line1 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.sort-note {
|
||||
font-size: 10px;
|
||||
margin-right: 3px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-note--container {
|
||||
max-width: 700px;
|
||||
@include font-small();
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.sort-note {
|
||||
font-size: 10px;
|
||||
margin-right: 3px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@import 'schedule-search-result';
|
||||
@import 'schedule-search-result-day';
|
||||
@import 'schedule-search-result-header';
|
||||
@import 'flight/schedule-flight-header';
|
||||
@import 'flight/schedule-flight-body';
|
||||
@import 'schedule-flight-select';
|
||||
@import 'details/schedule-details';
|
||||
@import 'download-schedule-dialog';
|
||||
@import 'home';
|
||||
@@ -0,0 +1,29 @@
|
||||
schedule-flight-select {
|
||||
section.frame {
|
||||
margin-bottom: $space-xl;
|
||||
padding: 0 $space-xl;
|
||||
|
||||
&.multi-flight-book {
|
||||
position: relative;
|
||||
|
||||
flight-select-part:first-child {
|
||||
|
||||
.part-header__booking {
|
||||
transform: translate(0, 105%);
|
||||
padding: 0 $space-m;
|
||||
background-color: $white;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
flight-select-part:last-child {
|
||||
.part-header__booking {
|
||||
opacity: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import '../adaptive/schedule-flight-select-adaptive.scss';
|
||||
@@ -0,0 +1,11 @@
|
||||
schedule-search-result-day {
|
||||
@include flex-center-align();
|
||||
justify-content: space-between;
|
||||
padding: $space-xl;
|
||||
|
||||
h3 {
|
||||
margin-top: $text-margin-bottom;
|
||||
color: $text-color;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
|
||||
schedule-search-result-header {
|
||||
button {
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.schedule-search-result-header {
|
||||
@include h-spacing($space-m);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 $space-xl;
|
||||
|
||||
> div {
|
||||
@include font-small();
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: $big-button-height;
|
||||
text-transform: uppercase;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
.sort-label {
|
||||
position: relative;
|
||||
|
||||
&.label-note {
|
||||
padding-right: $space-m;
|
||||
}
|
||||
|
||||
.sort-note {
|
||||
@include font-small();
|
||||
font-size: $font-size-xs;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__flight {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
&__company {
|
||||
width: 120px;
|
||||
@include tablets() {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
&__departure {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__arrival {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__time {
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sort-container {
|
||||
margin-left: $space-s;
|
||||
@include flex-center-align();
|
||||
flex-direction: column;
|
||||
|
||||
> button.sort {
|
||||
height: $button-sort-height;
|
||||
width: $button-sort-height;
|
||||
@include flex-center-align();
|
||||
justify-content: center;
|
||||
background-color: $white;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
border-color: $border;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
border-top: 1px solid;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> button.active {
|
||||
border: 1px solid #002776;
|
||||
border-radius: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
@mixin flight-border-top($left: $space-xl, $right: $space-xl) {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
left: $left;
|
||||
right: $right;
|
||||
height: 1.3px;
|
||||
background-color: $border;
|
||||
top: 0;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
schedule-days {
|
||||
.frame {
|
||||
border-radius: 0;
|
||||
margin-top: -1px;
|
||||
|
||||
p-accordion {
|
||||
.p-accordion {
|
||||
p-accordionTab {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include flight-border-top();
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
&::before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
& + p-accordionTab {
|
||||
&::before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-header {
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
|
||||
> a {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-content {
|
||||
padding: 0;
|
||||
|
||||
.schedule-flights {
|
||||
p-accordiontab {
|
||||
&:first-child {
|
||||
&::before {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user