Replace hardcoded #6b7280/#1c2330/#8a8a8a greys with design tokens ($light-gray/$text-color)
This commit is contained in:
@@ -261,7 +261,7 @@
|
||||
background: transparent !important;
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
border-left: none !important;
|
||||
color: #6b7280 !important;
|
||||
color: colors.$light-gray !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:hover,
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
|
||||
&__duration {
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
|
||||
&__progress-labels {
|
||||
@@ -135,7 +135,7 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@@ -240,7 +240,7 @@
|
||||
.flight-details {
|
||||
&__estimated-note {
|
||||
padding: 0 vars.$space-xl vars.$space-xl;
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -375,7 +375,7 @@
|
||||
}
|
||||
|
||||
&__time-label {
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -385,12 +385,12 @@
|
||||
}
|
||||
|
||||
&__time-offset {
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__time-date {
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@@ -400,7 +400,7 @@
|
||||
|
||||
&__footer-notes {
|
||||
padding: vars.$space-s vars.$space-xl vars.$space-xl;
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
grid-template-columns: 80px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px;
|
||||
gap: 16px;
|
||||
padding: 14px 24px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
&__weekday {
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 13px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@@ -53,12 +53,12 @@
|
||||
&__flight-number {
|
||||
font-size: 22px;
|
||||
font-weight: fonts.$font-medium;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__status {
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
.label--filter {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
@@ -85,12 +85,12 @@
|
||||
|
||||
.time-selector__label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
|
||||
.time-selector__value {
|
||||
font-size: 12px;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
font-weight: fonts.$font-medium;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
gap: 0 vars.$space-l;
|
||||
padding: vars.$space-l vars.$space-xl;
|
||||
font-size: 14px;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
}
|
||||
|
||||
&__leg-number {
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
&__leg-flight-number {
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
font-weight: fonts.$font-medium;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
&__leg-aircraft {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
|
||||
&__leg-time {
|
||||
@@ -70,7 +70,7 @@
|
||||
padding-top: 6px;
|
||||
margin-top: 6px;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
margin-top: -8px;
|
||||
margin-bottom: -8px;
|
||||
font-size: 12px;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -157,7 +157,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@@ -226,7 +226,7 @@
|
||||
padding: vars.$space-l vars.$space-xl vars.$space-m;
|
||||
border-bottom: 1px solid colors.$border;
|
||||
background: #fff;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
}
|
||||
|
||||
&__timeline-row {
|
||||
@@ -254,7 +254,7 @@
|
||||
align-items: center;
|
||||
flex: 1 1 0;
|
||||
min-width: 60px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -275,7 +275,7 @@
|
||||
border: 1px solid colors.$border;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
font-size: 12px;
|
||||
font-weight: fonts.$font-medium;
|
||||
margin-bottom: 2px;
|
||||
@@ -283,14 +283,14 @@
|
||||
|
||||
&__timeline-section-dur {
|
||||
margin-top: 2px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__timeline-transit {
|
||||
flex-shrink: 0;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
font-weight: fonts.$font-medium;
|
||||
font-size: 13px;
|
||||
padding: 0 vars.$space-s;
|
||||
@@ -316,12 +316,12 @@
|
||||
}
|
||||
|
||||
&__timeline-station-city {
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
font-weight: fonts.$font-medium;
|
||||
}
|
||||
|
||||
&__timeline-station-terminal {
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-right: 1px solid colors.$border;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
transition: color 120ms ease;
|
||||
fill: currentColor;
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../../../styles/colors" as colors;
|
||||
|
||||
.week-tabs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
@@ -10,7 +12,7 @@
|
||||
&__nav {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
font-size: 18px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../../styles/colors" as colors;
|
||||
|
||||
.city-autocomplete-popup {
|
||||
position: absolute;
|
||||
width: 630px;
|
||||
@@ -94,7 +96,7 @@
|
||||
margin-bottom: 8px;
|
||||
|
||||
.city--item {
|
||||
color: #8a8a8a;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -108,18 +108,18 @@
|
||||
|
||||
&__title {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
|
||||
&__city {
|
||||
font-size: 14px;
|
||||
font-weight: fonts.$font-medium;
|
||||
color: #1c2330;
|
||||
color: colors.$text-color;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: colors.$light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user