github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/core/notifications.scss (about) 1 $bonusRightPadding: 20px; 2 3 section.notifications { 4 position: fixed; 5 bottom: 10px; 6 right: 10px; 7 z-index: 100; 8 9 .flash-message { 10 width: 300px; 11 transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 12 padding: 1rem; 13 margin-bottom: 1rem; 14 box-shadow: 1px 1px 4px 0px rgb(0, 0, 0, 0.1); 15 position: relative; 16 overflow: hidden; 17 padding-right: $bonusRightPadding; 18 19 &.alert-success { 20 background-color: lighten($nomad-green, 50%); 21 } 22 &.alert-error { 23 background-color: lighten($danger, 45%); 24 } 25 26 h3 { 27 font-weight: bold; 28 } 29 30 span.close-button { 31 position: absolute; 32 top: 0; 33 right: 0; 34 padding: 10px; 35 line-height: 100%; 36 font-size: 1.5rem; 37 cursor: pointer; 38 } 39 40 .alert-progress { 41 width: 100%; 42 border-radius: 3px; 43 position: absolute; 44 bottom: 0; 45 left: 0; 46 .alert-progressBar { 47 background-color: $nomad-green; 48 height: 2px; 49 width: 0%; 50 } 51 } 52 53 &.active { 54 .alert-progress { 55 .alert-progressBar { 56 width: 100%; 57 } 58 } 59 } 60 61 .custom-action-button { 62 width: calc(100% + $bonusRightPadding - 1rem); 63 margin: 1.5rem 0 0; 64 } 65 } 66 }