#e8e8e8
1.content i { 2 margin-bottom: 41px; 3} 4 5.container { 6 border-radius: 1px; 7 padding: 50px 40px 20px 40px; 8 box-sizing: border-box; 9 font-family: sans-serif; 10 color: #737373; 11 border: 1px solid rgb(219, 219, 219); 12 text-align: center; 13 background: white; 14} 15 16.container svg { 17 width: 16px; 18 height: auto; 19} 20 21.content__form { 22 display: flex; 23 flex-direction: column; 24 row-gap: 14px; 25} 26 27.content__inputs { 28 display: flex; 29 flex-direction: column; 30 row-gap: 8px; 31} 32 33.content__form label { 34 border: 1px solid rgb(219, 219, 219); 35 display: flex; 36 align-items: center; 37 position: relative; 38 min-width: 268px; 39 height: 38px; 40 background: rgb(250, 250, 250); 41 border-radius: 3px; 42} 43 44.content__form span { 45 position: absolute; 46 text-overflow: ellipsis; 47 transform-origin: left; 48 font-size: 12px; 49 left: 8px; 50 pointer-events: none; 51 transition: transform ease-out .1s 52} 53 54.content__form input { 55 width: 100%; 56 background: inherit; 57 border: 0; 58 outline: none; 59 padding: 9px 8px 7px 8px; 60 text-overflow: ellipsis; 61 font-size: 16px; 62 vertical-align: middle; 63} 64 65.content__form input:valid+span { 66 transform: scale(calc(10 / 12)) translateY(-10px); 67} 68 69.content__form input:valid { 70 padding: 14px 0 2px 8px; 71 font-size: 12px; 72} 73 74.content__or-text { 75 display: flex; 76 justify-content: space-between; 77 align-items: center; 78 text-transform: uppercase; 79 font-size: 13px; 80 column-gap: 18px; 81 margin-top: 18px; 82} 83 84.content__or-text span:nth-child(3), 85.content__or-text span:nth-child(1) { 86 display: block; 87 width: 100%; 88 height: 1px; 89 background-color: rgb(219, 219, 219); 90} 91 92.content__forgot-buttons { 93 display: flex; 94 flex-direction: column; 95 margin-top: 28px; 96 row-gap: 21px; 97} 98 99.content__forgot-buttons button { 100 display: flex; 101 justify-content: center; 102 align-items: center; 103 column-gap: 8px; 104 background: none; 105 border: none; 106 cursor: pointer; 107 font-size: 12px; 108 color: #00376b; 109} 110 111.content__forgot-buttons button:first-child { 112 color: #385185; 113 font-size: 14px; 114 font-weight: 600; 115} 116 117.content__form button { 118 background: rgb(0, 149, 246); 119 color: white; 120 border: none; 121 border-radius: 8px; 122 font-weight: 700; 123 font-size: 14px; 124 padding: 7px 16px; 125 cursor: pointer; 126} 127 128.content__form button:hover { 129 background: rgb(24, 119, 242); 130} 131 132.content__form button:active:not(:hover) { 133 background: rgb(0, 149, 246); 134 opacity: .7; 135}
5.9K views
5.9K views
Comments
MIT License