You are here

Home » API reference » Form Builder 7

form_builder.css in Form Builder 7

Same filename and directory in other branches
  1. 6 form_builder.css
  2. 7.2 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.   border: 1px solid blue;

  126. }

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

  128.   height: 200px;

  129. }

  130. 

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

  132.   margin: 0;

  133.   position: relative;

  134.   border: 1px dashed #999;

  135. }

  136. 

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

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

  139.   visibility: hidden;

  140. }

  141. 

  142. /* The item being dragged */

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

  144.   width: 100%;

  145. }

  146. 

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

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

  149.   position: relative;

  150.   z-index: 10;

  151.   padding-top: 4px;

  152.   height: 14px;

  153.   margin-bottom: -18px;

  154.   border-bottom: none;

  155. }

  156. 

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

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

  159.   display: none;

  160. }

  161. 

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

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

  164.   cursor: move;

  165. }

  166. 

  167. span.form-builder-links {

  168.   position: absolute;

  169.   right: -4px;

  170.   z-index: 40;

  171. }

  172. 

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

  174.   position: absolute;

  175.   right: -4px;

  176.   bottom: -10px;

  177.   z-index: 40;

  178. }

  179. 

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

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

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

  183.   display: block;

  184. }

  185. 

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

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

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

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

  190.   display: none;

  191. }

  192. 

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

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

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

  196.   float: right;

  197.   display: block;

  198.   text-decoration: none;

  199.   height: 16px;

  200.   width: 16px;

  201.   padding: 2px 8px;

  202.   cursor: pointer;

  203. }

  204. 

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

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

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

  208.   display: none;

  209. }

  210. 

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

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

  213. }

  214. 

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

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

  217. }

  218. 

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

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

  221. }

  222. 

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

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

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

  226.   background-position: 0 -20px;

  227. }

  228. 

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

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

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

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

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

  234. }

  235. 

  236. /* Field form tabs */

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

  238.   margin: 0;

  239.   padding: 0;

  240.   float: left; /* RTL */

  241.   position: relative;

  242. }

  243. 

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

  245.   float: left; /* RTL */

  246.   display: block;

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

  248.   border-color: #999;

  249.   border-style: solid;

  250.   padding: 6px 10px;

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

  252.   list-style-type: none;

  253.   list-style-image: none;

  254.   background: none;

  255.   cursor: pointer;

  256.   z-index: 20;

  257.   position: relative;

  258. }

  259. 

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

  261.   margin-left: -1px;

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

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

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

  265.   background: #ffffff;

  266. }

  267. 

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

  269.   float: left; /* RTL */

  270.   width: 100%;

  271.   padding: 0;

  272.   margin: 0;

  273.   border: none;

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

  275. }

  276. 

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

  278.   padding: 10px 10px 0;

  279. }

  280. 

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

  282.   padding: 0;

  283.   margin: 0 0 10px;

  284. }

  285. 

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

  287.   display: block;

  288. }

  289. 

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

  291.   display: none;

  292. }

  293. 

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

  295.   border: none;

  296.   margin: 0;

  297.   font-size: 80%;

  298.   float: right;

  299.   padding: 6px 10px;

  300. }

  301. 

  302. /* Weight and parents form */

  303. form#form-builder-positions {

  304.   display: none;

  305. }

  306. 

  307. /* New fields block */

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

  309.   padding: 10px 20px;

  310. }

  311. 

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

  313.   padding-left: 16px;

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

  315. }

  316. 

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

  318.   margin: 0 0 10px 0;

  319. }

  320. 

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

  322.   margin: 0;

  323. }

  324. 

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

  326.   width: 260px;

  327.   padding: 0;

  328.   margin: 0;

  329. }

  330. 

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

  332.   list-style-type: none;

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

  334.   padding: 2px 2px 2px 28px;

  335.   border: 1px solid #999;

  336.   margin: 2px;

  337.   float: left;

  338.   width: 80px;

  339.   font-size: 11px;

  340.   cursor: move;

  341.   display: block;

  342. }

  343. 

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

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

  346.   padding: 4px 4px 4px 28px;

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

  348.   width: 100%;

  349.   display: inline-block;

  350. }

  351. #form-builder-field-palette ul li a.progress {

  352.   background: url(images/status-active.gif) no-repeat 94% 7px;

  353.   font-weight: normal;

  354. }

  355. 

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

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

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

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

  360.   text-decoration: none;

  361.   cursor: move;

  362.   color: black;

  363. }

  364. 

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

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

  367. }

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

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

  370. }

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

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

  373. }

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

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

  376. }

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

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

  379. }

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

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

  382. }

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

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

  385. }

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

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

  388. }

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

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

  391. }

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

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

  394. }

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

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

  397. }

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

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

  400. }

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

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

  403. }

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

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

  406. }

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

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

  409. }

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

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

  412. }

  413. 

  414. #form-builder-webform-save-form {

  415.   margin-bottom: 200px;

  416. }