← Back to branch summary

~bac/charmworld/readme-mega

« back to all changes in this revision

Viewing changes to charmworld/static/css/bootstrap/popovers.less

  • Committer: Brad Crittenden
  • Date: 2013-09-09 19:01:30 UTC
  • mfrom: (386.1.7 readme)
  • Revision ID: bac@canonical.com-20130909190130-2javw980984xnjo6
Charmworld redesign.  Support bundle README files.

Show diffs side-by-side

added added

removed removed

Lines of Context:
charmworld/static/css/bootstrap/popovers.less
1
 
//
2
 
// Popovers
3
 
// --------------------------------------------------
4
 
 
5
 
 
6
 
.popover {
7
 
  position: absolute;
8
 
  top: 0;
9
 
  left: 0;
10
 
  z-index: @zindexPopover;
11
 
  display: none;
12
 
  width: 236px;
13
 
  padding: 1px;
14
 
  text-align: left; // Reset given new insertion method
15
 
  background-color: @popoverBackground;
16
 
  -webkit-background-clip: padding-box;
17
 
     -moz-background-clip: padding;
18
 
          background-clip: padding-box;
19
 
  border: 1px solid #ccc;
20
 
  border: 1px solid rgba(0,0,0,.2);
21
 
  .border-radius(6px);
22
 
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
23
 
 
24
 
  // Overrides for proper insertion
25
 
  white-space: normal;
26
 
 
27
 
  // Offset the popover to account for the popover arrow
28
 
  &.top     { margin-top: -10px; }
29
 
  &.right   { margin-left: 10px; }
30
 
  &.bottom  { margin-top: 10px; }
31
 
  &.left    { margin-left: -10px; }
32
 
}
33
 
 
34
 
.popover-title {
35
 
  margin: 0; // reset heading margin
36
 
  padding: 8px 14px;
37
 
  font-size: 14px;
38
 
  font-weight: normal;
39
 
  line-height: 18px;
40
 
  background-color: @popoverTitleBackground;
41
 
  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
42
 
  .border-radius(5px 5px 0 0);
43
 
}
44
 
 
45
 
.popover-content {
46
 
  padding: 9px 14px;
47
 
}
48
 
 
49
 
// Arrows
50
 
//
51
 
// .arrow is outer, .arrow:after is inner
52
 
 
53
 
.popover .arrow,
54
 
.popover .arrow:after {
55
 
  position: absolute;
56
 
  display: block;
57
 
  width: 0;
58
 
  height: 0;
59
 
  border-color: transparent;
60
 
  border-style: solid;
61
 
}
62
 
.popover .arrow {
63
 
  border-width: @popoverArrowOuterWidth;
64
 
}
65
 
.popover .arrow:after {
66
 
  border-width: @popoverArrowWidth;
67
 
  content: "";
68
 
}
69
 
 
70
 
.popover {
71
 
  &.top .arrow {
72
 
    left: 50%;
73
 
    margin-left: -@popoverArrowOuterWidth;
74
 
    border-bottom-width: 0;
75
 
    border-top-color: #999; // IE8 fallback
76
 
    border-top-color: @popoverArrowOuterColor;
77
 
    bottom: -@popoverArrowOuterWidth;
78
 
    &:after {
79
 
      bottom: 1px;
80
 
      margin-left: -@popoverArrowWidth;
81
 
      border-bottom-width: 0;
82
 
      border-top-color: @popoverArrowColor;
83
 
    }
84
 
  }
85
 
  &.right .arrow {
86
 
    top: 50%;
87
 
    left: -@popoverArrowOuterWidth;
88
 
    margin-top: -@popoverArrowOuterWidth;
89
 
    border-left-width: 0;
90
 
    border-right-color: #999; // IE8 fallback
91
 
    border-right-color: @popoverArrowOuterColor;
92
 
    &:after {
93
 
      left: 1px;
94
 
      bottom: -@popoverArrowWidth;
95
 
      border-left-width: 0;
96
 
      border-right-color: @popoverArrowColor;
97
 
    }
98
 
  }
99
 
  &.bottom .arrow {
100
 
    left: 50%;
101
 
    margin-left: -@popoverArrowOuterWidth;
102
 
    border-top-width: 0;
103
 
    border-bottom-color: #999; // IE8 fallback
104
 
    border-bottom-color: @popoverArrowOuterColor;
105
 
    top: -@popoverArrowOuterWidth;
106
 
    &:after {
107
 
      top: 1px;
108
 
      margin-left: -@popoverArrowWidth;
109
 
      border-top-width: 0;
110
 
      border-bottom-color: @popoverArrowColor;
111
 
    }
112
 
  }
113
 
 
114
 
  &.left .arrow {
115
 
    top: 50%;
116
 
    right: -@popoverArrowOuterWidth;
117
 
    margin-top: -@popoverArrowOuterWidth;
118
 
    border-right-width: 0;
119
 
    border-left-color: #999; // IE8 fallback
120
 
    border-left-color: @popoverArrowOuterColor;
121
 
    &:after {
122
 
      right: 1px;
123
 
      border-right-width: 0;
124
 
      border-left-color: @popoverArrowColor;
125
 
      bottom: -@popoverArrowWidth;
126
 
    }
127
 
  }
128
 
 
129
 
}