git.roojs.org Git - ratchet/blob - lib/css/popovers.css

   1 /* Popovers (to be used with popovers.js)
   2 -------------------------------------------------- */
   3
   4 .popover {
   5   position: fixed;
   6   top: 55px;
   7   left: 50%;
   8   z-index: 20;
   9   display: none;
  10   width: 280px;
  11   padding: 5px;
  12   margin-left: -146px;
  13   background-color: #555;
  14   background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
  15   background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
  16   border: 1px solid #111;
  17   border-radius: 6px;
  18   opacity: 0;
  19   box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
  20   -webkit-transform: translate3d(0, -15px, 0);
  21           transform: translate3d(0, -15px, 0);
  22   -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  23                   transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  24 }
  25
  26 /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
  27 .popover:before,
  28 .popover:after {
  29   position: absolute;
  30   left: 50%;
  31   width: 0;
  32   height: 0;
  33   content: '';
  34 }
  35 .popover:before {
  36   top: -20px;
  37   margin-left: -21px;
  38   border-right: 21px solid transparent;
  39   border-bottom: 21px solid #111;
  40   border-left: 21px solid transparent;
  41 }
  42 .popover:after {
  43   top: -19px;
  44   margin-left: -20px;
  45   border-right: 20px solid transparent;
  46   border-bottom: 20px solid #555;
  47   border-left: 20px solid transparent;
  48 }
  49
  50 /* Wrapper for a title and buttons */
  51 .popover-header {
  52   display: -webkit-box;
  53   display: box;
  54   height: 34px;
  55   margin-bottom: 5px;
  56 }
  57
  58 /* Centered title for popover */
  59 .popover-header .title {
  60   position: absolute;
  61   top: 0;
  62   left: 0;
  63   width: 100%;
  64   margin: 15px 0;
  65   font-size: 16px;
  66   font-weight: bold;
  67   line-height: 12px;
  68   color: #fff;
  69   text-align: center;
  70   text-shadow: 0 -1px rgba(0, 0, 0, .5);
  71 }
  72
  73 /* Generic style for all buttons in .popover-header */
  74 .popover-header [class*="button"] {
  75   z-index: 25;
  76   font-size: 12px;
  77   line-height: 22px;
  78   color: #fff;
  79   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  80   background-color: #454545;
  81   background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
  82   background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
  83   border: 1px solid #111;
  84   -webkit-box-flex: 0;
  85           box-flex: 0;
  86 }
  87
  88 /* Hacky way to right align buttons outside of flex-box system
  89    Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
  90 .popover-header .title + [class*="button"]:last-child,
  91 .popover-header .button + [class*="button"]:last-child,
  92 .popover-header [class*="button"].pull-right {
  93   position: absolute;
  94   top: 5px;
  95   right: 5px;
  96 }
  97
  98 /* Active state for popover header buttons */
  99 .popover-header .button:active {
 100   color: #fff;
 101   background-color: #0876b1;
 102 }
 103
 104 /* Popover animation
 105 -------------------------------------------------- */
 106
 107 .popover.visible {
 108   opacity: 1;
 109   -webkit-transform: translate3d(0, 0, 0);
 110           transform: translate3d(0, 0, 0);
 111 }
 112
 113 /* Backdrop (used as invisible touch escape)
 114 -------------------------------------------------- */
 115
 116 .backdrop {
 117   position: fixed;
 118   top: 0;
 119   right: 0;
 120   bottom: 0;
 121   left: 0;
 122   z-index: 10;
 123 }
 124
 125 /* Block level buttons in popovers
 126 -------------------------------------------------- */
 127
 128 /* Positioning and giving darker border to look sharp against dark popover */
 129 .popover .button-block {
 130   margin-bottom: 5px;
 131   border: 1px solid #111;
 132 }
 133
 134 /* Remove extra margin on bottom of last button */
 135 .popover .button-block:last-child {
 136   margin-bottom: 0;
 137 }
 138
 139 /* Lists in popovers
 140 -------------------------------------------------- */
 141
 142 .popover .list {
 143   width: auto;
 144   max-height: 250px;
 145   margin-right: 0;
 146   margin-bottom: 0;
 147   margin-left: 0;
 148   overflow: auto;
 149   background-color: #fff;
 150   border: 1px solid #000;
 151   border-radius: 3px;
 152   -webkit-overflow-scrolling: touch;
 153 }