API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 16th, 2019
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5. <meta name="viewport" content= "width=device-width, initial-scale=1.0">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. </head>
  8. <style type="">
  9. @charset "UTF-8";
  10. /*
  11. * CSS TOGGLE SWITCH
  12. *
  13. * Ionuț Colceriu - ghinda.net
  14. * https://github.com/ghinda/css-toggle-switch
  15. *
  16. */
  17. /* supported values are px, rem-calc, em-calc
  18. */
  19. /* imports
  20. */
  21. /* Functions
  22. */
  23. /* Shared
  24. */
  25. /* Hide by default
  26. */
  27. .switch-toggle a,
  28. .switch-light span span {
  29. display: none; }
  30.  
  31. /* We can't test for a specific feature,
  32. * so we only target browsers with support for media queries.
  33. */
  34. @media only screen {
  35. /* Checkbox
  36. */
  37. .switch-light {
  38. position: relative;
  39. display: block;
  40. /* simulate default browser focus outlines on the switch,
  41. * when the inputs are focused.
  42. */ }
  43. .switch-light::after {
  44. clear: both;
  45. content: '';
  46. display: table; }
  47. .switch-light *,
  48. .switch-light *:before,
  49. .switch-light *:after {
  50. box-sizing: border-box; }
  51. .switch-light a {
  52. display: block;
  53. transition: all 0.2s ease-out; }
  54. .switch-light label,
  55. .switch-light > span {
  56. /* breathing room for bootstrap/foundation classes.
  57. */
  58. line-height: 2em; }
  59. .switch-light input:focus ~ span a,
  60. .switch-light input:focus + label {
  61. outline-width: 2px;
  62. outline-style: solid;
  63. outline-color: Highlight;
  64. /* Chrome/Opera gets its native focus styles.
  65. */ } }
  66. @media only screen and (-webkit-min-device-pixel-ratio: 0) {
  67. .switch-light input:focus ~ span a,
  68. .switch-light input:focus + label {
  69. outline-color: -webkit-focus-ring-color;
  70. outline-style: auto; } }
  71.  
  72. @media only screen {
  73. /* don't hide the input from screen-readers and keyboard access
  74. */
  75. .switch-light input {
  76. position: absolute;
  77. opacity: 0;
  78. z-index: 3; }
  79. .switch-light input:checked ~ span a {
  80. right: 0%; }
  81. /* inherit from label
  82. */
  83. .switch-light strong {
  84. font-weight: inherit; }
  85. .switch-light > span {
  86. position: relative;
  87. overflow: hidden;
  88. display: block;
  89. min-height: 2em;
  90. /* overwrite 3rd party classes padding
  91. * eg. bootstrap .alert
  92. */
  93. padding: 0;
  94. text-align: left; }
  95. .switch-light span span {
  96. position: relative;
  97. z-index: 2;
  98. display: block;
  99. float: left;
  100. width: 50%;
  101. text-align: center;
  102. user-select: none; }
  103. .switch-light a {
  104. position: absolute;
  105. right: 50%;
  106. top: 0;
  107. z-index: 1;
  108. display: block;
  109. width: 50%;
  110. height: 100%;
  111. padding: 0; }
  112. /* bootstrap 4 tweaks
  113. */
  114. .switch-light.row {
  115. display: flex; }
  116. .switch-light .alert-light {
  117. color: #333; }
  118. /* Radio Switch
  119. */
  120. .switch-toggle {
  121. position: relative;
  122. display: block;
  123. /* simulate default browser focus outlines on the switch,
  124. * when the inputs are focused.
  125. */
  126. /* For callout panels in foundation
  127. */
  128. padding: 0 !important;
  129. /* 2 items
  130. */
  131. /* 3 items
  132. */
  133. /* 4 items
  134. */
  135. /* 5 items
  136. */
  137. /* 6 items
  138. */ }
  139. .switch-toggle::after {
  140. clear: both;
  141. content: '';
  142. display: table; }
  143. .switch-toggle *,
  144. .switch-toggle *:before,
  145. .switch-toggle *:after {
  146. box-sizing: border-box; }
  147. .switch-toggle a {
  148. display: block;
  149. transition: all 0.2s ease-out; }
  150. .switch-toggle label,
  151. .switch-toggle > span {
  152. /* breathing room for bootstrap/foundation classes.
  153. */
  154. line-height: 2em; }
  155. .switch-toggle input:focus ~ span a,
  156. .switch-toggle input:focus + label {
  157. outline-width: 2px;
  158. outline-style: solid;
  159. outline-color: Highlight;
  160. /* Chrome/Opera gets its native focus styles.
  161. */ } }
  162. @media only screen and (-webkit-min-device-pixel-ratio: 0) {
  163. .switch-toggle input:focus ~ span a,
  164. .switch-toggle input:focus + label {
  165. outline-color: -webkit-focus-ring-color;
  166. outline-style: auto; } }
  167.  
  168. @media only screen {
  169. .switch-toggle input {
  170. position: absolute;
  171. left: 0;
  172. opacity: 0; }
  173. .switch-toggle input + label {
  174. position: relative;
  175. z-index: 2;
  176. display: block;
  177. float: left;
  178. padding: 0 0.5em;
  179. margin: 0;
  180. text-align: center; }
  181. .switch-toggle a {
  182. position: absolute;
  183. top: 0;
  184. left: 0;
  185. padding: 0;
  186. z-index: 1;
  187. width: 10px;
  188. height: 100%; }
  189. .switch-toggle label:nth-child(2):nth-last-child(4),
  190. .switch-toggle label:nth-child(2):nth-last-child(4) ~ label,
  191. .switch-toggle label:nth-child(2):nth-last-child(4) ~ a {
  192. width: 50%; }
  193. .switch-toggle label:nth-child(2):nth-last-child(4) ~ input:checked:nth-child(3) + label ~ a {
  194. left: 50%; }
  195. .switch-toggle label:nth-child(2):nth-last-child(6),
  196. .switch-toggle label:nth-child(2):nth-last-child(6) ~ label,
  197. .switch-toggle label:nth-child(2):nth-last-child(6) ~ a {
  198. width: 33.33%; }
  199. .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(3) + label ~ a {
  200. left: 33.33%; }
  201. .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(5) + label ~ a {
  202. left: 66.66%; }
  203. .switch-toggle label:nth-child(2):nth-last-child(8),
  204. .switch-toggle label:nth-child(2):nth-last-child(8) ~ label,
  205. .switch-toggle label:nth-child(2):nth-last-child(8) ~ a {
  206. width: 25%; }
  207. .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(3) + label ~ a {
  208. left: 25%; }
  209. .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(5) + label ~ a {
  210. left: 50%; }
  211. .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(7) + label ~ a {
  212. left: 75%; }
  213. .switch-toggle label:nth-child(2):nth-last-child(10),
  214. .switch-toggle label:nth-child(2):nth-last-child(10) ~ label,
  215. .switch-toggle label:nth-child(2):nth-last-child(10) ~ a {
  216. width: 20%; }
  217. .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(3) + label ~ a {
  218. left: 20%; }
  219. .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(5) + label ~ a {
  220. left: 40%; }
  221. .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(7) + label ~ a {
  222. left: 60%; }
  223. .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(9) + label ~ a {
  224. left: 80%; }
  225. .switch-toggle label:nth-child(2):nth-last-child(12),
  226. .switch-toggle label:nth-child(2):nth-last-child(12) ~ label,
  227. .switch-toggle label:nth-child(2):nth-last-child(12) ~ a {
  228. width: 16.6%; }
  229. .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(3) + label ~ a {
  230. left: 16.6%; }
  231. .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(5) + label ~ a {
  232. left: 33.2%; }
  233. .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(7) + label ~ a {
  234. left: 49.8%; }
  235. .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(9) + label ~ a {
  236. left: 66.4%; }
  237. .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(11) + label ~ a {
  238. left: 83%; }
  239. /* Candy Theme
  240. * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
  241. * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
  242. */
  243. .switch-toggle.switch-candy,
  244. .switch-light.switch-candy > span {
  245. background-color: #2d3035;
  246. border-radius: 3px;
  247. box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2); }
  248. .switch-light.switch-candy span span,
  249. .switch-light.switch-candy input:checked ~ span span:first-child,
  250. .switch-toggle.switch-candy label {
  251. color: #fff;
  252. font-weight: bold;
  253. text-align: center;
  254. text-shadow: 1px 1px 1px #191b1e; }
  255. .switch-light.switch-candy input ~ span span:first-child,
  256. .switch-light.switch-candy input:checked ~ span span:nth-child(2),
  257. .switch-candy input:checked + label {
  258. color: #333;
  259. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
  260. .switch-candy a {
  261. border: 1px solid #333;
  262. border-radius: 3px;
  263. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  264. background-color: #70c66b;
  265. background-image: linear-gradient(rgba(255, 255, 255, 0.2), transparent); }
  266. .switch-candy-blue a {
  267. background-color: #38a3d4; }
  268. .switch-candy-yellow a {
  269. background-color: #f5e560; }
  270. /* iOS Theme
  271. */
  272. .switch-ios.switch-light span span {
  273. color: #888b92; }
  274. .switch-ios.switch-light a {
  275. left: 0;
  276. top: 0;
  277. width: 2em;
  278. height: 2em;
  279. background-color: #fff;
  280. border-radius: 100%;
  281. border: 0.25em solid #D8D9DB;
  282. transition: all .2s ease-out; }
  283. .switch-ios.switch-light > span {
  284. display: block;
  285. width: 100%;
  286. height: 2em;
  287. background-color: #D8D9DB;
  288. border-radius: 1.75em;
  289. transition: all .4s ease-out; }
  290. .switch-ios.switch-light > span span {
  291. position: absolute;
  292. top: 0;
  293. left: 0;
  294. width: 100%;
  295. opacity: 0;
  296. line-height: 1.875em;
  297. vertical-align: middle;
  298. transition: all .2s ease-out; }
  299. .switch-ios.switch-light > span span:first-of-type {
  300. opacity: 1;
  301. padding-left: 1.875em; }
  302. .switch-ios.switch-light > span span:last-of-type {
  303. padding-right: 1.875em; }
  304. .switch-ios.switch-light input:checked ~ span a {
  305. left: 100%;
  306. border-color: #4BD865;
  307. margin-left: -2em; }
  308. .switch-ios.switch-light input:checked ~ span {
  309. border-color: #4BD865;
  310. box-shadow: inset 0 0 0 30px #4BD865; }
  311. .switch-ios.switch-light input:checked ~ span span:first-of-type {
  312. opacity: 0; }
  313. .switch-ios.switch-light input:checked ~ span span:last-of-type {
  314. opacity: 1;
  315. color: #fff; }
  316. .switch-ios.switch-toggle {
  317. background-color: #D8D9DB;
  318. border-radius: 30px;
  319. box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; }
  320. .switch-ios.switch-toggle a {
  321. background-color: #4BD865;
  322. border: 0.125em solid #D8D9DB;
  323. border-radius: 1.75em;
  324. transition: all 0.12s ease-out; }
  325. .switch-ios.switch-toggle label {
  326. height: 2.4em;
  327. color: #888b92;
  328. line-height: 2.4em;
  329. vertical-align: middle; }
  330. .switch-ios input:checked + label {
  331. color: #3e4043; }
  332. /* Holo Theme
  333. */
  334. .switch-toggle.switch-holo,
  335. .switch-light.switch-holo > span {
  336. background-color: #464747;
  337. border-radius: 1px;
  338. box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
  339. color: #fff;
  340. text-transform: uppercase; }
  341. .switch-holo label {
  342. color: #fff; }
  343. .switch-holo > span span {
  344. opacity: 0;
  345. transition: all 0.1s; }
  346. .switch-holo > span span:first-of-type {
  347. opacity: 1; }
  348. .switch-holo > span span,
  349. .switch-holo label {
  350. font-size: 85%;
  351. line-height: 2.15625em; }
  352. .switch-holo a {
  353. background-color: #666;
  354. border-radius: 1px;
  355. box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0, inset rgba(0, 0, 0, 0.3) 0 -1px 0; }
  356. /* Selected ON switch-light
  357. */
  358. .switch-holo.switch-light input:checked ~ span a {
  359. background-color: #0E88B1; }
  360. .switch-holo.switch-light input:checked ~ span span:first-of-type {
  361. opacity: 0; }
  362. .switch-holo.switch-light input:checked ~ span span:last-of-type {
  363. opacity: 1; }
  364. /* Material Theme
  365. */
  366. /* switch-light
  367. */
  368. .switch-light.switch-material a {
  369. top: -0.1875em;
  370. width: 1.75em;
  371. height: 1.75em;
  372. border-radius: 50%;
  373. background: #fafafa;
  374. box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.14), 0 0.1875em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0.125em 0.25em 0 rgba(0, 0, 0, 0.12);
  375. transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
  376. .switch-material.switch-light {
  377. overflow: visible; }
  378. .switch-material.switch-light::after {
  379. clear: both;
  380. content: '';
  381. display: table; }
  382. .switch-material.switch-light > span {
  383. overflow: visible;
  384. position: relative;
  385. top: 0.1875em;
  386. width: 3.25em;
  387. height: 1.5em;
  388. min-height: auto;
  389. border-radius: 1em;
  390. background: rgba(0, 0, 0, 0.26); }
  391. .switch-material.switch-light span span {
  392. position: absolute;
  393. clip: rect(0 0 0 0); }
  394. .switch-material.switch-light input:checked ~ span a {
  395. right: 0;
  396. background: #3f51b5;
  397. box-shadow: 0 0.1875em 0.25em 0 rgba(0, 0, 0, 0.14), 0 0.1875em 0.1875em -0.125em rgba(0, 0, 0, 0.2), 0 0.0625em 0.375em 0 rgba(0, 0, 0, 0.12); }
  398. .switch-material.switch-light input:checked ~ span {
  399. background: rgba(63, 81, 181, 0.5); }
  400. /* switch-toggle
  401. */
  402. .switch-toggle.switch-material {
  403. overflow: visible; }
  404. .switch-toggle.switch-material::after {
  405. clear: both;
  406. content: '';
  407. display: table; }
  408. .switch-toggle.switch-material a {
  409. top: 48%;
  410. width: 0.375em !important;
  411. height: 0.375em;
  412. margin-left: 0.25em;
  413. background: #3f51b5;
  414. border-radius: 100%;
  415. transform: translateY(-50%);
  416. transition: transform .4s ease-in; }
  417. .switch-toggle.switch-material label {
  418. color: rgba(0, 0, 0, 0.54);
  419. font-size: 1em; }
  420. .switch-toggle.switch-material label:before {
  421. content: '';
  422. position: absolute;
  423. top: 48%;
  424. left: 0;
  425. display: block;
  426. width: 0.875em;
  427. height: 0.875em;
  428. border-radius: 100%;
  429. border: 0.125em solid rgba(0, 0, 0, 0.54);
  430. transform: translateY(-50%); }
  431. .switch-toggle.switch-material input:checked + label:before {
  432. border-color: #3f51b5; }
  433. /* ripple
  434. */
  435. .switch-light.switch-material > span:before,
  436. .switch-light.switch-material > span:after,
  437. .switch-toggle.switch-material label:after {
  438. content: '';
  439. position: absolute;
  440. top: 0;
  441. left: 0;
  442. z-index: 3;
  443. display: block;
  444. width: 4em;
  445. height: 4em;
  446. border-radius: 100%;
  447. background: #3f51b5;
  448. opacity: .4;
  449. margin-left: -1.25em;
  450. margin-top: -1.25em;
  451. transform: scale(0);
  452. transition: opacity .4s ease-in; }
  453. .switch-light.switch-material > span:after {
  454. left: auto;
  455. right: 0;
  456. margin-left: 0;
  457. margin-right: -1.25em; }
  458. .switch-toggle.switch-material label:after {
  459. width: 3.25em;
  460. height: 3.25em;
  461. margin-top: -0.75em; }
  462. @keyframes materialRipple {
  463. 0% {
  464. transform: scale(0); }
  465. 20% {
  466. transform: scale(1); }
  467. 100% {
  468. opacity: 0;
  469. transform: scale(1); } }
  470. .switch-material.switch-light input:not(:checked) ~ span:after,
  471. .switch-material.switch-light input:checked ~ span:before,
  472. .switch-toggle.switch-material input:checked + label:after {
  473. animation: materialRipple .4s ease-in; }
  474. /* trick to prevent the default checked ripple animation from showing
  475. * when the page loads.
  476. * the ripples are hidden by default, and shown only when the input is focused.
  477. */
  478. .switch-light.switch-material.switch-light input ~ span:before,
  479. .switch-light.switch-material.switch-light input ~ span:after,
  480. .switch-material.switch-toggle input + label:after {
  481. visibility: hidden; }
  482. .switch-light.switch-material.switch-light input:focus:checked ~ span:before,
  483. .switch-light.switch-material.switch-light input:focus:not(:checked) ~ span:after,
  484. .switch-material.switch-toggle input:focus:checked + label:after {
  485. visibility: visible; } }
  486.  
  487. /* Bugfix for older Webkit, including mobile Webkit. Adapted from
  488. * http://css-tricks.com/webkit-sibling-bug/
  489. */
  490. @media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 80em) {
  491. .switch-light,
  492. .switch-toggle {
  493. -webkit-animation: webkitSiblingBugfix infinite 1s; } }
  494.  
  495. @-webkit-keyframes webkitSiblingBugfix {
  496. from {
  497. -webkit-transform: translate3d(0, 0, 0); }
  498. to {
  499. -webkit-transform: translate3d(0, 0, 0); } }
  500.  
  501. /*# sourceMappingURL=toggle-switch.css.map */
  502. </style>
  503. <body>
  504. <style type="">
  505. .switch-toggle.switch-candy, .switch-light.switch-candy > span{
  506. background-color:#D0D0D0;
  507. box-shadow: none;
  508. }
  509. </style>
  510. <h1>This is a Heading</h1>
  511. <p>This is a paragraph.</p>
  512.  
  513. <div class="switch-toggle switch-candy">
  514. <input id="week" name="view" type="radio" checked>
  515. <label for="week" class="t-label">
  516. <div class="bank-content" style="display: flex; overflow: hidden;
  517. padding: 15px 0;">
  518. <img src="https://i.imgur.com/7JdCIcr.png"
  519. style="width: 50px; height: 50px; margin: 0 9px;"><div class="bank-text">ธนาคารไทยพาณิชย์</div>
  520. </div>
  521.  
  522. </label>
  523.  
  524. <input id="month" name="view" type="radio">
  525. <label for="month" class="t-label"> <div class="bank-content" style="display: flex; overflow: hidden;
  526. padding: 15px 0;">
  527. <img src="https://i.imgur.com/7JdCIcr.png"
  528. style="width: 50px; height: 50px; margin: 0 9px;"><div class="bank-text">ธนาคารไทยพาณิชย์</div>
  529. </div></label>
  530.  
  531. <input id="day" name="view" type="radio">
  532. <label for="day" class="t-label"> <div class="bank-content" style="display: flex; overflow: hidden;
  533. padding: 15px 0;">
  534. <img src="https://i.imgur.com/7JdCIcr.png"
  535. style="width: 50px; height: 50px; margin: 0 9px;"><div class="bank-text">ธนาคารไทยพาณิชย์</div>
  536. </div></label>
  537.  
  538. <a id="sweet-to"></a>
  539. </div>
  540.  
  541. </body>
  542. <script
  543. src="https://code.jquery.com/jquery-3.4.1.min.js"
  544. integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  545. crossorigin="anonymous"></script>
  546. <script type="">
  547. $( document ).ready(function() {
  548. renderJa()
  549. $('.t-label').on('click', function(){
  550. console.log($('input[name="view"]:checked'))
  551.  
  552. $(this).toggleClass('ku-mow')
  553. renderJa()
  554. });
  555. function renderJa(){
  556. console.log('fdfs');
  557. }
  558. });
  559. </script>
  560. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!