You are here

Home » API reference » Form Builder 6

form_builder.css in Form Builder 6

Same filename and directory in other branches
  1. 7.2 form_builder.css
  2. 7 form_builder.css

Styles required for the basic functionality of the Form Builder interface.

File

form_builder.css
View source 
  1. /**

  2.  * @file

  3.  * Styles required for the basic functionality of the Form Builder interface.

  4.  */

  5. 

  6. #form-builder-wrapper {

  7.   overflow: hidden;

  8.   padding: 10px 0;

  9. }

  10. 

  11. #form-builder-wrapper h3.form-builder-title {

  12.   margin: 0;

  13. }

  14. 

  15. #form-builder-wrapper.with-palette #form-builder-fields {

  16.   float: right;

  17.   padding-left: 10px;

  18.   width: 260px;

  19. }

  20. 

  21. #form-builder-wrapper.with-palette #form-builder {

  22.   float: none;

  23.   margin-right: 270px;

  24.   padding-right: 9px;

  25.   border-right: 1px solid #CCC;

  26.   position: relative;

  27. }

  28. 

  29. #center #form-builder form,

  30. #form-builder form {

  31.   margin: 0;

  32. }

  33. 

  34. #form-builder form.confirmation {

  35.   padding: 10px;

  36. }

  37. 

  38. div.form-builder-wrapper {

  39.   padding: 1px;

  40.   margin-top: 4px; /* Match this to the Sortable drag threshold option. */

  41.   position: relative;

  42.   transition: background 1s;

  43. }

  44. 

  45. div.form-builder-wrapper.highlighted {

  46.   background-color: #FEFC78;

  47. }

  48. 

  49. div.form-builder-element {

  50.   margin: 4px 10px 4px 10px;

  51. }

  52. 

  53. div.form-builder-hover {

  54.   border: 1px dashed #999;

  55.   padding: 0;

  56. }

  57. 

  58. div.form-builder-active {

  59.   padding: 0;

  60.   border: 1px solid #999;

  61. }

  62. 

  63. div.form-builder-wrapper form {

  64.   border-top: 1px dashed #999;

  65. }

  66. 

  67. div.form-builder-element {

  68.   position: relative;

  69. }

  70. 

  71. div.form-builder-draggable,

  72. div.form-builder-draggable input,

  73. div.form-builder-draggable textarea,

  74. div.form-builder-draggable label,

  75. div.form-builder-draggable .grippie {

  76.   cursor: move;

  77. }

  78. 

  79. div.form-builder-clickable,

  80. div.form-builder-clickable input,

  81. div.form-builder-clickable textarea,

  82. div.form-builder-clickable label,

  83. div.form-builder-clickable .grippie {

  84.   cursor: pointer;

  85. }

  86. 

  87. div.form-builder-element .form-builder-disable {

  88.   z-index: 100;

  89.   position: absolute;

  90.   top: 0;

  91.   left: 0;

  92. }

  93. 

  94. /* Empty fieldsets */

  95. #form-builder fieldset {

  96.   padding-bottom: 20px;

  97. }

  98. 

  99. fieldset.form-builder-empty-fieldset,

  100. div.form-builder-empty-fieldset {

  101.   overflow: hidden;

  102. }

  103. 

  104. div.form-builder-empty-placeholder {

  105.   border: none;

  106.   text-align: center;

  107.   color: #CCC;

  108.   overflow: hidden;

  109. }

  110. 

  111. div.form-builder-empty-placeholder span {

  112.   display: block;

  113.   margin: 40px;

  114. }

  115. div.form-builder-empty-form span {

  116.   margin: 120px 40px;

  117. }

  118. 

  119. /* Placeholders for drop position */

  120. div.form-builder-placeholder {

  121.   height: 60px;

  122.   margin-top: -30px;

  123.   position: absolute;

  124.   width: 100%;

  125. }

  126. div.form-builder-placeholder-last {

  127.   height: 200px;

  128. }

  129. 

  130. div.form-builder-placeholder-hover {

  131.   margin: 0;

  132.   position: relative;

  133.   border: 1px dashed #999;

  134. }

  135. 

  136. /* This affects the fieldset placeholder text on hover */

  137. div.form-builder-placeholder-hover span {

  138.   visibility: hidden;

  139. }

  140. 

  141. /* The item being dragged */

  142. #form-builder .ui-draggable-dragging {

  143.   width: 100%;

  144. }

  145. 

  146. /* Title bar for form builder items */

  147. div.form-builder-title-bar {

  148.   position: relative;

  149.   z-index: 10;

  150.   padding-top: 4px;

  151.   height: 14px;

  152.   margin-bottom: -18px;

  153.   border-bottom: none;

  154. }

  155. 

  156. div.ui-draggable div.form-builder-title-bar,

  157. div.ui-draggable div.form-builder-bottom-title-bar {

  158.   display: none;

  159. }

  160. 

  161. div.ui-draggable div.form-builder-title-bar,

  162. div.ui-draggable div.form-builder-bottom-title-bar {

  163.   cursor: move;

  164. }

  165. 

  166. span.form-builder-links {

  167.   position: absolute;

  168.   right: -4px;

  169.   z-index: 40;

  170. }

  171. 

  172. span.form-builder-bottom-links {

  173.   position: absolute;

  174.   right: -4px;

  175.   bottom: -10px;

  176.   z-index: 40;

  177. }

  178. 

  179. div.form-builder-hover div.form-builder-title-bar,

  180. div.form-builder-hover div.form-builder-bottom-title-bar,

  181. div.form-builder-active div.form-builder-title-bar {

  182.   display: block;

  183. }

  184. 

  185. div.form-builder-hover div.form-builder-wrapper div.form-builder-title-bar,

  186. div.form-builder-hover div.form-builder-wrapper div.form-builder-bottom-title-bar,

  187. div.form-builder-active div.form-builder-wrapper div.form-builder-title-bar,

  188. div.form-builder-active div.form-builder-bottom-title-bar {

  189.   display: none;

  190. }

  191. 

  192. span.form-builder-links a.remove,

  193. span.form-builder-links a.configure,

  194. span.form-builder-bottom-links a.clone {

  195.   float: right;

  196.   display: block;

  197.   text-decoration: none;

  198.   height: 16px;

  199.   width: 16px;

  200.   padding: 2px 8px;

  201.   cursor: pointer;

  202. }

  203. 

  204. span.form-builder-links a.remove span,

  205. span.form-builder-links a.configure span,

  206. span.form-builder-bottom-links a.clone span {

  207.   display: none;

  208. }

  209. 

  210. span.form-builder-links a.remove {

  211.   background: url(images/delete.png) no-repeat 0 0;

  212. }

  213. 

  214. span.form-builder-links a.configure {

  215.   background: url(images/configure.png) no-repeat 0 0;

  216. }

  217. 

  218. span.form-builder-bottom-links a.clone {

  219.   background: url(images/clone.png) no-repeat 0 0;

  220. }

  221. 

  222. span.form-builder-links a.remove:hover,

  223. span.form-builder-links a.configure:hover,

  224. span.form-builder-bottom-links a.clone:hover {

  225.   background-position: 0 -20px;

  226. }

  227. 

  228. span.form-builder-links a.progress,

  229. span.form-builder-links a.progress:hover,

  230. span.form-builder-bottom-links a.progress,

  231. span.form-builder-bottom-links a.progress:hover {

  232.   background: url(images/status-active.gif) no-repeat 2px 3px;

  233. }

  234. 

  235. /* Field form tabs */

  236. #form-builder ul.form-builder-tabs {

  237.   margin: 0;

  238.   padding: 0;

  239.   float: left; /* RTL */

  240.   position: relative;

  241. }

  242. 

  243. #form-builder ul.form-builder-tabs li {

  244.   float: left; /* RTL */

  245.   display: block;

  246.   border-width: 0 1px 0 0;

  247.   border-color: #999;

  248.   border-style: solid;

  249.   padding: 6px 10px;

  250.   margin: -1px -1px -1px 0px;

  251.   list-style-type: none;

  252.   list-style-image: none;

  253.   background: none;

  254.   cursor: pointer;

  255.   z-index: 20;

  256.   position: relative;

  257. }

  258. 

  259. #form-builder ul.form-builder-tabs li.active {

  260.   margin-left: -1px;

  261.   border-left: 1px solid #999;

  262.   border-top: 1px dashed #999;

  263.   border-bottom: 1px solid #ffffff;

  264.   background: #ffffff;

  265. }

  266. 

  267. #form-builder fieldset.form-builder-group {

  268.   float: left; /* RTL */

  269.   width: 100%;

  270.   padding: 0;

  271.   margin: 0;

  272.   border: none;

  273.   border-top: 1px solid #CCC;

  274. }

  275. 

  276. #form-builder fieldset.form-builder-group .fieldset-wrapper {

  277.   padding: 10px 10px 0;

  278. }

  279. 

  280. #form-builder fieldset.form-builder-group .form-item {

  281.   padding: 0;

  282.   margin: 0 0 10px;

  283. }

  284. 

  285. #form-builder-field-configure .form-item-title small {

  286.   display: block;

  287. }

  288. 

  289. #form-builder-field-configure #edit-form-builder-submit {

  290.   display: none;

  291. }

  292. 

  293. #form-builder-field-configure a.close {

  294.   border: none;

  295.   margin: 0;

  296.   font-size: 80%;

  297.   float: right;

  298.   padding: 6px 10px;

  299. }

  300. 

  301. /* Weight and parents form */

  302. form#form-builder-positions {

  303.   display: none;

  304. }

  305. 

  306. /* New fields block */

  307. div.form-builder-new-field {

  308.   padding: 10px 20px;

  309. }

  310. 

  311. div.form-builder-new-field span.progress {

  312.   padding-left: 16px;

  313.   background: url(images/status-active.gif) no-repeat center left;

  314. }

  315. 

  316. #form-builder-field-palette .item-list {

  317.   margin: 0 0 10px 0;

  318. }

  319. 

  320. #form-builder-field-palette h3 {

  321.   margin: 0;

  322. }

  323. 

  324. #form-builder-field-palette ul.form-builder-fields {

  325.   width: 260px;

  326.   padding: 0;

  327.   margin: 0;

  328. }

  329. 

  330. #form-builder-field-palette ul li {

  331.   list-style-type: none;

  332.   background: white none no-repeat 6px center;

  333.   padding: 2px 2px 2px 28px;

  334.   border: 1px solid #999;

  335.   margin: 2px;

  336.   float: left;

  337.   width: 80px;

  338.   font-size: 11px;

  339.   cursor: move;

  340.   display: block;

  341. }

  342. 

  343. /* Make inside links fill the entire LI element */

  344. #form-builder-field-palette ul li a {

  345.   padding: 4px 4px 4px 28px;

  346.   margin: -4px -4px -4px -28px;

  347.   width: 100%;

  348.   display: inline-block;

  349. }

  350. 

  351. #form-builder-field-palette ul li a,

  352. #form-builder-field-palette ul li a:hover,

  353. #form-builder-field-palette ul li a:active,

  354. #form-builder-field-palette ul li a:visited {

  355.   text-decoration: none;

  356.   cursor: move;

  357.   color: black;

  358. }

  359. 

  360. #form-builder-field-palette ul li.field-checkboxes {

  361.   background-image: url(images/fields/checkboxes.png);

  362. }

  363. #form-builder-field-palette ul li.field-date {

  364.   background-image: url(images/fields/date.png);

  365. }

  366. #form-builder-field-palette ul li.field-email {

  367.   background-image: url(images/fields/email.png);

  368. }

  369. #form-builder-field-palette ul li.field-fieldset {

  370.   background-image: url(images/fields/fieldset.png);

  371. }

  372. #form-builder-field-palette ul li.field-file {

  373.   background-image: url(images/fields/file.png);

  374. }

  375. #form-builder-field-palette ul li.field-grid {

  376.   background-image: url(images/fields/grid.png);

  377. }

  378. #form-builder-field-palette ul li.field-hidden {

  379.   background-image: url(images/fields/hidden.png);

  380. }

  381. #form-builder-field-palette ul li.field-image {

  382.   background-image: url(images/fields/image.png);

  383. }

  384. #form-builder-field-palette ul li.field-markup {

  385.   background-image: url(images/fields/markup.png);

  386. }

  387. #form-builder-field-palette ul li.field-number {

  388.   background-image: url(images/fields/number.png);

  389. }

  390. #form-builder-field-palette ul li.field-pagebreak {

  391.   background-image: url(images/fields/pagebreak.png);

  392. }

  393. #form-builder-field-palette ul li.field-radios {

  394.   background-image: url(images/fields/radios.png);

  395. }

  396. #form-builder-field-palette ul li.field-select {

  397.   background-image: url(images/fields/select.png);

  398. }

  399. #form-builder-field-palette ul li.field-time {

  400.   background-image: url(images/fields/time.png);

  401. }

  402. #form-builder-field-palette ul li.field-textarea {

  403.   background-image: url(images/fields/textarea.png);

  404. }

  405. #form-builder-field-palette ul li.field-textfield {

  406.   background-image: url(images/fields/textfield.png);

  407. }