Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

buttons css

master
Boris Voropaev 2023-08-29 11:17:39 +03:00
parent 22c474aeae
commit fe2cbaf79b
14 changed files with 79 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/_modules/layout/footer/footer.component.scss
View File

@ -6,6 +6,7 @@
display: flex;
flex-direction: column;
.block{
a {cursor: pointer;}
display: flex;
div{
display: block;

13
src/app/_modules/layout/header/header.component.html
View File

@ -24,10 +24,11 @@
<div class="grid-menu">
<button class="close" (click)="showBottom=false"></button>
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
</div>
<div class="right">
<button>АИС СЦ ВНИИГАЗ</button>
</div>
</div>
</div>
<div class="right" style="position: relative;">
<button>АИС СЦ ВНИИГАЗ</button>
<header-user-bar *ngIf="user" [user]="user"></header-user-bar>
</div>
</div>
</div>
<header-user-bar *ngIf="user" [user]="user"></header-user-bar>

11
src/app/_modules/layout/header/header.component.scss
View File

@ -58,7 +58,7 @@
@media screen and (min-width: 961px){
.header {
.header{
.top{
.limiter{
.main-menu-btn{
@ -71,7 +71,8 @@
}
}
}
.bottom { display: flex;
.bottom {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: normal;
@ -87,8 +88,6 @@
background-size: contain;
;
}
.grid-menu{
display: flex;
.close{
@ -121,6 +120,7 @@
header-user-bar{
position: absolute;
right: 0;
bottom: -96px;
}
}
@ -242,5 +242,4 @@
}
}
}
}
}

7
src/app/_modules/layout/header/user-bar/header-user-bar.component.html
View File

@ -11,6 +11,13 @@
<li (click)="logout()">Выход из системы</li>
</ul>
</div>
<div class="name">
{{user.name}}
</div>
<div class="toggle">
</div>
</div>
<!--div class="user" *ngIf="user">

56
src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
View File

@ -1,12 +1,19 @@
.user {
width: 100px;
height: 100px;
position: relative;
display: flex;
padding: 11px;
height: 64px;
justify-content: center;
background-color: #fff;
border-radius: 32px;
border: 1px solid #C0C0C0;
.avatar {
width: 40px;
height: 40px;
color: #86898E;
background: #CFD1D4;
width: 38px;
height: 38px;
color: var(--blue-1);
border: 1px solid var(--blue-1);
background: #fff;
border-radius: 100%;
display: flex;
justify-content: center;
@ -23,6 +30,17 @@
}
}
.name{
margin: 8px 4px 0 12px;
color: #2D2D2D
}
.toggle{
height: 24px;
width: 24px;
background: url("~src/assets/images/icons/arrow_drop_down_grey_24dp.svg") no-repeat center;
margin-top: 7px;
}
.dropdown {
display: none;
}
@ -31,25 +49,20 @@
.dropdown {
display: block;
width: 250px;
right: -24px;
top: calc(100% + 8px);
position: absolute;
background-color: #ffffff;
border: #dedede solid 1px;
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
right: 12px;
top: 42px;
z-index: 1;
border-radius: 8px;
ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
border-radius: 8px;
border-radius: 12px;
li {
display: block;
padding: 12px 16px;
color: #000000;
padding: 12px 20px;
color: #2D2D2D;
cursor: pointer;
border-bottom: #E0E0E0 solid 1px;
white-space: nowrap;
@ -74,16 +87,7 @@
display: none;
}
&:before {
position: absolute;
top: -21px;
right: 0;
width: 84px;
height: 24px;
background: url("~src/assets/images/triangle.png") no-repeat center;
z-index: 2;
content: '';
}
}
}

2
src/assets/images/icons/arrow_downward_24dp.svg
View File

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="#86898E"/>
<path d="M12 20L4 12L5.4 10.575L11 16.175V4H13V16.175L18.6 10.575L20 12L12 20Z" fill="#0070BA"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 B

After

Width:  |  Height:  |  Size: 202 B

3
src/assets/images/icons/arrow_drop_down_grey_24dp.svg Normal file
View File

@ -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="#6C6C6C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

2
src/assets/images/icons/arrow_upward_24dp.svg
View File

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="#86898E"/>
<path d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="#0070BA"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 B

After

Width:  |  Height:  |  Size: 200 B

2
src/assets/images/icons/edit_24dp.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5 19H6.4L15.025 10.375L13.625 8.975L5 17.6V19ZM19.3 8.925L15.05 4.725L16.45 3.325C16.8333 2.94167 17.3042 2.75 17.8625 2.75C18.4208 2.75 18.8917 2.94167 19.275 3.325L20.675 4.725C21.0583 5.10833 21.2583 5.57083 21.275 6.1125C21.2917 6.65417 21.1083 7.11667 20.725 7.5L19.3 8.925ZM17.85 10.4L7.25 21H3V16.75L13.6 6.15L17.85 10.4ZM14.325 9.675L13.625 8.975L15.025 10.375L14.325 9.675Z"
fill="#86898E"/>
fill="#0070BA"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

2
src/assets/images/icons/trash_24dp.svg
View File

@ -1,5 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 2H10V4H5H4V6H5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6H20V4H19H14V2ZM7 6H17V19H7V6ZM11 17V8H9V17H11ZM13 17V8H15V17H13Z"
fill="#86898E"/>
fill="#0070BA"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 333 B

5
src/assets/images/icons/trash_grey_24dp.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 2H10V4H5H4V6H5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V6H20V4H19H14V2ZM7 6H17V19H7V6ZM11 17V8H9V17H11ZM13 17V8H15V17H13Z"
fill="#86898E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

2
src/assets/images/icons/visibility_off_24dp.svg
View File

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1418 3.444L17.7275 2.02979L14.4773 5.28005C13.6811 5.09682 12.8519 5 12.0001 5C7.33615 5 3.35014 7.90264 1.75 12C2.28681 13.3746 3.09213 14.6147 4.10149 15.6558L2.02977 17.7276L3.44398 19.1418L19.1418 3.444ZM5.51567 14.2417L8.00771 11.7496C8.13183 9.73992 9.73992 8.13183 11.7496 8.00771L12.7283 7.02904C12.4881 7.0098 12.2452 7 12.0001 7C8.46917 7 5.40907 9.03403 3.93508 12C4.34647 12.8278 4.88142 13.583 5.51567 14.2417ZM15.4461 9.96792L13.9322 11.4818C13.9764 11.6471 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6471 13.9764 11.4818 13.9322L9.96792 15.4461C10.5635 15.798 11.2581 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2581 15.798 10.5635 15.4461 9.96792ZM12.0001 17C10.9281 17 9.89958 16.8125 8.94561 16.4684L7.41312 18.0009C8.80934 18.6423 10.363 19 12.0001 19C16.6641 19 20.6501 16.0974 22.2502 12C21.4657 9.99122 20.1078 8.2696 18.3776 7.03639L16.9391 8.4749C18.2681 9.34873 19.3522 10.5653 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17Z" fill="#86898E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1418 3.444L17.7275 2.02979L14.4773 5.28005C13.6811 5.09682 12.8519 5 12.0001 5C7.33615 5 3.35014 7.90264 1.75 12C2.28681 13.3746 3.09213 14.6147 4.10149 15.6558L2.02977 17.7276L3.44398 19.1418L19.1418 3.444ZM5.51567 14.2417L8.00771 11.7496C8.13183 9.73992 9.73992 8.13183 11.7496 8.00771L12.7283 7.02904C12.4881 7.0098 12.2452 7 12.0001 7C8.46917 7 5.40907 9.03403 3.93508 12C4.34647 12.8278 4.88142 13.583 5.51567 14.2417ZM15.4461 9.96792L13.9322 11.4818C13.9764 11.6471 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6471 13.9764 11.4818 13.9322L9.96792 15.4461C10.5635 15.798 11.2581 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2581 15.798 10.5635 15.4461 9.96792ZM12.0001 17C10.9281 17 9.89958 16.8125 8.94561 16.4684L7.41312 18.0009C8.80934 18.6423 10.363 19 12.0001 19C16.6641 19 20.6501 16.0974 22.2502 12C21.4657 9.99122 20.1078 8.2696 18.3776 7.03639L16.9391 8.4749C18.2681 9.34873 19.3522 10.5653 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17Z" fill="#0070BA"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/assets/images/icons/visibility_on_24dp.svg
View File

@ -1,6 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_683_11220)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 17C8.46917 17 5.40907 14.966 3.93508 12C5.40907 9.03403 8.46917 7 12.0001 7C15.5311 7 18.5912 9.03403 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17ZM12.0001 5C16.6641 5 20.6501 7.90265 22.2502 12C20.6501 16.0974 16.6641 19 12.0001 19C7.33615 19 3.35014 16.0974 1.75 12C3.35014 7.90264 7.33615 5 12.0001 5ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#86898E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 17C8.46917 17 5.40907 14.966 3.93508 12C5.40907 9.03403 8.46917 7 12.0001 7C15.5311 7 18.5912 9.03403 20.0652 12C18.5912 14.966 15.5311 17 12.0001 17ZM12.0001 5C16.6641 5 20.6501 7.90265 22.2502 12C20.6501 16.0974 16.6641 19 12.0001 19C7.33615 19 3.35014 16.0974 1.75 12C3.35014 7.90264 7.33615 5 12.0001 5ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#0070BA"/>
</g>
<defs>
<clipPath id="clip0_683_11220">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 865 B

After

Width:  |  Height:  |  Size: 865 B

26
src/styles.scss
View File

@ -35,25 +35,29 @@ a {
display: flex;
.block {
margin: 12px 0;
background: #F7F8FA;
border: 1px solid #CFD1D4;
border-radius: 4px;
background: #fff;
border: 1px solid #C0C0C0;
border-radius: 12px;
padding: 12px 24px;
display: flex;
column-gap: 20px;
button {
background-position: center;
background-repeat: no-repeat;
padding: 0;
background-color: #ffffff;
border: none;
border-radius: 0;
&.up, &.down, &.edit, &.publish, &.unpublish, &.delete {
width: 24px;
height: 24px;
background-position: center;
background-repeat: no-repeat;
}
&.up {background: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
&.down {background: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
&.edit {background: url("~src/assets/images/icons/edit_24dp.svg");}
&.publish {background: url("~src/assets/images/icons/visibility_on_24dp.svg");}
&.unpublish {background: url("~src/assets/images/icons/visibility_off_24dp.svg");}
&.delete {background: url("~src/assets/images/icons/trash_24dp.svg");}
&.up {background-image: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
&.down {background-image: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
&.edit {background-image: url("~src/assets/images/icons/edit_24dp.svg");}
&.publish {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");}
&.unpublish {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");}
&.delete {background-image: url("~src/assets/images/icons/trash_24dp.svg");}
}
}
}