Merge remote-tracking branch 'origin/feature/new-design-test'

This commit is contained in:
Булат Хайруллин 2024-06-21 09:29:48 +03:00
commit e858db227d
8 changed files with 306 additions and 121 deletions

View file

@ -3,27 +3,34 @@
display: flex;
}
.webbpm.ervu_lkrp_ul .error {
position: relative;
display: block;
font-family: 'InterSB';
color: var(--color-link);
padding-left: 40px;
margin-top: 16px;
&::before {
position: absolute;
content: "";
left: 0;
width: 24px;
height: 24px;
background: url(../img/svg/info.svg) no-repeat;
}
}
.webbpm.ervu_lkrp_ul .title {
font-size: var(--size-text-title);
font-family: 'InterB';
font-family: 'InterSB';
padding-top: 0;
padding-bottom: var(--indent-big);
.form-group {
display: block;
margin-bottom: 0;
}
.component-float {
display: block;
width: auto;
}
input {
font-size: var(--size-text-title);
height: auto;
padding: 0;
border: 0;
background-color: transparent;
}
}
}
.webbpm.ervu_lkrp_ul .subtitle {
@ -72,23 +79,6 @@
text.icon-cross::before {
background-image: url(../img/svg/cross-wt.svg);
}
.info {
float: none !important;
display: flex;
justify-content: flex-end;
margin-left: auto;
.btn {
width: 24px;
height: 24px;
padding: 0;
background-color: transparent !important;
background-image: url(../img/svg/info.svg);
}
.tooltip-inner {
max-width: 600px;
}
}
}
.webbpm.ervu_lkrp_ul .btn {
@ -160,28 +150,100 @@
padding: 16px;
border-radius: 4px;
.pull-right {
flex: 0;
white-space: nowrap;
}
.form-group {
margin-bottom: 0;
}
.warn-title {
font-family: 'InterSB';
}
static-route-navigation-button:not(.info):not(.link) {
padding-top: 0 !important;
margin-top: 16px;
border-top: 0 !important;
.btn {
color: var(--color-link);
padding: 13px 39px;
border: 1px solid var(--color-link);
background-color: transparent;
&:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled):focus {
color: var(--color-link-hover);
border-color: var(--color-link-hover);
}
}
& + field-set {
margin-top: var(--indent-medium);
}
& + .warning-group, & + .data-group {
margin-top: var(--indent-small);
}
}
.webbpm.ervu_lkrp_ul :is(.warning-group, .modal.show) button-component:not(.info):not(.link),
.webbpm.ervu_lkrp_ul .warning-group static-route-navigation-button:not(.info):not(.link) {
padding-top: 0 !important;
margin-top: 16px;
border-top: 0 !important;
.btn {
color: var(--color-link);
padding: 13px 39px;
border: 1px solid var(--color-link);
background-color: transparent;
&:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled):focus {
color: var(--color-link-hover);
border-color: var(--color-link-hover);
}
}
}
.webbpm.ervu_lkrp_ul .link .btn {
color: var(--color-link);
padding: 0;
background: transparent !important;
&:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled):focus {
color: var(--color-link-hover);
}
}
.webbpm.ervu_lkrp_ul .info {
float: none !important;
display: flex;
justify-content: flex-end;
margin-left: auto;
.btn {
width: 24px;
height: 24px;
padding: 0;
background-color: transparent !important;
background-image: url(../img/svg/info.svg);
}
.tooltip-inner {
max-width: 600px;
}
}
.webbpm.ervu_lkrp_ul .data-group {
.form-group {
flex-direction: column;
label {
color: var(--color-text-secondary);
font-weight: normal;
padding-top: 0;
white-space: nowrap;
}
}
}
.webbpm.ervu_lkrp_ul .paragraph-group {
& > .vertical-container > * {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
& + .paragraph-group {
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid var(--border-light);
}
}
.webbpm.ervu_lkrp_ul .fieldset {
@ -197,84 +259,62 @@
}
.form-group {
margin-bottom: 0;
}
hbox:not(.subtitle) > .horizontal-container {
flex-wrap: wrap;
}
.link .btn {
color: var(--color-link);
padding: 0;
background: transparent !important;
&:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled):focus {
color: var(--color-link-hover);
}
}
input {
height: auto;
min-height: auto;
padding: 0;
border: 0;
background-color: transparent;
& + .input-group-addon {
display: none;
}
}
text-field {
.form-group {
width: 100%;
.component-float {
width: 100%;
}
}
}
.lined {
padding-top: 24px;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid var(--border-light);
}
}
.webbpm.ervu_lkrp_ul .left-block .fieldset {
hyper-link .link {
color: var(--color-text-primary);
font-size: var(--size-text-secondary);
padding-left: 20px;
background: url(../img/svg/pin.svg) 0 50% no-repeat;
}
hyper-link, button-component:not(.info):not(.link) {
display: block;
padding-top: 24px;
margin-top: 16px;
border-top: 1px solid var(--border-light);
}
hyper-link + hyper-link {
padding-top: 0;
margin-top: 12px;
border: 0;
}
.webbpm.ervu_lkrp_ul :is(.fieldset, .warning-group) hbox:not(.subtitle) > .horizontal-container {
flex-wrap: wrap;
}
.webbpm.ervu_lkrp_ul .warning-text .horizontal-container {
flex-wrap: nowrap !important;
}
.webbpm.ervu_lkrp_ul .left-block {
.link .btn {
font-size: var(--size-text-primary);
}
.fieldset {
hyper-link .link {
color: var(--color-text-primary);
font-size: var(--size-text-secondary);
padding-left: 20px;
background: url(../img/svg/pin.svg) 0 50% no-repeat;
}
hyper-link, button-component:not(.info):not(.link) {
display: block;
padding-top: 24px;
margin-top: 16px;
border-top: 1px solid var(--border-light);
}
hyper-link + hyper-link {
padding-top: 0;
margin-top: 12px;
border: 0;
}
}
}
.webbpm.ervu_lkrp_ul .right-block .fieldset {
font-size: var(--size-text-secondary);
padding-top: 52px;
.webbpm.ervu_lkrp_ul .right-block field-set {
font-size: var(--size-text-secondary);
&::before {
content: "";
position: absolute;
top: 20px;
left: 20px;
width: 24px;
height: 24px;
background-image: url(../img/svg/doc.svg);
}
&:first-child .fieldset {
padding-top: 52px;
&::before {
content: "";
position: absolute;
top: 20px;
left: 20px;
width: 24px;
height: 24px;
background-image: url(../img/svg/doc.svg);
}
}
}
.webbpm.ervu_lkrp_ul field-set + field-set {
@ -313,6 +353,9 @@
}
@media only screen and (max-width: 480px) {
.webbpm.ervu_lkrp_ul .warning-text .horizontal-container {
flex-wrap: wrap !important;
}
.webbpm.ervu_lkrp_ul .left-block {
.subtitle text {
width: 100%;
@ -343,17 +386,113 @@
& > div, .btn {
width: 100%;
}
}
button-component.info {
display: none;
margin-top: 58px;
}
}
.tooltip-inner {
max-width: 300px;
}
}
}
:is(.fieldset, .warning-group) button-component.info {
display: none;
margin-top: 58px;
}
}
.webbpm.ervu_lkrp_ul .modal.show {
padding: 0 !important;
.modal-dialog {
width: calc(100vw - 1rem);
}
}
}
/*
.webbpm.ervu_lkrp_ul .modal-dialog {
display: flex;
}
.webbpm.ervu_lkrp_ul .modal.show .modal-content {
padding: 0;
box-shadow: none;
background-color: transparent;
.modal-header {
padding: var(--indent-medium) var(--indent-medium) 16px;
border-radius: 4px 4px 0 0;
background-color: var(--white);
}
.modal-body {
display: flex;
flex-direction: column;
overflow-y: hidden;
flex-grow: 0;
max-height: max-content;
padding: 0 var(--indent-medium) var(--indent-medium);
border-radius: 0 0 4px 4px;
background-color: var(--white);
.scroll-block {
overflow-y: auto;
margin-bottom: 0;
}
}
}
*/
.webbpm.ervu_lkrp_ul .modal.show {
display: flex !important;
.modal-content {
padding: var(--indent-medium);
border-radius: 4px;
box-shadow: none;
.modal-header {
display: flex;
justify-content: center;
font-family: 'InterB';
font-size: var(--size-text-subtitle);
text-align: center;
padding: 0 0 16px 0;
border: 0;
button.close {
display: none;
}
}
.modal-body {
padding: 0;
}
button-component:not(.info):not(.link) {
margin: var(--indent-small) 0 0;
}
.paragraph-list > .vertical-container > * {
position: relative;
padding-left: var(--indent-small);
&::before {
position: absolute;
content: "";
left: 0;
top: 12px;
width: 7px;
height: 7px;
border-radius: 10px;
background-color: var(--color-text-primary);
}
.form-group {
margin-bottom: 0;
}
&:last-child {
margin-bottom: var(--indent-small);
}
}
}
}
/* temp fix + add flex-wrap*/
.webbpm.ervu_lkrp_ul :is(.fieldset, .warning-group) .horizontal-container text + button-component:not(.info) {
margin-top: -2px;
}

View file

@ -31,6 +31,7 @@ body {
.webbpm.ervu_lkrp_ul {
--color-text-primary: #1d1e21;
--color-text-secondary: #acacac;
--color-link: #c64e1b;
--color-link-hover: #fa773f;
--color-bg-main: #223d36;
@ -51,6 +52,7 @@ body {
--indent-big: 40px;
--indent-medium: 32px;
--indent-small: 24px;
--indent-mini: 16px;
}
.webbpm.ervu_lkrp_ul a {

View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2805 17.7046C13.6739 18.0985 14.3116 18.0985 14.705 17.7046C15.0983 17.3108 15.0983 16.6723 14.705 16.2785L9.71945 11.2869C9.3261 10.8931 8.68836 10.8931 8.29501 11.2869C7.90166 11.6807 7.90166 12.3193 8.29501 12.7131L13.2805 17.7046Z" fill="#1D1E21"/>
<path d="M14.7048 7.72152C15.0982 7.3277 15.0982 6.68919 14.7048 6.29537C14.3115 5.90154 13.6737 5.90154 13.2804 6.29537L8.29501 11.2869C7.90166 11.6807 7.90166 12.3193 8.29501 12.7131C8.68836 13.1069 9.32595 13.1069 9.7193 12.7131L14.7048 7.72152Z" fill="#1D1E21"/>
</svg>

After

Width:  |  Height:  |  Size: 636 B

View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM12 21C7.05 21 3 16.95 3 12C3 7.05 7.05 3 12 3C16.95 3 21 7.05 21 12C21 16.95 16.95 21 12 21Z" fill="white"/>
<path d="M16.65 16.6501C16.3186 16.9815 15.7814 16.9815 15.45 16.6501L13.0607 14.2608C12.4749 13.675 11.5251 13.675 10.9393 14.2608L8.55 16.6501C8.21863 16.9815 7.68137 16.9815 7.35 16.6501C7.01863 16.3187 7.01863 15.7815 7.35 15.4501L9.73934 13.0608C10.3251 12.475 10.3251 11.5252 9.73934 10.9394L7.35 8.55009C7.01863 8.21872 7.01863 7.68146 7.35 7.35009C7.68137 7.01872 8.21863 7.01872 8.55 7.35009L10.9393 9.73943C11.5251 10.3252 12.4749 10.3252 13.0607 9.73943L15.45 7.35009C15.7814 7.01872 16.3186 7.01872 16.65 7.35009C16.9814 7.68146 16.9814 8.21872 16.65 8.55009L14.2607 10.9394C13.6749 11.5252 13.6749 12.475 14.2607 13.0608L16.65 15.4501C16.9814 15.7815 16.9814 16.3187 16.65 16.6501Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

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="M18 19H6C5.20435 19 4.44129 18.6839 3.87868 18.1213C3.31607 17.5587 3 16.7956 3 16V8C3 7.73478 2.89464 7.48043 2.70711 7.29289C2.51957 7.10536 2.26522 7 2 7C1.73478 7 1.48043 7.10536 1.29289 7.29289C1.10536 7.48043 1 7.73478 1 8V16C1 17.3261 1.52678 18.5979 2.46447 19.5355C2.92876 19.9998 3.47995 20.3681 4.08658 20.6194C4.69321 20.8707 5.34339 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20C19 19.7348 18.8946 19.4804 18.7071 19.2929C18.5196 19.1054 18.2652 19 18 19ZM14 11H10C9.73478 11 9.48043 11.1054 9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071C9.48043 12.8946 9.73478 13 10 13H14C14.2652 13 14.5196 12.8946 14.7071 12.7071C14.8946 12.5196 15 12.2652 15 12C15 11.7348 14.8946 11.4804 14.7071 11.2929C14.5196 11.1054 14.2652 11 14 11ZM23 9.94C22.9896 9.84813 22.9695 9.75763 22.94 9.67V9.58C22.8919 9.47718 22.8278 9.38267 22.75 9.3L16.75 3.3C16.6673 3.22222 16.5728 3.15808 16.47 3.11H16.38C16.2784 3.05174 16.1662 3.01434 16.05 3H8C7.20435 3 6.44129 3.31607 5.87868 3.87868C5.31607 4.44129 5 5.20435 5 6V14C5 14.7956 5.31607 15.5587 5.87868 16.1213C6.44129 16.6839 7.20435 17 8 17H20C20.7956 17 21.5587 16.6839 22.1213 16.1213C22.6839 15.5587 23 14.7956 23 14V10C23 10 23 10 23 9.94ZM17 6.41L19.59 9H18C17.7348 9 17.4804 8.89464 17.2929 8.70711C17.1054 8.51957 17 8.26522 17 8V6.41ZM21 14C21 14.2652 20.8946 14.5196 20.7071 14.7071C20.5196 14.8946 20.2652 15 20 15H8C7.73478 15 7.48043 14.8946 7.29289 14.7071C7.10536 14.5196 7 14.2652 7 14V6C7 5.73478 7.10536 5.48043 7.29289 5.29289C7.48043 5.10536 7.73478 5 8 5H15V8C15 8.79565 15.3161 9.55871 15.8787 10.1213C16.4413 10.6839 17.2044 11 18 11H21V14ZM10 9H12C12.2652 9 12.5196 8.89464 12.7071 8.70711C12.8946 8.51957 13 8.26522 13 8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9Z" fill="#C64E1B"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

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 fill-rule="evenodd" clip-rule="evenodd" d="M18.7493 21.3542H6.24935C5.9617 21.3542 5.72852 21.1211 5.72852 20.8334V4.16674C5.72852 3.87909 5.9617 3.6459 6.24935 3.6459H14.0345C14.1701 3.6459 14.3003 3.69878 14.3976 3.7933L19.1124 8.37719C19.2133 8.47525 19.2702 8.60995 19.2702 8.75063V20.8334C19.2702 21.1211 19.037 21.3542 18.7493 21.3542ZM4.16602 4.16674C4.16602 3.01614 5.09876 2.0834 6.24935 2.0834H14.0345C14.5769 2.0834 15.0979 2.29492 15.4867 2.673L20.2016 7.25689C20.6051 7.64914 20.8327 8.18792 20.8327 8.75063V20.8334C20.8327 21.984 19.8999 22.9167 18.7493 22.9167H6.24935C5.09876 22.9167 4.16602 21.984 4.16602 20.8334V4.16674ZM16.666 10.9375H8.33269V9.37501H16.666V10.9375ZM8.33269 14.3229H16.666V12.7604H8.33269V14.3229ZM8.33269 17.7083H16.666V16.1458H8.33269V17.7083Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 908 B

View file

@ -1,3 +1,5 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12.5059C20.5 17.2003 16.6944 21.0059 12 21.0059C7.30558 21.0059 3.5 17.2003 3.5 12.5059C3.5 7.81144 7.30558 4.00586 12 4.00586C16.6944 4.00586 20.5 7.81144 20.5 12.5059ZM22 12.5059C22 18.0287 17.5228 22.5059 12 22.5059C6.47715 22.5059 2 18.0287 2 12.5059C2 6.98301 6.47715 2.50586 12 2.50586C17.5228 2.50586 22 6.98301 22 12.5059ZM12.966 7.70586V9.55386H11.034V7.70586H12.966ZM11.118 17.5059V11.0059H12.882V17.5059H11.118Z" fill="#C64E1B"/>
<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="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="#C64E1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="#C64E1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 8C11 7.44772 11.4477 7 12 7H12.01C12.5623 7 13.01 7.44772 13.01 8C13.01 8.55228 12.5623 9 12.01 9H12C11.4477 9 11 8.55228 11 8Z" fill="#C64E1B"/>
</svg>

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 787 B

Before After
Before After

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 464 KiB