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