Content Styling CSS
Boris Voropaev
parent
d6eacbf3ea
commit
baeb14b37d
|
|
@ -1,8 +1,8 @@
|
|||
.add {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
margin-bottom: 24px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
|
||||
.toggle {
|
||||
|
|
@ -16,15 +16,31 @@
|
|||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--white) url("~src/assets/images/icons/add_cirle_24.svg") no-repeat center;
|
||||
background: var(--white) url("~src/assets/images/icons/add_cirle_24dp.svg") no-repeat center;
|
||||
content: '';
|
||||
z-index: 0;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
&.active::after{
|
||||
transform: rotate(180deg);
|
||||
&:hover{
|
||||
&:before{
|
||||
background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg");
|
||||
}
|
||||
&:after{
|
||||
background-image: url("~src/assets/images/icons//arrow_drop_down_active_24dp.svg");
|
||||
};
|
||||
color: var(--blue-3);
|
||||
}
|
||||
&.active{
|
||||
&:before{
|
||||
background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg");
|
||||
}
|
||||
&:after{
|
||||
transform: rotate(180deg);
|
||||
background-image: url("~src/assets/images/icons//arrow_drop_down_active_24dp.svg");
|
||||
};
|
||||
color: var(--blue-3);
|
||||
}
|
||||
&:after {
|
||||
display: inline-block;
|
||||
|
|
@ -97,7 +113,7 @@
|
|||
.sub-row {
|
||||
padding: 12px 16px 12px 32px;
|
||||
border-bottom: #E0E0E0 solid 1px;
|
||||
color: var(--grey-4);
|
||||
color: #6C6C6C;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
a {
|
||||
display: inline-block;
|
||||
margin: 0 16px 16px 0;
|
||||
padding: 11px 24px;
|
||||
background-color: #F9B417;
|
||||
border-radius: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
<div class="contact">
|
||||
<h2 [innerText]="name"></h2>
|
||||
<h2>Юридический адрес</h2>
|
||||
<p *ngIf="legalAddress" class="legal-address" [innerText]="legalAddress"></p>
|
||||
<h2>Фактический адрес</h2>
|
||||
<p *ngIf="locationAddress" class="local-address" [innerText]="locationAddress"></p>
|
||||
<h2>Email</h2>
|
||||
<p *ngIf="email" class="email"><a href="mailto:{{email}}">{{email}}</a></p>
|
||||
<h2>Телефон</h2>
|
||||
<p *ngIf="phone" class="phone" [innerText]="phone"></p>
|
||||
<h2>Информация</h2>
|
||||
<div *ngIf="description" [innerHTML]="description"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,35 +2,18 @@
|
|||
margin-bottom: 40px;
|
||||
|
||||
h2 {
|
||||
color: var(--grey-7);
|
||||
font-size: 1.5rem;
|
||||
line-height: 30px;
|
||||
font-weight: 400;
|
||||
color: #2D2D2D;
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
&:before {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.legal-address:before {
|
||||
background-image: url("~src/assets/images/icons/location_orange_24dp.svg");
|
||||
}
|
||||
&.local-address:before {
|
||||
background-image: url("~src/assets/images/icons/mail_orange_24dp.svg");
|
||||
}
|
||||
&.email:before {
|
||||
background-image: url("~src/assets/images/icons/email_orange_24dp.svg");
|
||||
}
|
||||
&.phone:before {
|
||||
background-image: url("~src/assets/images/icons/phone_orange_24dp.svg");
|
||||
}
|
||||
p{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,6 @@
|
|||
color: var(--blue-3);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,6 +96,21 @@ span.link {
|
|||
.op-63{
|
||||
opacity: 0.63;
|
||||
}
|
||||
html-section ul{
|
||||
padding: 0;
|
||||
>li{
|
||||
list-style: none;
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--blue-1);
|
||||
margin-bottom: 5px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1240px) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
button {
|
||||
button, .btn, a.btn {
|
||||
display: inline-flex;
|
||||
padding: 8px 24px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#004077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 15L7 10H17L12 15Z" fill="#004077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 152 B |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
|
||||
<path d="M8.5 2C8.5 1.17157 9.17157 0.5 10 0.5H41.7929L51.5 10.2071V58C51.5 58.8284 50.8284 59.5 50 59.5H10C9.17157 59.5 8.5 58.8284 8.5 58V2Z" fill="white" stroke="#C0C0C0"/>
|
||||
<path d="M42 0L52 10H44C42.8954 10 42 9.10457 42 8V0Z" fill="#C0C0C0"/>
|
||||
<rect x="29" y="31" width="13" height="2" fill="#C0C0C0"/>
|
||||
<rect x="29" y="37" width="13" height="2" fill="#C0C0C0"/>
|
||||
<rect x="18" y="43" width="24" height="2" fill="#C0C0C0"/>
|
||||
<rect x="18" y="49" width="13" height="2" fill="#C0C0C0"/>
|
||||
<rect x="19" y="32" width="6" height="6" stroke="#C0C0C0" stroke-width="2"/>
|
||||
<rect x="4" y="9" width="34" height="14" fill="#FF484A"/>
|
||||
<path d="M4 23H8V27L4 23Z" fill="#C44139"/>
|
||||
<path d="M12.5264 12.3769C12.7904 12.3183 13.08 12.2743 13.3954 12.2449C13.7107 12.2083 14.026 12.1899 14.3414 12.1899C14.6787 12.1899 15.0087 12.2229 15.3314 12.2889C15.6614 12.3476 15.9547 12.4686 16.2114 12.6519C16.468 12.8353 16.677 13.0956 16.8384 13.4329C16.9997 13.7629 17.0804 14.1956 17.0804 14.7309C17.0804 15.2149 17.0107 15.6256 16.8714 15.9629C16.7394 16.3003 16.5597 16.5753 16.3324 16.7879C16.105 17.0006 15.841 17.1546 15.5404 17.2499C15.247 17.3453 14.9427 17.3929 14.6274 17.3929C14.598 17.3929 14.5504 17.3929 14.4844 17.3929C14.4184 17.3929 14.3487 17.3929 14.2754 17.3929C14.202 17.3856 14.1287 17.3783 14.0554 17.3709C13.9894 17.3636 13.9417 17.3563 13.9124 17.3489V19.9999H12.5264V12.3769ZM13.9124 16.1059C13.9564 16.1206 14.037 16.1353 14.1544 16.1499C14.279 16.1573 14.3634 16.1609 14.4074 16.1609C14.5687 16.1609 14.7227 16.1389 14.8694 16.0949C15.016 16.0509 15.1444 15.9776 15.2544 15.8749C15.3717 15.7649 15.4634 15.6183 15.5294 15.4349C15.5954 15.2443 15.6284 15.0059 15.6284 14.7199C15.6284 14.4779 15.5954 14.2726 15.5294 14.1039C15.4707 13.9353 15.3864 13.8033 15.2764 13.7079C15.1737 13.6053 15.0527 13.5319 14.9134 13.4879C14.774 13.4439 14.6274 13.4219 14.4734 13.4219C14.246 13.4219 14.059 13.4403 13.9124 13.4769V16.1059Z" fill="white"/>
|
||||
<path d="M18.8686 12.2999C19.0006 12.2779 19.1472 12.2633 19.3086 12.2559C19.4772 12.2413 19.6459 12.2303 19.8146 12.2229C19.9906 12.2083 20.1592 12.2009 20.3206 12.2009C20.4819 12.1936 20.6249 12.1899 20.7496 12.1899C21.3582 12.1899 21.8642 12.2853 22.2676 12.4759C22.6782 12.6593 23.0046 12.9233 23.2466 13.2679C23.4959 13.6053 23.6719 14.0123 23.7746 14.4889C23.8772 14.9656 23.9286 15.4973 23.9286 16.0839C23.9286 16.6193 23.8772 17.1326 23.7746 17.6239C23.6792 18.1079 23.5069 18.5369 23.2576 18.9109C23.0082 19.2776 22.6709 19.5709 22.2456 19.7909C21.8202 20.0109 21.2849 20.1209 20.6396 20.1209C20.5442 20.1209 20.4159 20.1173 20.2546 20.1099C20.0932 20.1026 19.9246 20.0916 19.7486 20.0769C19.5726 20.0696 19.4039 20.0586 19.2426 20.0439C19.0812 20.0366 18.9566 20.0256 18.8686 20.0109V12.2999ZM20.8926 13.4659C20.7752 13.4659 20.6542 13.4696 20.5296 13.4769C20.4122 13.4769 20.3206 13.4843 20.2546 13.4989V18.8009C20.2766 18.8083 20.3132 18.8156 20.3646 18.8229C20.4232 18.8229 20.4819 18.8266 20.5406 18.8339C20.6066 18.8339 20.6652 18.8376 20.7166 18.8449C20.7752 18.8449 20.8156 18.8449 20.8376 18.8449C21.1676 18.8449 21.4389 18.7679 21.6516 18.6139C21.8642 18.4599 22.0292 18.2546 22.1466 17.9979C22.2712 17.7413 22.3556 17.4479 22.3996 17.1179C22.4509 16.7806 22.4766 16.4286 22.4766 16.0619C22.4766 15.7246 22.4546 15.3983 22.4106 15.0829C22.3739 14.7676 22.2969 14.4926 22.1796 14.2579C22.0696 14.0159 21.9082 13.8253 21.6956 13.6859C21.4902 13.5393 21.2226 13.4659 20.8926 13.4659Z" fill="white"/>
|
||||
<path d="M25.8553 12.2999H29.7053V13.5759H27.2413V15.5779H29.5073V16.8539H27.2413V19.9999H25.8553V12.2999Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -16,9 +16,9 @@
|
|||
font-family: "PT Sans";
|
||||
}
|
||||
|
||||
li {
|
||||
//list-style-image: url("~src/assets/images/icons/add_24dp.svg");
|
||||
}
|
||||
// li {
|
||||
// list-style-image: url("~src/assets/images/icons/add_24dp.svg");
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
// font-weight: 500;
|
||||
|
|
@ -31,7 +31,7 @@ li {
|
|||
.menu {
|
||||
display: flex;
|
||||
.block {
|
||||
margin: 12px 0;
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #C0C0C0;
|
||||
border-radius: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue