woocommerce-layout.scss 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  1. /**
  2. * woocommerce-layout.scss
  3. * Applies layout to the default WooCommerce frontend design
  4. */
  5. /**
  6. * Imports
  7. */
  8. @import 'mixins';
  9. @import 'variables';
  10. /**
  11. * Styling begins
  12. */
  13. .woocommerce, .woocommerce-page {
  14. .woocommerce-message,
  15. .woocommerce-error,
  16. .woocommerce-info {
  17. .button {
  18. float: right;
  19. }
  20. }
  21. /**
  22. * General layout styles
  23. */
  24. .col2-set {
  25. @include clearfix();
  26. width: 100%;
  27. .col-1 {
  28. float: left;
  29. width: 48%;
  30. }
  31. .col-2 {
  32. float: right;
  33. width: 48%;
  34. }
  35. }
  36. img {
  37. height: auto;
  38. max-width: 100%;
  39. }
  40. /**
  41. * Product page
  42. */
  43. div.product,
  44. #content div.product {
  45. div.images {
  46. float: left;
  47. width: 48%;
  48. }
  49. div.thumbnails {
  50. @include clearfix();
  51. a {
  52. float: left;
  53. width: 30.75%;
  54. margin-right: 3.8%;
  55. margin-bottom: 1em;
  56. }
  57. a.last {
  58. margin-right: 0;
  59. }
  60. a.first {
  61. clear: both;
  62. }
  63. &.columns-1 {
  64. a {
  65. width: 100%;
  66. margin-right: 0;
  67. float: none;
  68. }
  69. }
  70. &.columns-2 {
  71. a {
  72. width: 48%;
  73. }
  74. }
  75. &.columns-4 {
  76. a {
  77. width: 22.05%;
  78. }
  79. }
  80. &.columns-5 {
  81. a {
  82. width: 16.9%;
  83. }
  84. }
  85. }
  86. div.summary {
  87. float: right;
  88. width: 48%;
  89. clear: none;
  90. }
  91. .woocommerce-tabs {
  92. clear: both;
  93. ul.tabs {
  94. @include menu();
  95. }
  96. }
  97. #reviews {
  98. .comment {
  99. @include mediaright();
  100. }
  101. }
  102. }
  103. /**
  104. * Product loops
  105. */
  106. ul.products {
  107. clear: both;
  108. @include clearfix();
  109. li.product {
  110. float: left;
  111. margin: 0 3.8% 2.992em 0;
  112. padding: 0;
  113. position: relative;
  114. width: 22.05%;
  115. margin-left: 0;
  116. }
  117. li.first {
  118. clear: both;
  119. }
  120. li.last {
  121. margin-right: 0;
  122. }
  123. }
  124. ul.products {
  125. &.columns-1 {
  126. li.product {
  127. width: 100%;
  128. margin-right: 0;
  129. }
  130. }
  131. &.columns-2 {
  132. li.product {
  133. width: 48%;
  134. }
  135. }
  136. &.columns-3 {
  137. li.product {
  138. width: 30.75%;
  139. }
  140. }
  141. &.columns-5 {
  142. li.product {
  143. width: 16.95%;
  144. }
  145. }
  146. &.columns-6 {
  147. li.product {
  148. width: 13.5%;
  149. }
  150. }
  151. }
  152. &.columns-1 {
  153. ul.products {
  154. li.product {
  155. width: 100%;
  156. margin-right: 0;
  157. }
  158. }
  159. }
  160. &.columns-2 {
  161. ul.products {
  162. li.product {
  163. width: 48%;
  164. }
  165. }
  166. }
  167. &.columns-3 {
  168. ul.products {
  169. li.product {
  170. width: 30.75%;
  171. }
  172. }
  173. }
  174. &.columns-5 {
  175. ul.products {
  176. li.product {
  177. width: 16.95%;
  178. }
  179. }
  180. }
  181. &.columns-6 {
  182. ul.products {
  183. li.product {
  184. width: 13.5%;
  185. }
  186. }
  187. }
  188. .woocommerce-result-count {
  189. float: left;
  190. }
  191. .woocommerce-ordering {
  192. float: right;
  193. }
  194. .woocommerce-pagination {
  195. ul.page-numbers {
  196. @include menu();
  197. }
  198. }
  199. /**
  200. * Cart page
  201. */
  202. table.cart,
  203. #content table.cart {
  204. img {
  205. height: auto;
  206. }
  207. td.actions {
  208. text-align: right;
  209. .input-text {
  210. width: 80px;
  211. }
  212. .coupon {
  213. float: left;
  214. label {
  215. display: none;
  216. }
  217. }
  218. }
  219. }
  220. .cart-collaterals {
  221. @include clearfix();
  222. width: 100%;
  223. .related {
  224. width: 30.75%;
  225. float: left;
  226. }
  227. .cross-sells {
  228. width: 48%;
  229. float: left;
  230. ul.products {
  231. float: none;
  232. li {
  233. width: 48%;
  234. }
  235. }
  236. }
  237. .shipping_calculator {
  238. width: 48%;
  239. @include clearfix();
  240. clear: right;
  241. float: right;
  242. .col2-set {
  243. .col-1,
  244. .col-2 {
  245. width: 47%;
  246. }
  247. }
  248. }
  249. .cart_totals {
  250. float: right;
  251. width: 48%;
  252. }
  253. }
  254. /**
  255. * Cart sidebar
  256. */
  257. ul.cart_list,
  258. ul.product_list_widget {
  259. li {
  260. @include mediaright();
  261. }
  262. }
  263. /**
  264. * Forms
  265. */
  266. form {
  267. .form-row {
  268. @include clearfix();
  269. label {
  270. display: block;
  271. &.checkbox {
  272. display: inline;
  273. }
  274. }
  275. select {
  276. width: 100%;
  277. }
  278. .input-text {
  279. box-sizing: border-box;
  280. width: 100%;
  281. }
  282. }
  283. .form-row-first,
  284. .form-row-last {
  285. width: 47%;
  286. overflow: visible;
  287. }
  288. .form-row-first {
  289. float: left;
  290. /*rtl:raw:
  291. float: right;
  292. */
  293. }
  294. .form-row-last {
  295. float: right;
  296. }
  297. .form-row-wide {
  298. clear: both;
  299. }
  300. }
  301. #payment {
  302. .form-row {
  303. select {
  304. width: auto;
  305. }
  306. }
  307. .wc-terms-and-conditions, .terms {
  308. text-align: left;
  309. padding: 0 1em 0 0;
  310. float:left;
  311. }
  312. #place_order {
  313. float: right;
  314. }
  315. }
  316. .woocommerce-billing-fields,
  317. .woocommerce-shipping-fields {
  318. @include clearfix();
  319. }
  320. .woocommerce-terms-and-conditions {
  321. margin-bottom: 1.618em;
  322. padding: 1.618em;
  323. }
  324. /**
  325. * oEmbeds
  326. */
  327. .woocommerce-oembed {
  328. position: relative;
  329. }
  330. }
  331. .woocommerce-account {
  332. .woocommerce-MyAccount-navigation {
  333. float: left;
  334. width: 30%;
  335. }
  336. .woocommerce-MyAccount-content {
  337. float: right;
  338. width: 68%;
  339. }
  340. }
  341. /**
  342. * Twenty Eleven specific styles
  343. */
  344. .woocommerce-page {
  345. &.left-sidebar {
  346. #content.twentyeleven {
  347. width: 58.4%;
  348. margin: 0 7.6%;
  349. float: right;
  350. }
  351. }
  352. &.right-sidebar {
  353. #content.twentyeleven {
  354. margin: 0 7.6%;
  355. width: 58.4%;
  356. float: left;
  357. }
  358. }
  359. }
  360. /**
  361. * Twenty Fourteen specific styles
  362. */
  363. .twentyfourteen {
  364. .tfwc {
  365. padding: 12px 10px 0;
  366. max-width: 474px;
  367. margin: 0 auto;
  368. .product .entry-summary {
  369. padding: 0 !important;
  370. margin: 0 0 1.618em !important;
  371. }
  372. div.product.hentry.has-post-thumbnail {
  373. margin-top: 0;
  374. }
  375. }
  376. }
  377. @media screen and (min-width: 673px) {
  378. .twentyfourteen {
  379. .tfwc {
  380. padding-right: 30px;
  381. padding-left: 30px;
  382. }
  383. }
  384. }
  385. @media screen and (min-width: 1040px) {
  386. .twentyfourteen {
  387. .tfwc {
  388. padding-right: 15px;
  389. padding-left: 15px;
  390. }
  391. }
  392. }
  393. @media screen and (min-width: 1110px) {
  394. .twentyfourteen {
  395. .tfwc {
  396. padding-right: 30px;
  397. padding-left: 30px;
  398. }
  399. }
  400. }
  401. @media screen and (min-width: 1218px) {
  402. .twentyfourteen {
  403. .tfwc {
  404. margin-right: 54px;
  405. }
  406. }
  407. .full-width {
  408. .twentyfourteen {
  409. .tfwc {
  410. margin-right: auto;
  411. }
  412. }
  413. }
  414. }
  415. /**
  416. * Twenty Fifteen specific styles
  417. */
  418. .twentyfifteen {
  419. .t15wc {
  420. padding-left: 7.6923%;
  421. padding-right: 7.6923%;
  422. padding-top: 7.6923%;
  423. margin-bottom: 7.6923%;
  424. background: #fff;
  425. box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  426. .page-title {
  427. margin-left: 0;
  428. }
  429. }
  430. }
  431. @media screen and (min-width: 38.75em) {
  432. .twentyfifteen {
  433. .t15wc {
  434. margin-right: 7.6923%;
  435. margin-left: 7.6923%;
  436. margin-top: 8.3333%;
  437. }
  438. }
  439. }
  440. @media screen and (min-width: 59.6875em) {
  441. .twentyfifteen {
  442. .t15wc {
  443. margin-left: 8.3333%;
  444. margin-right: 8.3333%;
  445. padding: 10%;
  446. }
  447. }
  448. .single-product {
  449. .twentyfifteen {
  450. .entry-summary {
  451. padding: 0 !important;
  452. }
  453. }
  454. }
  455. }
  456. /**
  457. * Twenty Sixteen specific styles
  458. */
  459. .twentysixteen {
  460. .site-main {
  461. margin-right: 7.6923%;
  462. margin-left: 7.6923%;
  463. }
  464. .entry-summary {
  465. margin-right: 0;
  466. margin-left: 0;
  467. }
  468. }
  469. #content {
  470. .twentysixteen {
  471. div.product {
  472. div.images,
  473. div.summary {
  474. width: 46.42857%;
  475. }
  476. }
  477. }
  478. }
  479. @media screen and (min-width: 44.375em) {
  480. .twentysixteen {
  481. .site-main {
  482. margin-right: 23.0769%;
  483. }
  484. }
  485. }
  486. @media screen and (min-width: 56.875em) {
  487. .twentysixteen {
  488. .site-main {
  489. margin-right: 0;
  490. margin-left: 0;
  491. }
  492. }
  493. .no-sidebar {
  494. .twentysixteen {
  495. .site-main {
  496. margin-right: 15%;
  497. margin-left: 15%;
  498. }
  499. .entry-summary {
  500. margin-right: 0;
  501. margin-left: 0;
  502. }
  503. }
  504. }
  505. }
  506. /**
  507. * RTL styles.
  508. */
  509. .rtl {
  510. .woocommerce, .woocommerce-page {
  511. .col2-set {
  512. .col-1 {
  513. float: right;
  514. }
  515. .col-2 {
  516. float: left;
  517. }
  518. }
  519. }
  520. }