Home | History | Annotate | Download | only in login 
      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
      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 }