annotate js/Editor-1.5.6/css/scss/bubble.scss @ 2:a64ece32a01a draft default tip

"planemo upload for repository https://github.com/ImmPortDB/immport-galaxy-tools/tree/master/flowtools/cs_overview commit a46097db0b6056e1125237393eb6974cfd51eb41"

1 
2 // Bubble form editing
3 // Very similar to the main form, but attached to a particular node and the
4 // form layout is slightly different with the fields container and buttons
5 // making up a table of a single row and two columns. This allows the buttons
6 // to be removed from the display and under this condition the fields will
7 // take up the full width available.
8 div.DTE_Bubble {
9 	position: absolute;
10 	z-index: 11;
11 	margin-top: -6px;
12 	opacity: 0;
13 
14 	div.DTE_Bubble_Liner {
15 		position: absolute;
16 		bottom: 0;
17 		border: 1px solid black;
18 		width: 300px;
19 		margin-left: -150px;
20 		background-color: white;
21 		box-shadow: 2px 2px 7px #555;
22 		border-radius: 5px;
23 		border: 2px solid #444;
24 		padding: 1em;
25 		@include box-sizing(border-box);
26 
27 		div.DTE_Bubble_Table {
28 			display: table;
29 			width: 100%;
30 
31 			> form {
32 				display: table-cell;
33 
34 				div.DTE_Form_Content {
35 					padding: 0;
36 
37 					div.DTE_Field {
38 						position: relative;
39 						zoom: 1;
40 						margin-bottom: 0.5em;
41 
42 						&:last-child {
43 							margin-bottom: 0;
44 						}
45 					}
46 				}
47 			}
48 
49 			div.DTE_Form_Buttons {
50 				display: table-cell;
51 				vertical-align: bottom;
52 				padding: 0 0 0 0.75em;
53 				width: 1%; // browser will resize to a min width
54 			}
55 		}
56 
57 		div.DTE_Header {
58 			border-top-left-radius: 5px;
59 			border-top-right-radius: 5px;
60 		}
61 
62 		div.DTE_Header + div.DTE_Form_Info,
63 		div.DTE_Header + div.DTE_Bubble_Table {
64 			padding-top: 42px;
65 		}
66 
67 
68 		div.DTE_Form_Error {
69 			float: none;
70 			display: none;
71 			padding: 0;
72 			margin-bottom: 0.5em;
73 		}
74 
75 		div.DTE_Bubble_Close {
76 			@include close-icon();
77 		}
78 	}
79 
80 	div.DTE_Bubble_Triangle {
81 		position: absolute;
82 		height: 10px;
83 		width: 10px;
84 		top: -6px;
85 		background-color: white;
86 		border: 2px solid #444;
87 		border-top: none;
88 		border-right: none;
89 
90 		-webkit-transform: rotate(-45deg);
91 		   -moz-transform: rotate(-45deg);
92 		    -ms-transform: rotate(-45deg);
93 		     -o-transform: rotate(-45deg);
94 		        transform: rotate(-45deg);
95 	}
96 
97 	&.DTE_Processing {
98 		div.DTE_Bubble_Liner:after {
99 			position: absolute;
00 			content: ' ';
01 			display: block;
02 			top: 12px;
03 			right: 18px;
04 			height: 12px;
05 			width: 17px;
06 			background: url('../images/ajax-loader-small.gif') no-repeat top left;
07 		}
08 	}
09 
10 	&.below {
11 		div.DTE_Bubble_Liner {
12 			top: 10px;
13 			bottom: auto;
14 		}
15 
16 		div.DTE_Bubble_Triangle {
17 			top: 4px;
18 			-webkit-transform: rotate(135deg);
19 			   -moz-transform: rotate(135deg);
20 			    -ms-transform: rotate(135deg);
21 			     -o-transform: rotate(135deg);
22 			        transform: rotate(135deg);
23 		}
24 	}
25 }
26 
27 div.DTE_Bubble_Background {
28 	@include overlay-background();
29 }
30