0.0.29 forms

This commit is contained in:
SBD
2025-01-14 20:09:16 +03:00
parent a0b08a9a94
commit 8484e48c56
4 changed files with 142 additions and 9 deletions

View File

@@ -2,7 +2,11 @@
padding: 20px;
--route-card-bg: #FFFFFF;
--route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
--route-text-color: #000000;
--route-text-color: #272424;
--big-font-size: 16px;
--medium-font-size: 14px;
--small-font-size: 12px;
--route-text-container-bg: #F1F1F1;
--route-text-container-padding: 15px;
@@ -11,15 +15,16 @@
--route-text-img-filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(256%) hue-rotate(113deg) brightness(115%) contrast(89%);
--route-card-owner-avatar-size: 52px;
--route-owner-name-font-size: 16px;
--route-owner-type-font-size: 14px;
--route-owner-type-color: #065BFF;
--route-cargo-type-color: #000000;
--route-cargo-type-color: #272424;
--route_card_route_data-margin-top: 30px;
background: var(--route-card-bg);
box-shadow: var(--route-card-box_shadow);
border-radius: 10px;
color: var(--route-text-color);
.route_card_info_data{
position: relative;
@@ -60,7 +65,7 @@
gap: 10px;
.card_owner_name{
font-weight: 600;
font-size: var(--route-owner-name-font-size);
font-size: var(--big-font-size);
}
.card_splitter{
height: 22px;
@@ -68,7 +73,7 @@
background: #E6E6E6;
}
.card_owner_type{
font-size: var(--route-owner-type-font-size);
font-size: var(--medium-font-size);
color: var(--route-owner-type-color);
font-weight: 600;
}
@@ -76,7 +81,7 @@
display: flex;
align-items: center;
gap: 5px;
font-size: var(--route-owner-type-font-size);
font-size: var(--medium-font-size);
color: var(--route-cargo-type-color);
font-weight: 600;
@@ -85,4 +90,94 @@
}
}
}
.route_card_route_data{
margin-top: var(--route_card_route_data-margin-top);
display: flex;
justify-content: space-between;
gap: 60px;
.from_to_place_data{
.label{
color: #27242499;
font-size: var(--big-font-size);
font-weight: 600;
margin-bottom: 10px;
&.departure_from{
text-align: left;
} &.arrival_to{
text-align: right;
}
}
.place{
display: flex;
align-items: center;
gap: 10px;
.country{
display: flex;
align-items: center;
gap: 5px;
img{
width: 24px;
height: 12px;
display: block;
object-fit: contain;
}
.country_code{
color: #27242499;
font-size: var(--medium-font-size);
}
}
.place_title{
font-size: var(--big-font-size);
font-weight: 800;
color: #272424;
}
}
}
.route_way_data{
flex-grow: 1;
.route_transport{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
.route_transport_name{
font-size: var(--medium-font-size);
font-weight: 600;
}
img{
height: 12px;
display: block;
}
}
.way_progress_line_container{
position: relative;
width: 100%;
.way_progress_round{
height: 20px;
width: 20px;
background: #FFFFFF;
border-radius: 100%;
position: absolute;
top: -10px;
&:first-of-type{
border: 3px solid #065BFF;
left: 0;
}
&:last-of-type{
border: 3px solid #45C226;
right: 0;
}
}
.way_progress_line{
width: calc(100% - 10px);
margin-left: 10px;
height: 4px;
background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%);
}
}
}
}
}

View File

@@ -0,0 +1,3 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2667 1.19438C13.1 0.78875 12.6333 0.5 12.0833 0.5H2.91667C2.36667 0.5 1.90833 0.78875 1.73333 1.19438L0.0916666 5.0925C0.0333332 5.23688 0 5.38812 0 5.54625V10.4688C0 11.0394 0.558333 11.5 1.25 11.5C1.94167 11.5 2.5 11.0394 2.5 10.4688V10.125H12.5V10.4688C12.5 11.0325 13.0583 11.5 13.75 11.5C14.4333 11.5 15 11.0394 15 10.4688V5.54625C15 5.395 14.9667 5.23688 14.9083 5.0925L13.2667 1.19438ZM2.91667 8.0625C2.225 8.0625 1.66667 7.60187 1.66667 7.03125C1.66667 6.46063 2.225 6 2.91667 6C3.60833 6 4.16667 6.46063 4.16667 7.03125C4.16667 7.60187 3.60833 8.0625 2.91667 8.0625ZM12.0833 8.0625C11.3917 8.0625 10.8333 7.60187 10.8333 7.03125C10.8333 6.46063 11.3917 6 12.0833 6C12.775 6 13.3333 6.46063 13.3333 7.03125C13.3333 7.60187 12.775 8.0625 12.0833 8.0625ZM1.66667 4.625L2.725 1.99875C2.84167 1.72375 3.15833 1.53125 3.51667 1.53125H11.4833C11.8417 1.53125 12.1583 1.72375 12.275 1.99875L13.3333 4.625H1.66667Z" fill="#FF613A"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.58 2.6369L9.38918 4.6973L11.4757 10.4351L9.9108 12L6.79412 7.43581L5.21621 8.87027V10.4351L3.65135 12L2.72547 9.26801L0 8.34865L1.56486 6.78379H3.12973L4.69459 5.21892L0 2.0892L1.56486 0.524336L7.30269 2.61082L9.36962 0.426532L9.32398 0.459133C9.61796 0.165155 10.0167 0 10.4324 0C10.8482 0 11.2469 0.165155 11.5409 0.459133C11.8348 0.753111 12 1.15183 12 1.56758C12 1.98333 11.8348 2.38204 11.5409 2.67602L11.58 2.6369Z" fill="#FF613A"/>
</svg>

After

Width:  |  Height:  |  Size: 555 B

View File

@@ -21,8 +21,40 @@
</div>
</div>
<div class="route_card_route_data">
<div class="">
<div class="from_to_place_data">
<div class="label departure_from">{% trans "Забрать из:" %}</div>
<div class="place">
<div class="country">
<img src="{% static "v2/icons/widgets/w_select_country/flag_of_belarus_temp.svg" %}" alt="">
<div class="country_code">BY</div>
</div>
<div class="place_title">
Минск/Беларусь
</div>
</div>
</div>
<div class="route_way_data">
<div class="route_transport">
<div class="route_transport_name">Авиаперевозка</div>
<img src="{% static "v2/icons/widgets/w_route_card/plane.svg" %}" alt="">
</div>
<div class="way_progress_line_container">
<div class="way_progress_round"></div>
<div class="way_progress_line"></div>
<div class="way_progress_round"></div>
</div>
</div>
<div class="from_to_place_data">
<div class="label arrival_to">{% trans "Доставить в:" %}</div>
<div class="place">
<div class="country">
<img src="{% static "v2/icons/widgets/w_select_country/flag_of_belarus_temp.svg" %}" alt="">
<div class="country_code">BY</div>
</div>
<div class="place_title">
Минск/Беларусь
</div>
</div>
</div>
</div>
</div>