You are here

date.css in Date 8

Same filename and directory in other branches
  1. 7.3 date_api/date.css
  2. 7 date_api/date.css
  3. 7.2 date_api/date.css

Main stylesheet for Date module.

File

date_api/date.css
View source
  1. /**
  2. * @file
  3. * Main stylesheet for Date module.
  4. */
  5. /* Force start/end dates to float using inline-block, where it works, otherwise inline. */
  6. .container-inline-date {
  7. clear: both;
  8. }
  9. .container-inline-date .form-item {
  10. float: none;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .container-inline-date > .form-item {
  15. display: inline-block;
  16. margin-right: 0.5em; /* LTR */
  17. margin-bottom: 10px;
  18. vertical-align: top;
  19. }
  20. .container-inline-date .form-item .form-item {
  21. float: left; /* LTR */
  22. }
  23. .container-inline-date .form-item,
  24. .container-inline-date .form-item input {
  25. width: auto;
  26. }
  27. .container-inline-date .description {
  28. clear: both;
  29. }
  30. .container-inline-date .form-item input,
  31. .container-inline-date .form-item select,
  32. .container-inline-date .form-item option {
  33. margin-right: 5px; /* LTR */
  34. }
  35. .container-inline-date .date-spacer {
  36. margin-left: -5px; /* LTR */
  37. }
  38. .views-right-60 .container-inline-date div {
  39. margin: 0;
  40. padding: 0;
  41. }
  42. .container-inline-date .date-timezone .form-item {
  43. clear: both;
  44. float: none;
  45. width: auto;
  46. }
  47. /* The exposed Views form doesn't need some of these styles */
  48. .container-inline-date .date-padding {
  49. padding: 10px;
  50. float: left;
  51. }
  52. .views-exposed-form .container-inline-date .date-padding {
  53. padding: 0;
  54. }
  55. /* Fixes for date popup css so it will behave in Drupal */
  56. #calendar_div,
  57. #calendar_div td,
  58. #calendar_div th {
  59. margin: 0;
  60. padding: 0;
  61. }
  62. #calendar_div,
  63. .calendar_control,
  64. .calendar_links,
  65. .calendar_header,
  66. .calendar {
  67. border-collapse: separate;
  68. margin: 0;
  69. width: 185px;
  70. }
  71. .calendar td {
  72. padding: 0;
  73. }
  74. /* formatting for start/end dates in nodes and views */
  75. span.date-display-single {
  76. }
  77. span.date-display-start {
  78. }
  79. span.date-display-end {
  80. }
  81. .date-prefix-inline {
  82. display: inline-block;
  83. }
  84. .date-clear {
  85. clear: both;
  86. display: block;
  87. float: none;
  88. }
  89. .date-no-float {
  90. clear: both;
  91. float: none;
  92. width: 98%;
  93. }
  94. .date-float {
  95. clear: none;
  96. float: left;
  97. width: auto;
  98. }
  99. /* Add space between date option checkboxes ('All day' & 'Collect End Date') */
  100. .date-float .form-type-checkbox{
  101. padding-right: 1em;
  102. }
  103. /* Add space between the date and time portions of the date_select widget. */
  104. .form-type-date-select .form-type-select[class$=hour] {
  105. margin-left: .75em; /* LTR */
  106. }
  107. .date-container .date-format-delete {
  108. float: left;
  109. margin-top: 1.8em;
  110. margin-left: 1.5em;
  111. }
  112. .date-container .date-format-name {
  113. float: left;
  114. }
  115. .date-container .date-format-type {
  116. float: left;
  117. padding-left: 10px;
  118. }
  119. .date-container .select-container {
  120. clear: left;
  121. float: left;
  122. }
  123. /* Calendar day css */
  124. div.date-calendar-day {
  125. background: #F3F3F3;
  126. border-top: 1px solid #EEE;
  127. border-left: 1px solid #EEE;
  128. border-right: 1px solid #BBB;
  129. border-bottom: 1px solid #BBB;
  130. color: #999;
  131. float: left;
  132. line-height: 1;
  133. margin: 6px 10px 0 0;
  134. text-align: center;
  135. width: 40px;
  136. }
  137. div.date-calendar-day span {
  138. display: block;
  139. text-align: center;
  140. }
  141. div.date-calendar-day span.month {
  142. background-color: #B5BEBE;
  143. color: white;
  144. font-size: .9em;
  145. padding: 2px;
  146. text-transform: uppercase;
  147. }
  148. div.date-calendar-day span.day {
  149. font-size: 2em;
  150. font-weight: bold;
  151. }
  152. div.date-calendar-day span.year {
  153. font-size: .9em;
  154. padding: 2px;
  155. }
  156. /* Admin styling */
  157. .form-item.form-item-instance-widget-settings-input-format-custom,
  158. .form-item.form-item-field-settings-enddate-required {
  159. margin-left: 1.3em;
  160. }
  161. #edit-field-settings-granularity .form-type-checkbox {
  162. margin-right: .6em; /* LTR */
  163. }
  164. .date-year-range-select {
  165. margin-right: 1em;
  166. }