diff --git a/components/DealsStatus/components/Offers.js b/components/DealsStatus/components/Offers.js index 73883b8..71933cb 100644 --- a/components/DealsStatus/components/Offers.js +++ b/components/DealsStatus/components/Offers.js @@ -150,7 +150,7 @@ export default class Offers extends Step
{ } } style={{ filter: "grayscale", opacity: 0.5 }}/> - +
) } diff --git a/css/main/style.css b/css/main/style.css index 44af683..88078b4 100644 --- a/css/main/style.css +++ b/css/main/style.css @@ -6064,6 +6064,28 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_ .contractStatus_modal .single_status > div .status_body .wrap table .i-pdf span { font-weight: 400; } +@media all and (max-width: 920px) { + .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table label[data-text] { + height: auto; + width: 100%; + display: flex; + align-items: center; + min-height: 16px; + } + .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table label[data-text]:before { + position: relative; + order: 2; + margin-left: auto; + margin-right: calc(50% - 16px); + } + .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table label[data-text]:after { + content: attr(data-text); + order: 1; + display: block; + padding-top: 0; + width: 50%; + } +} @media all and (max-width: 920px) { .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table thead { display: none; @@ -6074,27 +6096,19 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_ .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table tr { display: block; position: relative; - padding-left: 31px; + padding-left: 0; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td { display: block; padding: 8px; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:first-child:not(:empty) { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 32px; box-sizing: border-box; background: #fff; - border-top: 0; - border-bottom: 0; - border-left: 0; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:first-child:not(:empty) .form_field { - width: 16px; - margin: auto; + display: flex; + width: 100%; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:not(:last-child) { border-bottom: 0; @@ -6131,34 +6145,22 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_ .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table tr { display: block; position: relative; - padding-right: 56px; + padding-right: 0; + padding-left: 0; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td { display: block; padding: 8px; } - .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:first-child:not(:empty) { - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 57px; - box-sizing: border-box; - background: #fff; - border-top: 0; - border-bottom: 0; - border-right: 0; - } - .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:first-child:not(:empty) .form_field { - width: 16px; - margin: auto; - } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:not(:last-child) { border-bottom: 0; } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td:empty { display: none; } + .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td label[data-text]:before { + margin-right: 0; + } .contractStatus_modal .single_status > div .status_body .wrap table.deal_offers_table td[data-title]:before { content: attr(data-title); color: var(--text_not_active); diff --git a/css/main/style.less b/css/main/style.less index d6d6d00..d0f9209 100644 --- a/css/main/style.less +++ b/css/main/style.less @@ -2925,9 +2925,9 @@ main { display: flex; width: 100%; - @media (max-width: 1280px) { - padding-bottom: 0px !important; - } + @media (max-width: 1280px) { + padding-bottom: 0px !important; + } .table_cell { padding: 16px 8px; @@ -2962,10 +2962,10 @@ main { color: var(--green); } - @media (max-width: 1280px) { - width: 100%; - margin-top: 40px; - } + @media (max-width: 1280px) { + width: 100%; + margin-top: 40px; + } } b { @@ -4153,7 +4153,7 @@ main .dropdown_blocks_list .dropdown_block .block_body { } @media all and (max-width: 960px) { -// width: 100%; + // width: 100%; margin-top: 10px; } } @@ -6651,7 +6651,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { @media all and (max-width: 768px) { flex-wrap: wrap; - + height: auto; } @@ -6822,7 +6822,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { @media all and (max-width: 768px) { margin-right: 0; padding-top: 0; - line-height: 15px; + line-height: 15px; } &:before { @@ -6892,6 +6892,33 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { } &.deal_offers_table { + @media all and (max-width: 920px) { + label[data-text] { + height: auto; + width: 100%; + display: flex; + align-items: center; + min-height: 16px; + + &:before { + position: relative; + order: 2; + margin-left: auto; + margin-right: calc(50% - 16px); + } + + &:after { + content: attr(data-text); + order: 1; + display: block; + padding-top: 0; + width: 50%; + + } + + } + } + @media all and (max-width: 920px) { thead { display: none; @@ -6904,7 +6931,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { tr { display: block; position: relative; - padding-left: 31px; + padding-left: 0; } td { @@ -6912,20 +6939,12 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { padding: 8px; &:first-child:not(:empty) { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 32px; box-sizing: border-box; background: #fff; - border-top: 0; - border-bottom: 0; - border-left: 0; .form_field { - width: 16px; - margin: auto; + display: flex; + width: 100%; } } @@ -6973,31 +6992,14 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { tr { display: block; position: relative; - padding-right: 56px; + padding-right: 0; + padding-left: 0; } td { display: block; padding: 8px; - &:first-child:not(:empty) { - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 57px; - box-sizing: border-box; - background: #fff; - border-top: 0; - border-bottom: 0; - border-right: 0; - - .form_field { - width: 16px; - margin: auto; - } - } - &:not(:last-child) { border-bottom: 0; } @@ -7006,6 +7008,12 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { display: none; } + label[data-text] { + &:before { + margin-right: 0; + } + } + &[data-title]:before { content: attr(data-title); color: var(--text_not_active); @@ -7135,7 +7143,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { gap: 10px 0; button { - width :100%; + width: 100%; } } } @@ -7192,9 +7200,9 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { display: flex; flex-direction: row; - - @media all and (max-width: 1279px) { - + + @media all and (max-width: 1279px) { + flex-wrap: wrap; } @@ -7280,7 +7288,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { justify-content: flex-end; align-items: center; - + @media all and (max-width: 1279px) { flex: auto; width: 100%; @@ -7296,14 +7304,14 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { button { white-space: nowrap; - + @media all and (max-width: 1279px) { order: 1; padding: 0; justify-content: flex-start; width: 100%; } - + } .status { @@ -7715,19 +7723,19 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { margin-bottom: 30px; width: 100%; - flex-direction: row; + flex-direction: row; - @media all and (max-width: 640px) { - flex-direction: column; - } + @media all and (max-width: 640px) { + flex-direction: column; + } label { width: 186px; margin-right: 12px; - &.wide { - width: 30%; - } + &.wide { + width: 30%; + } } } @@ -7735,9 +7743,9 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { flex: 1; margin-top: -12px; - @media all and (max-width: 640px) { - margin-top: 20px; - } + @media all and (max-width: 640px) { + margin-top: 20px; + } .item { width: 100%; @@ -7840,9 +7848,9 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { flex-direction: row; gap: 0px 30px; - @media all and (max-width: 640px) { - flex-direction: column; - } + @media all and (max-width: 640px) { + flex-direction: column; + } padding-top: 15px; padding-bottom: 15px; @@ -7886,9 +7894,9 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { .edo_sign_documents_document_left { width: 35%; - @media all and (max-width: 640px) { - width: 100%; - } + @media all and (max-width: 640px) { + width: 100%; + } } .edo_sign_documents_document_right { @@ -7897,25 +7905,25 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { align-items: center; justify-content: flex-start; - @media all and (max-width: 640px) { - width: 100%; - margin-top: 20px; - margin-left: 40px; - position: relative; - padding-right: 40px; + @media all and (max-width: 640px) { + width: 100%; + margin-top: 20px; + margin-left: 40px; + position: relative; + padding-right: 40px; - align-items: flex-start; + align-items: flex-start; - &::before { - content: ""; - position: absolute; - top: -17px; - left: -40px; - width: 40px; - height: 40px; - background: url(/assets/images/deal_contract_status_mobile_arrow.svg) no-repeat; - } - } + &::before { + content: ""; + position: absolute; + top: -17px; + left: -40px; + width: 40px; + height: 40px; + background: url(/assets/images/deal_contract_status_mobile_arrow.svg) no-repeat; + } + } i { width: 100% !important; @@ -7959,46 +7967,46 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { .actions { width: 65%; justify-content: space-between; - justify-content: flex-start !important; + justify-content: flex-start !important; - .status_icon { - width: 24px; - min-width: 24px; - height: 24px; - min-height: 24px; - background-repeat: no-repeat; - background-position: center; - background-position-y: -1px; - background-position-x: -1px; - - &.success { - background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%235FB158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.125 9.75L10.625 15L7.875 12.375' stroke='%235FB158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); - border: none !important; - } - - &.error { - background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%23ED0A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z' fill='%23ED0A34'/%3E%3Cpath d='M12 8L12 12' stroke='%23ED0A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - border: none !important; - } - - &.await { - background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8L12 12' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 12L12 12' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - border: none !important; - } - } - - .status_title { - padding: 0px 10px; - - i { - display: contents; - } - } + .status_icon { + width: 24px; + min-width: 24px; + height: 24px; + min-height: 24px; + background-repeat: no-repeat; + background-position: center; + background-position-y: -1px; + background-position-x: -1px; - &.actions_with_status { - justify-content: flex-start !important; - margin-left: 15px; - } + &.success { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%235FB158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.125 9.75L10.625 15L7.875 12.375' stroke='%235FB158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + border: none !important; + } + + &.error { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%23ED0A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z' fill='%23ED0A34'/%3E%3Cpath d='M12 8L12 12' stroke='%23ED0A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + border: none !important; + } + + &.await { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8L12 12' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 12L12 12' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + border: none !important; + } + } + + .status_title { + padding: 0px 10px; + + i { + display: contents; + } + } + + &.actions_with_status { + justify-content: flex-start !important; + margin-left: 15px; + } } &:first-child { @@ -8020,11 +8028,11 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block { } .checkbox_disabled { - label { - &:before { - filter: grayscale(); - opacity: 0.5; - cursor: default !important; - } - } + label { + &:before { + filter: grayscale(); + opacity: 0.5; + cursor: default !important; + } + } } \ No newline at end of file