109 lines
2.4 KiB
SCSS
109 lines
2.4 KiB
SCSS
@use "../../../styles/colors" as colors;
|
||
|
||
.day-grouped-flight-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
|
||
&__column-headers {
|
||
display: grid;
|
||
// Match FlightCard schedule grid column widths so labels align
|
||
// with their data columns.
|
||
grid-template-columns: 80px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px;
|
||
gap: 16px;
|
||
padding: 14px 24px;
|
||
color: colors.$light-gray;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
border-bottom: 1px solid colors.$border;
|
||
|
||
// The first two header labels span the first two grid columns.
|
||
> span:nth-child(1) { grid-column: 1; }
|
||
> span:nth-child(2) { grid-column: 2 / span 2; }
|
||
> span:nth-child(3) { grid-column: 4 / span 1; } // ВЫЛЕТ over dep-station
|
||
> span:nth-child(4) { grid-column: 5 / span 1; } // ВРЕМЯ В ПУТИ over duration
|
||
> span:nth-child(5) { grid-column: 7 / span 1; } // ПРИЛЕТ over arr-station
|
||
}
|
||
|
||
&__col-sortable {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
&__sort-group {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
&__sort {
|
||
background: transparent;
|
||
border: 0;
|
||
padding: 1px 2px;
|
||
cursor: pointer;
|
||
color: colors.$border-blue;
|
||
line-height: 0;
|
||
border-radius: 2px;
|
||
|
||
&:hover { color: colors.$blue; }
|
||
&--active { color: colors.$blue; }
|
||
}
|
||
|
||
&__group {
|
||
border: 1px solid colors.$border;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background: colors.$white;
|
||
}
|
||
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 18px;
|
||
background: colors.$blue-extra-light;
|
||
border-bottom: 1px solid colors.$border;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
background: colors.$blue-extra-light;
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: 2px solid colors.$blue;
|
||
outline-offset: -2px;
|
||
}
|
||
}
|
||
|
||
&__weekday {
|
||
color: colors.$light-gray;
|
||
font-size: 13px;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
&__date {
|
||
margin: 0;
|
||
color: colors.$blue-dark;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&__chevron {
|
||
margin-left: auto;
|
||
color: colors.$blue;
|
||
transition: transform 150ms ease;
|
||
|
||
&--collapsed {
|
||
transform: rotate(-90deg);
|
||
}
|
||
}
|
||
|
||
&__group--collapsed &__header {
|
||
border-bottom: none;
|
||
}
|
||
}
|