_widgets.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. .widget {
  2. margin: 0 0 2.4em;
  3. /* Make sure select elements fit in widgets. */
  4. select {
  5. max-width: 100%;
  6. }
  7. img {
  8. max-width: 100%;
  9. }
  10. div > ul,
  11. & > ul {
  12. margin: 0;
  13. padding: 0;
  14. li {
  15. list-style: none;
  16. border-top: 1px solid rgba($color__text-input,0.2);
  17. margin: .8em 0 0;
  18. padding: .8em 0 0;
  19. }
  20. & > li:first-of-type {
  21. border-top: 0;
  22. margin-top: 0;
  23. padding-top: 0;
  24. }
  25. }
  26. div > ol,
  27. & > ol {
  28. list-style-position: inside;
  29. margin: 0;
  30. padding: 0;
  31. li {
  32. border-top: 1px solid rgba($color__text-input,0.2);
  33. margin: .8em 0 0;
  34. padding: .8em 0 0;
  35. }
  36. & > li:first-of-type {
  37. border-top: 0;
  38. margin-top: 0;
  39. padding-top: 0;
  40. }
  41. }
  42. }
  43. .widget-title {
  44. @include font-size(1);
  45. margin: 0 0 .8em;
  46. }
  47. .header-widget-area-wrapper {
  48. padding-top: 1.6em;
  49. padding-bottom: 1.6em;
  50. }
  51. .header-widget-area {
  52. color: white;
  53. background-color: $color__link-hover;
  54. font-weight: bold;
  55. padding: 0 10%;
  56. text-align: left;
  57. width: 100%;
  58. @include font-size(1);
  59. @include clearfix;
  60. a {
  61. color: white;
  62. }
  63. button,
  64. input[type="button"],
  65. input[type="reset"],
  66. input[type="submit"],
  67. .button {
  68. color: white;
  69. border-color: white;
  70. padding: .4em .8em;
  71. white-space: nowrap;
  72. &:hover,
  73. &:focus {
  74. opacity: 0.5;
  75. }
  76. }
  77. .textwidget {
  78. text-align: center;
  79. line-height: 2;
  80. }
  81. .widget {
  82. margin: 0 0 2.4em;
  83. }
  84. .widget:first-of-type {
  85. margin-top: 0;
  86. }
  87. .widget:last-of-type {
  88. margin-bottom: 0;
  89. }
  90. }
  91. .site-content .widget-area {
  92. .widget {
  93. background-color: $color__background-pre;
  94. padding: 1.6em;
  95. }
  96. }
  97. .site-content .full-width-widget-area {
  98. padding: 0 5% 1.6em;
  99. width: 100%;
  100. .widget {
  101. background-color: transparent;
  102. margin: .4em auto;
  103. padding: 0;
  104. width: 100%;
  105. }
  106. .widget-title {
  107. text-align: center;
  108. text-transform: none;
  109. letter-spacing: 0;
  110. margin-bottom: .8em;
  111. font-weight: normal;
  112. @include font-size(1.25);
  113. }
  114. }
  115. .footer-widgets-wrapper {
  116. background-color: $color__link;
  117. color: white;
  118. padding: 1.6em 5%;
  119. width: 100%;
  120. a {
  121. color: white;
  122. }
  123. button,
  124. input[type="button"],
  125. input[type="reset"],
  126. input[type="submit"],
  127. .button {
  128. color: white;
  129. border-color: white;
  130. }
  131. .widget {
  132. @include font-size(1);
  133. }
  134. }
  135. /* Specific widgets */
  136. .widget_rss {
  137. a {
  138. font-weight: bold;
  139. }
  140. .rss-date {
  141. clear: both;
  142. display: block;
  143. font-style: italic;
  144. margin: 0 0 .4em;
  145. }
  146. }
  147. .widget_calendar {
  148. td,
  149. th {
  150. text-align: center;
  151. }
  152. td#next {
  153. text-align: right;
  154. }
  155. td#prev {
  156. text-align: left;
  157. }
  158. }
  159. .widget_search {
  160. .search-field {
  161. width: 100%;
  162. max-width: 100%;
  163. }
  164. .search-submit {
  165. display: none;
  166. }
  167. }
  168. .textwidget {
  169. word-wrap: break-word;
  170. }