Ting Chan / palertx_web

Blame view

assets/plugins/weather-icons-master/_docs/less/bootstrap/tooltip.less 2.92 KB
edit raw normal view history
cf76164e6   Ting Chan   20190709 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
  //
  // Tooltips
  // --------------------------------------------------
  
  
  // Base class
  .tooltip {
    position: absolute;
    z-index: @zindex-tooltip;
    display: block;
    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
    // So reset our font and text properties to avoid inheriting weird values.
    .reset-text();
    font-size: @font-size-small;
  
    .opacity(0);
  
    &.in     { .opacity(@tooltip-opacity); }
    &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
    &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
    &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
    &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
  }
  
  // Wrapper for the tooltip content
  .tooltip-inner {
    max-width: @tooltip-max-width;
    padding: 3px 8px;
    color: @tooltip-color;
    text-align: center;
    background-color: @tooltip-bg;
    border-radius: @border-radius-base;
  }
  
  // Arrows
  .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
  // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  .tooltip {
    &.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -@tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
      border-top-color: @tooltip-arrow-color;
    }
    &.top-left .tooltip-arrow {
      bottom: 0;
      right: @tooltip-arrow-width;
      margin-bottom: -@tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
      border-top-color: @tooltip-arrow-color;
    }
    &.top-right .tooltip-arrow {
      bottom: 0;
      left: @tooltip-arrow-width;
      margin-bottom: -@tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
      border-top-color: @tooltip-arrow-color;
    }
    &.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -@tooltip-arrow-width;
      border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
      border-right-color: @tooltip-arrow-color;
    }
    &.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -@tooltip-arrow-width;
      border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
      border-left-color: @tooltip-arrow-color;
    }
    &.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -@tooltip-arrow-width;
      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
      border-bottom-color: @tooltip-arrow-color;
    }
    &.bottom-left .tooltip-arrow {
      top: 0;
      right: @tooltip-arrow-width;
      margin-top: -@tooltip-arrow-width;
      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
      border-bottom-color: @tooltip-arrow-color;
    }
    &.bottom-right .tooltip-arrow {
      top: 0;
      left: @tooltip-arrow-width;
      margin-top: -@tooltip-arrow-width;
      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
      border-bottom-color: @tooltip-arrow-color;
    }
  }