task 17081 | сделал "Какие заказы доступны"
This commit is contained in:
web_103.2 committed
1 parent
5026edff9b
commit
42c29094c6
6 files changed
+932
No files matched your search
@@ -7847,3 +7847,432 @@ h4 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-orders {
|
||||
--orders-heading: #172d38;
|
||||
--orders-text: #595757;
|
||||
--orders-accent: #ae001b;
|
||||
box-sizing: border-box;
|
||||
width: min(1280px, calc(100% - 40px));
|
||||
margin: var(--space-section) auto 0;
|
||||
color: var(--orders-heading);
|
||||
font-family: "Onest", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.delivery-orders *,
|
||||
.delivery-orders *::before,
|
||||
.delivery-orders *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.delivery-orders__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delivery-orders__title {
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 62px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
.delivery-orders__description {
|
||||
margin: 0;
|
||||
color: var(--orders-text);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: 396px 285px;
|
||||
grid-auto-rows: 396px;
|
||||
gap: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.delivery-orders__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.delivery-orders__card {
|
||||
--blur-start: 229px;
|
||||
--blur-end: 462px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(#f5f5f9, #f9f9f9);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.delivery-orders__card::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 0;
|
||||
background: rgb(174 0 27 / 50%);
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transition: opacity 180ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image--cover {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delivery-orders__card:not(a) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.delivery-orders__image--food {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 537px;
|
||||
height: 732px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries-backdrop {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 414px;
|
||||
height: 421px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries {
|
||||
top: 0;
|
||||
left: -118px;
|
||||
width: 710px;
|
||||
height: 396px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--parcels {
|
||||
bottom: 0;
|
||||
left: -403px;
|
||||
width: 1409px;
|
||||
height: 786px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--documents {
|
||||
bottom: -229px;
|
||||
left: -11px;
|
||||
width: 1296px;
|
||||
height: 723px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur,
|
||||
.delivery-orders__blur > span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span {
|
||||
--blur-step: calc((var(--blur-end) - var(--blur-start)) / 4);
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
mask-image: linear-gradient(
|
||||
transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)),
|
||||
#000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1))
|
||||
);
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(1) {
|
||||
--blur-index: 0;
|
||||
--blur-radius: 1.8px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(2) {
|
||||
--blur-index: 1;
|
||||
--blur-radius: 3.6px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(3) {
|
||||
--blur-index: 2;
|
||||
--blur-radius: 5.4px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(4) {
|
||||
--blur-index: 3;
|
||||
--blur-radius: 7.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries {
|
||||
--blur-start: 233px;
|
||||
--blur-end: 423px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels {
|
||||
--blur-start: 236px;
|
||||
--blur-end: 428px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents {
|
||||
--blur-start: 151px;
|
||||
--blur-end: 364px;
|
||||
}
|
||||
|
||||
.delivery-orders__shade {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 163px;
|
||||
background: linear-gradient(transparent, #000);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__shade {
|
||||
height: 187px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__shade {
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.delivery-orders__copy {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 95px;
|
||||
bottom: 32px;
|
||||
left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card-title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: -0.26px;
|
||||
}
|
||||
|
||||
.delivery-orders__card-description {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__copy {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__card-description {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels .delivery-orders__copy {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
right: 103px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
right: 33px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--orders-accent);
|
||||
transition: color 180ms ease, background-color 180ms ease;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active)::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow {
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delivery-orders__card:focus-visible {
|
||||
outline: 3px solid var(--orders-accent);
|
||||
outline-offset: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.delivery-orders__title {
|
||||
font-size: 40px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
grid-template-rows: none;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 340px;
|
||||
height: 300px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 120px;
|
||||
--blur-end: 300px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 22px;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.delivery-orders__grid.is-grid > li {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.delivery-orders__wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
.delivery-orders__copy,
|
||||
.delivery-orders__card--groceries .delivery-orders__copy,
|
||||
.delivery-orders__card--parcels .delivery-orders__copy,
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.delivery-orders {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.delivery-orders__header {
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.delivery-orders__title {
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
.delivery-orders__description {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 278px;
|
||||
height: 218px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 90px;
|
||||
--blur-end: 218px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
.delivery-orders__copy {
|
||||
gap: 8px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__shade {
|
||||
height: 126px;
|
||||
}
|
||||
.delivery-orders__arrow,
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.delivery-orders__arrow svg {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.delivery-orders__card::after,
|
||||
.delivery-orders__arrow {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user