1 2/* 3 * Callouts (from Twitter Bootstrap Documentation) 4 * 5 * Not quite alerts, but custom and helpful notes for folks reading the docs. 6 * Requires a base and modifier class. 7 */ 8 9/* Common styles for all types */ 10.bs-callout { 11 padding: 20px; 12 margin: 20px 0; 13 border: 1px solid #eee; 14 border-left-width: 5px; 15 border-radius: 3px; 16} 17.bs-callout h4 { 18 margin-top: 0; 19 margin-bottom: 5px; 20} 21.bs-callout p:last-child { 22 margin-bottom: 0; 23} 24.bs-callout code { 25 border-radius: 3px; 26} 27.bs-callout+.bs-callout { 28 margin-top: -5px; 29} 30.bs-callout-default { 31 border-left-color: #777; 32} 33.bs-callout-default h4 { 34 color: #777; 35} 36.bs-callout-primary { 37 border-left-color: #428bca; 38} 39.bs-callout-primary h4 { 40 color: #428bca; 41} 42.bs-callout-success { 43 border-left-color: #5cb85c; 44} 45.bs-callout-success h4 { 46 color: #5cb85c; 47} 48.bs-callout-danger { 49 border-left-color: #d9534f; 50} 51.bs-callout-danger h4 { 52 color: #d9534f; 53} 54.bs-callout-warning { 55 border-left-color: #f0ad4e; 56} 57.bs-callout-warning h4 { 58 color: #f0ad4e; 59} 60.bs-callout-info { 61 border-left-color: #5bc0de; 62} 63.bs-callout-info h4 { 64 color: #5bc0de; 65} 66 67 68.bootswatch-callout(@theme, @primary, @success, @info, @warning, @danger) { 69 70 .@{theme} .bs-callout-primary { 71 72 border-left-color: @primary; 73 74 h4, .bs-callout-icon { 75 color: @primary; 76 } 77 78 } 79 80 .@{theme} .bs-callout-success { 81 82 border-left-color: @success; 83 84 h4, .bs-callout-icon { 85 color: @success; 86 } 87 88 } 89 90 .@{theme} .bs-callout-info { 91 92 border-left-color: @info; 93 94 h4, .bs-callout-icon { 95 color: @info; 96 } 97 98 } 99 100 .@{theme} .bs-callout-warning { 101 102 border-left-color: @warning; 103 104 h4, .bs-callout-icon { 105 color: @warning; 106 } 107 108 } 109 110 .@{theme} .bs-callout-danger { 111 112 border-left-color: @danger; 113 114 h4, .bs-callout-icon { 115 color: @danger; 116 } 117 118 } 119 120} 121 122/** 123 * Callauts for Bootswatch themes 124 */ 125.bootswatch-callout(cerulean, #2FA4E7, #73A839, #033C73, #DD5600, #C71C22); 126.bootswatch-callout(cosmo, #2780E3, #3FB618, #9954BB, #FF7518, #FF0039); 127.bootswatch-callout(cyborg, #2A9FD6, #77B300, #9933CC, #FF8800, #CC0000); 128.bootswatch-callout(darkly, #375A7F, #00BC8C, #3498DB, #F39C12, #E74C3C); 129.bootswatch-callout(flatly, #2C3E50, #18BC9C, #3498DB, #F39C12, #E74C3C); 130.bootswatch-callout(journal, #EB6864, #22B24C, #336699, #F5E625, #F57A00); 131.bootswatch-callout(lumen, #158CBA, #28B62C, #75CAEB, #FF851B, #FF4136); 132.bootswatch-callout(paper, #2196F3, #4CAF50, #9C27B0, #FF9800, #E51C23); 133.bootswatch-callout(readable, #4582EC, #3FAD46, #5BC0DE, #F0AD4E, #D9534F); 134.bootswatch-callout(sandstone, #325D88, #93C54B, #29ABE0, #F47C3C, #D9534F); 135.bootswatch-callout(simplex, #D9230F, #469408, #029ACF, #9B479F, #D9831F); 136.bootswatch-callout(slate, #7A8288, #62C462, #5BC0DE, #F89406, #EE5F5B); 137.bootswatch-callout(solar, #425358, #2AA198, #268BD2, #CB4B16, #D33682); 138.bootswatch-callout(spacelab, #446E9B, #3CB521, #3399F3, #D47500, #CD0200); 139.bootswatch-callout(superhero, #DF691A, #5CB85C, #5BC0DE, #F0AD4E, #D9534F); 140.bootswatch-callout(united, #E95420, #38B44A, #772953, #EFB73E, #DF382C); 141.bootswatch-callout(yeti, #008CBA, #43AC6A, #5BC0DE, #E99002, #F04124); 142 143/** 144 * Fix for SVG icon 145 */ 146i.bs-callout-icon { font-size: 2em; } 147svg.bs-callout-icon { height: 32px; width: 32px; } 148