bubble.scss
2.37 KB
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
// Bubble form editing
// Very similar to the main form, but attached to a particular node and the
// form layout is slightly different with the fields container and buttons
// making up a table of a single row and two columns. This allows the buttons
// to be removed from the display and under this condition the fields will
// take up the full width available.
div.DTE_Bubble {
position: absolute;
z-index: 11;
margin-top: -6px;
opacity: 0;
div.DTE_Bubble_Liner {
position: absolute;
bottom: 0;
border: 1px solid black;
width: 300px;
margin-left: -150px;
background-color: white;
box-shadow: 0 12px 30px 0 rgba(0,0,0,.5);
border-radius: 6px;
border: 1px solid #666;
padding: 1em;
background: #fcfcfc;
@include box-sizing(border-box);
div.DTE_Bubble_Table {
width: 100%;
> form {
div.DTE_Form_Content {
padding: 0;
div.DTE_Field {
position: relative;
zoom: 1;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
> label {
padding-top: 0;
margin-bottom: 0;
}
> div {
padding: 0;
input {
margin: 0;
}
}
}
}
}
div.DTE_Form_Buttons {
text-align: right;
margin-top: 1em;
button {
margin-bottom: 0;
}
}
}
div.DTE_Header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div.DTE_Header + div.DTE_Form_Info,
div.DTE_Header + div.DTE_Bubble_Table {
padding-top: 42px;
}
div.DTE_Form_Error {
float: none;
display: none;
padding: 0;
margin-bottom: 0.5em;
}
div.DTE_Bubble_Close {
@include close-icon();
}
}
div.DTE_Bubble_Triangle {
position: absolute;
height: 10px;
width: 10px;
top: -6px;
background-color: white;
border: 1px solid #666;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&.below {
div.DTE_Bubble_Liner {
top: 10px;
bottom: auto;
}
div.DTE_Bubble_Triangle {
top: 4px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
}
div.DTE_Bubble_Background {
@include overlay-background();
}