API tools faq
paste
Guest User

Untitled

a guest
Oct 17th, 2017
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. /* Breakpoints */
  9. main {
  10. display: flex;
  11. flex-direction: column;
  12. }
  13.  
  14. .s1024 {
  15. max-width: 639px;
  16. }
  17.  
  18. .s1150 {
  19. width: 747px;
  20. }
  21.  
  22.  
  23. /* Leg Components */
  24. .leg {
  25. display: flex;
  26. flex-direction: column;
  27. flex: 1;
  28. }
  29.  
  30. .row {
  31. display: flex;
  32. flex-wrap: wrap;
  33. }
  34.  
  35. .noWrap {
  36. flex-wrap: nowrap;
  37. }
  38.  
  39. .col {
  40. display: flex;
  41. flex-direction: column;
  42. flex: 0 1 auto;
  43. }
  44.  
  45. .col.grow {
  46. flex: 0 1 auto;
  47. }
  48.  
  49.  
  50. /* Fields */
  51. .spinner {
  52. min-width: 90px;
  53. max-width: 120px;
  54. }
  55.  
  56. .spinner--l {
  57. min-width: 120px;
  58. max-width: 170px;
  59. }
  60.  
  61. .switch {
  62. width: 80px;
  63. }
  64.  
  65. .table {
  66. width: 500px;
  67. }
  68.  
  69. .label-with-step {
  70. display: flex;
  71. justify-content: space-between;
  72. }
  73.  
  74. .spinner-with-buttons {
  75. display: flex;
  76. }
  77.  
  78. .incrementIcons {
  79. width: 30px;
  80. flex: 1;
  81. }
  82.  
  83. .step-with-increment {
  84. display: flex;
  85. flex-direction: column;
  86. }
  87.  
  88. .old .step {
  89. display: flex;
  90. align-items: center;
  91. justify-content: center;
  92. text-align: center;
  93. background-color: white;
  94. width: 30px;
  95. }
  96.  
  97. .old .incrementIcons {
  98. flex: 0 1 auto;
  99. width: 30px;
  100. border-top: 24px solid blue;
  101. background-color: red;
  102. }
  103.  
  104. .new .step {
  105. display: flex;
  106. align-items: center;
  107. justify-content: center;
  108. text-align: center;
  109. background-color: white;
  110. width: 30px;
  111. }
  112.  
  113. .new .incrementIcons {
  114. flex: 1;
  115. width: 30px;
  116. border-top: 15px solid blue;
  117. background-color: red;
  118. }
  119.  
  120.  
  121.  
  122.  
  123. /* Not important */
  124. main {
  125. padding: 15px;
  126. }
  127.  
  128. .leg {
  129. background-color: #1c9348;
  130. }
  131.  
  132. .header {
  133. background-color: rgba(0,0,0,0.3);
  134. color: white;
  135. height: 25px;
  136. padding: 10px;
  137. border-bottom: 2px solid white;
  138. margin-bottom: 10px;
  139. width: 100%;
  140. }
  141.  
  142. .col {
  143. background-color: rgba(255,255,255,0.2);
  144. height: 100px;
  145. margin: 0 5px 10px;
  146. box-sizing: border-box;
  147. }
  148.  
  149. .spinner,
  150. .spinner--l {
  151. background-color: orange;
  152. padding: 5px;
  153. }
  154.  
  155. .switch {
  156. background-color: purple;
  157. padding: 5px;
  158. }
  159.  
  160. .table {
  161. background-color: royalblue;
  162. height: 90px;
  163. padding: 5px;
  164.  
  165. }
  166.  
  167. .label {
  168. margin-bottom: 5px;
  169. margin-right: 10px;
  170. }
  171.  
  172. .additionalInfo {
  173. margin-top: 5px;
  174. background-color: green;
  175. padding: 5px
  176. }
  177.  
  178. .incrementIcons {
  179. border-top: 15px solid blue;
  180. background-color: red;
  181. }
  182. </style>
  183. </head>
  184. <body>
  185.  
  186. <main class="s1150">
  187. <section class="leg old">
  188. <div class="row">
  189. <div class="header"> TRADER: Multiple Rows</div>
  190. </div>
  191.  
  192. <div class="row noWrap">
  193. <div class="col">
  194. <div class="label-with-step">
  195. <div class="label"> Total Quantity (priiiiiiiiiiice) </div>
  196. <div class="step"> 1.0 </div>
  197. </div>
  198.  
  199. <div class="spinner-with-buttons">
  200. <div class="spinner--l">Quantity<br>[L spinner]</div>
  201. <div class="incrementIcons"></div>
  202. </div>
  203.  
  204. <div class="additionalInfo">Additional Info</div>
  205. </div>
  206.  
  207. <div class="col">
  208. <div class="label-with-step">
  209. <div class="label"> Price Label </div>
  210. <div class="step">50.1</div>
  211. </div>
  212.  
  213. <div class="spinner-with-buttons">
  214. <div class="spinner--l">Price<br>[L spinner]</div>
  215. <div class="incrementIcons"></div>
  216. </div>
  217.  
  218. <div class="additionalInfo">Additional Info that's wider than the spinner</div>
  219. </div>
  220.  
  221. <div class="col">
  222. <div class="label-with-step">
  223. <div class="label"> Yield Label</div>
  224. <div class="step">0.25</div>
  225. </div>
  226.  
  227. <div class="spinner-with-buttons">
  228. <div class="spinner--l">Yield<br>[M spinner]</div>
  229. <div class="incrementIcons"></div>
  230. </div>
  231. </div>
  232.  
  233. <div class="col">
  234. <div class="label-with-step">
  235. <div class="label"> Benchmark Label </div>
  236. <div class="step">1.05</div>
  237. </div>
  238.  
  239. <div class="spinner-with-buttons">
  240. <div class="spinner--l">Benchmark<br>[L spinner]</div>
  241. <div class="incrementIcons"></div>
  242. </div>
  243. <div class="additionalInfo">Additional Info</div>
  244. </div>
  245. </div>
  246.  
  247. <div class="row">
  248. <div class="col">
  249. <div class="label"> Axed Label </div>
  250. <div class="switch">Axed<br>[switch]</div>
  251. </div>
  252. <div class="col">
  253. <div class="label-with-step">
  254. <div class="label"> Commission Label </div>
  255. <div class="step">0.25</div>
  256. </div>
  257.  
  258. <div class="spinner-with-buttons">
  259. <div class="spinner--l">Commission<br>[M spinner]</div>
  260. <div class="incrementIcons"></div>
  261. </div>
  262. </div>
  263. <div class="col">
  264. <div class="label"> Autohedge Label </div>
  265. <div class="switch">Autohedge<br>[switch]</div>
  266. </div>
  267. <div class="col">
  268. <div class="table">Autohedge<br>[XL table]</div>
  269. </div>
  270. </div>
  271. </section>
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278. <section class="leg new">
  279. <div class="row">
  280. <div class="header"> TRADER: Single Row</div>
  281. </div>
  282.  
  283. <div class="row">
  284. <div class="col">
  285. <div class="label-with-step">
  286. <div class="label"> Qty </div>
  287. </div>
  288.  
  289. <div class="spinner-with-buttons">
  290. <div class="spinner--l">Quantity<br>[L spinner]</div>
  291. <div class="step-with-increment">
  292. <div class="step"> 1.0 </div>
  293. <div class="incrementIcons"></div>
  294. </div>
  295. </div>
  296.  
  297. <div class="additionalInfo">Additional Info that may extend</div>
  298. </div>
  299.  
  300. <div class="col">
  301. <div class="label-with-step">
  302. <div class="label"> Price Label </div>
  303.  
  304. </div>
  305.  
  306. <div class="spinner-with-buttons">
  307. <div class="spinner--l">Price<br>[L spinner]</div>
  308. <div class="step-with-increment">
  309. <div class="step"> 14.0 </div>
  310. <div class="incrementIcons"></div>
  311. </div>
  312. </div>
  313.  
  314. <div class="additionalInfo">Additional Info</div>
  315. </div>
  316.  
  317. <div class="col">
  318. <div class="label-with-step">
  319. <div class="label"> Yield Label</div>
  320. </div>
  321.  
  322. <div class="spinner-with-buttons">
  323. <div class="spinner--l">Yield<br>[M spinner]</div>
  324. <div class="step-with-increment">
  325. <div class="step"> 1.0 </div>
  326. <div class="incrementIcons"></div>
  327. </div>
  328. </div>
  329. </div>
  330.  
  331. <div class="col">
  332. <div class="label-with-step">
  333. <div class="label"> Benchmark Label </div>
  334. </div>
  335.  
  336. <div class="spinner-with-buttons">
  337. <div class="spinner--l">Benchmark<br>[L spinner]</div>
  338. <div class="step-with-increment">
  339. <div class="step"> 9.0 </div>
  340. <div class="incrementIcons"></div>
  341. </div>
  342. </div>
  343. <div class="additionalInfo">Additional Info</div>
  344. </div>
  345.  
  346. <div class="col">
  347. <div class="label"> Axed Label </div>
  348. <div class="switch">Axed<br>[switch]</div>
  349. </div>
  350.  
  351. <div class="col">
  352. <div class="label-with-step">
  353. <div class="label"> Commission Label </div>
  354. </div>
  355.  
  356. <div class="spinner-with-buttons">
  357. <div class="spinner--l">Commission<br>[M spinner]</div>
  358. <div class="step-with-increment">
  359. <div class="step"> 0.25 </div>
  360. <div class="incrementIcons"></div>
  361. </div>
  362. </div>
  363. </div>
  364.  
  365. <div class="col">
  366. <div class="label"> Autohedge Label </div>
  367. <div class="switch">Autohedge<br>[switch]</div>
  368. </div>
  369.  
  370. <div class="col grow">
  371. <div class="table">Autohedge<br>[XL table]</div>
  372. </div>
  373. </div>
  374. </section>
  375. </main>
  376.  
  377.  
  378.  
  379. <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
  380. <html>
  381. <head>
  382. <meta charset="utf-8">
  383. <meta name="viewport" content="width=device-width">
  384. <title>JS Bin</title>
  385. </head>
  386. <body>
  387.  
  388. <main class="s1150">
  389. <section class="leg old">
  390. <div class="row">
  391. <div class="header"> TRADER: Multiple Rows</div>
  392. </div>
  393.  
  394. <div class="row noWrap">
  395. <div class="col">
  396. <div class="label-with-step">
  397. <div class="label"> Total Quantity (priiiiiiiiiiice) </div>
  398. <div class="step"> 1.0 </div>
  399. </div>
  400.  
  401. <div class="spinner-with-buttons">
  402. <div class="spinner--l">Quantity<br>[L spinner]</div>
  403. <div class="incrementIcons"></div>
  404. </div>
  405.  
  406. <div class="additionalInfo">Additional Info</div>
  407. </div>
  408.  
  409. <div class="col">
  410. <div class="label-with-step">
  411. <div class="label"> Price Label </div>
  412. <div class="step">50.1</div>
  413. </div>
  414.  
  415. <div class="spinner-with-buttons">
  416. <div class="spinner--l">Price<br>[L spinner]</div>
  417. <div class="incrementIcons"></div>
  418. </div>
  419.  
  420. <div class="additionalInfo">Additional Info that's wider than the spinner</div>
  421. </div>
  422.  
  423. <div class="col">
  424. <div class="label-with-step">
  425. <div class="label"> Yield Label</div>
  426. <div class="step">0.25</div>
  427. </div>
  428.  
  429. <div class="spinner-with-buttons">
  430. <div class="spinner--l">Yield<br>[M spinner]</div>
  431. <div class="incrementIcons"></div>
  432. </div>
  433. </div>
  434.  
  435. <div class="col">
  436. <div class="label-with-step">
  437. <div class="label"> Benchmark Label </div>
  438. <div class="step">1.05</div>
  439. </div>
  440.  
  441. <div class="spinner-with-buttons">
  442. <div class="spinner--l">Benchmark<br>[L spinner]</div>
  443. <div class="incrementIcons"></div>
  444. </div>
  445. <div class="additionalInfo">Additional Info</div>
  446. </div>
  447. </div>
  448.  
  449. <div class="row">
  450. <div class="col">
  451. <div class="label"> Axed Label </div>
  452. <div class="switch">Axed<br>[switch]</div>
  453. </div>
  454. <div class="col">
  455. <div class="label-with-step">
  456. <div class="label"> Commission Label </div>
  457. <div class="step">0.25</div>
  458. </div>
  459.  
  460. <div class="spinner-with-buttons">
  461. <div class="spinner--l">Commission<br>[M spinner]</div>
  462. <div class="incrementIcons"></div>
  463. </div>
  464. </div>
  465. <div class="col">
  466. <div class="label"> Autohedge Label </div>
  467. <div class="switch">Autohedge<br>[switch]</div>
  468. </div>
  469. <div class="col">
  470. <div class="table">Autohedge<br>[XL table]</div>
  471. </div>
  472. </div>
  473. </section>
  474.  
  475.  
  476.  
  477.  
  478.  
  479.  
  480. <section class="leg new">
  481. <div class="row">
  482. <div class="header"> TRADER: Single Row</div>
  483. </div>
  484.  
  485. <div class="row">
  486. <div class="col">
  487. <div class="label-with-step">
  488. <div class="label"> Qty </div>
  489. </div>
  490.  
  491. <div class="spinner-with-buttons">
  492. <div class="spinner--l">Quantity<br>[L spinner]</div>
  493. <div class="step-with-increment">
  494. <div class="step"> 1.0 </div>
  495. <div class="incrementIcons"></div>
  496. </div>
  497. </div>
  498.  
  499. <div class="additionalInfo">Additional Info that may extend</div>
  500. </div>
  501.  
  502. <div class="col">
  503. <div class="label-with-step">
  504. <div class="label"> Price Label </div>
  505.  
  506. </div>
  507.  
  508. <div class="spinner-with-buttons">
  509. <div class="spinner--l">Price<br>[L spinner]</div>
  510. <div class="step-with-increment">
  511. <div class="step"> 14.0 </div>
  512. <div class="incrementIcons"></div>
  513. </div>
  514. </div>
  515.  
  516. <div class="additionalInfo">Additional Info</div>
  517. </div>
  518.  
  519. <div class="col">
  520. <div class="label-with-step">
  521. <div class="label"> Yield Label</div>
  522. </div>
  523.  
  524. <div class="spinner-with-buttons">
  525. <div class="spinner--l">Yield<br>[M spinner]</div>
  526. <div class="step-with-increment">
  527. <div class="step"> 1.0 </div>
  528. <div class="incrementIcons"></div>
  529. </div>
  530. </div>
  531. </div>
  532.  
  533. <div class="col">
  534. <div class="label-with-step">
  535. <div class="label"> Benchmark Label </div>
  536. </div>
  537.  
  538. <div class="spinner-with-buttons">
  539. <div class="spinner--l">Benchmark<br>[L spinner]</div>
  540. <div class="step-with-increment">
  541. <div class="step"> 9.0 </div>
  542. <div class="incrementIcons"></div>
  543. </div>
  544. </div>
  545. <div class="additionalInfo">Additional Info</div>
  546. </div>
  547.  
  548. <div class="col">
  549. <div class="label"> Axed Label </div>
  550. <div class="switch">Axed<br>[switch]</div>
  551. </div>
  552.  
  553. <div class="col">
  554. <div class="label-with-step">
  555. <div class="label"> Commission Label </div>
  556. </div>
  557.  
  558. <div class="spinner-with-buttons">
  559. <div class="spinner--l">Commission<br>[M spinner]</div>
  560. <div class="step-with-increment">
  561. <div class="step"> 0.25 </div>
  562. <div class="incrementIcons"></div>
  563. </div>
  564. </div>
  565. </div>
  566.  
  567. <div class="col">
  568. <div class="label"> Autohedge Label </div>
  569. <div class="switch">Autohedge<br>[switch]</div>
  570. </div>
  571.  
  572. <div class="col grow">
  573. <div class="table">Autohedge<br>[XL table]</div>
  574. </div>
  575. </div>
  576. </section>
  577. </main>
  578.  
  579.  
  580. </body>
  581. </html>
  582. </script>
  583.  
  584. <script id="jsbin-source-css" type="text/css">/* Breakpoints */
  585. main {
  586. display: flex;
  587. flex-direction: column;
  588. }
  589.  
  590. .s1024 {
  591. max-width: 639px;
  592. }
  593.  
  594. .s1150 {
  595. width: 747px;
  596. }
  597.  
  598.  
  599. /* Leg Components */
  600. .leg {
  601. display: flex;
  602. flex-direction: column;
  603. flex: 1;
  604. }
  605.  
  606. .row {
  607. display: flex;
  608. flex-wrap: wrap;
  609. }
  610.  
  611. .noWrap {
  612. flex-wrap: nowrap;
  613. }
  614.  
  615. .col {
  616. display: flex;
  617. flex-direction: column;
  618. flex: 0 1 auto;
  619. }
  620.  
  621. .col.grow {
  622. flex: 0 1 auto;
  623. }
  624.  
  625.  
  626. /* Fields */
  627. .spinner {
  628. min-width: 90px;
  629. max-width: 120px;
  630. }
  631.  
  632. .spinner--l {
  633. min-width: 120px;
  634. max-width: 170px;
  635. }
  636.  
  637. .switch {
  638. width: 80px;
  639. }
  640.  
  641. .table {
  642. width: 500px;
  643. }
  644.  
  645. .label-with-step {
  646. display: flex;
  647. justify-content: space-between;
  648. }
  649.  
  650. .spinner-with-buttons {
  651. display: flex;
  652. }
  653.  
  654. .incrementIcons {
  655. width: 30px;
  656. flex: 1;
  657. }
  658.  
  659. .step-with-increment {
  660. display: flex;
  661. flex-direction: column;
  662. }
  663.  
  664. .old .step {
  665. display: flex;
  666. align-items: center;
  667. justify-content: center;
  668. text-align: center;
  669. background-color: white;
  670. width: 30px;
  671. }
  672.  
  673. .old .incrementIcons {
  674. flex: 0 1 auto;
  675. width: 30px;
  676. border-top: 24px solid blue;
  677. background-color: red;
  678. }
  679.  
  680. .new .step {
  681. display: flex;
  682. align-items: center;
  683. justify-content: center;
  684. text-align: center;
  685. background-color: white;
  686. width: 30px;
  687. }
  688.  
  689. .new .incrementIcons {
  690. flex: 1;
  691. width: 30px;
  692. border-top: 15px solid blue;
  693. background-color: red;
  694. }
  695.  
  696.  
  697.  
  698.  
  699. /* Not important */
  700. main {
  701. padding: 15px;
  702. }
  703.  
  704. .leg {
  705. background-color: #1c9348;
  706. }
  707.  
  708. .header {
  709. background-color: rgba(0,0,0,0.3);
  710. color: white;
  711. height: 25px;
  712. padding: 10px;
  713. border-bottom: 2px solid white;
  714. margin-bottom: 10px;
  715. width: 100%;
  716. }
  717.  
  718. .col {
  719. background-color: rgba(255,255,255,0.2);
  720. height: 100px;
  721. margin: 0 5px 10px;
  722. box-sizing: border-box;
  723. }
  724.  
  725. .spinner,
  726. .spinner--l {
  727. background-color: orange;
  728. padding: 5px;
  729. }
  730.  
  731. .switch {
  732. background-color: purple;
  733. padding: 5px;
  734. }
  735.  
  736. .table {
  737. background-color: royalblue;
  738. height: 90px;
  739. padding: 5px;
  740.  
  741. }
  742.  
  743. .label {
  744. margin-bottom: 5px;
  745. margin-right: 10px;
  746. }
  747.  
  748. .additionalInfo {
  749. margin-top: 5px;
  750. background-color: green;
  751. padding: 5px
  752. }
  753.  
  754. .incrementIcons {
  755. border-top: 15px solid blue;
  756. background-color: red;
  757. }
  758.  
  759.  
  760. </script>
  761. </body>
  762. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!