Port global SCSS framework from Angular to React
Ports variables, colors, fonts, layout, mixins, shadows, screen breakpoints, reset, icons, buttons, common, and overrides. Replaces Angular-specific constructs (::ng-deep, :host, element selectors) with React-compatible equivalents. Uses Google Fonts CDN for Roboto.
This commit is contained in:
@@ -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('/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,2 @@
|
||||
// Google Fonts CDN for Roboto (replaces self-hosted woff2 files from Angular app)
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
|
||||
@@ -0,0 +1,37 @@
|
||||
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,45 @@
|
||||
@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;
|
||||
|
||||
@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,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('/assets/img/share.svg');
|
||||
}
|
||||
|
||||
.svg--print {
|
||||
background-image: url('/assets/img/print.svg');
|
||||
}
|
||||
|
||||
.svg--pin {
|
||||
background-image: url('/assets/img/pin-24.svg');
|
||||
}
|
||||
|
||||
.svg--expand {
|
||||
background-image: url('/assets/img/expand.svg');
|
||||
}
|
||||
|
||||
svg {
|
||||
&.green {
|
||||
fill: $green;
|
||||
}
|
||||
|
||||
&.red {
|
||||
fill: $red;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
fill: $orange;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
fill: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.svg--calendar {
|
||||
background-image: url('/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,470 @@
|
||||
@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('/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;
|
||||
}
|
||||
|
||||
// React equivalent of Angular's `flights-root` element selector
|
||||
#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;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scroll--panel--custom {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
height: 400px;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// Checkbox styles (adapted from PrimeNG p-checkbox element selector)
|
||||
.p-checkbox-wrapper {
|
||||
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('/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-disabled):hover {
|
||||
background-color: $blue-extra-light;
|
||||
border-color: $blue-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.p-checkbox-box:not(.p-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('/assets/img/share/facebook.svg');
|
||||
}
|
||||
|
||||
&.vk {
|
||||
background-image: url('/assets/img/share/vk.svg');
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
background-image: url('/assets/img/share/twitter.svg');
|
||||
}
|
||||
|
||||
&.copy {
|
||||
background-image: url('/assets/img/share/copy.svg');
|
||||
}
|
||||
|
||||
&.weibo {
|
||||
background-image: url('/assets/img/share/weibo.svg');
|
||||
background-size: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion button-clear (adapted from PrimeNG p-accordion element selector)
|
||||
.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('/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;
|
||||
}
|
||||
|
||||
// Print styles
|
||||
.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;
|
||||
}
|
||||
|
||||
// Adapted from Angular component selectors to class-based selectors
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive layout (adapted from Angular adaptive styles)
|
||||
@media (max-width: $media-breakpoint-tablet) {
|
||||
#root {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $media-breakpoint-mobile) {
|
||||
#root {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use './screen' as screen;
|
||||
|
||||
@mixin h-spacing($size, $withLast: false) {
|
||||
@if $withLast {
|
||||
& > * {
|
||||
margin-right: $size;
|
||||
}
|
||||
} @else {
|
||||
& > *:not(:last-child) {
|
||||
margin-right: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin v-spacing($size, $withLast: false) {
|
||||
@if $withLast {
|
||||
& > * {
|
||||
margin-bottom: $size;
|
||||
}
|
||||
} @else {
|
||||
& > *:not(:last-child) {
|
||||
margin-bottom: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gap($size) {
|
||||
@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,45 @@
|
||||
@use './colors' as colors;
|
||||
@use './shadows' as shadows;
|
||||
@use './fonts' as fonts;
|
||||
@use './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(.p-state-error) {
|
||||
border-color: colors.$blue-light;
|
||||
}
|
||||
|
||||
&:enabled:focus:not(.p-state-error) {
|
||||
box-shadow: 0 0 0 0.2em colors.$focus-shadow;
|
||||
border-color: colors.$blue-light;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
a:focus {
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,341 @@
|
||||
/* 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 {
|
||||
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,49 @@
|
||||
@use './variables' as variables;
|
||||
|
||||
@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,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,68 @@
|
||||
$border-radius: 3px;
|
||||
|
||||
/* Paddings and Margins */
|
||||
$space-s: 5px;
|
||||
$space-s2: 8px;
|
||||
$space-m: 10px;
|
||||
$space-m2: 12px;
|
||||
$space-l: 15px;
|
||||
$space-xl: 20px;
|
||||
$space-xxl: 40px;
|
||||
$space-xxxl: 80px;
|
||||
|
||||
$space-top-site: 32px;
|
||||
|
||||
// SITE WIDTH
|
||||
$site-width: 1440px;
|
||||
$left-aside-width: 285px;
|
||||
$left-aside-width-desktop: 23.875%;
|
||||
$column-spacing: 1.5%;
|
||||
|
||||
// MEDIA
|
||||
// When changing the size of breakpoints, you also need to change in the file screen-size.service.ts
|
||||
$media-breakpoint-desktop: 1300px;
|
||||
$media-breakpoint-desktop-min: 1051px;
|
||||
$media-breakpoint-tablet: 1050px;
|
||||
$media-breakpoint-tablet-min: 769px;
|
||||
$media-breakpoint-small-tablet: 768px;
|
||||
$media-breakpoint-small-tablet-min: 641px;
|
||||
$media-breakpoint-mobile: 640px;
|
||||
|
||||
//BUTTON
|
||||
$button-height: 48px;
|
||||
$button-height--mobile: 38px;
|
||||
$button-sort-height: 12px;
|
||||
$small-button-height: 35px;
|
||||
$medium-button-height: 40px;
|
||||
$standard-button-height: 48px;
|
||||
$big-button-height: 56px;
|
||||
$slider-handle-size: 16px;
|
||||
$buttons-width: 32px;
|
||||
|
||||
// MEDIA
|
||||
$desktopHeaderHeight: 103px;
|
||||
$tabletHeaderHeight: 103px;
|
||||
$mobileHeaderHeight: 103px;
|
||||
|
||||
// FLIGHT
|
||||
$text-margin-bottom: 2px;
|
||||
$flight-height: 40px;
|
||||
$width-flight-number: 60px;
|
||||
$width-background-company: 120px;
|
||||
$width-dep-arr: 40%;
|
||||
$width-status: 20%;
|
||||
$width-flight-time: 75px;
|
||||
$width-flight-day-change: 25px;
|
||||
$button-expand-size: 32px;
|
||||
$label-shift-width: 20px;
|
||||
$label-shift-height: 18px;
|
||||
$status-indicator-size: 8px;
|
||||
$status-width: 100px;
|
||||
$flight-details-fit: 2%;
|
||||
//FLIGHT-DETAILS
|
||||
$margin-details-title: 20%;
|
||||
|
||||
// FILTERS
|
||||
$label-margin-bottom: 10px;
|
||||
|
||||
$scroll-width: 6px;
|
||||
@@ -0,0 +1,6 @@
|
||||
@forward './colors';
|
||||
@forward './variables';
|
||||
@forward './fonts';
|
||||
@forward './shadows';
|
||||
@forward './screen';
|
||||
@forward './layouts';
|
||||
Reference in New Issue
Block a user