diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html index 51954d0..5ddaed6 100644 --- a/src/app/components/contacts/contacts.component.html +++ b/src/app/components/contacts/contacts.component.html @@ -8,6 +8,9 @@ Add new contact check +
+ check +
@for (sortLetter of this.sortFirstLetter(); track sortLetter) { diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss index e780bf5..02dbbb5 100644 --- a/src/app/components/contacts/contacts.component.scss +++ b/src/app/components/contacts/contacts.component.scss @@ -36,6 +36,10 @@ section { } } +.btn-inside-mobile { + display: none; +} + .left-frame { position: absolute; top: -64px; @@ -147,6 +151,13 @@ section { top: -64px; left: -64px; width: calc(100vw - 232px); + background-color: var(--bgContent); + } + + .contact { + &:hover { + background-color: var(--light-gray); + } } } @@ -158,6 +169,31 @@ section { width: calc(100vw); min-height: calc(100vh - 208px); } + + .btn-inside { + display: none; + } + + .btn-inside-mobile { + display: block; + } + + .btn { + position: fixed; + bottom: 100px; + right: 40px; + justify-content: space-between; + height: 56px; + width: 56px; + border-radius: 100%; + z-index: 1; + cursor: pointer; + img { + padding: 0; + width: 32px; + height: 32px; + } + } } @media screen and (max-width: 450px) { @@ -167,10 +203,6 @@ section { min-height: calc(100vh - 176px); } - .btn { - display: none; - } - .first-letter { &:first-child { margin-top: 0;