@@ -504,10 +504,40 @@ textarea { } *::-webkit-scrollbar-thumb { - background-color: rgba(217, 217, 217, 0.49); + background: var(--new-ui-gray-color); border-radius: 5px; } +*::-webkit-scrollbar-thumb:hover { + background: var(--new-ui-text-color); +} + +#popup-container, +#modal-container, +#select-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9999999; +} + +#popup-container > *, +#modal-container > *, +#select-container > * { + pointer-events: auto; +} + +@media screen and (max-width: 768px) { + #popup-container, + #modal-container, + #select-container { + z-index: 9999999; + } +} + .height { height: calc(400px + (1024 - 400) * ((100vh - 400px) / (1024 - 400))); } @@ -1,6 +1,9 @@ .wrap { padding-top: 60px; min-width: 320px; + position: relative; + z-index: 1000; + &__role{ margin-bottom: 20px; } @@ -29,3 +32,27 @@ text-align: right; } } + +@media screen and (max-width: 768px) { + .wrap { + padding-top: 40px; + min-width: 280px; + + .title { + font-size: 18px; + } + + .hint { + font-size: 14px; + } + + .buttons { + flex-direction: column; + gap: 12px; + + button { + width: 100%; + } + } + } +} @@ -48,6 +48,7 @@ export const InviteModal = ({ showNewPersons }: InviteModalProps) => { value={watch('account_privileges', 'regular')} setValue={(value) => setValue('account_privileges', value as InviteRole)} items={personRoles} + additional={true} /> @@ -61,6 +62,7 @@ export const InviteModal = ({ showNewPersons }: InviteModalProps) => { })} setValue={(value) => setValue('parent_company', value)} items={bussinesGroupsItems} + additional={true} /> @@ -1,6 +1,9 @@ .wrap { padding-top: 60px; min-width: 320px; + position: relative; + z-index: 1000; + &__role{ margin-bottom: 20px; } @@ -29,3 +32,27 @@ text-align: right; } } + +@media screen and (max-width: 768px) { + .wrap { + padding-top: 40px; + min-width: 280px; + + .title { + font-size: 18px; + } + + .hint { + font-size: 14px; + } + + .buttons { + flex-direction: column; + gap: 12px; + + button { + width: 100%; + } + } + } +} @@ -48,6 +48,7 @@ export const InviteSecurityModal = ({ showNewPersons }: InviteModalProps) => { value={watch('account_privileges', 'regular')} setValue={(value) => setValue('account_privileges', value as InviteRole)} items={personRoles} + additional={true} /> @@ -61,6 +62,7 @@ export const InviteSecurityModal = ({ showNewPersons }: InviteModalProps) => { })} setValue={(value) => setValue('parent_company', value)} items={bussinesGroupsItems} + additional={true} /> @@ -3,7 +3,7 @@ width: 100%; max-width: calc(100dvw); height: 100dvh; - background-color: rgba(0, 0, 0, 0.4); + background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0; transition: all 300ms ease-in-out; @@ -11,6 +11,7 @@ overflow: hidden; opacity: 0; visibility: hidden; + pointer-events: none; &_blur { &-on { @@ -24,7 +25,8 @@ &_visible { opacity: 1; visibility: visible; - z-index: 1090; + z-index: 999999; + pointer-events: auto; } &_invisible { @@ -80,18 +82,13 @@ overflow: hidden; height: fit-content; transition: all 0.5s ease-in-out; + z-index: 1; &_secondary { background-color: #373737; } } - // &__header { - // display: flex; - // justify-content: space-between; - // padding: 25px; - // } - &__close-button { top: 25px; right: 25px; @@ -142,3 +139,23 @@ html[data-theme='light'] { } } } + +@media screen and (max-width: 768px) { + .template { + &__content { + margin: 20px; + max-width: calc(100vw - 40px); + max-height: calc(100vh - 40px); + overflow-y: auto; + } + + &__content-body { + padding: 0px 20px 20px 20px; + } + + &__close-button { + top: 15px; + right: 15px; + } + } +} @@ -7,9 +7,6 @@ justify-content: center; padding: 15px 25px; cursor: pointer; - display: flex; - align-items: center; - justify-content: center; &_outline { border-radius: 15px; @@ -76,6 +73,29 @@ html[data-theme='dark'] { .button_gray { color: white !important; - background-color: #D9D9D91A !important; + background-color: #40404e !important; + } +} + +@media screen and (max-width: 768px) { + .button { + padding: 12px 20px; + font-size: 14px; + + &_outline { + font-size: 14px; + } + + &_primary-outline { + font-size: 14px; + } + + &_primary { + font-size: 15px; + } + + &_gray { + font-size: 14px; + } } } @@ -166,3 +166,36 @@ html[data-theme='light'] { } } } + +@media screen and (max-width: 768px) { + .box { + width: 100%; + } + + .label { + font-size: 13px; + margin-bottom: 6px; + } + + .input { + &_primary { + padding: 14px 0; + font-size: 16px; + } + + &_outline { + padding: 16px 0; + font-size: 16px; + } + } + + .wrapper { + &_primary { + padding: 0 12px; + } + + &_outline { + padding: 0 16px; + } + } +} @@ -57,11 +57,18 @@ justify-content: space-between; padding: 16px 8px 16px 14px; cursor: pointer; - + transition: all 0.3s ease; border-radius: 13px; border: 2px solid #40404e; + + &:hover { + border-color: #7f7df3 !important; + background-color: rgba(127, 125, 243, 0.05) !important; + } + &_open { border: 2px solid #7f7df3; + background-color: rgba(127, 125, 243, 0.05); } &__text { @@ -74,21 +81,11 @@ .icon { color: #a6a5a5; margin: 4px; -} - -html[data-theme='light'] { - .select { - border: 1px solid #e9e9e9; - &_open { - border: 1px solid #7f7df3; - } - } - .list { - &__option { - &_active { - background-color: #ececff; - } - } + cursor: pointer; + transition: color 0.3s ease; + + &:hover { + color: #7f7df3; } } @@ -97,8 +94,7 @@ html[data-theme='light'] { top: 110%; left: 0; right: 0; - z-index: 1000; - + z-index: 999999; background-color: var(--new-ui-main-color); width: 100%; border-radius: 13px; @@ -121,12 +117,14 @@ html[data-theme='light'] { &__option { list-style: none; padding: 10px 16px; + cursor: pointer; + transition: all 0.3s ease; &_active { background-color: #1976d214; } &:hover { - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(127, 125, 243, 0.1); } &:active { background-color: rgba(0, 0, 0, 0.2); @@ -136,3 +134,59 @@ html[data-theme='light'] { font-size: 18px; } } + +html[data-theme='light'] { + .select { + border: 1px solid #e9e9e9; + + &:hover { + border-color: #7f7df3 !important; + background-color: rgba(127, 125, 243, 0.05) !important; + } + + &_open { + border: 1px solid #7f7df3; + background-color: rgba(127, 125, 243, 0.05); + } + } + .list { + &__option { + &_active { + background-color: #ececff; + } + + &:hover { + background-color: rgba(127, 125, 243, 0.1) !important; + } + } + } +} + +// Мобильные стили +@media screen and (max-width: 768px) { + .select { + padding: 14px 8px 14px 12px; + + &__text { + font-size: 16px; + } + } + + .list { + top: 105%; + max-height: 200px; + overflow-y: auto; + + &__option { + padding: 12px 16px; + } + + &__name { + font-size: 16px; + } + } + + .label { + font-size: 14px; + } +}