toastr.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. .toast-title {
  2. font-weight: bold; }
  3. .toast-message {
  4. -ms-word-wrap: break-word;
  5. word-wrap: break-word; }
  6. .toast-message a,
  7. .toast-message label {
  8. color: #ffffff; }
  9. .toast-message a:hover {
  10. color: #cccccc;
  11. text-decoration: none; }
  12. .toast-close-button {
  13. position: relative;
  14. right: -0.3em;
  15. top: -0.3em;
  16. float: right;
  17. font-size: 20px;
  18. font-weight: bold;
  19. color: #ffffff;
  20. -webkit-text-shadow: 0 1px 0 #ffffff;
  21. text-shadow: 0 1px 0 #ffffff;
  22. opacity: 0.8;
  23. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  24. filter: alpha(opacity=80); }
  25. .toast-close-button:hover,
  26. .toast-close-button:focus {
  27. color: #000000;
  28. text-decoration: none;
  29. cursor: pointer;
  30. opacity: 0.4;
  31. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  32. filter: alpha(opacity=40); }
  33. /*Additional properties for button version
  34. iOS requires the button element instead of an anchor tag.
  35. If you want the anchor version, it requires `href="#"`.*/
  36. button.toast-close-button {
  37. padding: 0;
  38. cursor: pointer;
  39. background: transparent;
  40. border: 0;
  41. -webkit-appearance: none; }
  42. .toast-top-center {
  43. top: 0;
  44. right: 0;
  45. width: 100%; }
  46. .toast-bottom-center {
  47. bottom: 0;
  48. right: 0;
  49. width: 100%; }
  50. .toast-top-full-width {
  51. top: 0;
  52. right: 0;
  53. width: 100%; }
  54. .toast-bottom-full-width {
  55. bottom: 0;
  56. right: 0;
  57. width: 100%; }
  58. .toast-top-left {
  59. top: 12px;
  60. left: 12px; }
  61. .toast-top-right {
  62. top: 12px;
  63. right: 12px; }
  64. .toast-bottom-right {
  65. right: 12px;
  66. bottom: 12px; }
  67. .toast-bottom-left {
  68. bottom: 12px;
  69. left: 12px; }
  70. #toast-container {
  71. position: fixed;
  72. z-index: 999999;
  73. /*overrides*/ }
  74. #toast-container * {
  75. -webkit-box-sizing: border-box;
  76. box-sizing: border-box; }
  77. #toast-container > div {
  78. position: relative;
  79. overflow: hidden;
  80. margin: 0 0 6px;
  81. padding: 15px 15px 15px 50px;
  82. width: 300px;
  83. border-radius: 3px 3px 3px 3px;
  84. background-position: 15px center;
  85. background-repeat: no-repeat;
  86. -webkit-box-shadow: 0 0 12px #999999;
  87. box-shadow: 0 0 12px #999999;
  88. color: #ffffff;
  89. opacity: 0.8;
  90. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  91. filter: alpha(opacity=80); }
  92. #toast-container > div:hover {
  93. -webkit-box-shadow: 0 0 12px #000000;
  94. box-shadow: 0 0 12px #000000;
  95. opacity: 1;
  96. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  97. filter: alpha(opacity=100);
  98. cursor: pointer; }
  99. #toast-container > .toast-info {
  100. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; }
  101. #toast-container > .toast-error {
  102. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; }
  103. #toast-container > .toast-success {
  104. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; }
  105. #toast-container > .toast-warning {
  106. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; }
  107. #toast-container.toast-top-center > div,
  108. #toast-container.toast-bottom-center > div {
  109. width: 300px;
  110. margin-left: auto;
  111. margin-right: auto; }
  112. #toast-container.toast-top-full-width > div,
  113. #toast-container.toast-bottom-full-width > div {
  114. width: 96%;
  115. margin-left: auto;
  116. margin-right: auto; }
  117. .toast {
  118. background-color: #030303; }
  119. .toast-success {
  120. background-color: #51a351; }
  121. .toast-error {
  122. background-color: #bd362f; }
  123. .toast-info {
  124. background-color: #2f96b4; }
  125. .toast-warning {
  126. background-color: #f89406; }
  127. .toast-progress {
  128. position: absolute;
  129. left: 0;
  130. bottom: 0;
  131. height: 4px;
  132. background-color: #000000;
  133. opacity: 0.4;
  134. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  135. filter: alpha(opacity=40); }
  136. /*Responsive Design*/
  137. @media all and (max-width: 240px) {
  138. #toast-container > div {
  139. padding: 8px 8px 8px 50px;
  140. width: 11em; }
  141. #toast-container .toast-close-button {
  142. right: -0.2em;
  143. top: -0.2em; } }
  144. @media all and (min-width: 241px) and (max-width: 480px) {
  145. #toast-container > div {
  146. padding: 8px 8px 8px 50px;
  147. width: 18em; }
  148. #toast-container .toast-close-button {
  149. right: -0.2em;
  150. top: -0.2em; } }
  151. @media all and (min-width: 481px) and (max-width: 768px) {
  152. #toast-container > div {
  153. padding: 15px 15px 15px 50px;
  154. width: 25em; } }
  155. /* THEME COLORs
  156. ========================================================================== */
  157. /* Looks good on chrome default color profile */
  158. /* looks good in sRGB but washed up on chrome default
  159. $color-primary: #826bb0;
  160. $color-success: #31cb55;
  161. $color-info: #5e93ec;
  162. $color-warning: #eec559;
  163. $color-danger: #dc4b92;
  164. $color-fusion: darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
  165. /* Color Polarity
  166. ========================================================================== */
  167. /* PAINTBUCKET MIXER
  168. ========================================================================== */
  169. /* the grays */
  170. /* the sapphires */
  171. /* the emeralds */
  172. /* the amethyths */
  173. /* the topaz */
  174. /* the rubies */
  175. /* the graphites */
  176. /* Define universal border difition (div outlines, etc)
  177. ========================================================================== */
  178. /* MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
  179. ========================================================================== */
  180. /* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
  181. /* bootstrap reference xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
  182. /* global var used for spacing*/
  183. /* Uniform Padding variable */
  184. /* Heads up! This is a global scoped variable - changing may impact the whole template */
  185. /* BOOTSTRAP OVERRIDES (bootstrap variables)
  186. ========================================================================== */
  187. /* usage: theme-colors("primary"); */
  188. /* forms */
  189. /*$input-height: calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
  190. /* links */
  191. /* checkbox */
  192. /*$custom-file-height-inner: calc(2.25rem - 1px);*/
  193. /* not part of bootstrap variable */
  194. /* custom checkbox */
  195. /* custom range */
  196. /* select */
  197. /* badge */
  198. /* cards */
  199. /*border radius*/
  200. /* alert */
  201. /* toast */
  202. /* breadcrumb */
  203. /* input button */
  204. /* nav link */
  205. /* nav, tabs, pills */
  206. /* tables */
  207. /* dropdowns */
  208. /* dropdowns sizes */
  209. /* popovers */
  210. /* tooltips */
  211. /* modal */
  212. /* reference guide
  213. http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
  214. 8px = 0.5rem
  215. 9px = 0.5625rem
  216. 10px = 0.625rem
  217. 11px = 0.6875rem
  218. 12px = 0.75rem
  219. 13px = 0.8125rem
  220. 14px = 0.875rem
  221. 15px = 0.9375rem
  222. 16px = 1rem (base)
  223. 17px = 1.0625rem
  224. 18px = 1.125rem
  225. 19px = 1.1875rem
  226. 20px = 1.25rem
  227. 21px = 1.3125rem
  228. 22px = 1.375rem
  229. 24px = 1.5rem
  230. 25px = 1.5625rem
  231. 26px = 1.625rem
  232. 28px = 1.75rem
  233. 30px = 1.875rem
  234. 32px = 2rem
  235. 34px = 2.125rem
  236. 36px = 2.25rem
  237. 38px = 2.375rem
  238. 40px = 2.5rem
  239. */
  240. /* Fonts */
  241. /* carousel */
  242. /* BASE VARS
  243. ========================================================================== */
  244. /* font vars below will auto change to rem values using function rem($value)*/
  245. /* 11px */
  246. /* 12px */
  247. /* 12.5px */
  248. /* 14px */
  249. /* 15px */
  250. /* 16px */
  251. /* 28px */
  252. /* Font Family
  253. ========================================================================== */
  254. /*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
  255. /* ANIMATIONS
  256. ========================================================================== */
  257. /* this addresses all animation related to nav hide to nav minify */
  258. /* Z-INDEX declearation
  259. ========================================================================== */
  260. /* we adjust bootstrap z-index to be higher than our higest z-index*/
  261. /* CUSTOM ICON PREFIX
  262. ========================================================================== */
  263. /* PRINT CSS (landscape or portrait)
  264. ========================================================================== */
  265. /* landscape or portrait */
  266. /* auto, letter */
  267. /* Common Element Variables
  268. ========================================================================== */
  269. /* Z-index decleartion "birds eye view"
  270. ========================================================================== */
  271. /* Components
  272. ========================================================================== */
  273. /* PAGE HEADER STUFF
  274. ========================================================================== */
  275. /* colors */
  276. /* height */
  277. /* logo */
  278. /* try not to go beywond the width of $main_nav_width value */
  279. /* you may need to change this depending on your logo design */
  280. /* adjust this as you see fit : left, right, center */
  281. /* icon font size (not button) */
  282. /* search input box */
  283. /* suggestion: #ccced0*/
  284. /* btn */
  285. /* dropdown: app list */
  286. /* badge */
  287. /* COMPONENTS & MODS */
  288. /* NAVIGATION STUFF
  289. Guide:
  290. aside.page-sidebar ($nav-width, $nav-background)
  291. .page-logo
  292. .primary-nav
  293. .info-card
  294. ul.nav-menu
  295. li
  296. a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
  297. icon
  298. span
  299. collapse-sign
  300. ul.nav-menu-sub-one
  301. li
  302. a ($nav-level-1... $nav-sub-link-height)
  303. span
  304. collapse-sign
  305. ul.nav-menu-sub-two
  306. li
  307. a ($nav-level-2... $nav-sub-link-height)
  308. span
  309. p.nav-title ($nav-title-*...)
  310. ========================================================================== */
  311. /* main navigation */
  312. /* left panel */
  313. /* nav parent level-0 */
  314. /* nav icon sizes */
  315. /* badge default */
  316. /* all child */
  317. /* nav title */
  318. /* nav Minify */
  319. /* when the menu pops on hover */
  320. /* navigation Width */
  321. /* partial visibility of the menu */
  322. /* top navigation */
  323. /* nav Info Card (appears below the logo) */
  324. /* width is auto */
  325. /* nav DL labels for all child */
  326. /* will be pulled to left as a negative value */
  327. /* MISC Settings
  328. ========================================================================== */
  329. /* List Table */
  330. /* PAGE SETTINGS
  331. ========================================================================== */
  332. /* PAGE BREADCRUMB
  333. ========================================================================== */
  334. /* PAGE COMPONENT PANELS
  335. ========================================================================== */
  336. /* PAGE COMPONENT PROGRESSBARS
  337. ========================================================================== */
  338. /* PAGE COMPONENT MESSENGER
  339. ========================================================================== */
  340. /* FOOTER
  341. ========================================================================== */
  342. /* GLOBALS
  343. ========================================================================== */
  344. /* ACCESSIBILITIES */
  345. /* SHORTCUT BUTTON (appears on bottom right of the page) */
  346. /* GULP WARNINGS */
  347. .toast {
  348. background-color: #886ab5;
  349. background-image: none !important; }
  350. .toast:before {
  351. content: "\f05a";
  352. position: absolute;
  353. display: -webkit-box;
  354. display: -ms-flexbox;
  355. display: flex;
  356. font-family: 'Font Awesome 5 Pro';
  357. font-size: 1.8rem;
  358. left: 1rem;
  359. top: 0;
  360. bottom: 0;
  361. -webkit-box-align: center;
  362. -ms-flex-align: center;
  363. align-items: center; }
  364. .toast-success {
  365. background-color: #1ab3a3; }
  366. .toast-success:before {
  367. content: "\f2f7"; }
  368. .toast-error {
  369. background-color: #fd3995; }
  370. .toast-error:before {
  371. content: "\f2f0"; }
  372. .toast-info {
  373. background-color: #2196F3; }
  374. .toast-info:before {
  375. content: "\f05a"; }
  376. .toast-warning {
  377. background-color: #ffb20e; }
  378. .toast-warning > div,
  379. .toast-warning .toast-close-button {
  380. color: #000; }
  381. .toast-warning:before {
  382. content: "\f071";
  383. color: #000; }
  384. #toast-container > .toast {
  385. padding: 1rem 1rem 1rem 3.5rem;
  386. border-radius: 4px;
  387. background-image: none !important;
  388. width: 22rem;
  389. opacity: 0.9;
  390. -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  391. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
  392. #toast-container > .toast:hover {
  393. -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  394. box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); }
  395. .toast-close-button {
  396. top: -0.7em; }
  397. @media all and (min-width: 241px) and (max-width: 480px) {
  398. #toast-container > .toast {
  399. width: 18rem; }
  400. #toast-container .toast-close-button {
  401. top: -0.7em; } }
  402. /*# sourceMappingURL=toastr.css.map */