diff --git a/src/app/app.component.scss b/src/app/app.component.scss index cea6550..0c99d27 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -33,6 +33,7 @@ app-sidebar-mobile { padding: 64px; background-color: var(--bgContent); overflow-y: auto; + z-index: 1; } .blur-background { diff --git a/src/app/components/contacts/contact-delete/contact-delete.component.scss b/src/app/components/contacts/contact-delete/contact-delete.component.scss index f07724a..973e92a 100644 --- a/src/app/components/contacts/contact-delete/contact-delete.component.scss +++ b/src/app/components/contacts/contact-delete/contact-delete.component.scss @@ -18,13 +18,16 @@ section { align-items: center; background-color: var(--white); width: 600px; - height: 170px; + height: 200px; border-radius: 26px; + margin: 24px; border: 2px solid rgba($color: #000000, $alpha: 0.1); p { + text-align: center; font-size: 27px; font-weight: 500; margin-bottom: 12px; + padding: 0 12px; } } @@ -41,8 +44,6 @@ section { width: 111px; height: 57px; margin: 0 24px; - font-size: 21px; - font-weight: 400; } .btn-cancle { @@ -80,3 +81,29 @@ section { box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3); } } + +@media screen and (max-width: 450px) { + .dialog { + p { + font-size: 22px; + } + } +} + +@media screen and (max-width: 350px) { + .dialog { + width: 280px; + p { + font-size: 22px; + } + } + + .btn { + width: 100px; + } + + .btn-delete-contact, + .btn-cancle { + font-size: 18px; + } +} diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss index 31128a3..c92d7c4 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.scss +++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss @@ -127,7 +127,7 @@ } .btn-mobile { - display: flex; + display: none; justify-content: center; align-items: center; position: fixed; @@ -210,6 +210,10 @@ display: none; } + .btn-mobile { + display: flex; + } + .name { font-size: 36px; font-weight: 600;