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 |
Reference in New Issue
Block a user