128 lines
2.4 KiB
Plaintext
128 lines
2.4 KiB
Plaintext
.idm-search-hotspot-tab {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.6rem;
|
|
|
|
@media @laptop {
|
|
gap: 3.2rem;
|
|
}
|
|
|
|
& .bmFavourites {
|
|
display: none;
|
|
}
|
|
|
|
&__search-wrapper {
|
|
width: 100%;
|
|
background-color: @idm-tabs__secondary-background-gray;
|
|
border-radius: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.6rem;
|
|
padding: 1.6rem 2.4rem;
|
|
}
|
|
|
|
&__search {
|
|
line-height: @idm-tabs__lineheight-l;
|
|
font-size: @idm-tabs__mobile-body-medium;
|
|
border: none;
|
|
width: 100%;
|
|
background: transparent;
|
|
font-weight: @idm-tabs__weight-bold;
|
|
color: @idm-tabs__primary-black;
|
|
|
|
&::placeholder {
|
|
color: @idm-tabs__primary-black;
|
|
}
|
|
}
|
|
|
|
&__search-icon-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
& .products {
|
|
gap: 4.8rem !important;
|
|
}
|
|
|
|
& .product {
|
|
&__name {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 150%;
|
|
max-height: calc(1.5em * 2);
|
|
}
|
|
|
|
&--hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -2.4rem;
|
|
top: 0;
|
|
height: 80%;
|
|
width: 1px; // Wpisane na sztywno (divider-thin)
|
|
background-color: @idm-tabs__secondary-outline-gray;
|
|
z-index: 67;
|
|
}
|
|
|
|
&:nth-child(2n)::after {
|
|
display: none;
|
|
@media @tablet {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4n)::after {
|
|
@media @tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
bottom: -2.4rem;
|
|
left: 0;
|
|
background-color: @idm-tabs__secondary-outline-gray;
|
|
height: 1px;
|
|
}
|
|
|
|
// mobile
|
|
&:nth-child(2n + 1)::before {
|
|
display: block;
|
|
width: calc(200% + 4.8rem);
|
|
@media @tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// desktop
|
|
&:nth-child(4n - 3):before {
|
|
@media @tablet {
|
|
display: block;
|
|
width: calc(400% + 3 * 4.8rem);
|
|
}
|
|
}
|
|
|
|
&:nth-last-child(-n + 4)::before {
|
|
@media @tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|