| OLD | NEW |
| (Empty) |
| 1 /* Copyright 2014 The Chromium Authors. All rights reserved. | |
| 2 * Use of this source code is governed by a BSD-style license that can be | |
| 3 * found in the LICENSE file. | |
| 4 * | |
| 5 * Css based bubble. | |
| 6 */ | |
| 7 | |
| 8 .bubble { | |
| 9 -webkit-transition: opacity 200ms ease-in-out; | |
| 10 background: white; | |
| 11 border: 1px solid rgba(0, 0, 0, 0.25); | |
| 12 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| 13 font-size: 12px; | |
| 14 margin: 2px; | |
| 15 max-width: 250px; | |
| 16 padding: 16px; | |
| 17 position: absolute; | |
| 18 } | |
| 19 | |
| 20 .bubble::before { | |
| 21 border-style: solid; | |
| 22 border-width: 8px; | |
| 23 content: ''; | |
| 24 display: block; | |
| 25 position: absolute; | |
| 26 } | |
| 27 | |
| 28 .bubble-top::before { | |
| 29 border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent; | |
| 30 bottom: -16px; | |
| 31 } | |
| 32 | |
| 33 html[dir=ltr] .bubble-top::before { | |
| 34 left: 17px; | |
| 35 } | |
| 36 | |
| 37 html[dir=rtl] .bubble-top::before { | |
| 38 right: 17px; | |
| 39 } | |
| 40 | |
| 41 html[dir=ltr] .bubble-right::before, | |
| 42 html[dir=rtl] .bubble-left::before { | |
| 43 border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent; | |
| 44 left: -16px; | |
| 45 top: 17px; | |
| 46 } | |
| 47 | |
| 48 .bubble-bottom::before { | |
| 49 border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent; | |
| 50 top: -16px; | |
| 51 } | |
| 52 | |
| 53 html[dir=ltr] .bubble-bottom::before { | |
| 54 left: 17px; | |
| 55 } | |
| 56 | |
| 57 html[dir=rtl] .bubble-bottom::before { | |
| 58 right: 17px; | |
| 59 } | |
| 60 | |
| 61 html[dir=ltr] .bubble-left::before, | |
| 62 html[dir=rtl] .bubble-right::before { | |
| 63 border-color: transparent transparent transparent rgba(0, 0, 0, 0.25); | |
| 64 right: -16px; | |
| 65 top: 17px; | |
| 66 } | |
| 67 | |
| 68 .bubble::after { | |
| 69 border-style: solid; | |
| 70 border-width: 8px; | |
| 71 content: ''; | |
| 72 display: block; | |
| 73 position: absolute; | |
| 74 } | |
| 75 | |
| 76 .bubble-top::after { | |
| 77 border-color: white transparent transparent transparent; | |
| 78 bottom: -15px; | |
| 79 } | |
| 80 | |
| 81 html[dir=ltr] .bubble-top::after { | |
| 82 left: 17px; | |
| 83 } | |
| 84 | |
| 85 html[dir=rtl] .bubble-top::after { | |
| 86 right: 17px; | |
| 87 } | |
| 88 | |
| 89 html[dir=ltr] .bubble-right::after, | |
| 90 html[dir=rtl] .bubble-left::after { | |
| 91 border-color: transparent white transparent transparent; | |
| 92 left: -15px; | |
| 93 top: 17px; | |
| 94 } | |
| 95 | |
| 96 .bubble-bottom::after { | |
| 97 border-color: transparent transparent white transparent; | |
| 98 top: -15px; | |
| 99 } | |
| 100 | |
| 101 html[dir=ltr] .bubble-bottom::after { | |
| 102 left: 17px; | |
| 103 } | |
| 104 | |
| 105 html[dir=rtl] .bubble-bottom::after { | |
| 106 right: 17px; | |
| 107 } | |
| 108 | |
| 109 html[dir=ltr] .bubble-left::after, | |
| 110 html[dir=rtl] .bubble-right::after { | |
| 111 border-color: transparent transparent transparent white; | |
| 112 right: -15px; | |
| 113 top: 17px; | |
| 114 } | |
| 115 | |
| 116 .error-message-bubble { | |
| 117 -webkit-padding-start: 30px; | |
| 118 background: url('chrome://theme/IDR_WARNING') left top no-repeat; | |
| 119 background-size: 24px; | |
| 120 } | |
| 121 | |
| 122 .error-message-bubble-padding { | |
| 123 margin-bottom: 10px; | |
| 124 } | |
| 125 | |
| 126 html[dir=rtl] .error-message-bubble { | |
| 127 background-position: right top; | |
| 128 } | |
| OLD | NEW |