You are here

smart_date.css in Smart Date 3.x

Styles for TimeStamp Ranges fields.

File

css/smart_date.css
View source
  1. /**
  2. * @file
  3. * Styles for TimeStamp Ranges fields.
  4. *
  5. */
  6. .smartdate--widget .fieldset-wrapper .form-item,
  7. .smartdate--widget tr.odd .fieldset-wrapper .form-item,
  8. .smartdate--widget tr.even .fieldset-wrapper .form-item {
  9. margin: 0.4em 0;
  10. }
  11. .smartdate--widget .fieldset-wrapper h4.label,
  12. .smartdate--widget .fieldset__wrapper h4.form-item__label {
  13. float: left;
  14. margin-right: 1em;
  15. width: 5em;
  16. text-align: right;
  17. padding-top: 0.75em;
  18. }
  19. /* Adjustments for Adminimal */
  20. .adminimal .smartdate--widget h4.label {
  21. margin-top: 0;
  22. }
  23. /* Adjustments for Claro */
  24. .smartdate--widget .fieldset__wrapper h4.form-item__label {
  25. margin-top: 0.375rem;
  26. padding-top: 0.85em;
  27. display: block;
  28. }
  29. .smartdate--widget .fieldset__wrapper .form-type--boolean {
  30. margin-left: 0.3rem;
  31. }
  32. .smartdate--widget .allday {
  33. margin: 0.65em 0.5em 0 4.8em;
  34. }
  35. .adminimal .smartdate--widget .allday {
  36. margin: 0.125em 0.5em 0 4.5em;
  37. }
  38. .smartdate--widget .fieldset__wrapper .allday {
  39. margin: 1em 0.5em 0 5.2em;
  40. position: relative;
  41. top: -2px;
  42. }
  43. .smartdate--widget .allday-label {
  44. float: left;
  45. margin: 0.75em 2.2em 0.75em 0;
  46. }
  47. .adminimal .smartdate--widget .allday-label {
  48. margin-right: 2em;
  49. }
  50. .smartdate--widget .form-type-select,
  51. tr.odd .smartdate--widget .form-type-select,
  52. tr.even .smartdate--widget .form-type-select,
  53. .smartdate--widget .form-type--select,
  54. tr.odd .smartdate--widget .form-type--select,
  55. tr.even .smartdate--widget .form-type--select {
  56. margin: 0.6em 0;
  57. display: inline-block;
  58. }
  59. .smartdate--widget .form-type-select label,
  60. .smartdate--widget .form-type--select label {
  61. margin-right: 1em;
  62. padding-top: 0.25em;
  63. min-width: 5em;
  64. text-align: right;
  65. display: inline-block;
  66. padding-top: 0.85em;
  67. }
  68. .smartdate--widget .form-type-select label,
  69. tr.odd .smartdate--widget .form-type-select label,
  70. tr.even .smartdate--widget .form-type-select label {
  71. padding-top: 0.6em;
  72. }
  73. .smartdate--widget .form-type--select label,
  74. tr.odd .smartdate--widget .form-type--select label,
  75. tr.even .smartdate--widget .form-type--select label {
  76. padding-top: 0.85em;
  77. }
  78. .smartdate--widget .pad-left {
  79. margin-left: 0.7em;
  80. }
  81. .smartdate--widget .form-type-number,
  82. .smartdate--widget .form-type--number {
  83. display: inline-block;
  84. }
  85. .smartdate--widget .form-type-number .field-suffix,
  86. .smartdate--widget .form-type--number .form-item__suffix {
  87. display: inline-block;
  88. padding-top: 0.85em;
  89. font-weight: bold;
  90. }
  91. .smartdate--widget .form-type-number input,
  92. .smartdate--widget .form-type--number input {
  93. width: 4.5em;
  94. display: inline-block;
  95. margin-right: 5px;
  96. }
  97. .smartdate--widget .form-type-number + .form-type-date,
  98. .smartdate--widget .form-type--number + .form-type--date {
  99. display: inline-block;
  100. }
  101. .smartdate--widget .repeat-end-date {
  102. width: 11.5em;
  103. display: inline-block;
  104. vertical-align: baseline;
  105. }
  106. .smartdate--widget .repeat-text {
  107. margin-top: 0.8em;
  108. }
  109. /* Smart Date Recur elements */
  110. .field-interval--label {
  111. display: inline-block;
  112. padding-top: 0.85em;
  113. text-align: right;
  114. margin: 0.75em 0.25em 0.75em 0;
  115. width: auto;
  116. }
  117. .field-interval--label.form-item__label {
  118. display: inline-block;
  119. }
  120. .adminimal .field-interval--label {
  121. padding-right: 0.3em;
  122. }
  123. .smartdate--widget .byday-checkboxes {
  124. display: inline-block;
  125. }
  126. .smartdate--widget .byday-checkboxes legend {
  127. float: left;
  128. margin: 0.75em 0.75em 0.75em 0.1em;
  129. }
  130. /* Fix wrapping for Claro. */
  131. .smartdate--widget .byday-checkboxes .fieldset__label,
  132. .smartdate--widget .byday-checkboxes .fieldset__wrapper {
  133. display: inline-block;
  134. }
  135. .smartdate--widget .byday-checkboxes input {
  136. display: none;
  137. }
  138. .smartdate--widget .byday-checkboxes input + label {
  139. color: black;
  140. background: white;
  141. border: 1px solid black;
  142. border-radius: 50% 50%;
  143. width: 1.7rem;
  144. text-align: center;
  145. padding: 5px 0px 0px;
  146. font-size: 0;
  147. line-height: 1rem;
  148. position: relative;
  149. top: -2px;
  150. vertical-align: -3px;
  151. display: inline-block;
  152. }
  153. .adminimal .smartdate--widget .byday-checkboxes input + label {
  154. vertical-align: -2px;
  155. }
  156. .smartdate--widget .byday-checkboxes input + label:first-letter {
  157. font-size: 1rem;
  158. }
  159. .smartdate--widget .byday-checkboxes input + label:hover {
  160. background: #ddd;
  161. }
  162. .smartdate--widget .byday-checkboxes input:checked + label {
  163. color: white;
  164. background: black;
  165. border: 1px solid #ddd;
  166. }