657 views
1.input-container { 2 position: relative; 3 display: flex; 4 height: 2.8rem; 5 width: 100%; 6 min-width: 200px; 7 max-width: 250px; 8 background-color: #fff; 9 border-radius: 8px; 10 box-shadow: 20px 20px 30px rgba(0, 0, 0, .05); 11} 12 13.input-container input { 14 height: 100%; 15 width: 100%; 16 border-radius: 8px; 17 border: 1px solid rgb(176 190 197); 18 background-color: transparent; 19 padding: 0.625rem 70px 0.625rem 0.75rem; 20 font-size: 0.875rem; 21 line-height: 1.25rem; 22 font-weight: 400; 23 color: rgb(69 90 100); 24 outline: none; 25 transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); 26} 27 28.input-container input:focus { 29 border: 1px solid rgb(236 72 153 ); 30} 31 32.invite-btn { 33 position: absolute; 34 width: 65px; 35 right: 4px; 36 top: 4px; 37 bottom: 4px; 38 z-index: 10; 39 border-radius: 4px; 40 background-color: rgb(236 72 153 ); 41 color: #fff; 42 padding-top: .25rem; 43 padding-bottom: .25rem; 44 padding-left: 0.5rem; 45 padding-right: 0.5rem; 46 text-align: center; 47 vertical-align: middle; 48 font-size: 12px; 49 font-weight: 600; 50 text-transform: uppercase; 51 border: none; 52 transition: .6s ease; 53} 54 55.invite-btn:hover { 56 right: 2px; 57 top: 2px; 58 bottom: 2px; 59 border-radius: 8px; 60} 61 62.input-container input:placeholder-shown ~ .invite-btn { 63 pointer-events: none; 64 background-color: gray; 65 opacity: 0.5; 66}
MIT License