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

Form Styling CSS

master
Boris Voropaev 2023-08-29 15:34:44 +03:00
parent 5981c0ebf2
commit d6eacbf3ea
17 changed files with 238 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/_modules/form-fields/types/html/single/field-html-single.component.scss
View File

@ -0,0 +1,8 @@
:host::ng-deep editor{
border-radius: 12px;
border: solid 1px #C0C0C0;
font-family: "PT Sans";
.tox-tinymce{
border:none;
}
}

17
src/app/_modules/form-fields/types/image/form-field-image.component.scss
View File

@ -3,7 +3,7 @@
display: flex;
height: 100px;
padding: 16px;
border: var(--orange-2) dashed 1px;
border: var(--blue-1) dashed 1px;
border-radius: 4px;
overflow: hidden;
&.hover {
@ -62,7 +62,7 @@
.item {
display: flex;
flex-direction: row;
align-items: center;
align-items: start;
.preview {
width: 80px;
height: 80px;
@ -75,17 +75,8 @@
object-fit: cover;
}
}
.remove {
margin-left: 8px;
flex-shrink: 0;
width: 20px;
height: 20px;
background: transparent url("~src/assets/images/icons/close_20dp.svg") 50% 50% no-repeat;
opacity: 0.5;
content: '';
&:hover {
opacity: 1;
}
.trash {
margin-left: 10px;
}
}
}

6
src/app/_modules/form-fields/types/image/multiple/field-image-multiple.component.html
View File

@ -1,6 +1,8 @@
<div class="area" [class.hover]="dragOver">
<input #fileInput multiple="multiple" type="file" accept="image/*" [id]="field.name" (change)="onFileInput($event)" />
<p>Перетащите сюда или <span (click)="fileInput.click()">выберите файл</span> в формате JPEG или PNG общим объемом не более 10 Мбайт.</p>
<p>Перетащите сюда или <a (click)="fileInput.click()">выберите файл</a>
<!-- в формате JPEG или PNG общим объемом не более 10 Мбайт. -->
</p>
<div class="indicator" *ngIf="upload.file">
<div class="label">Загружается файл {{upload.file?.name}}</div>
<div class="progress"><div class="fill" [style.width]="upload.progress + '%'"></div></div>
@ -9,6 +11,6 @@
<div class="values" *ngIf="assets?.length" [sortablejs]="value">
<div class="item" *ngFor="let asset of assets">
<div class="preview"><img [src]="asset.links?.thumb" alt="" /></div>
<button type="button" class="btn icon remove" (click)="removeValue(asset)"></button>
<button type="button" class="btn clear trash" (click)="removeValue(asset)"></button>
</div>
</div>

40
src/app/_modules/form-fields/types/relation/form-field-relation.component.scss
View File

@ -1,16 +1,33 @@
.combobox {
position: relative;
border: solid 1px var(--grey-3);
border-radius: var(--radius-1);
font-family: "PT Sans";
border: solid 1px #C0C0C0;
border-radius: 12px;
font-size: 20px;
color: var(--dark-1);
padding: 8px 12px 8px 16px;
&:hover{
border-color: #6C6C6C;
outline: none;
}
&.active {
border-color: #0070BA;
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
.toggle {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 40px;
padding: 0 12px 0 16px;
font-size: 1rem;
height: 24px;
font-size: 20px;
box-sizing: border-box;
cursor: pointer;
.caption {
@ -37,15 +54,26 @@
}
}
&:after {
display: block;
width: 24px;
height: 20px;
margin-left: auto;
background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
content: "";
transition: transform 0.2s;
}
&:hover:after {
background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
}
}
&.active .toggle:after {
background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
}
.dropdown {

4
src/app/_modules/objects/form/slider/slider-form.component.html
View File

@ -22,8 +22,8 @@
<div *ngIf="noticeVisible" class="notice">* Поля, обязательные для заполнения</div>
</div>
<div class="right">
<button type="button" class="btn secondary" (click)="back()">{{isFirstFrame ? 'Выйти' : 'Назад'}}</button>
<button type="button" class="btn" *ngIf="!btnSaveHidden" (click)="proceed()">{{isLastFrame ? btnSaveLabel : 'Продолжить'}}</button>
<button type="button" class="outline" (click)="back()">{{isFirstFrame ? 'Отмена' : 'Назад'}}</button>
<button type="button" *ngIf="!btnSaveHidden" (click)="proceed()">{{isLastFrame ? btnSaveLabel : 'Продолжить'}}</button>
</div>
</div>
</div>

2
src/app/_modules/pages/sections/add/add-section.component.html
View File

@ -1,5 +1,5 @@
<div class="add">
<div class="toggle" (click)="toggleDD()">Добавить элемент</div>
<div class="toggle" [class.active]="ddVisible" (click)="toggleDD()">Добавить элемент</div>
<div class="dropdown active" [class.active]="ddVisible" (mouseleave)="hideDD()">
<div class="menu">
<div *ngFor="let type of types" class="type">

9
src/app/_modules/pages/sections/add/add-section.component.scss
View File

@ -8,6 +8,7 @@
.toggle {
position: relative;
padding-left: 32px;
color: var(--blue-1);
// background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center;
cursor: pointer;
z-index: 1;
@ -15,13 +16,16 @@
display: inline-block;
width: 24px;
height: 24px;
background: var(--white) url("~src/assets/images/icons/add_circle_24.svg") no-repeat center;
background: var(--white) url("~src/assets/images/icons/add_cirle_24.svg") no-repeat center;
content: '';
z-index: 0;
bottom: -2px;
position: absolute;
left: 0px;
}
&.active::after{
transform: rotate(180deg);
}
&:after {
display: inline-block;
width: 24px;
@ -32,6 +36,9 @@
bottom: -2px;
position: absolute;
right: -28px;
transform: rotate(0deg);
transition: transform .3s;
}
}

1
src/assets/css/basics.scss
View File

@ -49,6 +49,7 @@ h1 {
a {
text-decoration: none;
color: var(--blue-1);
cursor: pointer;
&:hover{
color: var(--blue-3);
};

211
src/assets/css/buttons.scss
View File

@ -30,6 +30,51 @@ button {
border: 1px solid #A1CAE5;
background: #A1CAE5;
}
&.outline{
background:#FFF;
color: #0070BA;
&:hover{
border: 1px solid #005799;
color: #005799;
}
&:active{
border: 1px solid #004077;
color: #004077;
}
&[disabled] {
border: 1px solid #A1CAE5;
color: #A1CAE5;
}
}
&.clear{
padding: 0;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
border-radius: 0;
border: none;
background-color: transparent;
color: var(--dark-1);
font-family: PT Sans Narrow;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 133.333% */
letter-spacing: 100%;
}
&.trash::after {
content: "";
width: 24px;
height: 24px;
background: url('~src/assets/images/icons/trash_grey_24dp.svg') center no-repeat;
}
}
// .inline-menu.default {
@ -51,88 +96,88 @@ button {
// }
// }
.btn {
color: #ffffff;
padding: 11px 24px;
background: var(--orange-2);
border: 1px solid var(--orange-2);
border-radius: 4px;
font-weight: 500;
font-size: 0.875rem;
line-height: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
// .btn {
// color: #ffffff;
// padding: 11px 24px;
// background: var(--orange-2);
// border: 1px solid var(--orange-2);
// border-radius: 4px;
// font-weight: 500;
// font-size: 0.875rem;
// line-height: 18px;
// letter-spacing: 0.02em;
// text-transform: uppercase;
&.with-icon {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 20px 8px 12px;
&:before {
display: block;
width: 24px;
height: 24px;
margin-right: 8px;
background: transparent none 50% 50% no-repeat;
content: "";
}
&.add {
&:before {
//background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg');
}
}
}
&.small {
height: 28px;
padding: 4px 16px;
}
&.danger {
background-color: #db373a;
}
&.secondary {
background-color: var(--white);
color: var(--orange-2);
border: var(--orange-2) solid 1px;
&.danger {
border-color: #db373a;
color: #db373a;
}
}
&.icon {
width: 24px;
height: 24px;
padding: 0;
border-color: transparent;
background: transparent none 50% 50% no-repeat;
//&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');}
//&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');}
&.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');}
&.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
//&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');}
&.checkbox {
display: flex;
width: 18px;
height: 18px;
border: solid 1px #7f7f7f;
border-radius: 2px;
&.checked,&.mixed {
background-color: #2c86cd;
border-color: #2c86cd;
}
&.checked {
//background-image: url('~src/assets/images/icons/checkbox_24dp.svg');
}
&.mixed {
&:before {
display: block;
width: 12px;
height: 2px;
margin: auto;
background-color: #ffffff;
content: "";
}
}
}
}
}
// &.with-icon {
// display: flex;
// flex-direction: row;
// align-items: center;
// padding: 8px 20px 8px 12px;
// &:before {
// display: block;
// width: 24px;
// height: 24px;
// margin-right: 8px;
// background: transparent none 50% 50% no-repeat;
// content: "";
// }
// &.add {
// &:before {
// //background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg');
// }
// }
// }
// &.small {
// height: 28px;
// padding: 4px 16px;
// }
// &.danger {
// background-color: #db373a;
// }
// &.secondary {
// background-color: var(--white);
// color: var(--orange-2);
// border: var(--orange-2) solid 1px;
// &.danger {
// border-color: #db373a;
// color: #db373a;
// }
// }
// &.icon {
// width: 24px;
// height: 24px;
// padding: 0;
// border-color: transparent;
// background: transparent none 50% 50% no-repeat;
// //&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');}
// //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');}
// &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');}
// &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
// //&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');}
// &.checkbox {
// display: flex;
// width: 18px;
// height: 18px;
// border: solid 1px #7f7f7f;
// border-radius: 2px;
// &.checked,&.mixed {
// background-color: #2c86cd;
// border-color: #2c86cd;
// }
// &.checked {
// //background-image: url('~src/assets/images/icons/checkbox_24dp.svg');
// }
// &.mixed {
// &:before {
// display: block;
// width: 12px;
// height: 2px;
// margin: auto;
// background-color: #ffffff;
// content: "";
// }
// }
// }
// }
// }

20
src/assets/css/forms.scss
View File

@ -2,12 +2,22 @@ input, select, textarea {
width: 100%;
height: 40px;
padding: 8px 16px;
border-radius: var(--radius-1);
border: solid 1px var(--grey-3);
font-family: "Open Sans";
font-size: 1rem;
border-radius: 12px;
border: solid 1px #C0C0C0;
font-family: "PT Sans";
font-size: 20px;
color: var(--dark-1);
&:hover{
border-color: #6C6C6C;
outline: none;
}
&:focus, &:focus-visible {
border-color: #111111;
border-color: #0070BA;
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
}

35
src/assets/css/slider.scss
View File

@ -5,7 +5,7 @@
display: flex;
flex-direction: column;
width: 100%;
max-width: 768px;
max-width: 720px;
height: 100%;
background-color: #ffffff;
box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16);
@ -14,9 +14,8 @@
z-index: 110;
.header {
padding: 24px;
border-bottom: 1px solid var(--grey-7);
background-color: #F7F8FA;
padding: 14px 24px;
border-bottom: 1px solid #C0C0C0;
.title {
display: flex;
@ -25,16 +24,22 @@
h2 {
margin: 0;
font-weight: 400;
font-size: 1.5rem;
line-height: 30px;
color: #000000;
font-family: PT Sans Narrow;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 44px; /* 122.222% */
letter-spacing: 0.36px;
color: var(--dark-1);
}
.close {
width: 24px;
height: 24px;
margin-left: auto;
padding: 0;
border: none;
border-radius: 0;
background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat;
}
}
@ -106,7 +111,7 @@
.body {
height: 100%;
padding: 24px;
padding: 32px 24px;
flex-grow: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
@ -117,20 +122,20 @@
flex-direction: row;
align-items: center;
padding: 16px 24px;
background-color: #F7F8FA;
border-top: 1px solid var(--grey-7);
border-top: 1px solid #C0C0C0;
.left {
.reset {
color: #2c86cd;
color: #6C6C6C;
cursor: pointer;
}
.notice {
font-family: PT Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
font-size: 0.875rem;
line-height: 18px;
color: var(--grey-7);
line-height: 24px; /* 150% */
}
}

0
src/assets/images/icons/add_cirle_24.svg → src/assets/images/icons/add_circle_24.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

3
src/assets/images/icons/arrow_drop_down_dark_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="#4D4D4D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

2
src/assets/images/icons/close_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="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="#86898E"/>
<path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="#6C6C6C"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 227 B

2
src/assets/images/icons/trash_grey_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="#C0C0C0"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 333 B

2
src/environments/environment.ts
View File

@ -4,7 +4,7 @@
export const environment = {
production: false,
apiUrl: 'http://api.faufcc.lc',
apiUrl: 'http://api.vniigazv2.lc',
clientId: 2,
clientSecret: 'SmnyQ492ZRhPX4tQKCg9VHyXK6dP1qrawnFhy8aM',
};

14
src/styles.scss
View File

@ -20,13 +20,13 @@ li {
//list-style-image: url("~src/assets/images/icons/add_24dp.svg");
}
.btn {
font-weight: 500;
font-size: 0.875rem;
line-height: 1.125rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
// .btn {
// font-weight: 500;
// font-size: 0.875rem;
// line-height: 1.125rem;
// letter-spacing: 0.02em;
// text-transform: uppercase;
// }
.menu {
display: flex;