You are here

arrange_fields.css in Arrange Fields 6

Same filename and directory in other branches
  1. 7 css/arrange_fields.css
/* $Id$  */

.arrange-fields-container {
 position: relative;
 border: 2px solid #bbb;
 background: url("grid1.png"); 
}

.arrange-fields-container .draggable-form-item {
  border: 1px solid #ccc;  
  background-color: #eee;
  display: inline-block;
  position: absolute; 
  /*float: left;*/
  z-index: 100;    
}

/* 
   This corrects a weird bug: when people chose "inline" for the label for
   webform components, it resizes the textarea all weird.  This resets
   the label back to default block-level.
*/
.arrange-fields-container .draggable-form-item .webform-container-inline div.ui-wrapper, 
.arrange-fields-container .draggable-form-item .webform-container-inline div.description,
.arrange-fields-container .draggable-form-item .webform-container-inline div.ui-resizable-handle {
  display: block;
}

.arrange-fields-container .ui-resizable-handle {
  min-width: 10px;
  min-height: 10px;
  background-color: #ddd;
}

.arrange-fields-container .draggable-form-item fieldset{
  display: block;
  background-color: white;
}

.draggable-form-item .form-item, .draggable-form-item fieldset {
  margin: 0;
  padding: 0;
}

.draggable-form-item .form-submit
{
  margin: 5px;
}

#edit-arrange-fields-position-data-wrapper
{
  display: none;
}

.arrange-fields-container .grippie {
  display: none;
}

.arrange-fields-container .disabled-button {
  color: #999;
}

.arrange-fields-control-handle
{
  display: none;
  position: absolute;
  top: -10px;
  right: 15px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 2px;
  min-width: 50px;
  z-index: 200;
  text-align: right;
  font-size: 0.8em;
}
.arrange-fields-control-handle-markup {
  min-width: 30px;
}
.arrange-fields-control-handle .arrange-fields-handle-region {
  cursor: move;
}

.arrange-fields-container #arrange-fields-vertical-tabs {
  width: 98%;
}

#arrange-fields-config-dialog, 
#arrange-fields-markup-dialog
{
  background-color: white;
  padding: 5px;
  z-index: 1000;
}

#arrange-fields-markup-dialog .af-markup-body {
  width: 95%;
  height: 100px;
  font-size: 0.9em;
}

#arrange-fields-markup-dialog .af-wrapper-style {
  width: 60%;
  font-size: 0.9em;
}


#arrange-fields-config-dialog table
{
  padding: 0;
  margin: 0;
}

#arrange-fields-config-dialog table tbody
{
  border: 0;  
}

.ui-dialog-titlebar {
  background-color: #ccc;
  padding: 5px;
}
.ui-dialog-titlebar-close {
  display: none;
}

.ui-dialog-buttonpane {
  bottom: 10px !important;
  right: 10px;
  text-align: right; 
}

.ui-dialog-buttonpane button {
  margin-left: 20px;
}

.arrange-fields-other-form-caveat
{
  font-size: 0.85em;
  line-height: 1.1em;
  margin-left: 20px;
  
}

a.arrange-fields-config-link, 
a.arrange-fields-config-markup-link
{
  background: url("list_components.gif") no-repeat;
  padding-left: 16px;
  padding-bottom: 5px;
  height: 16px;
}
a.arrange-fields-config-link:hover {
  text-decoration: none;
}

.arrange-fields-draggable-markup {
  padding-right: 5px;
  padding-bottom: 3px;
  min-width: 20px;
  min-height: 10px;
}

#arrange-fields-markup-dialog .af-delete-button {
  position: absolute;
  bottom: 10px;
  display: block;
}

File

css/arrange_fields.css
View source
  1. /* $Id$ */
  2. .arrange-fields-container {
  3. position: relative;
  4. border: 2px solid #bbb;
  5. background: url("grid1.png");
  6. }
  7. .arrange-fields-container .draggable-form-item {
  8. border: 1px solid #ccc;
  9. background-color: #eee;
  10. display: inline-block;
  11. position: absolute;
  12. /*float: left;*/
  13. z-index: 100;
  14. }
  15. /*
  16. This corrects a weird bug: when people chose "inline" for the label for
  17. webform components, it resizes the textarea all weird. This resets
  18. the label back to default block-level.
  19. */
  20. .arrange-fields-container .draggable-form-item .webform-container-inline div.ui-wrapper,
  21. .arrange-fields-container .draggable-form-item .webform-container-inline div.description,
  22. .arrange-fields-container .draggable-form-item .webform-container-inline div.ui-resizable-handle {
  23. display: block;
  24. }
  25. .arrange-fields-container .ui-resizable-handle {
  26. min-width: 10px;
  27. min-height: 10px;
  28. background-color: #ddd;
  29. }
  30. .arrange-fields-container .draggable-form-item fieldset{
  31. display: block;
  32. background-color: white;
  33. }
  34. .draggable-form-item .form-item, .draggable-form-item fieldset {
  35. margin: 0;
  36. padding: 0;
  37. }
  38. .draggable-form-item .form-submit
  39. {
  40. margin: 5px;
  41. }
  42. #edit-arrange-fields-position-data-wrapper
  43. {
  44. display: none;
  45. }
  46. .arrange-fields-container .grippie {
  47. display: none;
  48. }
  49. .arrange-fields-container .disabled-button {
  50. color: #999;
  51. }
  52. .arrange-fields-control-handle
  53. {
  54. display: none;
  55. position: absolute;
  56. top: -10px;
  57. right: 15px;
  58. background-color: white;
  59. border: 1px solid #ccc;
  60. padding: 2px;
  61. min-width: 50px;
  62. z-index: 200;
  63. text-align: right;
  64. font-size: 0.8em;
  65. }
  66. .arrange-fields-control-handle-markup {
  67. min-width: 30px;
  68. }
  69. .arrange-fields-control-handle .arrange-fields-handle-region {
  70. cursor: move;
  71. }
  72. .arrange-fields-container #arrange-fields-vertical-tabs {
  73. width: 98%;
  74. }
  75. #arrange-fields-config-dialog,
  76. #arrange-fields-markup-dialog
  77. {
  78. background-color: white;
  79. padding: 5px;
  80. z-index: 1000;
  81. }
  82. #arrange-fields-markup-dialog .af-markup-body {
  83. width: 95%;
  84. height: 100px;
  85. font-size: 0.9em;
  86. }
  87. #arrange-fields-markup-dialog .af-wrapper-style {
  88. width: 60%;
  89. font-size: 0.9em;
  90. }
  91. #arrange-fields-config-dialog table
  92. {
  93. padding: 0;
  94. margin: 0;
  95. }
  96. #arrange-fields-config-dialog table tbody
  97. {
  98. border: 0;
  99. }
  100. .ui-dialog-titlebar {
  101. background-color: #ccc;
  102. padding: 5px;
  103. }
  104. .ui-dialog-titlebar-close {
  105. display: none;
  106. }
  107. .ui-dialog-buttonpane {
  108. bottom: 10px !important;
  109. right: 10px;
  110. text-align: right;
  111. }
  112. .ui-dialog-buttonpane button {
  113. margin-left: 20px;
  114. }
  115. .arrange-fields-other-form-caveat
  116. {
  117. font-size: 0.85em;
  118. line-height: 1.1em;
  119. margin-left: 20px;
  120. }
  121. a.arrange-fields-config-link,
  122. a.arrange-fields-config-markup-link
  123. {
  124. background: url("list_components.gif") no-repeat;
  125. padding-left: 16px;
  126. padding-bottom: 5px;
  127. height: 16px;
  128. }
  129. a.arrange-fields-config-link:hover {
  130. text-decoration: none;
  131. }
  132. .arrange-fields-draggable-markup {
  133. padding-right: 5px;
  134. padding-bottom: 3px;
  135. min-width: 20px;
  136. min-height: 10px;
  137. }
  138. #arrange-fields-markup-dialog .af-delete-button {
  139. position: absolute;
  140. bottom: 10px;
  141. display: block;
  142. }