/*#region Notifications*/ .toast-title { font-weight: bold; } .toast-message { -ms-word-wrap: break-word; word-wrap: break-word; } .toast-message a, .toast-message label { color: @white; } .toast-message a:hover { color: @gray; text-decoration: none; } .toast-close-button { position: relative; right: -0.3em; top: -0.5em; float: right; font-size: 18px; font-family: 'FontAwesome'; font-weight: bold; color: @white; .text-shadow(0 1px 0 @white); .opacity(0.8); } .toast-close-button:hover, .toast-close-button:focus { color: @black; text-decoration: none; cursor: pointer; .opacity(0.4); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; right: 0; width: 100%; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } #toast-container { position: fixed; z-index: 999999; /*overrides*/ } #toast-container > div { margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; .border-radius(3px); background-position: 15px center; background-repeat: no-repeat; .box-shadow(0 0 12px @darkgray); color: @white; .opacity(0.8); } #toast-container > :hover { .box-shadow(0 0 12px #000000); .opacity(1); cursor: pointer; } #toast-container > .toast { background-image: none !important; } #toast-container > .toast:before { position: fixed; font-family: FontAwesome; font-size: 24px; line-height: 18px; float: left; color: #FFF; padding-right: 0.5em; margin: auto 0.5em auto -1.5em; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { width: 96%; margin: auto; } .toast { background-color: #030303; } .toast-white { background-color: @white !important; } .toast-snow { background-color: @snow !important; } .toast-whitesmoke { background-color: @whitesmoke !important; } .toast-seashell { background-color: @seashell !important; } .toast-ivory { background-color: @ivory !important; } .toast-platinum { background-color: @platinum !important; } .toast-lightgray { background-color: @lightgray !important; } .toast-gray { background-color: @gray !important; } .toast-darkgray { background-color: @darkgray !important; } .toast-silver { background-color: @silver !important; } .toast-sonic-silver { background-color: @sonic-silver !important; } .toast-storm-cloud { background-color: @storm-cloud !important; } .toast-lightcarbon { background-color: @lightcarbon !important; } .toast-carbon { background-color: @carbon !important; } .toast-slate-gray { background-color: @slate-gray !important; } .toast-darkcarbon { background-color: @darkcarbon !important; } .toast-blue { background-color: @blue !important; } .toast-info { background-color: @info !important; } .toast-sky { background-color: @sky !important; } .toast-primary { background-color: @primary !important; } .toast-blueberry { background-color: @blueberry !important; } .toast-palegreen { background-color: @palegreen !important; } .toast-success { background-color: @success !important; } .toast-green { background-color: @green !important; } .toast-lightyellow { background-color: @lightyellow !important; } .toast-yellow { background-color: @yellow !important; } .toast-warning { background-color: @warning !important; } .toast-gold { background-color: @gold !important; } .toast-orange { background-color: @orange !important; } .toast-lightred { background-color: @lightred !important; } .toast-darkorange { background-color: @darkorange !important; } .toast-red { background-color: @red !important; } .toast-danger { background-color: @danger !important; } .toast-pink { background-color: @pink !important; } .toast-darkpink { background-color: @darkpink !important; } .toast-magenta { background-color: @magenta !important; } .toast-purple { background-color: @purple !important; } .toast-maroon { background-color: @maroon !important; } /*Responsive Design*/ @media all and (max-width: 239px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 11em; } #toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 240px) and (max-width: 479px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 18em; } #toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 480px) and (max-width: 767px) { #toast-container > div { padding: 15px 15px 15px 50px; width: 25em; } } /*#endregion Notifications*/