Нема описа

twenty-twenty.scss 33KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585
  1. @import "mixins";
  2. /**
  3. * Sass variables
  4. */
  5. $headings: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
  6. $body: nonbreakingspaceoverride, "Hoefler Text", garamond, "Times New Roman", serif;
  7. $body-color: #111;
  8. $highlights-color: #cd2653;
  9. /**
  10. * Fonts
  11. */
  12. @font-face {
  13. font-family: star;
  14. src: url(../fonts/star.eot);
  15. src:
  16. url(../fonts/star.eot?#iefix) format("embedded-opentype"),
  17. url(../fonts/star.woff) format("woff"),
  18. url(../fonts/star.ttf) format("truetype"),
  19. url(../fonts/star.svg#star) format("svg");
  20. font-weight: 400;
  21. font-style: normal;
  22. }
  23. @font-face {
  24. font-family: WooCommerce;
  25. src: url(../fonts/WooCommerce.eot);
  26. src:
  27. url(../fonts/WooCommerce.eot?#iefix) format("embedded-opentype"),
  28. url(../fonts/WooCommerce.woff) format("woff"),
  29. url(../fonts/WooCommerce.ttf) format("truetype"),
  30. url(../fonts/WooCommerce.svg#WooCommerce) format("svg");
  31. font-weight: 400;
  32. font-style: normal;
  33. }
  34. /**
  35. * Global elements
  36. */
  37. a.button {
  38. display: inline-block;
  39. text-align: center;
  40. box-sizing: border-box;
  41. word-break: break-word;
  42. color: #fff;
  43. text-decoration: none !important;
  44. &:hover,
  45. &:visited {
  46. color: #fff;
  47. text-decoration: underline !important;
  48. }
  49. }
  50. .woocommerce {
  51. form .form-row {
  52. .required {
  53. color: #b22222;
  54. text-decoration: none;
  55. visibility: hidden; // Only show optional by default.
  56. &[title] {
  57. border: 0 !important;
  58. }
  59. }
  60. .optional {
  61. visibility: visible;
  62. }
  63. }
  64. form.woocommerce-form-login,
  65. form.woocommerce-form-register {
  66. p,
  67. label {
  68. font-family: $headings;
  69. }
  70. input {
  71. border: 1px solid #ddd;
  72. }
  73. }
  74. .woocommerce-form-login__rememberme {
  75. margin: 1rem 0 3rem 0;
  76. }
  77. }
  78. .woocommerce-view-order {
  79. .woocommerce-MyAccount-content {
  80. table {
  81. border: 0;
  82. tbody {
  83. border-bottom: 1px solid #ddd;
  84. }
  85. tfoot {
  86. tr:last-of-type {
  87. border-top: 1px solid #ddd;
  88. .woocommerce-Price-amount {
  89. font-weight: 700;
  90. }
  91. }
  92. }
  93. td,
  94. tr,
  95. th {
  96. border: 0;
  97. }
  98. }
  99. }
  100. }
  101. .woocommerce-breadcrumb {
  102. margin-bottom: 5rem;
  103. font-size: 0.88889em;
  104. font-family: $headings;
  105. }
  106. .woocommerce-pagination {
  107. font-family: $headings;
  108. font-size: 0.88889em;
  109. ul.page-numbers {
  110. margin: 0;
  111. padding: 0;
  112. display: block;
  113. font-weight: 700;
  114. letter-spacing: -0.02em;
  115. line-height: 1.2;
  116. }
  117. span.page-numbers,
  118. a.page-numbers,
  119. .next.page-numbers,
  120. .prev.page-numbers {
  121. padding: 0 calc(0.5 * 1rem);
  122. display: inline-block;
  123. }
  124. }
  125. .onsale {
  126. position: absolute;
  127. top: 0;
  128. left: 0;
  129. display: inline-block;
  130. background: $highlights-color;
  131. color: #fff;
  132. font-family: $headings;
  133. font-size: 1.7rem;
  134. font-weight: 700;
  135. letter-spacing: -0.02em;
  136. line-height: 1.2;
  137. padding: 1.5rem;
  138. text-transform: uppercase;
  139. z-index: 1;
  140. }
  141. .price {
  142. font-family: $headings;
  143. del {
  144. opacity: 0.5;
  145. display: inline-block;
  146. }
  147. ins {
  148. display: inline-block;
  149. text-decoration: none;
  150. }
  151. }
  152. .woocommerce-message,
  153. .woocommerce-error,
  154. .woocommerce-info {
  155. margin-bottom: 5rem;
  156. margin-left: 0;
  157. background: #eee;
  158. font-size: 0.88889em;
  159. font-family: $headings;
  160. list-style: none;
  161. overflow: hidden;
  162. }
  163. .woocommerce-message,
  164. .woocommerce-error li,
  165. .woocommerce-info {
  166. padding: 1.5rem 3rem;
  167. display: flex;
  168. justify-content: space-between;
  169. align-items: center;
  170. .button {
  171. order: 2;
  172. }
  173. }
  174. .woocommerce-message {
  175. background: #eee;
  176. color: $body-color;
  177. }
  178. .woocommerce-error {
  179. color: #fff;
  180. background: #b22222;
  181. a {
  182. color: #fff;
  183. &:hover {
  184. color: #fff;
  185. }
  186. &.button {
  187. background: #111;
  188. }
  189. }
  190. > li {
  191. margin: 0;
  192. }
  193. }
  194. #site-content {
  195. .woocommerce-error,
  196. .woocommerce-info {
  197. font-family: $headings;
  198. }
  199. }
  200. .woocommerce-info {
  201. background: #eee;
  202. color: #000;
  203. border-top: 2px solid $highlights-color;
  204. a {
  205. color: #444;
  206. &:hover {
  207. color: #000;
  208. }
  209. &.button {
  210. background: $highlights-color;
  211. color: #f5efe0;
  212. }
  213. }
  214. }
  215. .woocommerce-store-notice {
  216. background: #eee;
  217. color: #000;
  218. border-top: 2px solid $highlights-color;
  219. padding: 2rem;
  220. position: absolute;
  221. top: 0;
  222. left: 0;
  223. width: 100%;
  224. z-index: 999;
  225. }
  226. .admin-bar .woocommerce-store-notice {
  227. top: 32px;
  228. }
  229. .woocommerce-store-notice__dismiss-link {
  230. float: right;
  231. color: #000;
  232. &:hover {
  233. text-decoration: none;
  234. color: #000;
  235. }
  236. }
  237. .flex-viewport {
  238. margin-bottom: 1.5em;
  239. }
  240. #site-content {
  241. .post-inner {
  242. padding-top: 0;
  243. }
  244. .wp-block-cover {
  245. margin-top: 0;
  246. }
  247. }
  248. .cross-sells {
  249. .woocommerce-loop-product__title {
  250. font-family: $headings;
  251. }
  252. .star-rating {
  253. font-size: 1.4rem;
  254. }
  255. }
  256. /* Make thumbnails in the gallery affect parent's height and wrapping */
  257. .flex-control-nav::after {
  258. clear: both;
  259. content: "";
  260. display: table;
  261. }
  262. /**
  263. * Tables
  264. */
  265. .woocommerce,
  266. .woocommerce-page {
  267. table.shop_table {
  268. td,
  269. th {
  270. word-break: normal;
  271. }
  272. }
  273. }
  274. /**
  275. * Shop page
  276. */
  277. .woocommerce-products-header__title.page-title {
  278. font-size: 6rem;
  279. text-align: center;
  280. }
  281. .woocommerce-result-count,
  282. .woocommerce-ordering {
  283. margin: 0 0 1rem;
  284. padding: 0.75rem 0;
  285. }
  286. /**
  287. * Products
  288. */
  289. ul.products {
  290. margin: 0;
  291. padding: 0;
  292. li.product {
  293. list-style: none;
  294. .woocommerce-loop-product__link {
  295. display: block;
  296. text-decoration: none;
  297. }
  298. .woocommerce-loop-product__title {
  299. margin: 1.5rem 0 0.5rem;
  300. font-size: 2.5rem;
  301. &::before {
  302. content: none;
  303. }
  304. }
  305. .woocommerce-loop-product__title,
  306. .price,
  307. .star-rating {
  308. color: $body-color;
  309. }
  310. .star-rating {
  311. margin-bottom: 0.8rem;
  312. }
  313. .price {
  314. margin-bottom: 2rem;
  315. }
  316. .price,
  317. .star-rating {
  318. display: block;
  319. }
  320. .woocommerce-placeholder {
  321. border: 1px solid #f2f2f2;
  322. }
  323. .button {
  324. vertical-align: middle;
  325. &.loading {
  326. opacity: 0.5;
  327. }
  328. }
  329. .added_to_cart {
  330. margin: 0.5rem;
  331. }
  332. }
  333. }
  334. .star-rating {
  335. overflow: hidden;
  336. position: relative;
  337. height: 1em;
  338. line-height: 1;
  339. font-size: 1em;
  340. width: 5.4em;
  341. font-family: star;
  342. margin-bottom: 0.7rem;
  343. &::before {
  344. content: "\73\73\73\73\73";
  345. float: left;
  346. top: 0;
  347. left: 0;
  348. position: absolute;
  349. }
  350. span {
  351. overflow: hidden;
  352. float: left;
  353. top: 0;
  354. left: 0;
  355. position: absolute;
  356. padding-top: 1.5em;
  357. }
  358. span::before {
  359. content: "\53\53\53\53\53";
  360. top: 0;
  361. position: absolute;
  362. left: 0;
  363. }
  364. }
  365. a.remove {
  366. display: inline-block;
  367. width: 20px;
  368. height: 20px;
  369. line-height: 18px;
  370. font-size: 20px;
  371. font-weight: 700;
  372. text-align: center;
  373. border-radius: 100%;
  374. text-decoration: none !important;
  375. background: #fff;
  376. color: #000;
  377. &:hover {
  378. background: $highlights-color;
  379. color: #fff !important;
  380. }
  381. }
  382. dl.variation,
  383. .wc-item-meta {
  384. list-style: none outside;
  385. dt,
  386. .wc-item-meta-label {
  387. float: left;
  388. clear: both;
  389. margin-right: 0.25rem;
  390. margin-top: 0;
  391. list-style: none outside;
  392. font-weight: 400;
  393. }
  394. dd {
  395. margin: 0;
  396. }
  397. p,
  398. &:last-child {
  399. margin-bottom: 0;
  400. }
  401. }
  402. /**
  403. * Single product
  404. */
  405. .single-product {
  406. div.product {
  407. position: relative;
  408. .product_meta {
  409. clear: both;
  410. font-size: 0.7em;
  411. padding-top: 0.5em;
  412. margin-top: 3rem;
  413. }
  414. }
  415. .single_add_to_cart_button {
  416. padding-top: 1.55rem;
  417. padding-bottom: 1.59rem;
  418. font-size: 1.6rem;
  419. }
  420. .single-featured-image-header {
  421. display: none;
  422. }
  423. .entry-title {
  424. margin: 0 0 2.5rem;
  425. &::before {
  426. margin-top: 0;
  427. }
  428. }
  429. .summary {
  430. margin-bottom: 8rem;
  431. p.price {
  432. margin-bottom: 3.5rem;
  433. }
  434. }
  435. .woocommerce-product-rating {
  436. margin: -1rem 0 4rem;
  437. line-height: 1;
  438. font-size: 1.4rem;
  439. .star-rating {
  440. float: left;
  441. margin-right: 0.25rem;
  442. }
  443. }
  444. form.cart {
  445. .quantity {
  446. float: left;
  447. margin-right: 0.5rem;
  448. }
  449. input {
  450. width: 5em;
  451. }
  452. }
  453. .woocommerce-variation-add-to-cart {
  454. .button {
  455. padding-top: 1.55rem;
  456. padding-bottom: 1.59rem;
  457. font-size: 1.6rem;
  458. }
  459. .button.disabled {
  460. opacity: 0.2;
  461. }
  462. }
  463. .woocommerce-message {
  464. flex-direction: row-reverse;
  465. }
  466. .woocommerce-Tabs-panel--additional_information,
  467. .woocommerce-Tabs-panel--reviews {
  468. table {
  469. border: 1px solid #ddd;
  470. tr,
  471. td,
  472. th {
  473. border: 1px solid #ddd;
  474. }
  475. }
  476. p {
  477. font-family: $headings;
  478. }
  479. input {
  480. border: 1px solid #ddd;
  481. }
  482. }
  483. .woocommerce-product-attributes-item__value {
  484. p {
  485. margin-bottom: 0;
  486. }
  487. }
  488. }
  489. table.variations {
  490. label {
  491. margin: 0;
  492. padding: 6px 0;
  493. }
  494. select {
  495. margin-right: 0.5rem;
  496. }
  497. }
  498. a.reset_variations {
  499. margin-left: 0.5em;
  500. }
  501. .woocommerce-product-gallery {
  502. max-width: 600px;
  503. position: relative;
  504. margin-bottom: 2rem;
  505. figure {
  506. margin: 0;
  507. padding: 0;
  508. }
  509. .woocommerce-product-gallery__wrapper {
  510. margin: 0;
  511. padding: 0;
  512. }
  513. .zoomImg {
  514. background-color: #fff;
  515. opacity: 0;
  516. }
  517. .woocommerce-product-gallery__image--placeholder {
  518. border: 1px solid #f2f2f2;
  519. }
  520. .woocommerce-product-gallery__image:nth-child(n+2) {
  521. width: 25%;
  522. display: inline-block;
  523. }
  524. .flex-control-thumbs {
  525. li {
  526. list-style: none;
  527. cursor: pointer;
  528. float: left;
  529. }
  530. img {
  531. opacity: 0.5;
  532. &:hover,
  533. &.flex-active {
  534. opacity: 1;
  535. }
  536. }
  537. }
  538. img {
  539. display: block;
  540. height: auto;
  541. }
  542. }
  543. .woocommerce-product-gallery--columns-3 {
  544. .flex-control-thumbs li {
  545. width: 33.3333%;
  546. }
  547. .flex-control-thumbs li:nth-child(3n+1) {
  548. clear: left;
  549. }
  550. }
  551. .woocommerce-product-gallery--columns-4 {
  552. ol {
  553. margin-left: 0;
  554. margin-bottom: 0;
  555. }
  556. .flex-control-thumbs li {
  557. width: 14.2857142857%;
  558. margin: 0 14.2857142857% 1.6em 0;
  559. }
  560. .flex-control-thumbs li:nth-child(4n) {
  561. margin-right: 0;
  562. }
  563. .flex-control-thumbs li:nth-child(4n+1) {
  564. clear: left;
  565. }
  566. }
  567. .woocommerce-product-gallery--columns-5 {
  568. .flex-control-thumbs li {
  569. width: 20%;
  570. }
  571. .flex-control-thumbs li:nth-child(5n+1) {
  572. clear: left;
  573. }
  574. }
  575. .woocommerce-product-gallery__trigger {
  576. position: absolute;
  577. top: 1rem;
  578. right: 1rem;
  579. z-index: 99;
  580. }
  581. .woocommerce-tabs {
  582. margin: 4rem 0 2rem;
  583. /* reset description tab width to full width */
  584. #tab-description {
  585. h2,
  586. p {
  587. max-width: 100vw;
  588. width: 100%;
  589. }
  590. }
  591. /* reset additional info tab width to full width */
  592. #tab-additional_information {
  593. .woocommerce-product-attributes {
  594. max-width: 100vw;
  595. width: 100%;
  596. }
  597. }
  598. #tab-reviews {
  599. /* reset reviews tab width to full width */
  600. .woocommerce-Reviews {
  601. max-width: 100vw;
  602. width: 100%;
  603. }
  604. #submit {
  605. float: right;
  606. }
  607. }
  608. ul {
  609. margin: 0 0 1.5rem;
  610. padding: 0;
  611. font-family: $headings;
  612. li {
  613. margin: 0.5rem 4rem 2rem 0;
  614. a {
  615. color: $body-color;
  616. text-decoration: none;
  617. font-weight: 700;
  618. }
  619. &.active {
  620. a {
  621. color: $highlights-color;
  622. box-shadow: 0 2px 0 $highlights-color;
  623. }
  624. }
  625. }
  626. }
  627. .panel {
  628. > * {
  629. margin-top: 0 !important;
  630. }
  631. h1,
  632. h2 {
  633. &::before {
  634. content: none;
  635. }
  636. }
  637. h2:first-of-type {
  638. font-size: 3rem;
  639. margin: 0 0 2rem;
  640. }
  641. }
  642. #comments {
  643. padding-top: 0;
  644. }
  645. .comment-reply-title {
  646. font-family: $headings;
  647. font-size: 1em;
  648. font-weight: 700;
  649. display: block;
  650. }
  651. #reviews {
  652. ol.commentlist {
  653. padding: 0;
  654. margin: 0;
  655. }
  656. li.review,
  657. li.comment {
  658. list-style: none;
  659. margin: 0.5rem 0 2.5rem 0;
  660. .avatar {
  661. max-height: 36px;
  662. width: auto;
  663. float: right;
  664. }
  665. p.meta {
  666. margin-bottom: 0.5em;
  667. }
  668. }
  669. .comment-form-rating {
  670. label {
  671. max-width: 58rem;
  672. margin: 0 auto;
  673. }
  674. }
  675. p.stars {
  676. margin-top: 0;
  677. a {
  678. position: relative;
  679. height: 1em;
  680. width: 1em;
  681. text-indent: -999em;
  682. display: inline-block;
  683. text-decoration: none;
  684. box-shadow: none;
  685. &::before {
  686. display: block;
  687. position: absolute;
  688. top: 0;
  689. left: 0;
  690. width: 1em;
  691. height: 1em;
  692. line-height: 1;
  693. font-family: WooCommerce;
  694. content: "\e021";
  695. text-indent: 0;
  696. }
  697. &:hover {
  698. ~ a::before {
  699. content: "\e021";
  700. }
  701. }
  702. }
  703. &:hover {
  704. a {
  705. &::before {
  706. content: "\e020";
  707. }
  708. }
  709. }
  710. &.selected {
  711. a.active {
  712. &::before {
  713. content: "\e020";
  714. }
  715. ~ a::before {
  716. content: "\e021";
  717. }
  718. }
  719. a:not(.active) {
  720. &::before {
  721. content: "\e020";
  722. }
  723. }
  724. }
  725. }
  726. .comment-form-author,
  727. .comment-form-email {
  728. float: none;
  729. margin-left: auto;
  730. }
  731. }
  732. }
  733. /**
  734. * Related products
  735. */
  736. .related.products,
  737. .up-sells {
  738. clear: both;
  739. ul.products {
  740. display: flex;
  741. justify-content: space-evenly;
  742. align-items: stretch;
  743. li.product {
  744. display: flex;
  745. flex-direction: column;
  746. justify-content: space-between;
  747. align-items: flex-start;
  748. }
  749. }
  750. }
  751. /**
  752. * Widgets
  753. */
  754. .widget.woocommerce {
  755. ul {
  756. padding-left: 0;
  757. li {
  758. list-style: none;
  759. }
  760. }
  761. }
  762. .widget .product_list_widget,
  763. .site-footer .widget .product_list_widget {
  764. margin-bottom: 1.5rem;
  765. a {
  766. display: block;
  767. box-shadow: none;
  768. &:hover {
  769. box-shadow: none;
  770. }
  771. }
  772. li {
  773. padding: 0.5rem 0;
  774. a.remove {
  775. float: left;
  776. margin-top: 7px;
  777. line-height: 20px;
  778. color: #fff;
  779. margin-right: 0.5rem;
  780. }
  781. }
  782. img {
  783. display: none;
  784. }
  785. }
  786. .widget_shopping_cart {
  787. .buttons {
  788. a {
  789. display: inline-block;
  790. margin: 0 0.5rem 0 0;
  791. }
  792. }
  793. }
  794. .woocommerce-shopping-totals {
  795. vertical-align: text-top;
  796. }
  797. .widget_layered_nav {
  798. .chosen {
  799. &::before {
  800. content: "×";
  801. display: inline-block;
  802. width: 16px;
  803. height: 16px;
  804. line-height: 16px;
  805. font-size: 16px;
  806. text-align: center;
  807. border-radius: 100%;
  808. border: 1px solid #000;
  809. margin-right: 0.25rem;
  810. }
  811. }
  812. }
  813. .widget_price_filter {
  814. .price_slider {
  815. margin-bottom: 1rem;
  816. }
  817. .price_slider_amount {
  818. text-align: right;
  819. line-height: 2.4;
  820. font-size: 0.8751em;
  821. .button {
  822. float: left;
  823. padding: 0.4rem 1rem;
  824. }
  825. }
  826. .ui-slider {
  827. position: relative;
  828. text-align: left;
  829. margin-left: 0.5rem;
  830. margin-right: 0.5rem;
  831. }
  832. .ui-slider .ui-slider-handle {
  833. position: absolute;
  834. z-index: 2;
  835. width: 1em;
  836. height: 1em;
  837. background-color: #000;
  838. border-radius: 1em;
  839. cursor: ew-resize;
  840. outline: none;
  841. top: -0.3em;
  842. margin-left: -0.5em;
  843. }
  844. .ui-slider .ui-slider-range {
  845. position: absolute;
  846. z-index: 1;
  847. font-size: 0.7em;
  848. display: block;
  849. border: 0;
  850. border-radius: 1em;
  851. background-color: #000;
  852. }
  853. .price_slider_wrapper .ui-widget-content {
  854. border-radius: 1em;
  855. background-color: #666;
  856. border: 0;
  857. }
  858. .ui-slider-horizontal {
  859. height: 0.5em;
  860. }
  861. .ui-slider-horizontal .ui-slider-range {
  862. top: 0;
  863. height: 100%;
  864. }
  865. .ui-slider-horizontal .ui-slider-range-min {
  866. left: -1px;
  867. }
  868. .ui-slider-horizontal .ui-slider-range-max {
  869. right: -1px;
  870. }
  871. }
  872. .widget_rating_filter {
  873. li {
  874. text-align: right;
  875. .star-rating {
  876. float: left;
  877. margin-top: 0.3rem;
  878. }
  879. }
  880. }
  881. .widget_product_search {
  882. form {
  883. position: relative;
  884. }
  885. .search-field {
  886. padding-right: 100px;
  887. }
  888. input[type="submit"] {
  889. position: absolute;
  890. top: 0.5rem;
  891. right: 0.5rem;
  892. padding-left: 1rem;
  893. padding-right: 1rem;
  894. }
  895. }
  896. /**
  897. * Account section
  898. */
  899. .woocommerce-account {
  900. #site-content {
  901. .post-inner {
  902. padding-top: 0;
  903. }
  904. .woocommerce {
  905. max-width: 1600px;
  906. padding: 0 6vw;
  907. margin: 0 auto;
  908. }
  909. }
  910. .woocommerce-MyAccount-navigation {
  911. font-family: $headings;
  912. margin: 0 0 2rem;
  913. ul {
  914. margin: 0;
  915. padding: 0;
  916. }
  917. li {
  918. list-style: none;
  919. padding: 0.5rem 0;
  920. font-family: $headings;
  921. font-size: 2rem;
  922. &:first-child {
  923. padding-top: 0;
  924. }
  925. a {
  926. box-shadow: none;
  927. text-decoration: none;
  928. font-weight: 600;
  929. color: #aaa;
  930. &:hover {
  931. color: #000;
  932. text-decoration: underline;
  933. }
  934. }
  935. &.is-active {
  936. a {
  937. text-decoration: underline;
  938. color: $highlights-color;
  939. }
  940. }
  941. }
  942. }
  943. .woocommerce-MyAccount-content {
  944. p {
  945. font-family: $headings;
  946. font-size: 2rem;
  947. }
  948. form {
  949. h3 {
  950. margin-top: 0;
  951. }
  952. }
  953. }
  954. table.account-orders-table {
  955. margin-top: 0;
  956. border: 0;
  957. tr,
  958. td,
  959. th {
  960. border: 0;
  961. }
  962. td {
  963. padding-left: 1.5rem;
  964. }
  965. thead {
  966. border-bottom: 1px solid #ddd;
  967. }
  968. .button {
  969. margin: 0 0.35rem 0.35rem 0;
  970. width: 80%;
  971. }
  972. }
  973. table.account-orders-table:not(.has-background) {
  974. tbody {
  975. tr:nth-child(2n) {
  976. td {
  977. background: #eee;
  978. }
  979. }
  980. tr:nth-child(2n+1) {
  981. td {
  982. background: #fff;
  983. }
  984. }
  985. }
  986. }
  987. .woocommerce-EditAccountForm {
  988. input {
  989. border: 1px solid #ddd;
  990. }
  991. fieldset {
  992. border: 0.2rem solid #ddd;
  993. }
  994. button {
  995. margin-top: 3rem;
  996. }
  997. }
  998. }
  999. .logged-in.woocommerce-account {
  1000. #site-content {
  1001. .woocommerce {
  1002. display: flex;
  1003. flex-direction: row;
  1004. }
  1005. }
  1006. }
  1007. /**
  1008. * Cart
  1009. */
  1010. .woocommerce-cart-form {
  1011. img {
  1012. max-width: 120px;
  1013. height: auto;
  1014. display: block;
  1015. }
  1016. dl.variation {
  1017. margin-top: 1rem;
  1018. dt,
  1019. dd,
  1020. p {
  1021. font-family: $headings;
  1022. font-size: 1.4rem;
  1023. }
  1024. p,
  1025. &:last-child {
  1026. margin-bottom: 0;
  1027. }
  1028. }
  1029. .product-remove {
  1030. text-align: center;
  1031. }
  1032. .actions {
  1033. .input-text {
  1034. width: 200px !important;
  1035. float: left;
  1036. margin-right: 0.25rem;
  1037. border: 1px solid #ddd;
  1038. padding-top: 1.55rem;
  1039. padding-bottom: 1.59rem;
  1040. }
  1041. .button {
  1042. background: #f9f9f9;
  1043. border: 1px solid #555;
  1044. color: #555;
  1045. }
  1046. button[name="update_cart"] {
  1047. background: #fff;
  1048. color: #000;
  1049. }
  1050. }
  1051. .quantity {
  1052. input {
  1053. width: 8rem;
  1054. border: 1px solid #eee;
  1055. }
  1056. }
  1057. table {
  1058. border: 0;
  1059. th,
  1060. tbody,
  1061. td {
  1062. border: 0;
  1063. }
  1064. td.product-thumbnail {
  1065. padding: 1.4rem;
  1066. width: 10%;
  1067. }
  1068. td.product-name {
  1069. padding-left: 1.5vw;
  1070. }
  1071. tbody {
  1072. tr {
  1073. border-top: 1px solid #eee;
  1074. }
  1075. }
  1076. input.qty {
  1077. display: inline-block;
  1078. }
  1079. }
  1080. .actions {
  1081. button {
  1082. padding-top: 1.55rem;
  1083. padding-bottom: 1.59rem;
  1084. font-size: 1.6rem;
  1085. }
  1086. }
  1087. }
  1088. .cart_totals {
  1089. th,
  1090. td {
  1091. vertical-align: top;
  1092. }
  1093. th {
  1094. padding-right: 1rem;
  1095. }
  1096. .woocommerce-shipping-destination {
  1097. margin-bottom: 1.5rem;
  1098. font-family: $headings;
  1099. }
  1100. table {
  1101. border: 0;
  1102. tbody,
  1103. th,
  1104. tr,
  1105. td {
  1106. border: 0;
  1107. padding: 1rem;
  1108. }
  1109. th {
  1110. width: 33%;
  1111. }
  1112. }
  1113. .checkout-button {
  1114. width: 100%;
  1115. }
  1116. input[type="radio"].shipping_method {
  1117. display: none;
  1118. & + label {
  1119. &::before {
  1120. content: "";
  1121. display: inline-block;
  1122. width: 14px;
  1123. height: 14px;
  1124. border: 2px solid #fff;
  1125. box-shadow: 0 0 0 2px #6d6d6d;
  1126. background: #fff;
  1127. margin-left: 4px;
  1128. margin-right: 1.2rem;
  1129. border-radius: 100%;
  1130. transform: translateY(2px);
  1131. }
  1132. }
  1133. &:checked + label {
  1134. &::before {
  1135. background: #555;
  1136. }
  1137. }
  1138. }
  1139. }
  1140. .shipping-calculator-button {
  1141. margin-top: 0.5rem;
  1142. display: inline-block;
  1143. }
  1144. .shipping-calculator-form {
  1145. margin: 1rem 0 0 0;
  1146. }
  1147. #shipping_method {
  1148. list-style: none;
  1149. margin: 0;
  1150. padding: 0 0 1.5rem;
  1151. font-family: $headings;
  1152. li {
  1153. margin-bottom: 0.5rem;
  1154. margin-left: 0;
  1155. input {
  1156. float: left;
  1157. margin-top: 0.5rem;
  1158. margin-right: 0.6rem;
  1159. }
  1160. label {
  1161. line-height: 2.5rem;
  1162. }
  1163. }
  1164. }
  1165. .checkout-button {
  1166. display: block;
  1167. padding: 1rem 2rem;
  1168. border: 2px solid #000;
  1169. text-align: center;
  1170. font-weight: 800;
  1171. &:hover {
  1172. border-color: #999;
  1173. }
  1174. &::after {
  1175. content: "→";
  1176. margin-left: 0.5rem;
  1177. }
  1178. }
  1179. .woocommerce-cart {
  1180. .post-inner {
  1181. padding-top: 0;
  1182. }
  1183. #site-content {
  1184. .entry-header {
  1185. padding: 3vw 0 1.5vw;
  1186. }
  1187. .woocommerce {
  1188. max-width: 1600px;
  1189. padding: 0 5vw;
  1190. margin: 0 auto;
  1191. }
  1192. }
  1193. .select2-container .select2-selection--single {
  1194. height: 48px;
  1195. }
  1196. .select2-container .select2-selection--single .select2-selection__rendered {
  1197. line-height: 48px;
  1198. font-family: $headings;
  1199. font-size: 1.6rem;
  1200. color: #000;
  1201. padding-left: 1.8rem;
  1202. }
  1203. .select2-container--default .select2-selection--single .select2-selection__arrow {
  1204. height: 46px;
  1205. }
  1206. .select2-container--focus .select2-selection {
  1207. border-color: #000;
  1208. }
  1209. .select2-results__option {
  1210. margin-left: 0;
  1211. }
  1212. .select2-container {
  1213. .select2-search__field {
  1214. height: 4rem;
  1215. background: #eee;
  1216. }
  1217. }
  1218. p.form-row {
  1219. input {
  1220. border: 1px solid #ddd;
  1221. }
  1222. }
  1223. }
  1224. /**
  1225. * Checkout
  1226. */
  1227. #ship-to-different-address {
  1228. font-size: 1em;
  1229. display: inline-block;
  1230. margin: 1.42em 0;
  1231. label {
  1232. font-weight: 400;
  1233. cursor: pointer;
  1234. span {
  1235. position: relative;
  1236. display: block;
  1237. text-align: right;
  1238. padding-right: 45px;
  1239. &::before {
  1240. content: "";
  1241. display: block;
  1242. height: 16px;
  1243. width: 30px;
  1244. border: 2px solid #bbb;
  1245. background: #bbb;
  1246. border-radius: 13rem;
  1247. box-sizing: content-box;
  1248. transition: all ease-in-out 0.3s;
  1249. position: absolute;
  1250. top: 0;
  1251. right: 0;
  1252. }
  1253. &::after {
  1254. content: "";
  1255. display: block;
  1256. width: 14px;
  1257. height: 14px;
  1258. background: #fff;
  1259. position: absolute;
  1260. top: 3px;
  1261. right: 17px;
  1262. border-radius: 13rem;
  1263. transition: all ease-in-out 0.3s;
  1264. }
  1265. }
  1266. input[type="checkbox"] {
  1267. display: none;
  1268. }
  1269. input[type="checkbox"]:checked + span::after {
  1270. right: 3px;
  1271. }
  1272. input[type="checkbox"]:checked + span::before {
  1273. border-color: #000;
  1274. background: #000;
  1275. }
  1276. }
  1277. }
  1278. .woocommerce-no-js {
  1279. form.woocommerce-form-login,
  1280. form.woocommerce-form-coupon {
  1281. display: block !important;
  1282. }
  1283. .woocommerce-form-login-toggle,
  1284. .woocommerce-form-coupon-toggle,
  1285. .showcoupon {
  1286. display: none !important;
  1287. }
  1288. }
  1289. .woocommerce-terms-and-conditions {
  1290. border: 1px solid rgba(0, 0, 0, 0.2);
  1291. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  1292. background: rgba(0, 0, 0, 0.05);
  1293. }
  1294. .woocommerce-terms-and-conditions-link {
  1295. display: inline-block;
  1296. &::after {
  1297. content: "";
  1298. display: inline-block;
  1299. border-style: solid;
  1300. margin-bottom: 2px;
  1301. margin-left: 0.25rem;
  1302. border-width: 6px 6px 0 6px;
  1303. border-color: $body-color transparent transparent transparent;
  1304. }
  1305. &.woocommerce-terms-and-conditions-link--open::after {
  1306. border-width: 0 6px 6px 6px;
  1307. border-color: transparent transparent $body-color transparent;
  1308. }
  1309. }
  1310. .woocommerce-checkout {
  1311. ul.woocommerce-error {
  1312. flex-direction: column;
  1313. align-items: flex-start;
  1314. li {
  1315. font-family: $headings;
  1316. margin: 0.5rem 0 0.5rem;
  1317. }
  1318. }
  1319. .post-inner {
  1320. padding-top: 0;
  1321. }
  1322. .woocommerce-billing-fields {
  1323. h3 {
  1324. margin-top: 4rem;
  1325. }
  1326. }
  1327. form[name="checkout"] {
  1328. display: table;
  1329. }
  1330. .blockUI.blockOverlay {
  1331. position: relative;
  1332. @include loader();
  1333. }
  1334. form {
  1335. .col2-set {
  1336. width: 50%;
  1337. float: left;
  1338. padding-right: 1.5vw;
  1339. .col-1,
  1340. .col-2 {
  1341. float: none;
  1342. width: 100%;
  1343. }
  1344. input {
  1345. border: 1px solid #ddd;
  1346. }
  1347. label {
  1348. font-family: $headings;
  1349. letter-spacing: normal;
  1350. }
  1351. p {
  1352. margin-bottom: 1.15em;
  1353. }
  1354. }
  1355. #order_review_heading {
  1356. margin-top: 4rem;
  1357. }
  1358. #order_review_heading,
  1359. #order_review {
  1360. width: 50%;
  1361. padding-left: 1.5vw;
  1362. float: right;
  1363. clear: right;
  1364. .woocommerce-checkout-review-order-table {
  1365. margin-top: 2.85rem;
  1366. border: 0;
  1367. th,
  1368. td {
  1369. border: 0;
  1370. }
  1371. thead {
  1372. display: none;
  1373. }
  1374. tbody::after {
  1375. content: "";
  1376. display: block;
  1377. height: 2rem;
  1378. }
  1379. .woocommerce-Price-amount {
  1380. font-weight: bold;
  1381. }
  1382. .cart-subtotal,
  1383. .order-total {
  1384. border-top: 1px solid #ddd;
  1385. }
  1386. }
  1387. }
  1388. .form-row.woocommerce-invalid {
  1389. input.input-text {
  1390. border: 2px solid $highlights-color;
  1391. }
  1392. }
  1393. }
  1394. .woocommerce-input-wrapper {
  1395. .description {
  1396. background: #4169e1;
  1397. color: #fff;
  1398. border-radius: 3px;
  1399. padding: 1rem;
  1400. margin: 0.5rem 0 0;
  1401. clear: both;
  1402. display: none;
  1403. position: relative;
  1404. a {
  1405. color: #fff;
  1406. text-decoration: underline;
  1407. border: 0;
  1408. box-shadow: none;
  1409. }
  1410. &::before {
  1411. left: 50%;
  1412. top: 0;
  1413. margin-top: -4px;
  1414. transform: translateX(-50%) rotate(180deg);
  1415. content: "";
  1416. position: absolute;
  1417. border-width: 4px 6px 0 6px;
  1418. border-style: solid;
  1419. border-color: #4169e1 transparent transparent transparent;
  1420. z-index: 100;
  1421. display: block;
  1422. }
  1423. }
  1424. }
  1425. .woocommerce-form-login {
  1426. p.form-row.form-row-first,
  1427. p.form-row.form-row-last {
  1428. float: none;
  1429. }
  1430. }
  1431. input#coupon_code {
  1432. padding-top: 1.55rem;
  1433. padding-bottom: 1.59rem;
  1434. border: 1px solid #ddd;
  1435. }
  1436. button[name="apply_coupon"] {
  1437. padding-top: 1.55rem;
  1438. padding-bottom: 1.8rem;
  1439. font-size: 1.6rem;
  1440. }
  1441. .select2-choice,
  1442. .select2-choice:hover {
  1443. box-shadow: none !important;
  1444. }
  1445. .select2-choice {
  1446. padding: 0.7rem 0 0.7rem 0.7rem;
  1447. }
  1448. .select2-container .select2-selection--single {
  1449. height: 48px;
  1450. }
  1451. .select2-container .select2-selection--single .select2-selection__rendered {
  1452. line-height: 48px;
  1453. font-family: $headings;
  1454. font-size: 1.6rem;
  1455. color: #000;
  1456. padding-left: 1.8rem;
  1457. }
  1458. .select2-container--default .select2-selection--single .select2-selection__arrow {
  1459. height: 46px;
  1460. }
  1461. .select2-container--focus .select2-selection {
  1462. border-color: #000;
  1463. }
  1464. .select2-results__option {
  1465. margin-left: 0;
  1466. }
  1467. .select2-container {
  1468. .select2-search__field {
  1469. height: 4rem;
  1470. background: #eee;
  1471. }
  1472. }
  1473. }
  1474. .woocommerce-checkout-review-order-table {
  1475. input[type="radio"].shipping_method {
  1476. display: none;
  1477. & + label {
  1478. &::before {
  1479. content: "";
  1480. display: inline-block;
  1481. width: 14px;
  1482. height: 14px;
  1483. border: 2px solid #fff;
  1484. box-shadow: 0 0 0 2px #6d6d6d;
  1485. background: #fff;
  1486. margin-left: 4px;
  1487. margin-right: 1.2rem;
  1488. border-radius: 100%;
  1489. transform: translateY(2px);
  1490. }
  1491. }
  1492. &:checked + label {
  1493. &::before {
  1494. background: #555;
  1495. }
  1496. }
  1497. }
  1498. td {
  1499. padding: 1rem 0.5em;
  1500. }
  1501. dl.variation {
  1502. margin: 0;
  1503. p {
  1504. margin: 0;
  1505. }
  1506. dt,
  1507. dd {
  1508. font-family: $headings;
  1509. p {
  1510. padding-top: 1px;
  1511. font-family: $headings;
  1512. }
  1513. }
  1514. }
  1515. }
  1516. .woocommerce-order-received {
  1517. .woocommerce-order {
  1518. p,
  1519. li {
  1520. font-family: $headings;
  1521. }
  1522. }
  1523. table {
  1524. border: 0;
  1525. td,
  1526. th,
  1527. tr {
  1528. border: 0;
  1529. }
  1530. tr {
  1531. height: 5rem;
  1532. }
  1533. tfoot {
  1534. border-top: 1px solid #ddd;
  1535. /* Targeting total */
  1536. tr:last-of-type {
  1537. border-top: 1px solid #ddd;
  1538. .woocommerce-Price-amount {
  1539. font-weight: 700;
  1540. }
  1541. }
  1542. }
  1543. }
  1544. }
  1545. .woocommerce-checkout-review-order {
  1546. ul {
  1547. margin: 2rem 0 3rem;
  1548. padding-left: 0;
  1549. }
  1550. #place_order {
  1551. width: 100%;
  1552. }
  1553. }
  1554. .wc_payment_method {
  1555. list-style: none;
  1556. .payment_box {
  1557. padding: 1rem;
  1558. background: #eee;
  1559. ul,
  1560. ol {
  1561. &:last-of-type {
  1562. margin-bottom: 0;
  1563. }
  1564. }
  1565. fieldset {
  1566. padding: 1.5rem;
  1567. padding-bottom: 0;
  1568. border: 0;
  1569. background: #f6f6f6;
  1570. }
  1571. li {
  1572. list-style: none;
  1573. }
  1574. p {
  1575. &:first-child {
  1576. margin-top: 0;
  1577. }
  1578. &:last-child {
  1579. margin-bottom: 0;
  1580. }
  1581. }
  1582. }
  1583. > label:first-of-type {
  1584. display: block;
  1585. margin: 1rem 0;
  1586. img {
  1587. max-height: 24px;
  1588. max-width: 200px;
  1589. float: right;
  1590. }
  1591. }
  1592. label {
  1593. cursor: pointer;
  1594. }
  1595. input.input-radio[name="payment_method"] {
  1596. display: none;
  1597. & + label {
  1598. font-family: $headings;
  1599. &::before {
  1600. content: "";
  1601. display: inline-block;
  1602. width: 14px;
  1603. height: 14px;
  1604. border: 2px solid #fff;
  1605. box-shadow: 0 0 0 2px #6d6d6d;
  1606. background: #fff;
  1607. margin-left: 4px;
  1608. margin-right: 1.2rem;
  1609. border-radius: 100%;
  1610. transform: translateY(2px);
  1611. }
  1612. }
  1613. &:checked + label {
  1614. &::before {
  1615. background: #555;
  1616. }
  1617. }
  1618. }
  1619. }
  1620. .wc_payment_methods {
  1621. .payment_box {
  1622. p {
  1623. font-family: $headings;
  1624. font-size: 1.6rem;
  1625. }
  1626. }
  1627. }
  1628. .woocommerce-terms-and-conditions-wrapper {
  1629. margin-bottom: 5rem;
  1630. .woocommerce-privacy-policy-text {
  1631. p {
  1632. font-family: $headings;
  1633. font-size: 1.6rem;
  1634. }
  1635. }
  1636. }
  1637. .woocommerce-order-overview {
  1638. margin-bottom: 2rem;
  1639. }
  1640. .woocommerce-table--order-details {
  1641. margin-bottom: 2rem;
  1642. }
  1643. /**
  1644. * Layout stuff
  1645. */
  1646. .woocommerce {
  1647. section {
  1648. padding-top: 2rem;
  1649. padding-bottom: 0;
  1650. }
  1651. .content-area {
  1652. .site-main {
  1653. margin: 0 5vw;
  1654. }
  1655. }
  1656. /* Shop layout */
  1657. ul.products {
  1658. display: flex;
  1659. align-items: stretch;
  1660. flex-direction: row;
  1661. flex-wrap: wrap;
  1662. li.product {
  1663. display: flex;
  1664. flex-direction: column;
  1665. justify-content: space-between;
  1666. align-items: flex-start;
  1667. margin-bottom: 5em;
  1668. }
  1669. li.product-category {
  1670. a {
  1671. text-align: center;
  1672. h2.woocommerce-loop-category__title {
  1673. font-family: $headings;
  1674. font-size: 3rem;
  1675. }
  1676. }
  1677. }
  1678. }
  1679. }
  1680. @media only screen and (max-width: 600px) {
  1681. .woocommerce {
  1682. .woocommerce-ordering {
  1683. float: left;
  1684. clear: both;
  1685. }
  1686. }
  1687. }
  1688. @media only screen and (max-width: 667px) {
  1689. .woocommerce,
  1690. .woocommerce-page {
  1691. ul.products[class*=columns-] {
  1692. li.product {
  1693. width: 100%;
  1694. }
  1695. }
  1696. }
  1697. }
  1698. @media only screen and (min-width: 668px) and (max-width: 768px) {
  1699. .woocommerce,
  1700. .woocommerce-page {
  1701. ul.products[class*=columns-] {
  1702. li.product {
  1703. width: 50%;
  1704. }
  1705. li.product:nth-of-type(2n+1) {
  1706. padding: 0 2vw 3em 0;
  1707. }
  1708. li.product:nth-of-type(2n) {
  1709. padding: 0 0 3em 2vw;
  1710. }
  1711. }
  1712. }
  1713. }
  1714. @media only screen and (max-width: 768px) {
  1715. #site-content {
  1716. .woocommerce {
  1717. .woocommerce-cart-form {
  1718. .actions {
  1719. .coupon {
  1720. margin-bottom: 2rem;
  1721. button {
  1722. width: 100%;
  1723. }
  1724. }
  1725. }
  1726. #coupon_code {
  1727. width: 100% !important;
  1728. }
  1729. }
  1730. }
  1731. #shipping_method {
  1732. li {
  1733. display: flex;
  1734. justify-content: flex-end;
  1735. }
  1736. }
  1737. }
  1738. .woocommerce,
  1739. .woocommerce-page {
  1740. table.shop_table_responsive {
  1741. tr {
  1742. margin: 0 0 1.5rem;
  1743. &:first-child {
  1744. border-top: 1px solid;
  1745. }
  1746. &:last-child {
  1747. margin-bottom: 0;
  1748. }
  1749. &:nth-child(2n) {
  1750. td {
  1751. background: #fff;
  1752. }
  1753. }
  1754. td {
  1755. border-bottom-width: 0;
  1756. &:last-child {
  1757. border-bottom-width: 1px;
  1758. }
  1759. }
  1760. td.product-quantity::before {
  1761. padding-top: 0.9rem;
  1762. }
  1763. .product-remove {
  1764. float: right;
  1765. }
  1766. .product-thumbnail {
  1767. display: block;
  1768. img {
  1769. width: 70px;
  1770. }
  1771. &::before {
  1772. content: "";
  1773. }
  1774. }
  1775. }
  1776. }
  1777. .woocommerce-breadcrumb {
  1778. margin-bottom: 4rem;
  1779. font-size: 0.8em;
  1780. font-family: $headings;
  1781. }
  1782. .related.products {
  1783. ul.products {
  1784. display: flex;
  1785. flex-direction: column;
  1786. align-items: flex-start;
  1787. li.product {
  1788. margin-bottom: 5em;
  1789. }
  1790. }
  1791. }
  1792. .woocommerce-products-header__title.page-title {
  1793. margin: 3rem auto 4rem;
  1794. }
  1795. .woocommerce-result-count,
  1796. .woocommerce-ordering {
  1797. font-size: 0.8em;
  1798. }
  1799. .woocommerce-ordering {
  1800. margin-bottom: 3rem;
  1801. }
  1802. }
  1803. .woocommerce-cart-form {
  1804. table {
  1805. td.product-name {
  1806. padding-left: 0.5em;
  1807. }
  1808. input.qty {
  1809. padding: 1rem 1.5rem;
  1810. }
  1811. }
  1812. }
  1813. .woocommerce-checkout {
  1814. form {
  1815. .col2-set {
  1816. width: 100%;
  1817. float: none;
  1818. padding-right: 0;
  1819. .col-1,
  1820. .col-2 {
  1821. float: none;
  1822. width: 100%;
  1823. }
  1824. }
  1825. #order_review_heading {
  1826. margin-top: 4rem;
  1827. }
  1828. #order_review_heading,
  1829. #order_review {
  1830. width: 100%;
  1831. padding-left: 0;
  1832. float: none;
  1833. }
  1834. table {
  1835. tbody {
  1836. td.product-total {
  1837. text-align: end;
  1838. }
  1839. }
  1840. tfoot {
  1841. .cart-subtotal,
  1842. .order-total {
  1843. td {
  1844. text-align: end;
  1845. }
  1846. }
  1847. }
  1848. }
  1849. }
  1850. }
  1851. .logged-in.woocommerce-account {
  1852. #site-content {
  1853. .woocommerce {
  1854. flex-direction: column;
  1855. }
  1856. .woocommerce-MyAccount-navigation,
  1857. .woocommerce-MyAccount-content {
  1858. width: 100%;
  1859. }
  1860. table.account-orders-table {
  1861. .button {
  1862. padding-left: 0.5em;
  1863. padding-right: 0.5em;
  1864. width: 100%;
  1865. margin: 2rem 0;
  1866. }
  1867. }
  1868. }
  1869. table.account-orders-table {
  1870. td {
  1871. padding-bottom: 1.5rem;
  1872. }
  1873. }
  1874. }
  1875. }
  1876. @media only screen and (min-width: 768px) {
  1877. /**
  1878. * Tables
  1879. */
  1880. .woocommerce,
  1881. .woocommerce-page {
  1882. table.shop_table {
  1883. tbody {
  1884. tr {
  1885. font-size: 0.88889em;
  1886. }
  1887. }
  1888. }
  1889. .onsale {
  1890. font-size: 1.5rem;
  1891. padding: 1rem;
  1892. }
  1893. }
  1894. /**
  1895. * Shop page
  1896. */
  1897. .woocommerce-products-header__title.page-title {
  1898. font-size: 8.4rem;
  1899. font-weight: 800;
  1900. }
  1901. .woocommerce-pagination {
  1902. span.page-numbers,
  1903. a.page-numbers,
  1904. .next.page-numbers,
  1905. .prev.page-numbers {
  1906. padding: 1rem;
  1907. }
  1908. }
  1909. /**
  1910. * Account section
  1911. */
  1912. .woocommerce-account {
  1913. .woocommerce-MyAccount-navigation {
  1914. float: none;
  1915. width: 20%;
  1916. margin-bottom: 1.5rem;
  1917. margin-right: 3rem;
  1918. li {
  1919. margin: 0 1rem 3rem 0;
  1920. padding: 0;
  1921. border-bottom: 0;
  1922. &:last-child {
  1923. margin-right: 0;
  1924. }
  1925. }
  1926. }
  1927. .woocommerce-MyAccount-content {
  1928. float: none;
  1929. width: 75%;
  1930. }
  1931. table.account-orders-table {
  1932. margin-top: 0;
  1933. border: 0;
  1934. tr,
  1935. td,
  1936. th {
  1937. border: 0;
  1938. padding: 0;
  1939. }
  1940. th,
  1941. td,
  1942. td.woocommerce-orders-table__cell-order-actions {
  1943. padding-right: 0.5rem;
  1944. padding-left: 0.5rem;
  1945. }
  1946. thead {
  1947. border-bottom: 1px solid #ddd;
  1948. }
  1949. .button {
  1950. padding-left: 0.5em;
  1951. padding-right: 0.5em;
  1952. width: 100%;
  1953. margin: 1.5rem 0;
  1954. }
  1955. }
  1956. .woocommerce-ResetPassword {
  1957. .woocommerce-form-row--first {
  1958. float: none;
  1959. }
  1960. }
  1961. }
  1962. /**
  1963. * Layout stuff
  1964. */
  1965. .woocommerce {
  1966. .content-area {
  1967. margin: 0 auto;
  1968. padding: 2vw 6vw;
  1969. .site-main {
  1970. margin: 0;
  1971. }
  1972. }
  1973. }
  1974. .single-product {
  1975. .entry {
  1976. .entry-content,
  1977. .entry-summary {
  1978. max-width: none;
  1979. margin: 0 0 3rem;
  1980. padding: 0;
  1981. > * {
  1982. max-width: none;
  1983. }
  1984. }
  1985. }
  1986. }
  1987. .woocommerce-breadcrumb {
  1988. margin-bottom: 5rem;
  1989. font-size: 0.88889em;
  1990. font-family: $headings;
  1991. }
  1992. .woocommerce-product-gallery {
  1993. margin-bottom: 8rem;
  1994. }
  1995. .woocommerce-checkout {
  1996. #site-content {
  1997. .woocommerce {
  1998. max-width: 1600px;
  1999. padding: 0 6vw;
  2000. margin: 0 auto;
  2001. }
  2002. }
  2003. }
  2004. }
  2005. @media only screen and (min-width: 1168px) {
  2006. .woocommerce {
  2007. .content-area {
  2008. max-width: 1600px;
  2009. padding: 4vw 6vw;
  2010. margin: 0 auto;
  2011. .site-main {
  2012. }
  2013. }
  2014. .onsale {
  2015. font-size: 1.7rem;
  2016. padding: 1.5rem;
  2017. }
  2018. }
  2019. .woocommerce-breadcrumb {
  2020. margin-bottom: 5rem;
  2021. font-size: 0.88889em;
  2022. font-family: $headings;
  2023. }
  2024. .woocommerce-product-gallery {
  2025. margin-bottom: 8rem;
  2026. }
  2027. .woocommerce-account {
  2028. table.account-orders-table {
  2029. th,
  2030. td,
  2031. td.woocommerce-orders-table__cell-order-actions {
  2032. padding-right: 1.5rem;
  2033. padding-left: 1.5rem;
  2034. }
  2035. }
  2036. }
  2037. }