styleguide/lib/tooltip/index.styl at notifications · fluidcss/styleguide · GitHub

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
//
// Tooltips
// --------------------------------------------------

//** Tooltip max width
$tooltip-max-width ?=         200px
//** Tooltip text color
$tooltip-color ?=             #fff
//** Tooltip background color
$tooltip-bg ?=                #000
$tooltip-opacity ?=           .9

//** Tooltip arrow width
$tooltip-arrow-width ?=       5px
//** Tooltip arrow color
$tooltip-arrow-color ?=       $tooltip-bg

// 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-family $font-family-base
  font-size $font-size-small

  opacity-ie(0)

  &.in
    opacity-ie($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


/*==========  Tip  ==========*/
.tip
  a
    font-weight: $font-weight-bold
    color: white;
    border-color: white !important;
  .tip-inner
    max-width: 300px;


// @media screen and (max-width: 992px)
//   footer.site-footer
//     .col-md-11
//       float: none;
//     nav
//       float: none;
//       display: block
//       clear:both;
//       text-align: left;
//       margin: 0;
//       padding: 0;
//       margin-bottom: 14px;
//       ul
//         margin: 0;
//         border-bottom: 1px solid #f1f1f1;
//         padding: 0;
//       li
//         display: block
//         margin: 0;
//       a
//         display: block
//         border-top: 1px solid #f1f1f1;
//         margin: 0;
//         padding: 14px 0;