You are here

smart_date.css in Smart Date 8.2

Styles for TimeStamp Ranges fields.

File

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