Form by Admin12121
#e8e8e8
1.button { 2 appaerance: none; 3 font: inherit; 4 border: none; 5 background: none; 6 cursor: pointer; 7} 8 9.container { 10 position: absolute; 11 top: 0; 12 left: 0; 13 right: 0; 14 bottom: 0; 15 width: 100%; 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 padding: 1.5rem; 20} 21 22.modal { 23 display: flex; 24 flex-direction: column; 25 width: 100%; 26 max-width: 500px; 27 background-color: #fff; 28 box-shadow: 0 15px 30px 0 rgba(0, 125, 171, 0.15); 29 border-radius: 10px; 30} 31 32.modal__header { 33 padding: 1rem 1.5rem; 34 border-bottom: 1px solid #ddd; 35 display: flex; 36 align-items: center; 37 justify-content: space-between; 38} 39 40.modal__body { 41 padding: 1rem 1rem; 42} 43 44.modal__footer { 45 padding: 0 1.5rem 1.5rem; 46} 47 48.modal__title { 49 font-weight: 700; 50 font-size: 1.25rem; 51} 52 53.button { 54 display: inline-flex; 55 align-items: center; 56 justify-content: center; 57 transition: 0.15s ease; 58} 59 60.button--icon { 61 width: 2.5rem; 62 height: 2.5rem; 63 background-color: transparent; 64 border-radius: 0.25rem; 65} 66 67.button--icon:focus, .button--icon:hover { 68 background-color: #ededed; 69} 70 71.button--primary { 72 background-color: #007dab; 73 color: #FFF; 74 padding: 0.75rem 1.25rem; 75 border-radius: 0.25rem; 76 font-weight: 500; 77 font-size: 0.875rem; 78} 79 80.button--primary:hover { 81 background-color: #006489; 82} 83 84.input { 85 display: flex; 86 flex-direction: column; 87} 88 89.input + .input { 90 margin-top: 1.75rem; 91} 92 93.input__label { 94 font-weight: 700; 95 font-size: 0.875rem; 96} 97 98.input__field { 99 display: block; 100 margin-top: 0.5rem; 101 border: 1px solid #DDD; 102 border-radius: 0.25rem; 103 padding: 0.75rem 0.75rem; 104 transition: 0.15s ease; 105} 106 107.input__field:focus { 108 outline: none; 109 border-color: #007dab; 110 box-shadow: 0 0 0 1px #007dab, 0 0 0 4px rgba(0, 125, 171, 0.25); 111} 112 113.input__field--textarea { 114 min-height: 100px; 115 max-width: 100%; 116} 117 118.input__description { 119 font-size: 0.875rem; 120 margin-top: 0.5rem; 121 color: #8d8d8d; 122}
1.2K views
1.2K views
MIT License