.button-add-link{ border: solid black 2px; background-color: beige; border-radius: 10px; width: 250px; height: 50px; text-align: center; cursor: pointer; } .popup-ajout-container { position: fixed; animation: popup 1s forwards; z-index: 100; left: 50%; @keyframes popup { from{ backdrop-filter: none; } to { backdrop-filter: blur(2px); } } .modal { transform: translate(-100%); background: $color-2; padding: 25px; border-radius: 20px; box-shadow: 0 0 2px rgba(131, 130, 130, 0.356); overflow: auto; transform: scaleY(0); transform-origin: center; animation: modal .5s forwards; h3 { min-width: 200px; } @keyframes modal { to { transform: scale(1) translate(-50%); } } .cross { position: absolute; top: 25px; right: 25px; transition: 0.1s; cursor: pointer; &:hover { transform: scale(1.07); } } ul { min-width: 250px; max-width: 300px; margin: 20px 0 0; max-height: 500px; min-height: 200px; li { display: grid; grid-template-columns: 64px 1fr 114px; align-items: center; margin: 10px 0; img { height: 50px; width: 50px; border-radius: 20px; object-fit: cover; box-shadow: 0 0 2px rgba(51, 51, 51, 0.376); } h4 { text-align: left; min-width: 210px; } .follow-handler { text-align: left; button { background: $color-4; border-radius: 20px; margin-right: 6px; &:hover { color: $color-3; transform: translateX(2px); } } } } } } } #newPoste-buttonForm{ button{ color: white; transition: all 1s; margin-top: 2%; border-radius: 20px; min-width: 80px; background-color: $color-7; } }