form styling CSS
Boris Voropaev
parent
baeb14b37d
commit
0e17ebb999
|
|
@ -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 {
|
||||
|
|
@ -52,31 +52,18 @@
|
|||
}
|
||||
|
||||
.values {
|
||||
background: transparent url('~src/assets/images/icons/document_pdf_60dp.svg') 0 0 no-repeat;
|
||||
min-height: 60px;
|
||||
padding-left: 72px;
|
||||
font-size: 20px;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
&:before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
background: transparent url("~src/assets/images/icons/document_20dp.svg") 50% 50% no-repeat;
|
||||
content: '';
|
||||
}
|
||||
.archive {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
background: transparent url("~src/assets/images/icons/close_20dp.svg") 50% 50% no-repeat;
|
||||
opacity: 0.5;
|
||||
content: '';
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<div class="area" [class.hover]="dragOver">
|
||||
<input #fileInput type="file" [id]="field.name" (change)="onFileInput($event)" multiple="multiple" />
|
||||
<p>Перетащите сюда или <span (click)="fileInput.click()">выберите файлы</span> в формате PDF, XLS, DOC, JPG, PPTX<!-- общим объемом не более 10 Мбайт.--></p>
|
||||
<p>Перетащите сюда или <a (click)="fileInput.click()">выберите файлы</a>
|
||||
в формате PDF, XLS, DOC, JPG, PPTX
|
||||
<!-- общим объемом не более 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 +12,6 @@
|
|||
<div class="values">
|
||||
<div class="item" *ngFor="let asset of assets">
|
||||
<a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
|
||||
<button type="button" class="btn icon archive" (click)="removeValue(asset)"></button>
|
||||
<button type="button" class="clear trash" (click)="removeValue(asset)"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1 @@
|
|||
.documents {
|
||||
margin-bottom: 24px;
|
||||
a {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
.documents.list.default {
|
||||
background: transparent url('~src/assets/images/icons/document_pdf_60dp.svg') 0 0 no-repeat;
|
||||
min-height: 60px;
|
||||
padding-left: 72px;
|
||||
font-size: 20px;
|
||||
.title {
|
||||
margin: 0 0 16px;
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.items {
|
||||
.item {
|
||||
margin: 0 0 16px;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding-left: 28px;
|
||||
background: transparent url('~src/assets/images/icons/document_20dp.svg') 0 0 no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -30,29 +30,52 @@ input, select, textarea {
|
|||
|
||||
|
||||
.switch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
margin: auto 0;
|
||||
padding: 2px;
|
||||
border-radius: 10px;
|
||||
background-color: #c0c0c0;
|
||||
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #6C6C6C;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
&:before {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0 0 2px 0;
|
||||
border-radius: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #C0C0C0;
|
||||
border-radius: 9px;
|
||||
transition: transform 0.3s;
|
||||
content: '';
|
||||
}
|
||||
&.active {
|
||||
background-color:var(--blue-1);
|
||||
border-color:var(--blue-1);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
&:hover {
|
||||
background-color:var(--blue-2);
|
||||
border-color:var(--blue-2);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
background-color:var(--blue-3);
|
||||
border-color:var(--blue-3);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active):hover {
|
||||
border-color:#4D4D4D;
|
||||
&:before {
|
||||
background-color: #6C6C6C;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
|
|
|
|||
Loading…
Reference in New Issue