static/less/tooltip.less
changeset 53 3416f82943ea
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/static/less/tooltip.less	Fri Dec 20 22:30:44 2013 +0100
     1.3 @@ -0,0 +1,95 @@
     1.4 +//
     1.5 +// Tooltips
     1.6 +// --------------------------------------------------
     1.7 +
     1.8 +
     1.9 +// Base class
    1.10 +.tooltip {
    1.11 +  position: absolute;
    1.12 +  z-index: @zindex-tooltip;
    1.13 +  display: block;
    1.14 +  visibility: visible;
    1.15 +  font-size: @font-size-small;
    1.16 +  line-height: 1.4;
    1.17 +  .opacity(0);
    1.18 +
    1.19 +  &.in     { .opacity(.9); }
    1.20 +  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
    1.21 +  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
    1.22 +  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
    1.23 +  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
    1.24 +}
    1.25 +
    1.26 +// Wrapper for the tooltip content
    1.27 +.tooltip-inner {
    1.28 +  max-width: @tooltip-max-width;
    1.29 +  padding: 3px 8px;
    1.30 +  color: @tooltip-color;
    1.31 +  text-align: center;
    1.32 +  text-decoration: none;
    1.33 +  background-color: @tooltip-bg;
    1.34 +  border-radius: @border-radius-base;
    1.35 +}
    1.36 +
    1.37 +// Arrows
    1.38 +.tooltip-arrow {
    1.39 +  position: absolute;
    1.40 +  width: 0;
    1.41 +  height: 0;
    1.42 +  border-color: transparent;
    1.43 +  border-style: solid;
    1.44 +}
    1.45 +.tooltip {
    1.46 +  &.top .tooltip-arrow {
    1.47 +    bottom: 0;
    1.48 +    left: 50%;
    1.49 +    margin-left: -@tooltip-arrow-width;
    1.50 +    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    1.51 +    border-top-color: @tooltip-arrow-color;
    1.52 +  }
    1.53 +  &.top-left .tooltip-arrow {
    1.54 +    bottom: 0;
    1.55 +    left: @tooltip-arrow-width;
    1.56 +    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    1.57 +    border-top-color: @tooltip-arrow-color;
    1.58 +  }
    1.59 +  &.top-right .tooltip-arrow {
    1.60 +    bottom: 0;
    1.61 +    right: @tooltip-arrow-width;
    1.62 +    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    1.63 +    border-top-color: @tooltip-arrow-color;
    1.64 +  }
    1.65 +  &.right .tooltip-arrow {
    1.66 +    top: 50%;
    1.67 +    left: 0;
    1.68 +    margin-top: -@tooltip-arrow-width;
    1.69 +    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    1.70 +    border-right-color: @tooltip-arrow-color;
    1.71 +  }
    1.72 +  &.left .tooltip-arrow {
    1.73 +    top: 50%;
    1.74 +    right: 0;
    1.75 +    margin-top: -@tooltip-arrow-width;
    1.76 +    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    1.77 +    border-left-color: @tooltip-arrow-color;
    1.78 +  }
    1.79 +  &.bottom .tooltip-arrow {
    1.80 +    top: 0;
    1.81 +    left: 50%;
    1.82 +    margin-left: -@tooltip-arrow-width;
    1.83 +    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    1.84 +    border-bottom-color: @tooltip-arrow-color;
    1.85 +  }
    1.86 +  &.bottom-left .tooltip-arrow {
    1.87 +    top: 0;
    1.88 +    left: @tooltip-arrow-width;
    1.89 +    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    1.90 +    border-bottom-color: @tooltip-arrow-color;
    1.91 +  }
    1.92 +  &.bottom-right .tooltip-arrow {
    1.93 +    top: 0;
    1.94 +    right: @tooltip-arrow-width;
    1.95 +    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    1.96 +    border-bottom-color: @tooltip-arrow-color;
    1.97 +  }
    1.98 +}
Impressum Datenschutzerklärung