You are here

rooms_modal.css in Rooms - Drupal Booking for Hotels, B&Bs and Vacation Rentals 7

/* When modals are enabled, add hover effect to calendar */
.fc-event:hover {
  cursor: pointer;
}
.fc-widget-content:hover {
  cursor: default;
  background: rgba(230,230,230, 0.2);
}

/* Make modals responsive */
.page-admin-rooms #modalContent,
.page-admin-rooms #modalContent .ctools-modal-content,
.page-admin-rooms #modalContent .ctools-modal-content .modal-content {
  max-width: 100% !important;
}

/* Account for the extra div coming from ctools_modal_form_render() */
.page-admin-rooms .messages div.messages {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.page-admin-rooms .ctools-modal-content {
  font-size: 12px;
  border: solid 1px #ddd;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  background: #FFF;
}
.page-admin-rooms .ctools-modal-content .modal-header {
  background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
  color: #777;
  display: block;
  font-weight: 700;
  letter-spacing: normal;
  padding: 0.25em 1em;
  -webkit-border-radius: 0.5em 0.5em 0 0;
  -moz-border-radius: 0.5em 0.5em 0 0;
  border-radius: 0.5em 0.5em 0 0;
}
.page-admin-rooms .ctools-modal-content .modal-title {
  font-size: 120%;
  font-weight: bold;
  text-shadow: #fff 1px 1px 1px;
  color: #555;
}
.page-admin-rooms .ctools-modal-content .modal-content {
  width: 96% !important;
  padding: 15px 2%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.page-admin-rooms .ctools-modal-content a.close {
  color: #666;
  font-weight: normal;
  padding-left: 1.6em;
  background: url('../images/close.png') no-repeat 0 50%;
}
.page-admin-rooms .ctools-modal-content a.close img {
  display: none;
}
/** modal forms CSS **/
.page-admin-rooms .ctools-modal-content .form-item label {
  width: 100%;
  float: none;
  clear: both;
}
.page-admin-rooms .ctools-modal-content .resizable-textarea {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Override rooms form layouts when they appear inside CTools modals */
.page-admin-rooms .modal-content .rooms-management-form fieldset,
.page-admin-rooms .modal-content .rooms-management-form .form-wrapper {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
}
.page-admin-rooms .modal-content .rooms-management-form .form-item label {
  float: none;
  width: auto;
}
.page-admin-rooms .modal-content .rooms-management-form .form-type-select,
.page-admin-rooms .modal-content .rooms-management-form .form-item-operation,
.page-admin-rooms .modal-content .rooms-management-form .form-item-amount,
.page-admin-rooms .modal-content .rooms-management-form .form-actions {
  float: none;
  margin: 0;
  clear: both;
}
.page-admin-rooms .modal-content .rooms-management-form .rooms-date-range,
.page-admin-rooms .modal-content .rooms-management-form .form-item-data-group-size,
.page-admin-rooms .modal-content .rooms-management-form .rooms-booking-group-size-children-container {
  float: left !important;
  margin-right: 4% !important;
  width: 45% !important;
  max-width: 45% !important;
  min-width: 125px !important;
  clear: none;
}

File

css/rooms_modal.css
View source
  1. /* When modals are enabled, add hover effect to calendar */
  2. .fc-event:hover {
  3. cursor: pointer;
  4. }
  5. .fc-widget-content:hover {
  6. cursor: default;
  7. background: rgba(230,230,230, 0.2);
  8. }
  9. /* Make modals responsive */
  10. .page-admin-rooms #modalContent,
  11. .page-admin-rooms #modalContent .ctools-modal-content,
  12. .page-admin-rooms #modalContent .ctools-modal-content .modal-content {
  13. max-width: 100% !important;
  14. }
  15. /* Account for the extra div coming from ctools_modal_form_render() */
  16. .page-admin-rooms .messages div.messages {
  17. background: none;
  18. border: none;
  19. margin: 0;
  20. padding: 0;
  21. -webkit-border-radius: 0;
  22. -moz-border-radius: 0;
  23. border-radius: 0;
  24. }
  25. .page-admin-rooms .ctools-modal-content {
  26. font-size: 12px;
  27. border: solid 1px #ddd;
  28. -webkit-border-radius: 0.5em;
  29. -moz-border-radius: 0.5em;
  30. border-radius: 0.5em;
  31. -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  32. -moz-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  33. box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  34. background: #FFF;
  35. }
  36. .page-admin-rooms .ctools-modal-content .modal-header {
  37. background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
  38. color: #777;
  39. display: block;
  40. font-weight: 700;
  41. letter-spacing: normal;
  42. padding: 0.25em 1em;
  43. -webkit-border-radius: 0.5em 0.5em 0 0;
  44. -moz-border-radius: 0.5em 0.5em 0 0;
  45. border-radius: 0.5em 0.5em 0 0;
  46. }
  47. .page-admin-rooms .ctools-modal-content .modal-title {
  48. font-size: 120%;
  49. font-weight: bold;
  50. text-shadow: #fff 1px 1px 1px;
  51. color: #555;
  52. }
  53. .page-admin-rooms .ctools-modal-content .modal-content {
  54. width: 96% !important;
  55. padding: 15px 2%;
  56. -webkit-box-sizing: content-box;
  57. -moz-box-sizing: content-box;
  58. box-sizing: content-box;
  59. }
  60. .page-admin-rooms .ctools-modal-content a.close {
  61. color: #666;
  62. font-weight: normal;
  63. padding-left: 1.6em;
  64. background: url('../images/close.png') no-repeat 0 50%;
  65. }
  66. .page-admin-rooms .ctools-modal-content a.close img {
  67. display: none;
  68. }
  69. /** modal forms CSS **/
  70. .page-admin-rooms .ctools-modal-content .form-item label {
  71. width: 100%;
  72. float: none;
  73. clear: both;
  74. }
  75. .page-admin-rooms .ctools-modal-content .resizable-textarea {
  76. width: 100%;
  77. margin-left: 0;
  78. margin-right: 0;
  79. }
  80. /* Override rooms form layouts when they appear inside CTools modals */
  81. .page-admin-rooms .modal-content .rooms-management-form fieldset,
  82. .page-admin-rooms .modal-content .rooms-management-form .form-wrapper {
  83. float: none !important;
  84. width: 100% !important;
  85. max-width: 100% !important;
  86. margin-right: 0 !important;
  87. }
  88. .page-admin-rooms .modal-content .rooms-management-form .form-item label {
  89. float: none;
  90. width: auto;
  91. }
  92. .page-admin-rooms .modal-content .rooms-management-form .form-type-select,
  93. .page-admin-rooms .modal-content .rooms-management-form .form-item-operation,
  94. .page-admin-rooms .modal-content .rooms-management-form .form-item-amount,
  95. .page-admin-rooms .modal-content .rooms-management-form .form-actions {
  96. float: none;
  97. margin: 0;
  98. clear: both;
  99. }
  100. .page-admin-rooms .modal-content .rooms-management-form .rooms-date-range,
  101. .page-admin-rooms .modal-content .rooms-management-form .form-item-data-group-size,
  102. .page-admin-rooms .modal-content .rooms-management-form .rooms-booking-group-size-children-container {
  103. float: left !important;
  104. margin-right: 4% !important;
  105. width: 45% !important;
  106. max-width: 45% !important;
  107. min-width: 125px !important;
  108. clear: none;
  109. }