slider.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  1. /*******************************
  2. Theme
  3. *******************************/
  4. .ui.slider:not(.vertical):not(.checkbox) {
  5. width: 100%;
  6. padding: 1em 0.5em;
  7. }
  8. .ui.slider:not(.checkbox) {
  9. position: relative;
  10. }
  11. .ui.slider:not(.checkbox):focus {
  12. outline: 0;
  13. }
  14. .ui.slider .inner {
  15. position: relative;
  16. z-index: 2;
  17. }
  18. .ui.slider:not(.vertical) .inner {
  19. height: 1.5em;
  20. }
  21. .ui.slider .inner:hover {
  22. cursor: auto;
  23. }
  24. .ui.slider .inner .track {
  25. position: absolute;
  26. border-radius: 4px;
  27. background-color: rgba(0, 0, 0, 0.05);
  28. }
  29. .ui.slider:not(.vertical) .inner .track {
  30. width: 100%;
  31. height: 0.4em;
  32. top: 0.55em;
  33. left: 0;
  34. }
  35. .ui.slider .inner .track-fill {
  36. position: absolute;
  37. border-radius: 4px;
  38. background-color: #1B1C1D;
  39. }
  40. .ui.slider:not(.vertical) .inner .track-fill {
  41. height: 0.4em;
  42. top: 0.55em;
  43. left: 0;
  44. }
  45. .ui.slider .inner .thumb {
  46. position: absolute;
  47. left: 0;
  48. top: 0;
  49. height: 1.5em;
  50. width: 1.5em;
  51. background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  52. background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  53. background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  54. border-radius: 100%;
  55. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  56. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  57. -webkit-transition: background 0.3s ease;
  58. transition: background 0.3s ease;
  59. }
  60. .ui.slider:not(.disabled) .inner .thumb:hover {
  61. cursor: pointer;
  62. background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  63. background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  64. background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  65. }
  66. .ui.slider:not(.disabled):focus .inner .thumb {
  67. background: #f2f2f2 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  68. background: #f2f2f2 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  69. background: #f2f2f2 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  70. }
  71. /*******************************
  72. States
  73. *******************************/
  74. /*--------------
  75. Disabled
  76. ---------------*/
  77. .ui.disabled.slider:not(.checkbox) {
  78. opacity: 0.5;
  79. }
  80. .ui.disabled.slider .inner:hover {
  81. cursor: auto;
  82. }
  83. .ui.disabled.slider .inner .track-fill {
  84. background: #ccc;
  85. }
  86. /*--------------
  87. Reversed
  88. ---------------*/
  89. .ui.reversed.slider .inner .track-fill {
  90. left: auto;
  91. right: 0;
  92. }
  93. .ui.reversed.slider:not(.vertical) .inner .thumb {
  94. left: auto;
  95. right: 0;
  96. }
  97. .ui.reversed.vertical.slider .inner .thumb {
  98. left: 0.03em;
  99. }
  100. .ui.labeled.reversed.slider > .labels .label {
  101. -webkit-transform: translate(-100%, -100%);
  102. transform: translate(-100%, -100%);
  103. }
  104. /*******************************
  105. Variations
  106. *******************************/
  107. /*--------------
  108. Vertical
  109. ---------------*/
  110. .ui.vertical.slider {
  111. height: 100%;
  112. width: 1.5em;
  113. padding: 0.5em 1em;
  114. }
  115. .ui.vertical.slider .inner {
  116. height: 100%;
  117. }
  118. .ui.vertical.slider .inner .track {
  119. height: 100%;
  120. width: 0.4em;
  121. left: 0.55em;
  122. top: 0;
  123. }
  124. .ui.vertical.slider .inner .track-fill {
  125. width: 0.4em;
  126. left: 0.55em;
  127. top: 0;
  128. }
  129. /* Vertical Reversed */
  130. .ui.vertical.reversed.slider .inner .thumb {
  131. top: auto;
  132. bottom: 0;
  133. }
  134. .ui.vertical.reversed.slider .inner .track-fill {
  135. top: auto;
  136. bottom: 0;
  137. }
  138. /*--------------
  139. Labeled
  140. ---------------*/
  141. .ui.labeled.slider > .labels {
  142. height: 1.5em;
  143. width: auto;
  144. margin: 0;
  145. padding: 0;
  146. position: absolute;
  147. top: 50%;
  148. left: 0;
  149. right: 0;
  150. }
  151. .ui.labeled.slider:not(.vertical) > .labels {
  152. -webkit-transform: translateY(-50%);
  153. transform: translateY(-50%);
  154. }
  155. .ui.labeled.slider > .labels .label {
  156. display: -webkit-inline-box;
  157. display: -ms-inline-flexbox;
  158. display: inline-flex;
  159. position: absolute;
  160. -webkit-transform: translate(-50%, -100%);
  161. transform: translate(-50%, -100%);
  162. }
  163. .ui.labeled.ticked.slider > .labels .label:after {
  164. content: ' ';
  165. height: 1.5em;
  166. width: 1px;
  167. background: #ccc;
  168. position: absolute;
  169. top: 100%;
  170. left: 50%;
  171. }
  172. .ui.labeled.ticked.slider > .labels .halftick.label:after {
  173. height: 0.75em;
  174. }
  175. /* Vertical Labels */
  176. .ui.labeled.vertical.slider > .labels {
  177. width: 1.5em;
  178. height: auto;
  179. left: 50%;
  180. top: 0;
  181. bottom: 0;
  182. -webkit-transform: translateX(-50%);
  183. transform: translateX(-50%);
  184. }
  185. .ui.labeled.vertical.slider > .labels .label {
  186. -webkit-transform: translate(-100%, -50%);
  187. transform: translate(-100%, -50%);
  188. }
  189. .ui.labeled.vertical.slider > .labels .label:after {
  190. width: 1.5em;
  191. height: 1px;
  192. left: 100%;
  193. top: 50%;
  194. }
  195. .ui.labeled.vertical.slider > .labels .halftick.label:after {
  196. width: 0.75em;
  197. height: 1px;
  198. }
  199. /* Vertical Reversed Labels */
  200. .ui.labeled.vertical.reversed.slider > .labels .label {
  201. -webkit-transform: translate(-100%, 50%);
  202. transform: translate(-100%, 50%);
  203. }
  204. /*--------------
  205. Hover
  206. ---------------*/
  207. .ui.hover.slider .inner .thumb {
  208. opacity: 0;
  209. -webkit-transition: opacity 0.2s linear;
  210. transition: opacity 0.2s linear;
  211. }
  212. .ui.hover.slider:not(.disabled):hover .inner .thumb,
  213. .ui.hover.slider:not(.disabled):focus .inner .thumb {
  214. opacity: 1;
  215. }
  216. /*--------------
  217. Inverted
  218. ---------------*/
  219. .ui.inverted.slider .inner .track-fill {
  220. background-color: #545454;
  221. }
  222. .ui.inverted.slider .inner .track {
  223. background-color: rgba(255, 255, 255, 0.08);
  224. }
  225. /*--------------
  226. Colors
  227. ---------------*/
  228. /* Standard */
  229. .ui.primary.slider .inner .track-fill {
  230. background-color: #2185D0;
  231. }
  232. .ui.primary.inverted.slider .inner .track-fill {
  233. background-color: #54C8FF;
  234. }
  235. /* Basic */
  236. .ui.primary.slider.basic .inner .thumb {
  237. background-color: #2185D0;
  238. }
  239. .ui.primary.slider.basic .inner .thumb:hover,
  240. .ui.primary.slider.basic:focus .inner .thumb {
  241. background-color: #1678c2;
  242. }
  243. /* Basic Inverted */
  244. .ui.primary.inverted.slider.basic .inner .thumb {
  245. background-color: #54C8FF;
  246. }
  247. .ui.primary.inverted.slider.basic .inner .thumb:hover,
  248. .ui.primary.inverted.slider.basic:focus .inner .thumb {
  249. background-color: #21b8ff;
  250. }
  251. /* Standard */
  252. .ui.secondary.slider .inner .track-fill {
  253. background-color: #1B1C1D;
  254. }
  255. .ui.secondary.inverted.slider .inner .track-fill {
  256. background-color: #545454;
  257. }
  258. /* Basic */
  259. .ui.secondary.slider.basic .inner .thumb {
  260. background-color: #1B1C1D;
  261. }
  262. .ui.secondary.slider.basic .inner .thumb:hover,
  263. .ui.secondary.slider.basic:focus .inner .thumb {
  264. background-color: #27292a;
  265. }
  266. /* Basic Inverted */
  267. .ui.secondary.inverted.slider.basic .inner .thumb {
  268. background-color: #545454;
  269. }
  270. .ui.secondary.inverted.slider.basic .inner .thumb:hover,
  271. .ui.secondary.inverted.slider.basic:focus .inner .thumb {
  272. background-color: #6e6e6e;
  273. }
  274. /* Standard */
  275. .ui.red.slider .inner .track-fill {
  276. background-color: #DB2828;
  277. }
  278. .ui.red.inverted.slider .inner .track-fill {
  279. background-color: #FF695E;
  280. }
  281. /* Basic */
  282. .ui.red.slider.basic .inner .thumb {
  283. background-color: #DB2828;
  284. }
  285. .ui.red.slider.basic .inner .thumb:hover,
  286. .ui.red.slider.basic:focus .inner .thumb {
  287. background-color: #d01919;
  288. }
  289. /* Basic Inverted */
  290. .ui.red.inverted.slider.basic .inner .thumb {
  291. background-color: #FF695E;
  292. }
  293. .ui.red.inverted.slider.basic .inner .thumb:hover,
  294. .ui.red.inverted.slider.basic:focus .inner .thumb {
  295. background-color: #ff392b;
  296. }
  297. /* Standard */
  298. .ui.orange.slider .inner .track-fill {
  299. background-color: #F2711C;
  300. }
  301. .ui.orange.inverted.slider .inner .track-fill {
  302. background-color: #FF851B;
  303. }
  304. /* Basic */
  305. .ui.orange.slider.basic .inner .thumb {
  306. background-color: #F2711C;
  307. }
  308. .ui.orange.slider.basic .inner .thumb:hover,
  309. .ui.orange.slider.basic:focus .inner .thumb {
  310. background-color: #f26202;
  311. }
  312. /* Basic Inverted */
  313. .ui.orange.inverted.slider.basic .inner .thumb {
  314. background-color: #FF851B;
  315. }
  316. .ui.orange.inverted.slider.basic .inner .thumb:hover,
  317. .ui.orange.inverted.slider.basic:focus .inner .thumb {
  318. background-color: #e76b00;
  319. }
  320. /* Standard */
  321. .ui.yellow.slider .inner .track-fill {
  322. background-color: #FBBD08;
  323. }
  324. .ui.yellow.inverted.slider .inner .track-fill {
  325. background-color: #FFE21F;
  326. }
  327. /* Basic */
  328. .ui.yellow.slider.basic .inner .thumb {
  329. background-color: #FBBD08;
  330. }
  331. .ui.yellow.slider.basic .inner .thumb:hover,
  332. .ui.yellow.slider.basic:focus .inner .thumb {
  333. background-color: #eaae00;
  334. }
  335. /* Basic Inverted */
  336. .ui.yellow.inverted.slider.basic .inner .thumb {
  337. background-color: #FFE21F;
  338. }
  339. .ui.yellow.inverted.slider.basic .inner .thumb:hover,
  340. .ui.yellow.inverted.slider.basic:focus .inner .thumb {
  341. background-color: #ebcd00;
  342. }
  343. /* Standard */
  344. .ui.olive.slider .inner .track-fill {
  345. background-color: #B5CC18;
  346. }
  347. .ui.olive.inverted.slider .inner .track-fill {
  348. background-color: #D9E778;
  349. }
  350. /* Basic */
  351. .ui.olive.slider.basic .inner .thumb {
  352. background-color: #B5CC18;
  353. }
  354. .ui.olive.slider.basic .inner .thumb:hover,
  355. .ui.olive.slider.basic:focus .inner .thumb {
  356. background-color: #a7bd0d;
  357. }
  358. /* Basic Inverted */
  359. .ui.olive.inverted.slider.basic .inner .thumb {
  360. background-color: #D9E778;
  361. }
  362. .ui.olive.inverted.slider.basic .inner .thumb:hover,
  363. .ui.olive.inverted.slider.basic:focus .inner .thumb {
  364. background-color: #d2e745;
  365. }
  366. /* Standard */
  367. .ui.green.slider .inner .track-fill {
  368. background-color: #21BA45;
  369. }
  370. .ui.green.inverted.slider .inner .track-fill {
  371. background-color: #2ECC40;
  372. }
  373. /* Basic */
  374. .ui.green.slider.basic .inner .thumb {
  375. background-color: #21BA45;
  376. }
  377. .ui.green.slider.basic .inner .thumb:hover,
  378. .ui.green.slider.basic:focus .inner .thumb {
  379. background-color: #16ab39;
  380. }
  381. /* Basic Inverted */
  382. .ui.green.inverted.slider.basic .inner .thumb {
  383. background-color: #2ECC40;
  384. }
  385. .ui.green.inverted.slider.basic .inner .thumb:hover,
  386. .ui.green.inverted.slider.basic:focus .inner .thumb {
  387. background-color: #1ea92e;
  388. }
  389. /* Standard */
  390. .ui.teal.slider .inner .track-fill {
  391. background-color: #00B5AD;
  392. }
  393. .ui.teal.inverted.slider .inner .track-fill {
  394. background-color: #6DFFFF;
  395. }
  396. /* Basic */
  397. .ui.teal.slider.basic .inner .thumb {
  398. background-color: #00B5AD;
  399. }
  400. .ui.teal.slider.basic .inner .thumb:hover,
  401. .ui.teal.slider.basic:focus .inner .thumb {
  402. background-color: #009c95;
  403. }
  404. /* Basic Inverted */
  405. .ui.teal.inverted.slider.basic .inner .thumb {
  406. background-color: #6DFFFF;
  407. }
  408. .ui.teal.inverted.slider.basic .inner .thumb:hover,
  409. .ui.teal.inverted.slider.basic:focus .inner .thumb {
  410. background-color: #3affff;
  411. }
  412. /* Standard */
  413. .ui.blue.slider .inner .track-fill {
  414. background-color: #2185D0;
  415. }
  416. .ui.blue.inverted.slider .inner .track-fill {
  417. background-color: #54C8FF;
  418. }
  419. /* Basic */
  420. .ui.blue.slider.basic .inner .thumb {
  421. background-color: #2185D0;
  422. }
  423. .ui.blue.slider.basic .inner .thumb:hover,
  424. .ui.blue.slider.basic:focus .inner .thumb {
  425. background-color: #1678c2;
  426. }
  427. /* Basic Inverted */
  428. .ui.blue.inverted.slider.basic .inner .thumb {
  429. background-color: #54C8FF;
  430. }
  431. .ui.blue.inverted.slider.basic .inner .thumb:hover,
  432. .ui.blue.inverted.slider.basic:focus .inner .thumb {
  433. background-color: #21b8ff;
  434. }
  435. /* Standard */
  436. .ui.violet.slider .inner .track-fill {
  437. background-color: #6435C9;
  438. }
  439. .ui.violet.inverted.slider .inner .track-fill {
  440. background-color: #A291FB;
  441. }
  442. /* Basic */
  443. .ui.violet.slider.basic .inner .thumb {
  444. background-color: #6435C9;
  445. }
  446. .ui.violet.slider.basic .inner .thumb:hover,
  447. .ui.violet.slider.basic:focus .inner .thumb {
  448. background-color: #5829bb;
  449. }
  450. /* Basic Inverted */
  451. .ui.violet.inverted.slider.basic .inner .thumb {
  452. background-color: #A291FB;
  453. }
  454. .ui.violet.inverted.slider.basic .inner .thumb:hover,
  455. .ui.violet.inverted.slider.basic:focus .inner .thumb {
  456. background-color: #745aff;
  457. }
  458. /* Standard */
  459. .ui.purple.slider .inner .track-fill {
  460. background-color: #A333C8;
  461. }
  462. .ui.purple.inverted.slider .inner .track-fill {
  463. background-color: #DC73FF;
  464. }
  465. /* Basic */
  466. .ui.purple.slider.basic .inner .thumb {
  467. background-color: #A333C8;
  468. }
  469. .ui.purple.slider.basic .inner .thumb:hover,
  470. .ui.purple.slider.basic:focus .inner .thumb {
  471. background-color: #9627ba;
  472. }
  473. /* Basic Inverted */
  474. .ui.purple.inverted.slider.basic .inner .thumb {
  475. background-color: #DC73FF;
  476. }
  477. .ui.purple.inverted.slider.basic .inner .thumb:hover,
  478. .ui.purple.inverted.slider.basic:focus .inner .thumb {
  479. background-color: #cf40ff;
  480. }
  481. /* Standard */
  482. .ui.pink.slider .inner .track-fill {
  483. background-color: #E03997;
  484. }
  485. .ui.pink.inverted.slider .inner .track-fill {
  486. background-color: #FF8EDF;
  487. }
  488. /* Basic */
  489. .ui.pink.slider.basic .inner .thumb {
  490. background-color: #E03997;
  491. }
  492. .ui.pink.slider.basic .inner .thumb:hover,
  493. .ui.pink.slider.basic:focus .inner .thumb {
  494. background-color: #e61a8d;
  495. }
  496. /* Basic Inverted */
  497. .ui.pink.inverted.slider.basic .inner .thumb {
  498. background-color: #FF8EDF;
  499. }
  500. .ui.pink.inverted.slider.basic .inner .thumb:hover,
  501. .ui.pink.inverted.slider.basic:focus .inner .thumb {
  502. background-color: #ff5bd1;
  503. }
  504. /* Standard */
  505. .ui.brown.slider .inner .track-fill {
  506. background-color: #A5673F;
  507. }
  508. .ui.brown.inverted.slider .inner .track-fill {
  509. background-color: #D67C1C;
  510. }
  511. /* Basic */
  512. .ui.brown.slider.basic .inner .thumb {
  513. background-color: #A5673F;
  514. }
  515. .ui.brown.slider.basic .inner .thumb:hover,
  516. .ui.brown.slider.basic:focus .inner .thumb {
  517. background-color: #975b33;
  518. }
  519. /* Basic Inverted */
  520. .ui.brown.inverted.slider.basic .inner .thumb {
  521. background-color: #D67C1C;
  522. }
  523. .ui.brown.inverted.slider.basic .inner .thumb:hover,
  524. .ui.brown.inverted.slider.basic:focus .inner .thumb {
  525. background-color: #b0620f;
  526. }
  527. /* Standard */
  528. .ui.grey.slider .inner .track-fill {
  529. background-color: #767676;
  530. }
  531. .ui.grey.inverted.slider .inner .track-fill {
  532. background-color: #DCDDDE;
  533. }
  534. /* Basic */
  535. .ui.grey.slider.basic .inner .thumb {
  536. background-color: #767676;
  537. }
  538. .ui.grey.slider.basic .inner .thumb:hover,
  539. .ui.grey.slider.basic:focus .inner .thumb {
  540. background-color: #838383;
  541. }
  542. /* Basic Inverted */
  543. .ui.grey.inverted.slider.basic .inner .thumb {
  544. background-color: #DCDDDE;
  545. }
  546. .ui.grey.inverted.slider.basic .inner .thumb:hover,
  547. .ui.grey.inverted.slider.basic:focus .inner .thumb {
  548. background-color: #c2c4c5;
  549. }
  550. /* Standard */
  551. .ui.black.slider .inner .track-fill {
  552. background-color: #1B1C1D;
  553. }
  554. .ui.black.inverted.slider .inner .track-fill {
  555. background-color: #545454;
  556. }
  557. /* Basic */
  558. .ui.black.slider.basic .inner .thumb {
  559. background-color: #1B1C1D;
  560. }
  561. .ui.black.slider.basic .inner .thumb:hover,
  562. .ui.black.slider.basic:focus .inner .thumb {
  563. background-color: #27292a;
  564. }
  565. /* Basic Inverted */
  566. .ui.black.inverted.slider.basic .inner .thumb {
  567. background-color: #545454;
  568. }
  569. .ui.black.inverted.slider.basic .inner .thumb:hover,
  570. .ui.black.inverted.slider.basic:focus .inner .thumb {
  571. background-color: #000000;
  572. }
  573. /*--------------
  574. Basic
  575. ---------------*/
  576. /* Standard */
  577. .ui.slider.basic .inner .thumb {
  578. background-color: #1B1C1D;
  579. }
  580. .ui.slider.basic .inner .thumb:hover,
  581. .ui.slider.basic:focus .inner .thumb {
  582. background-color: #27292a;
  583. }
  584. /*--------------
  585. Basic Inverted
  586. ---------------*/
  587. /* Standard */
  588. .ui.inverted.slider.basic .inner .thumb {
  589. background-color: #545454;
  590. }
  591. .ui.inverted.slider.basic .inner .thumb:hover,
  592. .ui.inverted.slider.basic:focus .inner .thumb {
  593. background-color: #000000;
  594. }
  595. /*--------------
  596. Sizing
  597. ---------------*/
  598. .ui.slider.small .inner .thumb {
  599. height: 1em;
  600. width: 1em;
  601. }
  602. .ui.slider.small:not(.vertical) .inner {
  603. height: 1em;
  604. }
  605. .ui.slider.small:not(.vertical) .inner .track,
  606. .ui.slider.small:not(.vertical) .inner .track-fill {
  607. height: 0.3em;
  608. top: 0.35em;
  609. }
  610. .ui.small.labeled.slider:not(.vertical) > .labels,
  611. .ui.small.labeled.slider:not(.vertical) > .labels .label:after {
  612. height: 1em;
  613. }
  614. .ui.small.labeled.slider:not(.vertical) > .labels .halftick.label:after {
  615. height: 0.5em;
  616. }
  617. /* Small Vertical */
  618. .ui.slider.small.vertical .inner {
  619. width: 1em;
  620. }
  621. .ui.slider.small.vertical .inner .track,
  622. .ui.slider.small.vertical .inner .track-fill {
  623. width: 0.3em;
  624. left: 0.35em;
  625. }
  626. .ui.small.labeled.vertical.slider > .labels,
  627. .ui.small.labeled.vertical.slider > .labels .label:after {
  628. width: 1em;
  629. }
  630. .ui.small.labeled.vertical.slider > .labels .halftick.label:after {
  631. width: 0.5em;
  632. }
  633. .ui.slider.large .inner .thumb {
  634. height: 2em;
  635. width: 2em;
  636. }
  637. .ui.slider.large:not(.vertical) .inner {
  638. height: 2em;
  639. }
  640. .ui.slider.large:not(.vertical) .inner .track,
  641. .ui.slider.large:not(.vertical) .inner .track-fill {
  642. height: 0.5em;
  643. top: 0.75em;
  644. }
  645. .ui.large.labeled.slider:not(.vertical) > .labels,
  646. .ui.large.labeled.slider:not(.vertical) > .labels .label:after {
  647. height: 2em;
  648. }
  649. .ui.large.labeled.slider:not(.vertical) > .labels .halftick.label:after {
  650. height: 1em;
  651. }
  652. /* Small Vertical */
  653. .ui.slider.large.vertical .inner {
  654. width: 2em;
  655. }
  656. .ui.slider.large.vertical .inner .track,
  657. .ui.slider.large.vertical .inner .track-fill {
  658. width: 0.5em;
  659. left: 0.75em;
  660. }
  661. .ui.large.labeled.vertical.slider > .labels,
  662. .ui.large.labeled.vertical.slider > .labels .label:after {
  663. width: 2em;
  664. }
  665. .ui.large.labeled.vertical.slider > .labels .halftick.label:after {
  666. width: 1em;
  667. }
  668. .ui.slider.big .inner .thumb {
  669. height: 2.5em;
  670. width: 2.5em;
  671. }
  672. .ui.slider.big:not(.vertical) .inner {
  673. height: 2.5em;
  674. }
  675. .ui.slider.big:not(.vertical) .inner .track,
  676. .ui.slider.big:not(.vertical) .inner .track-fill {
  677. height: 0.6em;
  678. top: 0.95em;
  679. }
  680. .ui.big.labeled.slider:not(.vertical) > .labels,
  681. .ui.big.labeled.slider:not(.vertical) > .labels .label:after {
  682. height: 2.5em;
  683. }
  684. .ui.big.labeled.slider:not(.vertical) > .labels .halftick.label:after {
  685. height: 1.25em;
  686. }
  687. /* Small Vertical */
  688. .ui.slider.big.vertical .inner {
  689. width: 2.5em;
  690. }
  691. .ui.slider.big.vertical .inner .track,
  692. .ui.slider.big.vertical .inner .track-fill {
  693. width: 0.6em;
  694. left: 0.95em;
  695. }
  696. .ui.big.labeled.vertical.slider > .labels,
  697. .ui.big.labeled.vertical.slider > .labels .label:after {
  698. width: 2.5em;
  699. }
  700. .ui.big.labeled.vertical.slider > .labels .halftick.label:after {
  701. width: 1.25em;
  702. }
  703. /*******************************
  704. Slider Overrides
  705. *******************************/