Нет описания

twenty-nineteen.scss 19KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376
  1. @import 'mixins';
  2. /**
  3. * Sass variables
  4. */
  5. $headings: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  6. $body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
  7. $body-color: #111;
  8. $highlights-color: #0073aa;
  9. /**
  10. * Fonts
  11. */
  12. @font-face {
  13. font-family: 'star';
  14. src: url('../fonts/star.eot');
  15. src: url('../fonts/star.eot?#iefix') format('embedded-opentype'),
  16. url('../fonts/star.woff') format('woff'),
  17. url('../fonts/star.ttf') format('truetype'),
  18. url('../fonts/star.svg#star') format('svg');
  19. font-weight: normal;
  20. font-style: normal;
  21. }
  22. @font-face {
  23. font-family: 'WooCommerce';
  24. src: url('../fonts/WooCommerce.eot');
  25. src: url('../fonts/WooCommerce.eot?#iefix') format('embedded-opentype'),
  26. url('../fonts/WooCommerce.woff') format('woff'),
  27. url('../fonts/WooCommerce.ttf') format('truetype'),
  28. url('../fonts/WooCommerce.svg#WooCommerce') format('svg');
  29. font-weight: normal;
  30. font-style: normal;
  31. }
  32. /**
  33. * Global elements
  34. */
  35. a.button {
  36. display: inline-block;
  37. text-align: center;
  38. box-sizing: border-box;
  39. word-break: break-all;
  40. color: #fff;
  41. text-decoration: none !important;
  42. &:hover,
  43. &:visited {
  44. color: #fff;
  45. }
  46. }
  47. .woocommerce {
  48. form .form-row {
  49. .required {
  50. color: firebrick;
  51. text-decoration: none;
  52. visibility: hidden; // Only show optional by default.
  53. &[title] {
  54. border: 0 !important;
  55. }
  56. }
  57. .optional {
  58. visibility: visible;
  59. }
  60. }
  61. }
  62. .woocommerce-breadcrumb {
  63. margin-bottom: 3rem;
  64. font-size: 0.88889em;
  65. font-family: $headings;
  66. }
  67. .woocommerce-pagination {
  68. font-family: $headings;
  69. font-size: 0.88889em;
  70. ul.page-numbers {
  71. margin: 0;
  72. padding: 0;
  73. display: block;
  74. font-weight: 700;
  75. letter-spacing: -0.02em;
  76. line-height: 1.2;
  77. }
  78. span.page-numbers,
  79. a.page-numbers,
  80. .next.page-numbers,
  81. .prev.page-numbers {
  82. padding: 0 calc(.5 * 1rem);
  83. display: inline-block;
  84. }
  85. }
  86. .onsale {
  87. position: absolute;
  88. top: 0;
  89. left: 0;
  90. display: inline-block;
  91. background: $highlights-color;
  92. color: #fff;
  93. display: inline-block;
  94. font-family: $headings;
  95. font-size: 0.71111em;
  96. font-weight: 700;
  97. letter-spacing: -0.02em;
  98. line-height: 1.2;
  99. padding: 0.5rem;
  100. position: absolute;
  101. text-transform: uppercase;
  102. top: 0;
  103. z-index: 1;
  104. }
  105. .price {
  106. font-family: $headings;
  107. del {
  108. opacity: 0.5;
  109. display: inline-block;
  110. }
  111. ins {
  112. display: inline-block;
  113. }
  114. }
  115. .woocommerce-message,
  116. .woocommerce-error,
  117. .woocommerce-info {
  118. margin-bottom: 1.5rem;
  119. padding: 1rem;
  120. background: #eee;
  121. font-size: 0.88889em;
  122. font-family: $headings;
  123. list-style: none;
  124. overflow: hidden;
  125. }
  126. .woocommerce-message {
  127. background: #eee;
  128. color: $body-color;
  129. }
  130. .woocommerce-error,
  131. .woocommerce-info {
  132. color: #fff;
  133. a {
  134. color: #fff;
  135. &:hover {
  136. color: #fff;
  137. }
  138. &.button {
  139. background: #111;
  140. }
  141. }
  142. }
  143. .woocommerce-error {
  144. background: firebrick;
  145. }
  146. .woocommerce-info {
  147. background: $highlights-color;
  148. }
  149. .woocommerce-store-notice {
  150. background: $highlights-color;
  151. color: #fff;
  152. padding: 1rem;
  153. position: absolute;
  154. top: 0;
  155. left: 0;
  156. width: 100%;
  157. z-index: 999;
  158. }
  159. .admin-bar .woocommerce-store-notice {
  160. top: 32px;
  161. }
  162. .woocommerce-store-notice__dismiss-link {
  163. float: right;
  164. color: #fff;
  165. &:hover {
  166. text-decoration: underline;
  167. color: #fff;
  168. }
  169. }
  170. /**
  171. * Tables
  172. */
  173. .woocommerce,
  174. .woocommerce-page {
  175. table.shop_table {
  176. td, th {
  177. word-break: normal;
  178. }
  179. }
  180. }
  181. /**
  182. * Shop page
  183. */
  184. .woocommerce-products-header__title.page-title {
  185. font-size: 1.6875em;
  186. font-weight: 700;
  187. font-family: $headings;
  188. }
  189. .woocommerce-result-count {
  190. margin: 0;
  191. padding: 0.75rem 0;
  192. }
  193. /**
  194. * Products
  195. */
  196. ul.products {
  197. margin: 0;
  198. padding: 0;
  199. li.product {
  200. list-style: none;
  201. .woocommerce-loop-product__link {
  202. display: block;
  203. }
  204. .woocommerce-loop-product__title {
  205. margin: 0.8rem 0;
  206. font-size: 0.88889em;
  207. &:before {
  208. content: none;
  209. }
  210. }
  211. .woocommerce-loop-product__title,
  212. .price,
  213. .star-rating {
  214. color: $body-color;
  215. }
  216. .star-rating {
  217. margin-bottom: 0.8rem;
  218. }
  219. .price {
  220. margin-bottom: 1.3rem;
  221. }
  222. .price,
  223. .star-rating {
  224. display: block;
  225. font-size: 0.88889em;
  226. }
  227. .woocommerce-placeholder {
  228. border: 1px solid #F2F2F2;
  229. }
  230. .button {
  231. vertical-align: middle;
  232. &.loading {
  233. opacity: 0.5;
  234. }
  235. }
  236. .added_to_cart {
  237. margin-left: 0.5rem;
  238. font-size: 0.88889em;
  239. font-family: $headings;
  240. }
  241. }
  242. }
  243. .star-rating {
  244. overflow: hidden;
  245. position: relative;
  246. height: 1em;
  247. line-height: 1;
  248. font-size: 1em;
  249. width: 5.4em;
  250. font-family: 'star';
  251. &::before {
  252. content: '\73\73\73\73\73';
  253. float: left;
  254. top: 0;
  255. left: 0;
  256. position: absolute;
  257. }
  258. span {
  259. overflow: hidden;
  260. float: left;
  261. top: 0;
  262. left: 0;
  263. position: absolute;
  264. padding-top: 1.5em;
  265. }
  266. span::before {
  267. content: '\53\53\53\53\53';
  268. top: 0;
  269. position: absolute;
  270. left: 0;
  271. }
  272. }
  273. a.remove {
  274. display: inline-block;
  275. width: 20px;
  276. height: 20px;
  277. line-height: 17px;
  278. font-size: 20px;
  279. font-weight: 700;
  280. text-align: center;
  281. border-radius: 100%;
  282. text-decoration: none !important;
  283. background: firebrick;
  284. color: #fff;
  285. &:hover {
  286. background: #000;
  287. color: #fff !important;
  288. }
  289. }
  290. dl.variation, .wc-item-meta {
  291. list-style: none outside;
  292. dt, .wc-item-meta-label {
  293. float: left;
  294. clear: both;
  295. margin-right: 0.25rem;
  296. list-style: none outside;
  297. }
  298. dd {
  299. margin: 0;
  300. }
  301. p,
  302. &:last-child {
  303. margin-bottom: 0;
  304. }
  305. }
  306. /**
  307. * Single product
  308. */
  309. .single-product {
  310. div.product {
  311. position: relative;
  312. }
  313. .single-featured-image-header {
  314. display: none;
  315. }
  316. .entry {
  317. .entry-title {
  318. margin-top: 0;
  319. &:before {
  320. margin-top: 0;
  321. }
  322. }
  323. }
  324. .summary {
  325. p.price {
  326. margin-bottom: 2rem;
  327. }
  328. }
  329. .woocommerce-product-rating {
  330. margin-bottom: 2rem;
  331. line-height: 1;
  332. .star-rating {
  333. float: left;
  334. margin-right: 0.25rem;
  335. }
  336. }
  337. form.cart {
  338. .quantity {
  339. float: left;
  340. margin-right: 0.5rem;
  341. }
  342. input {
  343. width: 5em;
  344. }
  345. }
  346. .woocommerce-variation-add-to-cart {
  347. .button {
  348. padding-top: 0.72rem;
  349. padding-bottom: 0.72rem;
  350. }
  351. .button.disabled {
  352. opacity: 0.2;
  353. }
  354. }
  355. }
  356. table.variations {
  357. label {
  358. margin: 0;
  359. }
  360. select {
  361. margin-right: 0.5rem;
  362. }
  363. }
  364. .woocommerce-product-gallery {
  365. position: relative;
  366. margin-bottom: 3rem;
  367. figure {
  368. margin: 0;
  369. padding: 0;
  370. }
  371. .woocommerce-product-gallery__wrapper {
  372. margin: 0;
  373. padding: 0;
  374. }
  375. .zoomImg {
  376. background-color: #fff;
  377. opacity: 0;
  378. }
  379. .woocommerce-product-gallery__image--placeholder {
  380. border: 1px solid #F2F2F2;
  381. }
  382. .woocommerce-product-gallery__image:nth-child(n+2) {
  383. width: 25%;
  384. display: inline-block;
  385. }
  386. .flex-control-thumbs {
  387. li {
  388. list-style: none;
  389. cursor: pointer;
  390. float: left;
  391. }
  392. img {
  393. opacity: 0.5;
  394. &:hover,
  395. &.flex-active {
  396. opacity: 1;
  397. }
  398. }
  399. }
  400. img {
  401. display: block;
  402. height: auto;
  403. }
  404. }
  405. .woocommerce-product-gallery--columns-3 {
  406. .flex-control-thumbs li {
  407. width: 33.3333%;
  408. }
  409. .flex-control-thumbs li:nth-child(3n+1) {
  410. clear: left;
  411. }
  412. }
  413. .woocommerce-product-gallery--columns-4 {
  414. .flex-control-thumbs li {
  415. width: 25%;
  416. }
  417. .flex-control-thumbs li:nth-child(4n+1) {
  418. clear: left;
  419. }
  420. }
  421. .woocommerce-product-gallery--columns-5 {
  422. .flex-control-thumbs li {
  423. width: 20%;
  424. }
  425. .flex-control-thumbs li:nth-child(5n+1) {
  426. clear: left;
  427. }
  428. }
  429. .woocommerce-product-gallery__trigger {
  430. position: absolute;
  431. top: 1rem;
  432. right: 1rem;
  433. z-index: 99;
  434. }
  435. .woocommerce-tabs {
  436. margin: 0 0 2rem;
  437. ul {
  438. margin: 0 0 1.5rem;
  439. padding: 0;
  440. font-family: $headings;
  441. li {
  442. margin-right: 1rem;
  443. a {
  444. color: $body-color;
  445. text-decoration: none;
  446. font-weight: 700;
  447. }
  448. &.active {
  449. a {
  450. color: $highlights-color;
  451. box-shadow: 0 2px 0 $highlights-color;
  452. }
  453. }
  454. }
  455. }
  456. .panel {
  457. > * {
  458. margin-top: 0 !important;
  459. }
  460. h1,
  461. h2 {
  462. &:before {
  463. content: none;
  464. }
  465. }
  466. h2:first-of-type {
  467. font-size: 1em;
  468. margin: 0 0 1rem;
  469. }
  470. }
  471. #comments {
  472. padding-top: 0;
  473. }
  474. .comment-reply-title {
  475. font-family: $headings;
  476. font-size: 1em;
  477. font-weight: bold;
  478. margin: 0 0 0.75rem;
  479. display: block;
  480. }
  481. #reviews {
  482. ol.commentlist {
  483. padding: 0;
  484. }
  485. li.review,
  486. li.comment {
  487. list-style: none;
  488. margin-right: 0;
  489. margin-bottom: 2.5rem;
  490. .avatar {
  491. max-height: 36px;
  492. width: auto;
  493. float: right;
  494. }
  495. p.meta {
  496. margin-bottom: 0.5em;
  497. }
  498. }
  499. p.stars {
  500. margin-top: 0;
  501. a {
  502. position: relative;
  503. height: 1em;
  504. width: 1em;
  505. text-indent: -999em;
  506. display: inline-block;
  507. text-decoration: none;
  508. box-shadow: none;
  509. &::before {
  510. display: block;
  511. position: absolute;
  512. top: 0;
  513. left: 0;
  514. width: 1em;
  515. height: 1em;
  516. line-height: 1;
  517. font-family: 'WooCommerce';
  518. content: '\e021';
  519. text-indent: 0;
  520. }
  521. &:hover {
  522. ~ a::before {
  523. content: '\e021';
  524. }
  525. }
  526. }
  527. &:hover {
  528. a {
  529. &::before {
  530. content: '\e020';
  531. }
  532. }
  533. }
  534. &.selected {
  535. a.active {
  536. &::before {
  537. content: '\e020';
  538. }
  539. ~ a::before {
  540. content: '\e021';
  541. }
  542. }
  543. a:not( .active ) {
  544. &::before {
  545. content: '\e020';
  546. }
  547. }
  548. }
  549. }
  550. }
  551. }
  552. /**
  553. * Widgets
  554. */
  555. .widget.woocommerce {
  556. ul {
  557. padding-left: 0;
  558. li {
  559. list-style: none;
  560. }
  561. }
  562. }
  563. .widget .product_list_widget,
  564. .site-footer .widget .product_list_widget {
  565. margin-bottom: 1.5rem;
  566. a {
  567. display: block;
  568. box-shadow: none;
  569. &:hover {
  570. box-shadow: none;
  571. }
  572. }
  573. li {
  574. padding: 0.5rem 0;
  575. a.remove {
  576. float: left;
  577. margin-top: 7px;
  578. line-height: 20px;
  579. color: #fff;
  580. margin-right: .5rem;
  581. }
  582. }
  583. img {
  584. display: none;
  585. }
  586. }
  587. .widget_shopping_cart {
  588. .buttons {
  589. a {
  590. display: inline-block;
  591. margin: 0 0.5rem 0 0;
  592. }
  593. }
  594. }
  595. .widget_layered_nav {
  596. .chosen {
  597. &:before {
  598. content: "×";
  599. display: inline-block;
  600. width: 16px;
  601. height: 16px;
  602. line-height: 16px;
  603. font-size: 16px;
  604. text-align: center;
  605. border-radius: 100%;
  606. border: 1px solid black;
  607. margin-right: 0.25rem;
  608. }
  609. }
  610. }
  611. .widget_price_filter {
  612. .price_slider {
  613. margin-bottom: 1rem;
  614. }
  615. .price_slider_amount {
  616. text-align: right;
  617. line-height: 2.4;
  618. font-size: 0.8751em;
  619. .button {
  620. float: left;
  621. padding: 0.4rem 1rem;
  622. }
  623. }
  624. .ui-slider {
  625. position: relative;
  626. text-align: left;
  627. margin-left: 0.5rem;
  628. margin-right: 0.5rem;
  629. }
  630. .ui-slider .ui-slider-handle {
  631. position: absolute;
  632. z-index: 2;
  633. width: 1em;
  634. height: 1em;
  635. background-color: #000;
  636. border-radius: 1em;
  637. cursor: ew-resize;
  638. outline: none;
  639. top: -0.3em;
  640. margin-left: -0.5em;
  641. }
  642. .ui-slider .ui-slider-range {
  643. position: absolute;
  644. z-index: 1;
  645. font-size: 0.7em;
  646. display: block;
  647. border: 0;
  648. border-radius: 1em;
  649. background-color: #000;
  650. }
  651. .price_slider_wrapper .ui-widget-content {
  652. border-radius: 1em;
  653. background-color: #666;
  654. border: 0;
  655. }
  656. .ui-slider-horizontal {
  657. height: 0.5em;
  658. }
  659. .ui-slider-horizontal .ui-slider-range {
  660. top: 0;
  661. height: 100%;
  662. }
  663. .ui-slider-horizontal .ui-slider-range-min {
  664. left: -1px;
  665. }
  666. .ui-slider-horizontal .ui-slider-range-max {
  667. right: -1px;
  668. }
  669. }
  670. .widget_rating_filter {
  671. li {
  672. text-align: right;
  673. .star-rating {
  674. float: left;
  675. margin-top: 0.3rem;
  676. }
  677. }
  678. }
  679. .widget_product_search {
  680. form {
  681. position: relative;
  682. }
  683. .search-field {
  684. padding-right: 100px;
  685. }
  686. input[type=submit] {
  687. position: absolute;
  688. top: 0.5rem;
  689. right: 0.5rem;
  690. padding-left: 1rem;
  691. padding-right: 1rem;
  692. }
  693. }
  694. /**
  695. * Account section
  696. */
  697. .woocommerce-account {
  698. .woocommerce-MyAccount-navigation {
  699. font-family: $headings;
  700. margin: 0 0 2rem;
  701. ul {
  702. margin: 0;
  703. padding: 0;
  704. }
  705. li {
  706. list-style: none;
  707. padding: 0.5rem 0;
  708. border-bottom: 1px solid #ccc;
  709. &:first-child {
  710. padding-top: 0;
  711. }
  712. a {
  713. box-shadow: none;
  714. text-decoration: none;
  715. font-weight: 600;
  716. &:hover {
  717. color: #005177;
  718. text-decoration: underline;
  719. }
  720. }
  721. &.is-active {
  722. a {
  723. text-decoration: underline;
  724. }
  725. }
  726. }
  727. }
  728. table.account-orders-table {
  729. .button {
  730. margin: 0 .35rem .35rem 0;
  731. }
  732. }
  733. }
  734. /**
  735. * Cart
  736. */
  737. .woocommerce-cart-form {
  738. img {
  739. max-width: 42px;
  740. height: auto;
  741. display: block;
  742. }
  743. dl.variation {
  744. margin-top: 0;
  745. p,
  746. &:last-child {
  747. margin-bottom: 0;
  748. }
  749. }
  750. .product-remove {
  751. text-align: center;
  752. }
  753. .actions {
  754. .input-text {
  755. width: 200px !important;
  756. float: left;
  757. margin-right: 0.25rem;
  758. }
  759. }
  760. .quantity {
  761. input {
  762. width: 4rem;
  763. }
  764. }
  765. }
  766. .cart_totals {
  767. th, td {
  768. vertical-align: top;
  769. }
  770. th {
  771. padding-right: 1rem;
  772. }
  773. .woocommerce-shipping-destination {
  774. margin-bottom: 0;
  775. }
  776. }
  777. .shipping-calculator-button {
  778. margin-top: 0.5rem;
  779. display: inline-block;
  780. }
  781. .shipping-calculator-form {
  782. margin: 1rem 0 0 0;
  783. }
  784. #shipping_method {
  785. list-style: none;
  786. margin: 0;
  787. padding: 0;
  788. li {
  789. margin-bottom: 0.5rem;
  790. input {
  791. float: left;
  792. margin-top: 0.17rem;
  793. }
  794. label {
  795. line-height: 1.5rem;
  796. }
  797. }
  798. }
  799. .checkout-button {
  800. display: block;
  801. padding: 1rem 2rem;
  802. border: 2px solid #000;
  803. text-align: center;
  804. font-weight: 800;
  805. &:hover {
  806. border-color: #999;
  807. }
  808. &:after {
  809. content: "→";
  810. margin-left: .5rem;
  811. }
  812. }
  813. /**
  814. * Checkout
  815. */
  816. #ship-to-different-address {
  817. font-size: 1em;
  818. display: inline-block;
  819. margin: 1.42em 0;
  820. label {
  821. font-weight: 300;
  822. cursor: pointer;
  823. span {
  824. position: relative;
  825. display: block;
  826. text-align: right;
  827. padding-right: 45px;
  828. &:before {
  829. content: "";
  830. display: block;
  831. height: 16px;
  832. width: 30px;
  833. border: 2px solid #bbb;
  834. background: #bbb;
  835. border-radius: 13rem;
  836. box-sizing: content-box;
  837. transition: all ease-in-out 0.3s;
  838. position: absolute;
  839. top: 4px;
  840. right: 0;
  841. }
  842. &:after {
  843. content: "";
  844. display: block;
  845. width: 14px;
  846. height: 14px;
  847. background: white;
  848. position: absolute;
  849. top: 7px;
  850. right: 17px;
  851. border-radius: 13rem;
  852. transition: all ease-in-out 0.3s;
  853. }
  854. }
  855. input[type=checkbox] {
  856. display: none;
  857. }
  858. input[type=checkbox]:checked + span:after {
  859. right: 3px;
  860. }
  861. input[type=checkbox]:checked + span:before {
  862. border-color: #000;
  863. background: #000;
  864. }
  865. }
  866. }
  867. .woocommerce-no-js {
  868. form.woocommerce-form-login,
  869. form.woocommerce-form-coupon {
  870. display: block !important;
  871. }
  872. .woocommerce-form-login-toggle,
  873. .woocommerce-form-coupon-toggle,
  874. .showcoupon {
  875. display: none !important;
  876. }
  877. }
  878. .woocommerce-terms-and-conditions {
  879. border: 1px solid rgba(0,0,0,.2);
  880. box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  881. background: rgba(0,0,0,.05);
  882. }
  883. .woocommerce-terms-and-conditions-link {
  884. display: inline-block;
  885. &:after {
  886. content: "";
  887. display: inline-block;
  888. border-style: solid;
  889. margin-bottom: 2px;
  890. margin-left: 0.25rem;
  891. border-width: 6px 6px 0 6px;
  892. border-color: $body-color transparent transparent transparent;
  893. }
  894. &.woocommerce-terms-and-conditions-link--open:after {
  895. border-width: 0 6px 6px 6px;
  896. border-color: transparent transparent $body-color transparent;
  897. }
  898. }
  899. .woocommerce-checkout {
  900. .woocommerce-input-wrapper {
  901. .description {
  902. background: royalblue;
  903. color: #fff;
  904. border-radius: 3px;
  905. padding: 1rem;
  906. margin: 0.5rem 0 0;
  907. clear: both;
  908. display: none;
  909. position: relative;
  910. a {
  911. color: #fff;
  912. text-decoration: underline;
  913. border: 0;
  914. box-shadow: none;
  915. }
  916. &:before {
  917. left: 50%;
  918. top: 0%;
  919. margin-top: -4px;
  920. transform: translatex(-50%) rotate(180deg);
  921. content: "";
  922. position: absolute;
  923. border-width: 4px 6px 0 6px;
  924. border-style: solid;
  925. border-color: royalblue transparent transparent transparent;
  926. z-index: 100;
  927. display: block;
  928. }
  929. }
  930. }
  931. .select2-choice,
  932. .select2-choice:hover {
  933. box-shadow: none !important;
  934. }
  935. .select2-choice {
  936. padding: 0.7rem 0 0.7rem 0.7rem;
  937. }
  938. .select2-container .select2-selection--single {
  939. height: 48px;
  940. }
  941. .select2-container .select2-selection--single .select2-selection__rendered {
  942. line-height: 48px;
  943. }
  944. .select2-container--default .select2-selection--single .select2-selection__arrow {
  945. height: 46px;
  946. }
  947. .select2-container--focus .select2-selection {
  948. border-color: black;
  949. }
  950. }
  951. .woocommerce-checkout-review-order-table {
  952. td {
  953. padding: 1rem 0.5rem;
  954. }
  955. dl.variation {
  956. margin: 0;
  957. p {
  958. margin: 0;
  959. }
  960. }
  961. }
  962. .woocommerce-checkout-review-order {
  963. ul {
  964. margin: 2rem 0 1rem;
  965. padding-left: 0;
  966. }
  967. }
  968. .wc_payment_method {
  969. list-style: none;
  970. .payment_box {
  971. padding: 1rem;
  972. background: #eee;
  973. ul,
  974. ol {
  975. &:last-of-type {
  976. margin-bottom: 0;
  977. }
  978. }
  979. fieldset {
  980. padding: 1.5rem;
  981. padding-bottom: 0;
  982. border: 0;
  983. background: #f6f6f6;
  984. }
  985. li {
  986. list-style: none;
  987. }
  988. p {
  989. &:first-child {
  990. margin-top: 0;
  991. }
  992. &:last-child {
  993. margin-bottom: 0;
  994. }
  995. }
  996. }
  997. > label:first-of-type {
  998. display: block;
  999. margin: 1rem 0;
  1000. img {
  1001. max-height: 24px;
  1002. max-width: 200px;
  1003. float: right;
  1004. }
  1005. }
  1006. label {
  1007. cursor: pointer;
  1008. }
  1009. input.input-radio[name=payment_method] {
  1010. display: none;
  1011. & + label {
  1012. &:before {
  1013. content: "";
  1014. display: inline-block;
  1015. width: 16px;
  1016. height: 16px;
  1017. border: 2px solid white;
  1018. box-shadow: 0 0 0 2px black;
  1019. background: white;
  1020. margin-left: 4px;
  1021. margin-right: 0.5rem;
  1022. border-radius: 100%;
  1023. transform: translateY(2px);
  1024. }
  1025. }
  1026. &:checked + label {
  1027. &:before {
  1028. background: black;
  1029. }
  1030. }
  1031. }
  1032. }
  1033. .woocommerce-order-overview {
  1034. margin-bottom: 2rem;
  1035. }
  1036. .woocommerce-table--order-details {
  1037. margin-bottom: 2rem;
  1038. }
  1039. /**
  1040. * Layout stuff
  1041. */
  1042. .woocommerce {
  1043. .content-area {
  1044. .site-main {
  1045. margin: calc(2 * 1rem) 1rem;
  1046. }
  1047. }
  1048. }
  1049. @media only screen and (max-width: 768px) {
  1050. .woocommerce,
  1051. .woocommerce-page {
  1052. table.shop_table_responsive {
  1053. tr {
  1054. margin: 0 0 1.5rem;
  1055. &:first-child {
  1056. border-top: 1px solid;
  1057. }
  1058. &:last-child {
  1059. margin-bottom: 0;
  1060. }
  1061. td {
  1062. border-bottom-width: 0;
  1063. &:last-child {
  1064. border-bottom-width: 1px;
  1065. }
  1066. }
  1067. }
  1068. }
  1069. }
  1070. }
  1071. @media only screen and (min-width: 768px) {
  1072. /**
  1073. * Tables
  1074. */
  1075. .woocommerce,
  1076. .woocommerce-page {
  1077. table.shop_table {
  1078. tbody {
  1079. tr {
  1080. font-size: 0.88889em;
  1081. }
  1082. }
  1083. }
  1084. }
  1085. /**
  1086. * Shop page
  1087. */
  1088. .woocommerce-products-header__title.page-title {
  1089. font-size: 2.25em;
  1090. }
  1091. .woocommerce-pagination {
  1092. span.page-numbers,
  1093. a.page-numbers,
  1094. .next.page-numbers,
  1095. .prev.page-numbers {
  1096. padding: 1rem;
  1097. }
  1098. }
  1099. /**
  1100. * Account section
  1101. */
  1102. .woocommerce-account {
  1103. .woocommerce-MyAccount-navigation {
  1104. float: none;
  1105. width: 100%;
  1106. margin-bottom: 1.5rem;
  1107. li {
  1108. display: inline-block;
  1109. margin: 0 1rem 0 0;
  1110. padding: 0;
  1111. border-bottom: 0;
  1112. &:last-child {
  1113. margin-right: 0;
  1114. }
  1115. }
  1116. }
  1117. .woocommerce-MyAccount-content {
  1118. float: none;
  1119. width: 100%;
  1120. }
  1121. }
  1122. /**
  1123. * Checkout
  1124. */
  1125. #ship-to-different-address {
  1126. display: block;
  1127. }
  1128. /**
  1129. * Layout stuff
  1130. */
  1131. .woocommerce {
  1132. .content-area {
  1133. margin: 0 calc(10% + 60px);
  1134. .site-main {
  1135. margin: 0;
  1136. max-width: calc(8 * (100vw / 12) - 28px);
  1137. }
  1138. }
  1139. }
  1140. .single-product {
  1141. .entry {
  1142. .entry-content,
  1143. .entry-summary {
  1144. max-width: none;
  1145. margin: 0 0 3rem;
  1146. padding: 0;
  1147. > * {
  1148. max-width: none;
  1149. }
  1150. }
  1151. }
  1152. }
  1153. }
  1154. @media only screen and (min-width: 1168px) {
  1155. .woocommerce {
  1156. .content-area {
  1157. .site-main {
  1158. max-width: calc(6 * (100vw / 12) - 28px);
  1159. }
  1160. }
  1161. }
  1162. }