assets/styles/notes.less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
// TODO .note { .mix-box(@light-blue, @dark-blue, @dark-blue); p { margin-top: 0; margin-bottom: 0; &:first-child { font-size: 105%; font-weight: bold; color: @dark-blue; .mix-symbol(@fa-var-thumb-tack, @dark-blue) } } } .tip { .mix-box(@light-green, @dark-green, @dark-green); p { margin-top: 0; margin-bottom: 0; &:first-child { font-size: 105%; font-weight: bold; color: @dark-green; .mix-symbol(@fa-var-lightbulb-o, @dark-green) } } } .warning { .mix-box(@light-red, @dark-red, @dark-red); p { margin-top: 0; margin-bottom: 0; &:first-child { font-size: 105%; font-weight: bold; color: @dark-red; .mix-symbol(@fa-var-exclamation-triangle, @dark-red) } } } .sidebar { .mix-box(@light-gray, @gray-5, @gray-5); p { margin-top: 0; margin-bottom: 0; &:first-child { font-size: 105%; font-weight: bold; color: @gray-4; .mix-symbol(@fa-var-info-circle, @gray-4) } } } .note, .warning, .tip { width: 66.6667%; } @media screen and (max-width: 599px) { .note, .warning { width: 96%; } } @media screen and (min-width: 600px) { .note, .warning { width: 66.6667%; } } |