#e8e8e8
1.notification { 2 width: 300px; 3 height: 70px; 4 background: #fff; 5 border-radius: 10px; 6 display: flex; 7 align-items: center; 8 justify-content: space-between; 9 color: #212121; 10 box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1); 11 padding: 2px; 12 position: relative; 13 animation: appear .6s linear alternate-reverse infinite; 14 transition: all .6s ease; 15} 16 17.icon { 18 height: 100%; 19 transition: transform .6s ease; 20} 21 22.messages { 23 height: 100%; 24 flex: 1; 25 display: flex; 26 flex-direction: column; 27 justify-content: flex-start; 28 padding: 4px; 29} 30 31.title { 32 font-size: 0.95rem; 33 line-height: 1rem; 34 font-weight: 700; 35 margin-bottom: 4px; 36 color: #494949; 37} 38 39.description { 40 font-size: 13px; 41 margin-bottom: 4px; 42} 43 44.level { 45 color: #7d5cf5; 46 font-weight: 600; 47 background-color: #7d5cf53f; 48 display: flex; 49 align-items: center; 50 flex: 1; 51 height: 0; 52 width: max-content; 53 padding: 4px; 54 border-radius: 10px; 55} 56 57.level svg { 58 height: 140%; 59 background-color: #7d5cf5; 60 border-radius: 6px; 61 margin-right: 4px; 62} 63 64.action { 65 height: 100%; 66 display: flex; 67 align-items: center; 68 justify-content: center; 69} 70 71.action button { 72 padding: 0.5rem 1rem; 73 background-color: #7d5cf5; 74 color: #ffffff; 75 font-size: 0.75rem; 76 line-height: 1rem; 77 font-weight: 700; 78 text-transform: uppercase; 79 border-radius: 10px; 80 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 81 border: none; 82 height: 40px; 83 transition: all .6s ease; 84 margin-right: 6px; 85} 86 87.notification:hover .icon { 88 transform: rotate(45deg); 89} 90 91.action button:hover { 92 height: 100%; 93 margin-right: 0; 94} 95 96.action button:active { 97 background-color: #4dec48; 98} 99 100@keyframes appear { 101 from { 102 transform: scale(0.98); 103 } 104 105 to { 106 transform: scale(1); 107 } 108}
681 views
681 views
Comments
MIT License