css/design40/less/jquery.tooltipster.less

   1 /* ------------------------------------------------------------- */
   2 /* JQUERY TOOLTIPSTER (jquery.tooltipster.less)                  */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // Tooltipster
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 // Contains:
  12 // - tooltipster
  13 // - tooltipster-light
  14 //
  15 //
  16 // CONTENTS:
  17 // - Tooltipster
  18 // - Tooltipster Light
  19 // -
  20 // -
  21 // ----------------------------------------------------------------------------
  22
  23
  24
  25
  26 // ----------------------------------------------------------------------------
  27 //
  28 // Tooltipster
  29 //
  30 // ----------------------------------------------------------------------------
  31 //
  32
  33
  34 /* This is the default Tooltipster theme */
  35 /* (feel free to modify or duplicate and create multiple themes!): */
  36 .tooltipster-default {
  37   border-radius: @controlpanel-radius;
  38   border: 2px solid #000;
  39   background-color: @jquery_ui_tooltipster-bg-color;
  40   color: #fff;
  41   max-width: 400px ;
  42
  43   /* Use this next selector to style things like font-size and line-height: */
  44   .tooltipster-content {
  45     font-size: @font-size-small;
  46     line-height: 16px;
  47     padding: 1.2em 1.0em 1.2em 1.4em;
  48     overflow: hidden;
  49     background-color: @jquery_ui_tooltipster-bg-color;
  50   }
  51
  52   /* These next classes handle the styles for the little arrow attached to the tooltip. */
  53   /* By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
  54   .tooltipster-arrow {
  55     display: block;
  56     text-align: center;
  57     width: 100%;
  58     height: 100%;
  59     position: absolute;
  60     top: 0;
  61     left: 0;
  62     z-index: -1;
  63
  64     /* This next selector defines the color of the border on the outside of the arrow. */
  65     /* This will automatically match the color and size of the border set on the main tooltip styles. */
  66     /* Set display: none; if you would like a border around the tooltip but no border around the arrow */
  67     .tooltipster-arrow-border { }
  68   }
  69
  70 } // /.tooltipster-default
  71
  72
  73
  74 /* If you're using the icon option, use this next selector to style them */
  75 .tooltipster-icon {
  76   cursor: help;
  77   margin-left: 4px;
  78 }
  79
  80 /* This is the base styling required to make all Tooltipsters work */
  81 .tooltipster-base {
  82   padding: 0;
  83   font-size: 0;
  84   line-height: 0;
  85   position: absolute;
  86   left: 0;
  87   top: 0;
  88   z-index: 9999999;
  89   pointer-events: none;
  90   width: auto;
  91   max-width: 400px ;
  92   overflow: visible;
  93
  94   .tooltipster-content {
  95     overflow: hidden;
  96   }
  97 }
  98
  99
 100
 101
 102 .tooltipster-arrow span,
 103 .tooltipster-arrow-border {
 104   display: block;
 105   width: 0;
 106   height: 0;
 107   position: absolute;
 108 }
 109 .tooltipster-arrow-top span,
 110 .tooltipster-arrow-top-right span,
 111 .tooltipster-arrow-top-left span {
 112   border-left: 8px solid transparent !important;
 113   border-right: 8px solid transparent !important;
 114   border-top: 8px solid;
 115   bottom: -7px;
 116 }
 117 .tooltipster-arrow-top .tooltipster-arrow-border,
 118 .tooltipster-arrow-top-right .tooltipster-arrow-border,
 119 .tooltipster-arrow-top-left .tooltipster-arrow-border {
 120   border-left: 9px solid transparent !important;
 121   border-right: 9px solid transparent !important;
 122   border-top: 9px solid;
 123   bottom: -7px;
 124 }
 125
 126 .tooltipster-arrow-bottom span,
 127 .tooltipster-arrow-bottom-right span,
 128 .tooltipster-arrow-bottom-left span {
 129   border-left: 8px solid transparent !important;
 130   border-right: 8px solid transparent !important;
 131   border-bottom: 8px solid;
 132   top: -7px;
 133 }
 134 .tooltipster-arrow-bottom .tooltipster-arrow-border,
 135 .tooltipster-arrow-bottom-right .tooltipster-arrow-border,
 136 .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
 137   border-left: 9px solid transparent !important;
 138   border-right: 9px solid transparent !important;
 139   border-bottom: 9px solid;
 140   top: -7px;
 141 }
 142 .tooltipster-arrow-top span,
 143 .tooltipster-arrow-top .tooltipster-arrow-border,
 144 .tooltipster-arrow-bottom span,
 145 .tooltipster-arrow-bottom .tooltipster-arrow-border {
 146   left: 0;
 147   right: 0;
 148   margin: 0 auto;
 149 }
 150 .tooltipster-arrow-top-left span,
 151 .tooltipster-arrow-bottom-left span {
 152   left: 6px;
 153 }
 154 .tooltipster-arrow-top-left .tooltipster-arrow-border,
 155 .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
 156   left: 5px;
 157 }
 158 .tooltipster-arrow-top-right span,
 159  .tooltipster-arrow-bottom-right span {
 160   right: 6px;
 161 }
 162 .tooltipster-arrow-top-right .tooltipster-arrow-border,
 163 .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
 164   right: 5px;
 165 }
 166 .tooltipster-arrow-left span,
 167 .tooltipster-arrow-left .tooltipster-arrow-border {
 168   border-top: 8px solid transparent !important;
 169   border-bottom: 8px solid transparent !important;
 170   border-left: 8px solid;
 171   top: 50%;
 172   margin-top: -7px;
 173   right: -7px;
 174 }
 175 .tooltipster-arrow-left .tooltipster-arrow-border {
 176   border-top: 9px solid transparent !important;
 177   border-bottom: 9px solid transparent !important;
 178   border-left: 9px solid;
 179   margin-top: -8px;
 180 }
 181 .tooltipster-arrow-right span,
 182 .tooltipster-arrow-right .tooltipster-arrow-border {
 183   border-top: 8px solid transparent !important;
 184   border-bottom: 8px solid transparent !important;
 185   border-right: 8px solid;
 186   top: 50%;
 187   margin-top: -7px;
 188   left: -7px;
 189 }
 190 .tooltipster-arrow-right .tooltipster-arrow-border {
 191   border-top: 9px solid transparent !important;
 192   border-bottom: 9px solid transparent !important;
 193   border-right: 9px solid;
 194   margin-top: -8px;
 195 }
 196
 197
 198 /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
 199
 200 .tooltipster-fade {
 201   opacity: 0;
 202   -webkit-transition-property: opacity;
 203   -moz-transition-property: opacity;
 204   -o-transition-property: opacity;
 205   -ms-transition-property: opacity;
 206   transition-property: opacity;
 207 }
 208 .tooltipster-fade-show {
 209   opacity: 1;
 210 }
 211
 212 .tooltipster-grow {
 213   -webkit-transform: scale(0,0);
 214   -moz-transform: scale(0,0);
 215   -o-transform: scale(0,0);
 216   -ms-transform: scale(0,0);
 217   transform: scale(0,0);
 218   -webkit-transition-property: -webkit-transform;
 219   -moz-transition-property: -moz-transform;
 220   -o-transition-property: -o-transform;
 221   -ms-transition-property: -ms-transform;
 222   transition-property: transform;
 223   -webkit-backface-visibility: hidden;
 224 }
 225 .tooltipster-grow-show {
 226   -webkit-transform: scale(1,1);
 227   -moz-transform: scale(1,1);
 228   -o-transform: scale(1,1);
 229   -ms-transform: scale(1,1);
 230   transform: scale(1,1);
 231   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 232   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 233   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 234   -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 235   -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 236   transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 237 }
 238
 239 .tooltipster-swing {
 240   opacity: 0;
 241   -webkit-transform: rotateZ(4deg);
 242   -moz-transform: rotateZ(4deg);
 243   -o-transform: rotateZ(4deg);
 244   -ms-transform: rotateZ(4deg);
 245   transform: rotateZ(4deg);
 246   -webkit-transition-property: -webkit-transform, opacity;
 247   -moz-transition-property: -moz-transform;
 248   -o-transition-property: -o-transform;
 249   -ms-transition-property: -ms-transform;
 250   transition-property: transform;
 251 }
 252 .tooltipster-swing-show {
 253   opacity: 1;
 254   -webkit-transform: rotateZ(0deg);
 255   -moz-transform: rotateZ(0deg);
 256   -o-transform: rotateZ(0deg);
 257   -ms-transform: rotateZ(0deg);
 258   transform: rotateZ(0deg);
 259   -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
 260   -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 261   -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 262   -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 263   -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 264   transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 265 }
 266
 267 .tooltipster-fall {
 268   top: 0;
 269   -webkit-transition-property: top;
 270   -moz-transition-property: top;
 271   -o-transition-property: top;
 272   -ms-transition-property: top;
 273   transition-property: top;
 274   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 275   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 276   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 277   -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 278   -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 279   transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 280 }
 281 .tooltipster-fall-show {
 282 }
 283 .tooltipster-fall.tooltipster-dying {
 284   -webkit-transition-property: all;
 285   -moz-transition-property: all;
 286   -o-transition-property: all;
 287   -ms-transition-property: all;
 288   transition-property: all;
 289   top: 0px !important;
 290   opacity: 0;
 291 }
 292
 293 .tooltipster-slide {
 294   left: -40px;
 295   -webkit-transition-property: left;
 296   -moz-transition-property: left;
 297   -o-transition-property: left;
 298   -ms-transition-property: left;
 299   transition-property: left;
 300   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 301   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 302   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 303   -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 304   -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 305   transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 306 }
 307 .tooltipster-slide.tooltipster-slide-show {
 308 }
 309 .tooltipster-slide.tooltipster-dying {
 310   -webkit-transition-property: all;
 311   -moz-transition-property: all;
 312   -o-transition-property: all;
 313   -ms-transition-property: all;
 314   transition-property: all;
 315   left: 0px !important;
 316   opacity: 0;
 317 }
 318
 319
 320 /* CSS transition for when contenting is changing in a tooltip that is still open. */
 321 /* The only properties that will NOT transition are: width, height, top, and left */
 322 .tooltipster-content-changing {
 323   opacity: 0.5;
 324   -webkit-transform: scale(1.1, 1.1);
 325   -moz-transform: scale(1.1, 1.1);
 326   -o-transform: scale(1.1, 1.1);
 327   -ms-transform: scale(1.1, 1.1);
 328   transform: scale(1.1, 1.1);
 329 }
 330
 331
 332
 333
 334 // ----------------------------------------------------------------------------
 335 //
 336 // Tooltipster Light
 337 //
 338 // ----------------------------------------------------------------------------
 339 //
 340
 341
 342 .tooltipster-light {
 343   border-radius:     @controlpanel-radius;
 344   border:           1px solid @jquery_ui_tooltipster-border-color;
 345   background-color: @jquery_ui_tooltipster-bg-color;
 346   color:             @jquery_ui_tooltipster-color;
 347
 348   .tooltipster-content {
 349     font-size:     @font-size-smaller;
 350     line-height:   16px;
 351     background-color: @jquery_ui_tooltipster-bg-color;
 352     padding:      1.0em 1.4em;
 353   }
 354 }
 355