Home | History | Annotate | Download | only in css 
      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 
      6 .bubble {
      7   position: absolute;
      8   /* Height is dynamic, width fixed. */
      9   width: 300px;
     10   z-index: 9999;
     11 }
     12 
     13 .bubble-contents {
     14   color: black;
     15   left: 1px;
     16   line-height: 150%;
     17   padding: 8px 11px 12px;
     18   position: relative;
     19   right: 1px;
     20   top: 1px;
     21   width: 298px;
     22   z-index: 3;
     23 }
     24 
     25 .bubble-close {
     26   background-image: no-repeat 50% 50%;
     27   height: 16px;
     28   position: absolute;
     29   right: 6px;
     30   top: 6px;
     31   width: 16px;
     32   z-index: 4;
     33 }
     34 
     35 html[dir='rtl'] .bubble-close {
     36   left: 6px;
     37   right: auto;
     38 }
     39 
     40 .bubble-close {
     41   background-image: url('../../../../../ui/resources/close_bar.png');
     42 }
     43 
     44 .bubble-close:hover {
     45   background-image: url('../../../../../ui/resources/close_bar_h.png');
     46 }
     47 
     48 .bubble-close:active {
     49   background-image: url('../../../../../ui/resources/close_bar_p.png');
     50 }
     51 
     52 .bubble-shadow {
     53   bottom: -2px;
     54   left: 0;
     55   position: absolute;
     56   right: 0;
     57   top: 0;
     58   z-index: 1;
     59 }
     60 
     61 .bubble-arrow {
     62   -webkit-transform: rotate(45deg);
     63   /* The tip of the arrow.  */
     64   border-bottom-right-radius: 1px;
     65   /* No border on the right or top (inner sides of the rotated square) because
     66    * it would overlap/darken the content shadow. */
     67   border-right: none;
     68   border-top: none;
     69   bottom: -9px;
     70   height: 15px;
     71   left: 22px;
     72   position: absolute;
     73   right: 22px;
     74   width: 15px;
     75   z-index: 2;
     76 }
     77 
     78 .bubble-contents,
     79 .bubble-arrow {
     80   background: white;
     81 }
     82 
     83 .bubble-arrow[is-right='true'] {
     84   left: auto;
     85 }
     86 
     87 .bubble-arrow[is-right='false'] {
     88   right: auto;
     89 }
     90 
     91 .bubble-arrow[is-top='true'] {
     92   bottom: auto;
     93   top: -8px;
     94 }
     95 
     96 .bubble-shadow,
     97 .bubble-arrow {
     98   border: 1px solid rgba(0, 0, 0, 0.3);
     99   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    100 }
    101 
    102 .bubble-shadow,
    103 .bubble-contents {
    104   border-radius: 6px;
    105   box-sizing: border-box;
    106 }
    107