//Удалить при переходе всех модалок в обертку modalLayout .modal-add { z-index: 9; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.11); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; transform: scale(0); &__content { position: relative; width: 424px; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); border-radius: 24px; padding: 60px 60px 30px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; } } .title-project { display: flex; align-items: center; flex-direction: column; row-gap: 8px; margin-bottom: 10px; .select-priority { background-color: white; width: 100%; margin: 12px 0; padding: 10px 8px; border-radius: 8px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: relative; img { width: 15px; height: 15px; transition: all 0.3s ease; } &__dropDown { position: absolute; width: 100%; background: white; left: 0; padding: 8px; top: 50px; display: flex; border-radius: 8px; row-gap: 5px; flex-direction: column; span { &:hover { font-weight: 700; } } } &--open { img { transform: rotate(180deg); } } } .input-container { width: 100%; height: 35px; background: #ffffff; border-radius: 8px; margin: 5px 0; input::-webkit-inner-spin-button { -webkit-appearance: none; } } .ck-editor { width: 100%; } .ck-editor__editable.ck-rounded-corners { max-width: 390px; min-height: 130px; font-size: 14px; } .ck-toolbar { border: none !important; border-radius: 8px 8px 0 0 !important; } .ck-placeholder { display: block !important; } .ck-content { border: none !important; border-radius: 0 0 8px 8px !important; box-shadow: none !important; } .select__executor { width: 100%; background: white; border-radius: 8px; margin: 5px 0; display: flex; justify-content: space-between; align-items: center; padding: 9.5px 12px; font-size: 14px; cursor: pointer; position: relative; .arrow { transition: all 0.3s ease; width: 16px; height: 16px; } &--open { .arrow { transform: rotate(180deg); } } .selected__executor { display: flex; align-items: center; span { max-width: 205px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } img { margin-left: 15px; } } .avatar { width: 20px; height: 20px; } &__dropDown { position: absolute; background: white; border-radius: 8px; top: 50px; left: 0; width: 100%; padding: 9.5px 12px; display: flex; flex-direction: column; row-gap: 10px; .executor { display: flex; justify-content: space-between; &:hover { span { font-weight: 600; } } } } } h4 { font-weight: 500; font-size: 22px; line-height: 26px; color: #263238 !important; @media (max-width: 450px) { font-size: 18px; } } &__decs { font-weight: 300; font-size: 12px; line-height: 14px; margin: 12px 0 16px 0; } &__textarea { resize: none; width: 302px; height: 83px; background: #ffffff; border-radius: 8px; border: none; font-size: 15px; line-height: 18px; } .select__worker { display: flex; justify-content: space-between; align-items: center; padding: 5px; background: white; border-radius: 5px; cursor: pointer; position: relative; min-width: 320px; height: 42px; width: 100%; p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; max-width: 270px; } img { transition: all 0.3s ease; width: 20px; height: 20px; } &__dropDown { display: flex; flex-direction: column; position: absolute; width: 100%; padding: 9.5px 12px; top: 48px; left: 0; background: white; border-radius: 5px; row-gap: 10px; .worker { display: flex; justify-content: space-between; &:hover { p { font-weight: 500; } } } } } .open { .arrow { transform: rotate(180deg); } } } .name-project { margin-left: 10px; border: none; outline: none; height: 100%; width: 90%; font-size: 14px; } .button-add { width: 130px; height: 37px; font-weight: 400; font-size: 15px; line-height: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .addPersonBtn { margin: 0 auto 0 0; margin-top: 20px; } .modal-add.active { transform: scale(1); } .exit { cursor: pointer; position: absolute; top: 15px; right: 20px; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; &:before, &:after { content: ""; position: absolute; width: 16px; height: 2px; background: #263238; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } }