| OLD | NEW |
| 1 /* Copyright (c) 2012 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 2px 4px rgba(0, 0, 0, 0.2); | |
| 10 background: white; | 9 background: white; |
| 11 border: 1px solid rgba(0, 0, 0, 0.25); | 10 border: 1px solid rgba(0, 0, 0, 0.25); |
| 11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
| 12 font-size: 12px; | 12 font-size: 12px; |
| 13 margin: 2px; | 13 margin: 2px; |
| 14 max-width: 250px; |
| 14 padding: 16px; | 15 padding: 16px; |
| 15 position: absolute; | 16 position: absolute; |
| 16 max-width: 250px; | |
| 17 } | 17 } |
| 18 | 18 |
| 19 .bubble:before { | 19 .bubble:before { |
| 20 content: ""; | |
| 21 border-style: solid; | 20 border-style: solid; |
| 22 border-width: 8px; | 21 border-width: 8px; |
| 22 content: ''; |
| 23 display: block; | 23 display: block; |
| 24 position: absolute; | 24 position: absolute; |
| 25 } | 25 } |
| 26 | 26 |
| 27 .bubble-top:before { | 27 .bubble-top:before { |
| 28 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; | 28 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; |
| 29 bottom: -16px; | 29 bottom: -16px; |
| 30 } | 30 } |
| 31 | 31 |
| 32 html[dir=ltf] .bubble-top:before { | 32 html[dir=ltf] .bubble-top:before { |
| (...skipping 25 matching lines...) Expand all Loading... |
| 58 } | 58 } |
| 59 | 59 |
| 60 html[dir=ltr] .bubble-left:before, | 60 html[dir=ltr] .bubble-left:before, |
| 61 html[dir=rtl] .bubble-right:before { | 61 html[dir=rtl] .bubble-right:before { |
| 62 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); | 62 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); |
| 63 right: -16px; | 63 right: -16px; |
| 64 top: 17px; | 64 top: 17px; |
| 65 } | 65 } |
| 66 | 66 |
| 67 .bubble:after { | 67 .bubble:after { |
| 68 content: ""; | |
| 69 border-style: solid; | 68 border-style: solid; |
| 70 border-width: 8px; | 69 border-width: 8px; |
| 70 content: ''; |
| 71 display: block; | 71 display: block; |
| 72 position: absolute; | 72 position: absolute; |
| 73 } | 73 } |
| 74 | 74 |
| 75 .bubble-top:after { | 75 .bubble-top:after { |
| 76 border-color: white transparent transparent transparent; | 76 border-color: white transparent transparent transparent; |
| 77 bottom: -15px; | 77 bottom: -15px; |
| 78 } | 78 } |
| 79 | 79 |
| 80 html[dir=ltr] .bubble-top:after { | 80 html[dir=ltr] .bubble-top:after { |
| (...skipping 23 matching lines...) Expand all Loading... |
| 104 html[dir=rtl] .bubble-bottom:after { | 104 html[dir=rtl] .bubble-bottom:after { |
| 105 right: 17px; | 105 right: 17px; |
| 106 } | 106 } |
| 107 | 107 |
| 108 html[dir=ltr] .bubble-left:after, | 108 html[dir=ltr] .bubble-left:after, |
| 109 html[dir=rtl] .bubble-right:after { | 109 html[dir=rtl] .bubble-right:after { |
| 110 border-color: transparent transparent transparent white; | 110 border-color: transparent transparent transparent white; |
| 111 right: -15px; | 111 right: -15px; |
| 112 top: 17px; | 112 top: 17px; |
| 113 } | 113 } |
| OLD | NEW |