Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 4 * | 4 * |
| 5 * Css based bubble. | 5 * Css based bubble. |
| 6 */ | 6 */ |
| 7 | 7 |
| 8 .bubble { | 8 .bubble { |
| 9 -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); | 9 -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); |
| 10 background: white; | 10 background: white; |
| 11 border: 1px solid rgba(0, 0, 0, 0.25); | 11 border: 1px solid rgba(0, 0, 0, 0.25); |
| 12 border-radius: 10px; | 12 border-radius: 10px; |
| 13 margin: 10px 2px 2px 2px; | 13 margin: 2px; |
| 14 padding: 10px; | 14 padding: 10px; |
| 15 position: absolute; | 15 position: absolute; |
| 16 max-width: 250px; | 16 max-width: 250px; |
| 17 } | 17 } |
| 18 | 18 |
| 19 .bubble-top { | |
| 20 margin-bottom: 10px; | |
| 21 } | |
| 22 | |
| 23 .bubble-right | |
|
altimofeev
2012/02/03 11:49:30
',' (comma) was missed
Ivan Korotkov
2012/02/07 17:18:00
Done.
| |
| 24 html[dir=rtl] .bubble-left { | |
| 25 margin-left: 10px; | |
| 26 } | |
| 27 | |
| 28 .bubble-bottom { | |
| 29 margin-top: 10px; | |
| 30 } | |
| 31 | |
| 32 .bubble-left, | |
| 33 html[dir=rtl] .bubble-right { | |
| 34 margin-right: 10px; | |
| 35 } | |
| 36 | |
| 19 .bubble:before { | 37 .bubble:before { |
| 20 content: ""; | 38 content: ""; |
| 21 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; | |
| 22 border-style: solid; | 39 border-style: solid; |
| 23 border-width: 8px; | 40 border-width: 8px; |
| 24 display: block; | 41 display: block; |
| 42 position: absolute; | |
| 43 } | |
| 44 | |
| 45 .bubble-top:before { | |
| 46 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; | |
| 47 bottom: -16px; | |
| 25 left: 10px; | 48 left: 10px; |
| 26 position: absolute; | 49 } |
| 50 | |
| 51 .bubble-right:before, | |
| 52 html[dir=rtl] .bubble-left:before { | |
| 53 border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent; | |
| 54 left: -16px; | |
| 55 top: 10px; | |
| 56 } | |
| 57 | |
| 58 .bubble-bottom:before { | |
| 59 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; | |
| 60 left: 10px; | |
| 27 top: -16px; | 61 top: -16px; |
| 28 } | 62 } |
| 29 | 63 |
| 64 .bubble-left:before, | |
| 65 html[dir=rtl] .bubble-right:before { | |
| 66 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); | |
| 67 right: -16px; | |
| 68 top: 10px; | |
| 69 } | |
| 70 | |
| 30 .bubble:after { | 71 .bubble:after { |
| 31 content: ""; | 72 content: ""; |
| 32 border-color: transparent transparent white transparent; | |
| 33 border-style: solid; | 73 border-style: solid; |
| 34 border-width: 8px; | 74 border-width: 8px; |
| 35 display: block; | 75 display: block; |
| 76 position: absolute; | |
| 77 } | |
| 78 | |
| 79 .bubble-top:after { | |
| 80 border-color: white transparent transparent transparent; | |
| 81 bottom: -15px; | |
| 36 left: 10px; | 82 left: 10px; |
| 37 position: absolute; | 83 } |
| 84 | |
| 85 .bubble-right:after, | |
| 86 html[dir=rtl] .bubble-left:after { | |
| 87 border-color: transparent white transparent transparent; | |
| 88 left: -15px; | |
| 89 top: 10px; | |
| 90 } | |
| 91 | |
| 92 .bubble-bottom:after { | |
| 93 border-color: transparent transparent white transparent; | |
| 94 left: 10px; | |
| 38 top: -15px; | 95 top: -15px; |
| 39 } | 96 } |
| 97 | |
| 98 .bubble-left:after, | |
| 99 html[dir=rtl] .bubble-right:after { | |
| 100 border-color: transparent transparent transparent white; | |
| 101 right: -15px; | |
| 102 top: 10px; | |
| 103 } | |
| OLD | NEW |