126 lines
2.3 KiB
SCSS
126 lines
2.3 KiB
SCSS
@use "../../styles/variables" as vars;
|
|
@use "../../styles/colors" as colors;
|
|
@use "../../styles/fonts" as fonts;
|
|
@use "../../styles/shadows" as shadows;
|
|
@use "../../styles/screen" as screen;
|
|
|
|
.search-history {
|
|
margin: vars.$space-xl 0;
|
|
|
|
@include screen.smTablet {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@include screen.mobile {
|
|
margin-top: vars.$space-m;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.p-accordion-header {
|
|
a {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: colors.$blue;
|
|
padding: 0 vars.$space-l 0 vars.$space-xl;
|
|
height: vars.$button-height;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: fonts.$font-bold;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
.p-header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&.p-highlight a {
|
|
background-color: colors.$white;
|
|
color: colors.$text-color;
|
|
}
|
|
}
|
|
|
|
.p-accordion-content {
|
|
padding: vars.$space-s 0 vars.$space-l;
|
|
}
|
|
|
|
&__content {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.arrow-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 12px;
|
|
height: 8px;
|
|
transition: transform 0.2s ease;
|
|
color: currentColor;
|
|
|
|
svg {
|
|
width: 12px;
|
|
height: 8px;
|
|
}
|
|
|
|
&--rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-history-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: vars.$space-m;
|
|
padding: vars.$space-m vars.$space-xl;
|
|
cursor: pointer;
|
|
border-top: 1px solid colors.$border;
|
|
transition: background-color 150ms ease;
|
|
|
|
&:hover {
|
|
background-color: rgba(46, 87, 255, 0.04);
|
|
}
|
|
|
|
&:hover .search-history-item__icon {
|
|
color: colors.$blue;
|
|
}
|
|
|
|
&__icon {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
color: colors.$light-gray;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
&__data {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 12px;
|
|
color: colors.$light-gray;
|
|
}
|
|
|
|
&__city {
|
|
font-size: 14px;
|
|
font-weight: fonts.$font-medium;
|
|
color: colors.$text-color;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
&__date {
|
|
font-size: 12px;
|
|
color: colors.$light-gray;
|
|
}
|
|
}
|