ui/login/bubble.css

   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 }