0.0.29 forms
This commit is contained in:
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
static/v2/icons/widgets/w_route_card/car.svg
Normal file
3
static/v2/icons/widgets/w_route_card/car.svg
Normal 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 |
3
static/v2/icons/widgets/w_route_card/plane.svg
Normal file
3
static/v2/icons/widgets/w_route_card/plane.svg
Normal 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 |
@@ -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>
|
||||
Reference in New Issue
Block a user