From b2458d11e075ee8559644b5153b2b14bfea2666c Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 13 Dec 2023 12:22:32 +0300 Subject: [PATCH 1/2] form-css --- .../image/form-field-image.component.scss | 82 ----------------- src/vniigaz-v2/css/_admin.scss | 2 +- src/vniigaz-v2/css/_forms.scss | 89 ++++++++++++++++++- src/vniigaz-v2/css/_slider.scss | 58 ++++++++++-- src/vniigaz-v2/css/_tabs.scss | 13 ++- src/vniigaz-v2/images/ico/border_gr.svg | 3 + 6 files changed, 149 insertions(+), 98 deletions(-) create mode 100644 src/vniigaz-v2/images/ico/border_gr.svg diff --git a/src/app/_modules/form-fields/types/image/form-field-image.component.scss b/src/app/_modules/form-fields/types/image/form-field-image.component.scss index 57d6bcd..e69de29 100644 --- a/src/app/_modules/form-fields/types/image/form-field-image.component.scss +++ b/src/app/_modules/form-fields/types/image/form-field-image.component.scss @@ -1,82 +0,0 @@ -.area { - position: relative; - display: flex; - height: 100px; - padding: 16px; - border: var(--prime) dashed 1px; - border-radius: 4px; - overflow: hidden; - font-size: 20px; - &.hover { - background-color: #e0e0e0; - } - p { - margin: auto; - color: var(--second-dis); - text-align: center; - span { - color: var(--orange-2); - cursor: pointer; - } - } - input { - display: none; - } - .indicator { - display: flex; - flex-direction: column; - justify-content: center; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 16px; - background-color: #f7f7f7; - .label { - margin-bottom: 4px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .progress { - height: 4px; - background-color: #dfdfdf; - overflow: hidden; - .fill { - width: 0; - height: 100%; - background-color: #3ca128; - } - } - } -} - -.values { - display: flex; - flex-direction: row; - flex-wrap: wrap; - column-gap: 24px; - row-gap: 12px; - margin-top: 8px; - overflow: hidden; - .item { - display: flex; - flex-direction: row; - .preview { - width: 80px; - height: 80px; - border: #0033661F solid 2px; - overflow: hidden; - img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - } - .trash { - margin-left: 10px; - } - } -} diff --git a/src/vniigaz-v2/css/_admin.scss b/src/vniigaz-v2/css/_admin.scss index 88fbbdd..f89bb02 100644 --- a/src/vniigaz-v2/css/_admin.scss +++ b/src/vniigaz-v2/css/_admin.scss @@ -154,7 +154,7 @@ pages-tree{ flex-direction: row; align-items: center; flex-shrink: 1; - gap: 8px; + gap: 24px; } } } diff --git a/src/vniigaz-v2/css/_forms.scss b/src/vniigaz-v2/css/_forms.scss index c4abcad..8233e4c 100644 --- a/src/vniigaz-v2/css/_forms.scss +++ b/src/vniigaz-v2/css/_forms.scss @@ -154,7 +154,7 @@ form-field-document{ display: flex; height: 100px; padding: 16px; - border: var(--prime) dashed 1px; + border: var(--prime) solid 1px; border-radius: 4px; overflow: hidden; font-size: 20px; @@ -251,6 +251,93 @@ form-field-document{ } } +form-field-image{ + .area { + position: relative; + display: flex; + height: 100px; + padding: 16px; + border: var(--prime) dashed 3px; + border-radius: 4px; + border-image: url('/assets/images/ico/border_gr.svg') 3 round round; + overflow: hidden; + font-size: 20px; + &.hover { + background-color: #e0e0e0; + } + p { + margin: auto; + color: var(--second-dis); + text-align: center; + span { + color: var(--orange-2); + cursor: pointer; + } + } + input { + display: none; + } + .indicator { + display: flex; + flex-direction: column; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 16px; + background-color: #f7f7f7; + .label { + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .progress { + height: 4px; + background-color: #dfdfdf; + overflow: hidden; + .fill { + width: 0; + height: 100%; + background-color: #3ca128; + } + } + } + } + + .values { + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 24px; + row-gap: 12px; + margin-top: 8px; + overflow: hidden; + .item { + display: flex; + flex-direction: row; + .preview { + width: 80px; + height: 80px; + border: #0033661F solid 2px; + overflow: hidden; + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + } + .trash { + margin-left: 4px; + } + } + } + +} + .field { flex-direction: column; diff --git a/src/vniigaz-v2/css/_slider.scss b/src/vniigaz-v2/css/_slider.scss index b93ed62..17e813e 100644 --- a/src/vniigaz-v2/css/_slider.scss +++ b/src/vniigaz-v2/css/_slider.scss @@ -109,10 +109,51 @@ } .body { - padding: 2; + font-family: PT Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + + form-frame, object-filters{ - margin: 0 var(--l); + margin: 36px 24px; display: block; + + .group .title { + margin: 16px 0; + font-family: PT Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 24px; + } + form-field{ + margin-bottom: 16px; + .field { + .caption{ + font-family: PT Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + margin-bottom: 4px; + } + input, textarea, .combobox, .area p{ + + border-radius: 4px; + padding: 8px 12px; + font-family: PT Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + } + input, .combobox{ + height: 40px; + } + } + } } } @@ -143,9 +184,9 @@ display: flex; flex-direction: row; align-items: center; - padding: var(--m) var(--l); - border-top: 1px solid var(--second); - + padding: 16px 24px; + background: #F8F8F8; + box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.12); .left { .reset { @@ -154,8 +195,11 @@ } .notice { - font-weight: 300; - line-height: var(--l); /* 150% */ + font-family: PT Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; } } diff --git a/src/vniigaz-v2/css/_tabs.scss b/src/vniigaz-v2/css/_tabs.scss index d7534e1..1385ba2 100644 --- a/src/vniigaz-v2/css/_tabs.scss +++ b/src/vniigaz-v2/css/_tabs.scss @@ -13,9 +13,8 @@ margin-right: -1px; background: #ffffff; border-radius: 8px 8px 0 0; - border: #E8E8E8 solid 1px; - border-bottom: none; - color: #86898E; + border: var(--prime) solid 1px; + color: var(--prime); font-size: 16px; font-weight: 700; cursor: pointer; @@ -31,16 +30,16 @@ } &.active { color: #ffffff; - background-color: #F9B417; - border-color: #F9B417; + background-color: var(--prime); + border-color: var(--prime) } &.disabled { opacity: 0.7; cursor: not-allowed; } &:hover { - background-color: #F9B417; - border-color: #F9B417; + background-color: var(--prime-act); + border-color: var(--prime-act); color: #ffffff; } } diff --git a/src/vniigaz-v2/images/ico/border_gr.svg b/src/vniigaz-v2/images/ico/border_gr.svg new file mode 100644 index 0000000..0816cc5 --- /dev/null +++ b/src/vniigaz-v2/images/ico/border_gr.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 595709944d8828ae33866107c10a5a8cacadd5f9 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 13 Dec 2023 12:32:55 +0300 Subject: [PATCH 2/2] tabs --- src/vniigaz-v2/css/_tabs.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/vniigaz-v2/css/_tabs.scss b/src/vniigaz-v2/css/_tabs.scss index 1385ba2..ad75363 100644 --- a/src/vniigaz-v2/css/_tabs.scss +++ b/src/vniigaz-v2/css/_tabs.scss @@ -3,20 +3,23 @@ margin-bottom: 32px; max-width: 100%; overflow: auto; - border-bottom: #E8E8E8 solid 1px; + box-shadow: inset 0px -1px var(--second-dis); -webkit-overflow-scrolling: touch; &.simple { margin-bottom: 24px; } button { - padding: 7px 16px; + padding: 8px 20px; margin-right: -1px; background: #ffffff; - border-radius: 8px 8px 0 0; + border-radius: 4px 4px 0 0; border: var(--prime) solid 1px; color: var(--prime); + font-family: PT Sans; font-size: 16px; - font-weight: 700; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ cursor: pointer; &:last-child { margin-right: 0;