You are here

arrange_fields.css in Arrange Fields 7

Same filename and directory in other branches
  1. 6 css/arrange_fields.css
/* Solution to strange resizing issue, 
   thanks to spamsammy, here:
   https://drupal.org/node/1241750#comment-7147666
*/
form.arrange-fields-container * {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}


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

.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;
}

.form-item-arrange-fields-position-data
{
  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: 9000;
  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;
}

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