woocommerce-smallscreen.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /**
  2. * woocommerce-smallscreen.scss
  3. * Optimises the default WooCommerce frontend layout when viewed on smaller screens.
  4. */
  5. /**
  6. * Imports
  7. */
  8. @import 'mixins';
  9. @import 'variables';
  10. /**
  11. * Style begins
  12. */
  13. .woocommerce,
  14. .woocommerce-page {
  15. table.shop_table_responsive {
  16. thead {
  17. display: none;
  18. }
  19. tbody {
  20. tr:first-child {
  21. td:first-child {
  22. border-top: 0;
  23. }
  24. }
  25. th {
  26. display: none;
  27. }
  28. }
  29. tr {
  30. display: block;
  31. td {
  32. display: block;
  33. text-align: right !important; // Important to overwrite order status inline styling
  34. &.order-actions {
  35. text-align: left !important; // This must always align left on handheld
  36. }
  37. &::before {
  38. content: attr(data-title) ': ';
  39. font-weight: 700;
  40. float: left;
  41. }
  42. &.product-remove,
  43. &.actions {
  44. &::before {
  45. display: none;
  46. }
  47. }
  48. }
  49. &:nth-child( 2n ) {
  50. td {
  51. background-color: rgba(0, 0, 0, 0.025);
  52. }
  53. }
  54. }
  55. }
  56. table.my_account_orders {
  57. tr {
  58. td {
  59. &.order-actions {
  60. text-align: left;
  61. &::before {
  62. display: none;
  63. }
  64. .button {
  65. float: none;
  66. margin: 0.125em 0.25em 0.125em 0;
  67. }
  68. }
  69. }
  70. }
  71. }
  72. /**
  73. * General layout
  74. */
  75. .col2-set {
  76. .col-1,
  77. .col-2 {
  78. float: none;
  79. width: 100%;
  80. }
  81. }
  82. /**
  83. * Products
  84. */
  85. ul.products[class*='columns-'] {
  86. li.product {
  87. width: 48%;
  88. float: left;
  89. clear: both;
  90. margin: 0 0 2.992em;
  91. &:nth-child( 2n ) {
  92. float: right;
  93. clear: none !important; // This should never clear.
  94. }
  95. }
  96. }
  97. /**
  98. * Product Details
  99. */
  100. div.product,
  101. #content div.product {
  102. div.images,
  103. div.summary {
  104. float: none;
  105. width: 100%;
  106. }
  107. }
  108. /**
  109. * Cart
  110. */
  111. table.cart,
  112. #content table.cart {
  113. .product-thumbnail {
  114. display: none;
  115. }
  116. td.actions {
  117. text-align: left;
  118. .coupon {
  119. float: none;
  120. @include clearfix();
  121. padding-bottom: 0.5em;
  122. input,
  123. .button,
  124. .input-text {
  125. width: 48%;
  126. box-sizing: border-box;
  127. }
  128. .input-text + .button,
  129. .button.alt {
  130. float: right;
  131. }
  132. }
  133. .button {
  134. display: block;
  135. width: 100%;
  136. }
  137. }
  138. }
  139. .cart-collaterals {
  140. .cart_totals,
  141. .shipping_calculator,
  142. .cross-sells {
  143. width: 100%;
  144. float: none;
  145. text-align: left;
  146. }
  147. }
  148. /**
  149. * Checkout
  150. */
  151. &.woocommerce-checkout {
  152. form.login {
  153. .form-row {
  154. width: 100%;
  155. float: none;
  156. }
  157. }
  158. }
  159. #payment {
  160. .terms {
  161. text-align: left;
  162. padding: 0;
  163. }
  164. #place_order {
  165. float: none;
  166. width: 100%;
  167. box-sizing: border-box;
  168. margin-bottom: 1em;
  169. }
  170. }
  171. /**
  172. * Account
  173. */
  174. .lost_reset_password {
  175. .form-row-first,
  176. .form-row-last {
  177. width: 100%;
  178. float: none;
  179. margin-right: 0;
  180. }
  181. }
  182. }
  183. .woocommerce-account {
  184. .woocommerce-MyAccount-navigation,
  185. .woocommerce-MyAccount-content {
  186. float: none;
  187. width: 100%;
  188. }
  189. }
  190. /**
  191. * Twenty Thirteen specific styles
  192. */
  193. .single-product {
  194. .twentythirteen {
  195. .panel {
  196. padding-left: 20px !important;
  197. padding-right: 20px !important;
  198. }
  199. }
  200. }