#e8e8e8
1.card { 2 overflow: hidden; 3 position: relative; 4 text-align: left; 5 border-radius: 0.5rem; 6 max-width: 290px; 7 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 8 background-color: #fff; 9} 10 11.dismiss { 12 position: absolute; 13 right: 10px; 14 top: 10px; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 padding: 0.5rem 1rem; 19 background-color: #fff; 20 color: black; 21 border: 2px solid #D1D5DB; 22 font-size: 1rem; 23 font-weight: 300; 24 width: 30px; 25 height: 30px; 26 border-radius: 7px; 27 transition: .3s ease; 28} 29 30.dismiss:hover { 31 background-color: #ee0d0d; 32 border: 2px solid #ee0d0d; 33 color: #fff; 34} 35 36.header { 37 padding: 1.25rem 1rem 1rem 1rem; 38} 39 40.image { 41 display: flex; 42 margin-left: auto; 43 margin-right: auto; 44 background-color: #e2feee; 45 flex-shrink: 0; 46 justify-content: center; 47 align-items: center; 48 width: 3rem; 49 height: 3rem; 50 border-radius: 9999px; 51 animation: animate .6s linear alternate-reverse infinite; 52 transition: .6s ease; 53} 54 55.image svg { 56 color: #0afa2a; 57 width: 2rem; 58 height: 2rem; 59} 60 61.content { 62 margin-top: 0.75rem; 63 text-align: center; 64} 65 66.title { 67 color: #066e29; 68 font-size: 1rem; 69 font-weight: 600; 70 line-height: 1.5rem; 71} 72 73.message { 74 margin-top: 0.5rem; 75 color: #595b5f; 76 font-size: 0.875rem; 77 line-height: 1.25rem; 78} 79 80.actions { 81 margin: 0.75rem 1rem; 82} 83 84.history { 85 display: inline-flex; 86 padding: 0.5rem 1rem; 87 background-color: #1aa06d; 88 color: #ffffff; 89 font-size: 1rem; 90 line-height: 1.5rem; 91 font-weight: 500; 92 justify-content: center; 93 width: 100%; 94 border-radius: 0.375rem; 95 border: none; 96 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 97} 98 99.track { 100 display: inline-flex; 101 margin-top: 0.75rem; 102 padding: 0.5rem 1rem; 103 color: #242525; 104 font-size: 1rem; 105 line-height: 1.5rem; 106 font-weight: 500; 107 justify-content: center; 108 width: 100%; 109 border-radius: 0.375rem; 110 border: 1px solid #D1D5DB; 111 background-color: #fff; 112 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 113} 114 115@keyframes animate { 116 from { 117 transform: scale(1); 118 } 119 120 to { 121 transform: scale(1.09); 122 } 123}
6.8K views
6.8K views
Comments
Variations
1 MIT License