diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss index 7ed5f78..8ef8b6f 100644 --- a/src/styles/components/_repertoire.scss +++ b/src/styles/components/_repertoire.scss @@ -93,14 +93,14 @@ body { .nav_bar_verticale { display: flex; flex-direction: column; - justify-content: space-evenly; + justify-content: space-around; align-items: center; width: 5%; margin: 5px 5px 10px 10px; background: rgba(255, 255, 255, 0.3); border-radius: 15px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(15px); @@ -156,106 +156,109 @@ body { } } } + } + + .contenu { + width: 94.3%; + height: auto; + margin: 5px 10px 10px 5px; - .contenu { + .searchAndAddButton { + height: 100px; + display: flex; + flex-direction: row; + align-items: center; width: 100%; + justify-content: space-between; - .searchAndAddButton { - height: 100px; + .boutonAddContact { display: flex; - flex-direction: row; + justify-content: center; align-items: center; + height: 40px; + min-width: 150px; + margin: 30px 30px; + border-radius: 25px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + } + + .input_box { + display: flex; + justify-content: center; + align-items: center; + position: relative; + height: 40px; + max-width: 350px; width: 100%; - justify-content: space-between; + margin: 30px 30px; + border-radius: 25px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - .boutonAddContact { - display: flex; - justify-content: center; - align-items: center; - height: 40px; - min-width: 150px; - margin: 30px 30px; + input { + position: relative; + width: 100%; + height: 100%; + padding: 0 15px 0 65px; + outline: none; + border: none; border-radius: 25px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + font-size: 16px; + font-weight: 400; + color: #333; } - .input_box { + .search { display: flex; - justify-content: center; align-items: center; - position: relative; - height: 40px; - max-width: 350px; - width: 100%; - margin: 30px 30px; - border-radius: 25px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - - input { - position: relative; - width: 100%; - height: 100%; - padding: 0 15px 0 65px; - outline: none; - border: none; - border-radius: 25px; - font-size: 16px; - font-weight: 400; - color: #333; - } + justify-content: center; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 60px; + border-radius: 25px 0 0 25px; - .search { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 60px; - border-radius: 25px 0 0 25px; - - .search-icon { - font-size: 30px; - color: black; - } + .search-icon { + font-size: 30px; + color: black; } } - } - .tabListContact { - margin-bottom: 20px; - padding-right: 10px; - height: 82%; - scroll-behavior: smooth; - overflow-y: scroll; + } - &::-webkit-scrollbar { - width: 15px; - } + .tabListContact { + margin-bottom: 20px; + padding-right: 10px; + height: 82%; + scroll-behavior: smooth; + overflow-y: scroll; - &::-webkit-scrollbar-track { - background: #f1f1f1; - } + &::-webkit-scrollbar { + width: 15px; + } - &::-webkit-scrollbar-thumb { - background: #888; - border-radius: 10px; - } + &::-webkit-scrollbar-track { + background: #f1f1f1; + } - &::-webkit-scrollbar-thumb:hover { - background: #555; - } - .photoContact{ - width: 50px; - height: 50px; - border-radius: 50%; - object-fit: cover; - border: 1px solid black; - } + &::-webkit-scrollbar-thumb { + background: #888; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb:hover { + background: #555; + } + + .photoContact { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; + border: 1px solid black; } } } } -} \ No newline at end of file +}