wc-setup.scss 21 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310
  1. body {
  2. margin: 65px auto 24px;
  3. box-shadow: none;
  4. background: #f1f1f1;
  5. padding: 0;
  6. }
  7. #wc-logo {
  8. border: 0;
  9. margin: 0 0 24px;
  10. padding: 0;
  11. text-align: center;
  12. img {
  13. max-width: 30%;
  14. }
  15. }
  16. .wc-setup {
  17. text-align: center;
  18. .select2-container {
  19. text-align: left;
  20. }
  21. .hidden {
  22. display: none;
  23. }
  24. }
  25. .wc-setup-content {
  26. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  27. padding: 2em;
  28. margin: 0 0 20px;
  29. background: #fff;
  30. overflow: hidden;
  31. zoom: 1;
  32. text-align: left;
  33. h1, h2, h3, table {
  34. margin: 0 0 20px;
  35. border: 0;
  36. padding: 0;
  37. color: #666;
  38. clear: none;
  39. font-weight: 500;
  40. }
  41. p {
  42. margin: 20px 0;
  43. font-size: 1em;
  44. line-height: 1.75em;
  45. color: #666;
  46. }
  47. table {
  48. font-size: 1em;
  49. line-height: 1.75em;
  50. color: #666;
  51. }
  52. a {
  53. color: #a16696;
  54. &:hover, &:focus {
  55. color: #111;
  56. }
  57. }
  58. .form-table {
  59. th {
  60. width: 35%;
  61. vertical-align: top;
  62. font-weight: normal;
  63. }
  64. td {
  65. vertical-align: top;
  66. select, input {
  67. width: 100%;
  68. box-sizing: border-box;
  69. }
  70. input[size] {
  71. width: auto;
  72. }
  73. .description {
  74. line-height: 1.5em;
  75. display: block;
  76. margin-top: 0.25em;
  77. color: #999;
  78. font-style: italic;
  79. }
  80. .input-checkbox, .input-radio {
  81. width: auto;
  82. box-sizing: inherit;
  83. padding: inherit;
  84. margin: 0 0.5em 0 0;
  85. box-shadow: none;
  86. }
  87. }
  88. .section_title {
  89. td {
  90. padding: 0;
  91. h2, p {
  92. margin: 12px 0 0;
  93. }
  94. }
  95. }
  96. th, td {
  97. padding: 12px 0;
  98. margin: 0;
  99. border: 0;
  100. &:first-child {
  101. padding-right: 1em;
  102. }
  103. }
  104. }
  105. table.tax-rates {
  106. width: 100%;
  107. font-size: 0.92em;
  108. th {
  109. padding: 0;
  110. text-align: center;
  111. width: auto;
  112. vertical-align: middle;
  113. }
  114. td {
  115. border: 1px solid #f5f5f5;
  116. padding: 6px;
  117. text-align: center;
  118. vertical-align: middle;
  119. input {
  120. outline: 0;
  121. border: 0;
  122. padding: 0;
  123. box-shadow: none;
  124. text-align: center;
  125. width: 100%;
  126. }
  127. &.sort {
  128. cursor: move;
  129. color: #ccc;
  130. &::before {
  131. content: '\f333';
  132. font-family: 'dashicons';
  133. }
  134. }
  135. &.readonly {
  136. background: #f5f5f5;
  137. }
  138. }
  139. .add {
  140. padding: 1em 0 0 1em;
  141. line-height: 1em;
  142. font-size: 1em;
  143. width: 0;
  144. margin: 6px 0 0;
  145. height: 0;
  146. overflow: hidden;
  147. position: relative;
  148. display: inline-block;
  149. &::before {
  150. content: '\f502';
  151. font-family: 'dashicons';
  152. position: absolute;
  153. left: 0;
  154. top: 0;
  155. }
  156. }
  157. .remove {
  158. padding: 1em 0 0 1em;
  159. line-height: 1em;
  160. font-size: 1em;
  161. width: 0;
  162. margin: 0;
  163. height: 0;
  164. overflow: hidden;
  165. position: relative;
  166. display: inline-block;
  167. &::before {
  168. content: '\f182';
  169. font-family: 'dashicons';
  170. position: absolute;
  171. left: 0;
  172. top: 0;
  173. }
  174. }
  175. }
  176. .wc-setup-pages {
  177. width: 100%;
  178. border-top: 1px solid #eee;
  179. thead th {
  180. display: none;
  181. }
  182. .page-name {
  183. width: 30%;
  184. font-weight: bold;
  185. }
  186. th, td {
  187. padding: 14px 0;
  188. border-bottom: 1px solid #eee;
  189. &:first-child {
  190. padding-right: 9px;
  191. }
  192. }
  193. th {
  194. padding-top: 0;
  195. }
  196. .page-options {
  197. p {
  198. color: #777;
  199. margin: 6px 0 0 24px;
  200. line-height: 1.75em;
  201. input {
  202. vertical-align: middle;
  203. margin: 1px 0 0;
  204. height: 1.75em;
  205. width: 1.75em;
  206. line-height: 1.75em;
  207. }
  208. label {
  209. line-height: 1;
  210. }
  211. }
  212. }
  213. }
  214. @media screen and (max-width: 782px) {
  215. .form-table {
  216. tbody {
  217. th {
  218. width: auto;
  219. }
  220. }
  221. }
  222. }
  223. .twitter-share-button {
  224. float: right;
  225. }
  226. .wc-setup-next-steps {
  227. overflow: hidden;
  228. margin: 0 0 24px;
  229. padding-bottom: 2px;
  230. h2 {
  231. margin-bottom: 12px;
  232. }
  233. .wc-setup-next-steps-first {
  234. float: left;
  235. width: 50%;
  236. box-sizing: border-box;
  237. }
  238. .wc-setup-next-steps-last {
  239. float: right;
  240. width: 50%;
  241. box-sizing: border-box;
  242. }
  243. ul {
  244. padding: 0 2em 0 0;
  245. list-style: none outside;
  246. margin: 0;
  247. li a {
  248. display: block;
  249. padding: 0 0 0.75em;
  250. }
  251. .setup-product {
  252. a.button {
  253. background-color: #f7f7f7;
  254. border-color: #ccc;
  255. color: #23282d;
  256. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #ccc;
  257. text-shadow: 1px 0 1px #eee, 0 1px 1px #eee;
  258. font-size: 1em;
  259. height: auto;
  260. line-height: 1.75em;
  261. margin: 0 0 0.75em;
  262. opacity: 1;
  263. padding: 1em;
  264. text-align: center;
  265. &:hover, &:focus, &:active {
  266. background: #f5f5f5;
  267. border-color: #aaa;
  268. }
  269. }
  270. a.button-primary {
  271. color: #fff;
  272. background-color: #bb77ae;
  273. border-color: #a36597;
  274. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
  275. text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;
  276. &:hover, &:focus, &:active {
  277. color: #fff;
  278. background: #a36597;
  279. border-color: #a36597;
  280. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
  281. }
  282. }
  283. }
  284. li a::before {
  285. color: #82878c;
  286. font: normal 20px/1 'dashicons';
  287. speak: none;
  288. display: inline-block;
  289. padding: 0 10px 0 0;
  290. top: 1px;
  291. position: relative;
  292. text-decoration: none !important;
  293. vertical-align: top;
  294. }
  295. .learn-more a::before {
  296. content: '\f105';
  297. }
  298. .video-walkthrough a::before {
  299. content: '\f126';
  300. }
  301. .newsletter a::before {
  302. content: '\f465';
  303. }
  304. }
  305. }
  306. .woocommerce-newsletter,
  307. .updated {
  308. padding: 24px 24px 0;
  309. margin: 0 0 24px;
  310. overflow: hidden;
  311. background: #f5f5f5;
  312. p {
  313. padding: 0;
  314. margin: 0 0 12px;
  315. }
  316. form,
  317. p:last-child {
  318. margin: 0 0 24px;
  319. }
  320. }
  321. .woocommerce-tracker {
  322. margin: 24px 0;
  323. border: 1px solid #eee;
  324. padding: 20px;
  325. border-radius: 4px;
  326. overflow: hidden;
  327. p {
  328. font-size: 14px;
  329. line-height: 1.5em;
  330. }
  331. .checkbox {
  332. line-height: 24px;
  333. font-weight: 500;
  334. font-size: 1em;
  335. margin-top: 0;
  336. margin-bottom: 20px;
  337. }
  338. }
  339. .checkbox {
  340. input[type="checkbox"] {
  341. opacity: 0;
  342. position: absolute;
  343. left: -9999px;
  344. }
  345. label {
  346. position: relative;
  347. display: inline-block;
  348. padding-left: 28px;
  349. &:before,
  350. &:after {
  351. position: absolute;
  352. content: "";
  353. display: inline-block;
  354. }
  355. &:before {
  356. height: 16px;
  357. width: 16px;
  358. left: 0px;
  359. top: 3px;
  360. border: 1px solid #aaa;
  361. background-color: #fff;
  362. border-radius: 3px;
  363. }
  364. &:after {
  365. height: 5px;
  366. width: 9px;
  367. border-left: 2px solid;
  368. border-bottom: 2px solid;
  369. transform: rotate(-45deg);
  370. left: 4px;
  371. top: 7px;
  372. color: #fff;
  373. }
  374. }
  375. input[type="checkbox"] + label::after {
  376. content: none;
  377. }
  378. input[type="checkbox"]:checked + label::after {
  379. content: "";
  380. }
  381. input[type="checkbox"]:focus + label::before {
  382. outline: rgb(59, 153, 252) auto 5px;
  383. }
  384. input[type="checkbox"]:checked + label::before {
  385. background: #935687;
  386. border-color: #935687;
  387. }
  388. }
  389. }
  390. .wc-setup-steps {
  391. padding: 0 0 24px;
  392. margin: 0;
  393. list-style: none outside;
  394. overflow: hidden;
  395. color: #ccc;
  396. width:100%;
  397. display: inline-flex;
  398. li {
  399. width: 100%;
  400. float: left;
  401. padding: 0 0 0.8em;
  402. margin: 0;
  403. text-align: center;
  404. position: relative;
  405. border-bottom: 4px solid #ccc;
  406. line-height: 1.4em;
  407. a {
  408. color: #a16696;
  409. text-decoration: none;
  410. padding: 1.5em;
  411. margin: -1.5em;
  412. position: relative;
  413. z-index: 1;
  414. &:hover, &:focus {
  415. color: #111;
  416. text-decoration: underline;
  417. }
  418. }
  419. }
  420. li::before {
  421. content: '';
  422. border: 4px solid #ccc;
  423. border-radius: 100%;
  424. width: 4px;
  425. height: 4px;
  426. position: absolute;
  427. bottom: 0;
  428. left: 50%;
  429. margin-left: -6px;
  430. margin-bottom: -8px;
  431. background: #fff;
  432. }
  433. li.active {
  434. border-color: #a16696;
  435. color: #a16696;
  436. font-weight: bold;
  437. &::before {
  438. border-color: #a16696;
  439. }
  440. }
  441. li.done {
  442. border-color: #a16696;
  443. color: #a16696;
  444. &::before {
  445. border-color: #a16696;
  446. background: #a16696;
  447. }
  448. }
  449. }
  450. .wc-setup .wc-setup-actions {
  451. overflow: hidden;
  452. margin: 20px 0 0;
  453. position: relative;
  454. .button {
  455. font-size: 1.25em;
  456. padding: 0.5em 1em;
  457. line-height: 1em;
  458. margin-right: 0.5em;
  459. margin-bottom: 2px;
  460. height: auto;
  461. border-radius: 4px;
  462. }
  463. .button-primary {
  464. background-color: #bb77ae;
  465. border-color: #a36597;
  466. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
  467. text-shadow: 0 -1px 1px #a36597, 1px 0 1px #a36597, 0 1px 1px #a36597, -1px 0 1px #a36597;
  468. margin: 0;
  469. opacity: 1;
  470. &:hover, &:focus, &:active {
  471. background: #a36597;
  472. border-color: #a36597;
  473. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #a36597;
  474. }
  475. }
  476. }
  477. .wc-setup-content p:last-child {
  478. margin-bottom: 0;
  479. }
  480. .wc-setup-content p.store-setup {
  481. margin-top: 0;
  482. }
  483. .wc-setup-footer-links {
  484. font-size: 0.85em;
  485. color: #7b7b7b;
  486. margin: 1.18em auto;
  487. display: inline-block;
  488. text-align: center;
  489. }
  490. .wc-wizard-storefront {
  491. .wc-wizard-storefront-intro {
  492. padding: 40px 40px 0;
  493. background: #F5F5F5;
  494. text-align: center;
  495. img {
  496. margin: 40px 0 0 0;
  497. width: 100%;
  498. display: block;
  499. }
  500. }
  501. .wc-wizard-storefront-features {
  502. list-style: none outside;
  503. margin: 0 0 20px;
  504. padding: 0 0 0 30px;
  505. overflow: hidden;
  506. }
  507. .wc-wizard-storefront-feature {
  508. margin: 0;
  509. padding: 20px 30px 20px 2em;
  510. width: 50%;
  511. box-sizing: border-box;
  512. &::before {
  513. margin-left: -2em;
  514. position: absolute;
  515. }
  516. &.first {
  517. clear: both;
  518. float: left;
  519. }
  520. &.last {
  521. float: right;
  522. }
  523. }
  524. .wc-wizard-storefront-feature__bulletproof::before {
  525. content: '🔒';
  526. }
  527. .wc-wizard-storefront-feature__mobile::before {
  528. content: '📱';
  529. }
  530. .wc-wizard-storefront-feature__accessibility::before {
  531. content: '👓';
  532. }
  533. .wc-wizard-storefront-feature__search::before {
  534. content: '🔍';
  535. }
  536. .wc-wizard-storefront-feature__compatibility::before {
  537. content: '🔧';
  538. }
  539. .wc-wizard-storefront-feature__extendable::before {
  540. content: '🎨';
  541. }
  542. }
  543. // List of services
  544. .wc-wizard-services {
  545. border: 1px solid #eee;
  546. padding: 0;
  547. margin: 0 0 1em;
  548. list-style: none outside;
  549. border-radius: 4px;
  550. overflow: hidden; // Make sure dark background doesn't cover curved border
  551. p {
  552. margin: 0 0 1em 0;
  553. padding: 0;
  554. font-size: 1em;
  555. line-height: 1.5em;
  556. }
  557. }
  558. .wc-wizard-service-item,
  559. .wc-wizard-services-list-toggle {
  560. display: flex;
  561. flex-wrap: nowrap;
  562. justify-content: space-between;
  563. padding: 0;
  564. border-bottom: 1px solid #eee;
  565. color: #666;
  566. align-items: center;
  567. &:last-child {
  568. border-bottom: 0;
  569. }
  570. .payment-gateway-fee {
  571. color: #a6a6a6;
  572. }
  573. .wc-wizard-service-name {
  574. flex-basis: 0;
  575. min-width: 160px;
  576. text-align: center;
  577. font-weight: bold;
  578. padding: 2em 0;
  579. align-self: stretch;
  580. display: flex;
  581. align-items: baseline;
  582. .wc-wizard-payment-gateway-form & {
  583. justify-content: center;
  584. }
  585. img {
  586. max-width: 75px;
  587. }
  588. }
  589. &.stripe-logo .wc-wizard-service-name img {
  590. padding: 8px 0;
  591. }
  592. &.paypal-logo .wc-wizard-service-name img {
  593. max-width: 87px;
  594. padding: 2px 0;
  595. }
  596. &.klarna-logo .wc-wizard-service-name {
  597. background: #000000;
  598. img {
  599. max-width: 87px;
  600. padding: 12px 0;
  601. }
  602. }
  603. &.square-logo .wc-wizard-service-name {
  604. background: #000000;
  605. img {
  606. max-width: 95px;
  607. padding: 12px 0;
  608. }
  609. }
  610. &.eway-logo .wc-wizard-service-name img {
  611. max-width: 87px;
  612. }
  613. &.payfast-logo .wc-wizard-service-name img {
  614. max-width: 140px;
  615. }
  616. .wc-wizard-service-description {
  617. flex-grow: 1;
  618. padding: 20px;
  619. p {
  620. margin-bottom: 1em;
  621. }
  622. p:last-child {
  623. margin-bottom: 0;
  624. }
  625. .wc-wizard-service-settings-description {
  626. display: block;
  627. font-style: italic;
  628. color: #999;
  629. }
  630. }
  631. .wc-wizard-service-enable {
  632. flex-basis: 0;
  633. min-width: 75px;
  634. text-align: center;
  635. cursor: pointer;
  636. padding: 2em 0;
  637. position: relative;
  638. max-height: 1.5em;
  639. align-self: flex-start;
  640. }
  641. .wc-wizard-service-toggle {
  642. height: 16px;
  643. width: 32px;
  644. border: 2px solid #935687;
  645. background-color: #935687;
  646. display: inline-block;
  647. text-indent: -9999px;
  648. border-radius: 10em;
  649. position: relative;
  650. input[type=checkbox] {
  651. display: none;
  652. }
  653. &:before {
  654. content: "";
  655. display: block;
  656. width: 16px;
  657. height: 16px;
  658. background: #fff;
  659. position: absolute;
  660. top: 0;
  661. right: 0;
  662. border-radius: 100%;
  663. }
  664. &.disabled {
  665. border-color: #999;
  666. background-color: #999;
  667. &:before {
  668. right: auto;
  669. left: 0;
  670. }
  671. }
  672. }
  673. .wc-wizard-service-settings {
  674. display: none;
  675. margin-top: 0.75em;
  676. margin-bottom: 0;
  677. cursor: default;
  678. &.hide {
  679. display: none;
  680. }
  681. }
  682. &.checked {
  683. .wc-wizard-service-settings {
  684. display: inline-block;
  685. &.hide {
  686. display: none;
  687. }
  688. }
  689. }
  690. &.closed {
  691. border-bottom: 0;
  692. }
  693. }
  694. // Toggle display a list of services.
  695. .wc-wizard-services-list-toggle {
  696. cursor: pointer;
  697. .wc-wizard-service-enable::before {
  698. content: "\f343"; // up chevron
  699. font-family: "dashicons";
  700. visibility: initial;
  701. color: #666;
  702. font-size: 25px;
  703. margin-top: -7px;
  704. margin-left: -5px;
  705. position: absolute;
  706. visibility: visible;
  707. }
  708. &.closed {
  709. .wc-wizard-service-enable::before {
  710. content: "\f347"; // down chevron
  711. }
  712. }
  713. .wc-wizard-service-enable input {
  714. visibility: hidden;
  715. position: relative;
  716. }
  717. }
  718. .wc-wizard-services.manual .wc-wizard-service-item {
  719. display: none;
  720. }
  721. // Shipping list of services
  722. .wc-wizard-services.shipping {
  723. .wc-wizard-service-name {
  724. font-weight: normal;
  725. text-align: left;
  726. align-items: center;
  727. max-height: 5em;
  728. padding: 0;
  729. }
  730. // List header
  731. .wc-wizard-service-item {
  732. padding-left: 2em;
  733. padding-top: 0.67em;
  734. &:first-child {
  735. border-bottom: 0;
  736. padding-bottom: 0;
  737. font-weight: 700;
  738. .wc-wizard-service-name {
  739. font-weight: 700;
  740. }
  741. }
  742. }
  743. .wc-wizard-shipping-method-select,
  744. .shipping-method-setting {
  745. display: flex;
  746. &.hide {
  747. display: none;
  748. }
  749. }
  750. .wc-wizard-shipping-method-dropdown,
  751. .shipping-method-setting input {
  752. margin-right: 2em;
  753. margin-bottom: 1em;
  754. .select2 {
  755. min-width: 130px;
  756. }
  757. }
  758. .wc-wizard-service-description {
  759. display: flex;
  760. flex-direction: column;
  761. color: #a6a6a6;
  762. }
  763. .wc-wizard-service-item:not(:first-child) .wc-wizard-service-description {
  764. font-size: 0.92em;
  765. padding-bottom: 10px;
  766. }
  767. .shipping-method-setting {
  768. input {
  769. width: 95px; // match dropdown height
  770. border: 1px solid #aaa;
  771. border-color: #ddd;
  772. border-radius: 4px;
  773. height: 28px;
  774. padding-left: 8px;
  775. padding-right: 24px;
  776. font-size: 14px;
  777. color: #444;
  778. background-color: #fff;
  779. display: inline-block;
  780. }
  781. }
  782. .shipping-method-description,
  783. .shipping-method-setting .description {
  784. color: #7e7e7e;
  785. font-size: .9em;
  786. }
  787. .shipping-method-setting input::placeholder {
  788. color: #e1e1e1;
  789. }
  790. }
  791. .wc-setup-shipping-units {
  792. p {
  793. line-height: 1.5em;
  794. font-size: 13px;
  795. margin-bottom: 0.25em;
  796. }
  797. .wc-setup-shipping-unit {
  798. margin-bottom: 1.75em;
  799. .select2 {
  800. min-width: 100%; // widen dropdowns
  801. }
  802. }
  803. }
  804. .hide {
  805. display: none;
  806. }
  807. .wc-wizard-features {
  808. display: flex;
  809. flex-wrap: wrap;
  810. list-style: none;
  811. padding: 0;
  812. .wc-wizard-feature-item {
  813. flex-basis: calc( 50% - 4em - 3px); // two columns, account for padding and borders
  814. border: 1px solid #eee;
  815. padding: 2em;
  816. }
  817. .wc-wizard-feature-item:nth-child(1) {
  818. border-radius: 4px 0 0 0;
  819. }
  820. .wc-wizard-feature-item:nth-child(2) {
  821. border-left: 0;
  822. border-radius: 0 4px 0 0;
  823. }
  824. .wc-wizard-feature-item:nth-child(3) {
  825. border-top: 0;
  826. border-radius: 0 0 0 4px;
  827. }
  828. .wc-wizard-feature-item:nth-child(4) {
  829. border-top: 0;
  830. border-left: 0;
  831. border-radius: 0 0 4px 0;
  832. }
  833. p.wc-wizard-feature-name,
  834. p.wc-wizard-feature-description {
  835. margin: 0;
  836. line-height: 1.5em;
  837. }
  838. }
  839. h3.jetpack-reasons {
  840. text-align: center;
  841. margin: 3em 0 1em 0;
  842. font-size: 14px;
  843. }
  844. .jetpack-logo, .wcs-notice {
  845. display: block;
  846. margin: 1.75em auto 2em auto;
  847. max-height: 175px;
  848. }
  849. .activate-splash {
  850. .jetpack-logo {
  851. width: 170px;
  852. margin-bottom: 0;
  853. }
  854. .wcs-notice {
  855. margin-top: 1em;
  856. padding-left: 57px;
  857. }
  858. }
  859. .step {
  860. text-align: center;
  861. }
  862. .wc-setup .wc-setup-actions .button {
  863. font-weight: 300;
  864. font-size: 16px;
  865. padding: 1em 2em;
  866. box-shadow: none;
  867. min-width: 12em;
  868. min-width: auto;
  869. margin-top:10px;
  870. &:focus,
  871. &:hover,
  872. &:active {
  873. box-shadow: none;
  874. }
  875. }
  876. .wc-setup .wc-setup-actions .plugin-install-info {
  877. display: block;
  878. font-style: italic;
  879. color: #999;
  880. font-size: 14px;
  881. line-height: 1.5em;
  882. margin: 5px 0;
  883. & > * {
  884. display: block;
  885. }
  886. .plugin-install-info-list-item:not(:last-child)::after {
  887. content: ', ';
  888. }
  889. a {
  890. white-space: nowrap;
  891. &:not(:hover):not(:focus) {
  892. color: inherit;
  893. }
  894. }
  895. }
  896. .plugin-install-source {
  897. $background: rgba( #bb77ae, 0.15 );
  898. background: $background;
  899. &:not(.wc-wizard-service-item) {
  900. box-shadow: 0 0 0 10px $background;
  901. }
  902. }
  903. .location-prompt {
  904. color: #666;
  905. font-size: 13px;
  906. font-weight: 500;
  907. margin-bottom: 0.5em;
  908. margin-top: 0.85em;
  909. display: inline-block;
  910. }
  911. .location-input {
  912. border: 1px solid #aaa;
  913. border-color: #ddd;
  914. border-radius: 4px;
  915. height: 30px;
  916. width: calc(100% - 8px - 24px - 2px); // account for padding, border to align with other elements
  917. padding-left: 8px;
  918. padding-right: 24px;
  919. font-size: 16px;
  920. color: #444;
  921. background-color: #fff;
  922. display: inline-block;
  923. &.dropdown {
  924. width: 100%;
  925. }
  926. }
  927. .address-step {
  928. .select2 {
  929. min-width: 100%; // widen currency, product type dropdowns
  930. }
  931. }
  932. .store-address-container {
  933. .city-and-postcode {
  934. display: flex;
  935. div {
  936. flex-basis: 50%;
  937. margin-right: 1em;
  938. &:last-of-type {
  939. margin-right: 0;
  940. }
  941. }
  942. }
  943. input[type="text"],
  944. select,
  945. .select2-container {
  946. margin-bottom: 10px;
  947. }
  948. }
  949. .product-type-container {
  950. margin-top: 14px;
  951. margin-bottom: 1px;
  952. }
  953. #woocommerce_sell_in_person {
  954. margin-left: 0;
  955. }
  956. .wc-wizard-service-settings {
  957. .payment-email-input {
  958. border: 1px solid #aaa;
  959. border-color: #ddd;
  960. border-radius: 4px;
  961. height: 30px;
  962. padding: 0 8px;
  963. font-size: 14px;
  964. color: #444;
  965. background-color: #fff;
  966. display: inline-block;
  967. }
  968. }
  969. .newsletter-form-container {
  970. display: flex;
  971. .newsletter-form-email {
  972. border: 1px solid #aaa;
  973. border-color: #ddd;
  974. border-radius: 4px;
  975. height: 42px;
  976. padding: 0 8px;
  977. font-size: 16px;
  978. color: #666;
  979. background-color: #fff;
  980. display: inline-block;
  981. margin-right: 6px;
  982. flex-grow: 1;
  983. }
  984. .newsletter-form-button-container {
  985. flex-grow: 0;
  986. }
  987. }
  988. .wc-setup .wc-setup-actions .button.newsletter-form-button {
  989. height: 42px;
  990. padding: 0 1em;
  991. margin: 0;
  992. }
  993. .wc-wizard-next-steps {
  994. border: 1px solid #eee;
  995. border-radius: 4px;
  996. list-style: none;
  997. padding: 0;
  998. li {
  999. padding: 0;
  1000. }
  1001. .wc-wizard-next-step-item {
  1002. display: flex;
  1003. border-top: 1px solid #eee;
  1004. &:first-child {
  1005. border-top: 0;
  1006. }
  1007. }
  1008. .wc-wizard-next-step-description {
  1009. flex-grow: 1;
  1010. margin: 1.5em;
  1011. }
  1012. .wc-wizard-next-step-action {
  1013. flex-grow: 0;
  1014. display: flex;
  1015. align-items: center;
  1016. .button {
  1017. margin: 1em 1.5em;
  1018. }
  1019. }
  1020. p {
  1021. &.next-step-heading {
  1022. margin: 0;
  1023. font-size: 0.95em;
  1024. font-weight: 400;
  1025. font-variant: all-petite-caps;
  1026. }
  1027. &.next-step-extra-info {
  1028. margin: 0;
  1029. }
  1030. }
  1031. h3 {
  1032. &.next-step-description {
  1033. margin: 0;
  1034. font-size: 16px;
  1035. font-weight: 600;
  1036. }
  1037. }
  1038. .wc-wizard-additional-steps {
  1039. border-top: 1px solid #eee;
  1040. .wc-wizard-next-step-description {
  1041. margin-bottom: 0;
  1042. }
  1043. .wc-setup-actions {
  1044. margin: 0 0 1.5em 0;
  1045. .button {
  1046. font-size: 15px;
  1047. margin: 1em 0 1em 1.5em;
  1048. }
  1049. .button::last-child {
  1050. margin-right: 1.5em;
  1051. }
  1052. }
  1053. }
  1054. }
  1055. p.next-steps-help-text {
  1056. color: #9f9f9f;
  1057. padding: 0 2em;
  1058. text-align: center;
  1059. font-size: .9em;
  1060. }
  1061. p.jetpack-terms {
  1062. font-size: .8em;
  1063. text-align: center;
  1064. max-width: 480px;
  1065. margin: 0 auto;
  1066. line-height: 1.5em;
  1067. }
  1068. .woocommerce-error {
  1069. background: #ffe6e5;
  1070. border-color: #ffc5c2;
  1071. padding: 1em;
  1072. margin-bottom: 1em;
  1073. p {
  1074. margin-top: 0;
  1075. margin-bottom: 0.5em;
  1076. color: #444;
  1077. }
  1078. a {
  1079. color: #ff645c;
  1080. }
  1081. .reconnect-reminder {
  1082. font-size: 0.85em;
  1083. }
  1084. .wc-setup-actions .button {
  1085. font-size: 14px;
  1086. }
  1087. }
  1088. .wc-wizard-service-setting-stripe_create_account, .wc-wizard-service-setting-ppec_paypal_reroute_requests {
  1089. display: flex;
  1090. align-items: flex-start;
  1091. .payment-checkbox-input {
  1092. order: 1;
  1093. margin-top: 5px;
  1094. margin-left: 0;
  1095. margin-right: 0;
  1096. width: 1.5em;
  1097. }
  1098. .stripe_create_account, .ppec_paypal_reroute_requests {
  1099. order: 2;
  1100. margin-left: 0.3em;
  1101. }
  1102. }
  1103. .wc-wizard-service-setting-stripe_email, .wc-wizard-service-setting-ppec_paypal_email {
  1104. margin-top: 0.75em;
  1105. margin-left: 1.5em;
  1106. label.stripe_email, label.ppec_paypal_email {
  1107. position: absolute;
  1108. margin: -1px;
  1109. padding: 0;
  1110. height: 1px;
  1111. width: 1px;
  1112. overflow: hidden;
  1113. clip: rect(0 0 0 0);
  1114. border: 0;
  1115. }
  1116. input.payment-email-input {
  1117. box-sizing: border-box;
  1118. margin-bottom: .5em;
  1119. width: 100%;
  1120. height: 32px;
  1121. }
  1122. }
  1123. .wc-setup-content .recommended-step {
  1124. border: 1px solid #ebebeb;
  1125. border-radius: 4px;
  1126. padding: 2.5em;
  1127. li {
  1128. list-style: none;
  1129. &:last-child label {
  1130. margin-bottom: 0; // Avoid extra space at the end of the list.
  1131. }
  1132. }
  1133. label {
  1134. display: flex;
  1135. align-items: center;
  1136. margin-bottom: 1.5em;
  1137. &:before, &:after {
  1138. top: auto;
  1139. }
  1140. &:after {
  1141. margin-top: -1.5px;
  1142. }
  1143. }
  1144. .recommended-item-icon {
  1145. border: 1px solid #fff;
  1146. border-radius: 7px;
  1147. height: 3.5em;
  1148. margin-right: 1em;
  1149. margin-left: 4px;
  1150. &.recommended-item-icon-storefront_theme {
  1151. background-color: #f4a224;
  1152. max-height: 3em;
  1153. max-width: 3em;
  1154. padding: ( 3.5em - 3em ) / 2;
  1155. }
  1156. &.recommended-item-icon-automated_taxes {
  1157. background-color: #d0011b;
  1158. max-height: 1.75em;
  1159. padding: ( 3.5em - 1.75em ) / 2;
  1160. }
  1161. &.recommended-item-icon-mailchimp {
  1162. background-color: #209bbb;
  1163. height: 2em;
  1164. padding: ( 3.5em - 2em ) / 2;
  1165. }
  1166. }
  1167. .recommended-item-description-container {
  1168. h3 {
  1169. font-size: 15px;
  1170. font-weight: bold;
  1171. letter-spacing: 0.5px;
  1172. margin-bottom: 0;
  1173. }
  1174. p {
  1175. margin-top: 0;
  1176. line-height: 1.5em;
  1177. }
  1178. }
  1179. }