You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1140 lines
22 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. .ui.button {
  2. cursor: pointer;
  3. display: inline-block;
  4. vertical-align: middle;
  5. min-height: 1em;
  6. outline: 0;
  7. border: 0;
  8. background-color: #FAFAFA;
  9. color: gray;
  10. margin: 0;
  11. padding: .8em 1.5em .875em;
  12. font-size: 1rem;
  13. text-transform: uppercase;
  14. line-height: 1;
  15. font-weight: 700;
  16. font-style: normal;
  17. text-align: center;
  18. text-decoration: none;
  19. background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.05));
  20. background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.05));
  21. border-radius: .25em;
  22. box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset,0 -.133em 0 0 rgba(0,0,0,.1) inset;
  23. -webkit-user-select: none;
  24. -moz-user-select: none;
  25. -ms-user-select: none;
  26. user-select: none;
  27. -moz-box-sizing: border-box;
  28. -ms-box-sizing: border-box;
  29. box-sizing: border-box;
  30. -webkit-tap-highlight-color: rgba(0,0,0,0);
  31. -webkit-transition: opacity .25s ease,background-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease;
  32. transition: opacity .25s ease,background-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease;
  33. }
  34. .ui.buttons .active.button,
  35. .ui.active.button {
  36. background-color: #EAEAEA;
  37. background-image: none;
  38. box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset!important;
  39. color: rgba(0,0,0,.7);
  40. }
  41. .ui.button:not(.loading):hover {
  42. background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.08));
  43. background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.08));
  44. color: rgba(0,0,0,.7);
  45. }
  46. .ui.button.active:hover {
  47. background-image: none;
  48. }
  49. .ui.button:hover .icon,
  50. .ui.button.hover .icon {
  51. opacity: .85;
  52. }
  53. .ui.button:not(.loading):active,
  54. .ui.active.button:not(.loading):active {
  55. background-color: #F1F1F1;
  56. color: rgba(0,0,0,.7);
  57. box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset!important;
  58. }
  59. .ui.loading.button {
  60. position: relative;
  61. cursor: default;
  62. background-color: #FFF!important;
  63. color: transparent!important;
  64. -webkit-transition: all 0s linear;
  65. transition: all 0s linear;
  66. }
  67. .ui.loading.button:after {
  68. position: absolute;
  69. top: 0;
  70. left: 0;
  71. width: 100%;
  72. height: 100%;
  73. content: '';
  74. background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
  75. }
  76. .ui.labeled.icon.loading.button .icon {
  77. background-color: transparent;
  78. box-shadow: none;
  79. }
  80. .ui.disabled.button,
  81. .ui.disabled.button:hover,
  82. .ui.disabled.button.active {
  83. background-color: #DDD!important;
  84. cursor: default;
  85. color: rgba(0,0,0,.5)!important;
  86. opacity: .3!important;
  87. background-image: none!important;
  88. box-shadow: none!important;
  89. }
  90. .ui.animated.button {
  91. position: relative;
  92. overflow: hidden;
  93. }
  94. .ui.animated.button .visible.content {
  95. position: relative;
  96. }
  97. .ui.animated.button .hidden.content {
  98. position: absolute;
  99. width: 100%;
  100. }
  101. .ui.animated.button .visible.content,
  102. .ui.animated.button .hidden.content {
  103. -webkit-transition: right .3s ease 0s;
  104. transition: right .3s ease 0s;
  105. }
  106. .ui.animated.button .visible.content {
  107. left: auto;
  108. right: 0;
  109. }
  110. .ui.animated.button .hidden.content {
  111. top: 50%;
  112. left: auto;
  113. right: -100%;
  114. margin-top: -.55em;
  115. }
  116. .ui.animated.button:hover .visible.content {
  117. left: auto;
  118. right: 200%;
  119. }
  120. .ui.animated.button:hover .hidden.content {
  121. left: auto;
  122. right: 0;
  123. }
  124. .ui.vertical.animated.button .visible.content,
  125. .ui.vertical.animated.button .hidden.content {
  126. -webkit-transition: top .3s ease 0s,-webkit-transform .3s ease 0s;
  127. transition: top .3s ease 0s,transform .3s ease 0s;
  128. }
  129. .ui.vertical.animated.button .visible.content {
  130. -webkit-transform: translateY(0%);
  131. -ms-transform: translateY(0%);
  132. transform: translateY(0%);
  133. right: auto;
  134. }
  135. .ui.vertical.animated.button .hidden.content {
  136. top: -100%;
  137. left: 0;
  138. right: auto;
  139. }
  140. .ui.vertical.animated.button:hover .visible.content {
  141. -webkit-transform: translateY(200%);
  142. -ms-transform: translateY(200%);
  143. transform: translateY(200%);
  144. right: auto;
  145. }
  146. .ui.vertical.animated.button:hover .hidden.content {
  147. top: 50%;
  148. right: auto;
  149. }
  150. .ui.fade.animated.button .visible.content,
  151. .ui.fade.animated.button .hidden.content {
  152. -webkit-transition: opacity .3s ease 0s,-webkit-transform .3s ease 0s;
  153. transition: opacity .3s ease 0s,transform .3s ease 0s;
  154. }
  155. .ui.fade.animated.button .visible.content {
  156. left: auto;
  157. right: auto;
  158. opacity: 1;
  159. -webkit-transform: scale(1);
  160. -ms-transform: scale(1);
  161. transform: scale(1);
  162. }
  163. .ui.fade.animated.button .hidden.content {
  164. opacity: 0;
  165. left: 0;
  166. right: auto;
  167. -webkit-transform: scale(1.2);
  168. -ms-transform: scale(1.2);
  169. transform: scale(1.2);
  170. }
  171. .ui.fade.animated.button:hover .visible.content {
  172. left: auto;
  173. right: auto;
  174. opacity: 0;
  175. -webkit-transform: scale(0.7);
  176. -ms-transform: scale(0.7);
  177. transform: scale(0.7);
  178. }
  179. .ui.fade.animated.button:hover .hidden.content {
  180. left: 0;
  181. right: auto;
  182. opacity: 1;
  183. -webkit-transform: scale(1);
  184. -ms-transform: scale(1);
  185. transform: scale(1);
  186. }
  187. .ui.primary.buttons .button,
  188. .ui.primary.button {
  189. background-color: #D95C5C;
  190. color: #FFF;
  191. }
  192. .ui.primary.buttons .button:hover,
  193. .ui.primary.button:hover,
  194. .ui.primary.buttons .active.button,
  195. .ui.primary.button.active {
  196. background-color: #E75859;
  197. color: #FFF;
  198. }
  199. .ui.primary.buttons .button:active,
  200. .ui.primary.button:active {
  201. background-color: #D24B4C;
  202. color: #FFF;
  203. }
  204. .ui.secondary.buttons .button,
  205. .ui.secondary.button {
  206. background-color: #00B5AD;
  207. color: #FFF;
  208. }
  209. .ui.secondary.buttons .button:hover,
  210. .ui.secondary.button:hover,
  211. .ui.secondary.buttons .active.button,
  212. .ui.secondary.button.active {
  213. background-color: #009A93;
  214. color: #FFF;
  215. }
  216. .ui.secondary.buttons .button:active,
  217. .ui.secondary.button:active {
  218. background-color: #00847E;
  219. color: #FFF;
  220. }
  221. .ui.facebook.button {
  222. background-color: #3B579D;
  223. color: #FFF;
  224. }
  225. .ui.facebook.button:hover {
  226. background-color: #3A59A9;
  227. color: #FFF;
  228. }
  229. .ui.facebook.button:active {
  230. background-color: #334F95;
  231. color: #FFF;
  232. }
  233. .ui.twitter.button {
  234. background-color: #4092CC;
  235. color: #FFF;
  236. }
  237. .ui.twitter.button:hover {
  238. background-color: #399ADE;
  239. color: #FFF;
  240. }
  241. .ui.twitter.button:active {
  242. background-color: #3283BC;
  243. color: #FFF;
  244. }
  245. .ui.google.plus.button {
  246. background-color: #D34836;
  247. color: #FFF;
  248. }
  249. .ui.google.plus.button:hover {
  250. background-color: #E3432E;
  251. color: #FFF;
  252. }
  253. .ui.google.plus.button:active {
  254. background-color: #CA3A27;
  255. color: #FFF;
  256. }
  257. .ui.linkedin.button {
  258. background-color: #1F88BE;
  259. color: #FFF;
  260. }
  261. .ui.linkedin.button:hover {
  262. background-color: #1394D6;
  263. color: #FFF;
  264. }
  265. .ui.linkedin.button:active {
  266. background-color: #1179AE;
  267. color: #FFF;
  268. }
  269. .ui.youtube.button {
  270. background-color: #CC181E;
  271. color: #FFF;
  272. }
  273. .ui.youtube.button:hover {
  274. background-color: #DF0209;
  275. color: #FFF;
  276. }
  277. .ui.youtube.button:active {
  278. background-color: #A50006;
  279. color: #FFF;
  280. }
  281. .ui.instagram.button {
  282. background-color: #49769C;
  283. color: #FFF;
  284. }
  285. .ui.instagram.button:hover {
  286. background-color: #4781B1;
  287. color: #FFF;
  288. }
  289. .ui.instagram.button:active {
  290. background-color: #38658A;
  291. color: #FFF;
  292. }
  293. .ui.pinterest.button {
  294. background-color: #00ACED;
  295. color: #FFF;
  296. }
  297. .ui.pinterest.button:hover {
  298. background-color: #00B9FF;
  299. color: #FFF;
  300. }
  301. .ui.pinterest.button:active {
  302. background-color: #009EDA;
  303. color: #FFF;
  304. }
  305. .ui.button>.icon {
  306. margin-right: .6em;
  307. line-height: 1;
  308. -webkit-transition: opacity .1s ease;
  309. transition: opacity .1s ease;
  310. }
  311. .ui.left.floated.buttons,
  312. .ui.left.floated.button {
  313. float: left;
  314. margin-right: .25em;
  315. }
  316. .ui.right.floated.buttons,
  317. .ui.right.floated.button {
  318. float: right;
  319. margin-left: .25em;
  320. }
  321. .ui.buttons .button,
  322. .ui.button {
  323. font-size: 1rem;
  324. }
  325. .ui.mini.buttons .button,
  326. .ui.mini.buttons .or,
  327. .ui.mini.button {
  328. font-size: .8rem;
  329. }
  330. .ui.mini.buttons .button,
  331. .ui.mini.button {
  332. padding: .6em .8em .73em;
  333. }
  334. .ui.mini.icon.buttons .button,
  335. .ui.mini.buttons .icon.button {
  336. padding: .6em .6em .73em;
  337. }
  338. .ui.tiny.buttons .button,
  339. .ui.tiny.buttons .or,
  340. .ui.tiny.button {
  341. font-size: .875rem;
  342. }
  343. .ui.tiny.buttons .button,
  344. .ui.tiny.buttons .button,
  345. .ui.tiny.button {
  346. padding: .6em .8em .73em;
  347. }
  348. .ui.tiny.icon.buttons .button,
  349. .ui.tiny.buttons .icon.button {
  350. padding: .6em .6em .73em;
  351. }
  352. .ui.small.buttons .button,
  353. .ui.small.buttons .or,
  354. .ui.small.button {
  355. font-size: .875rem;
  356. }
  357. .ui.large.buttons .button,
  358. .ui.large.buttons .or,
  359. .ui.large.button {
  360. font-size: 1.125rem;
  361. }
  362. .ui.big.buttons .button,
  363. .ui.big.buttons .or,
  364. .ui.big.button {
  365. font-size: 1.25rem;
  366. }
  367. .ui.huge.buttons .button,
  368. .ui.huge.buttons .or,
  369. .ui.huge.button {
  370. font-size: 1.375rem;
  371. }
  372. .ui.massive.buttons .button,
  373. .ui.massive.buttons .or,
  374. .ui.massive.button {
  375. font-size: 1.5rem;
  376. font-weight: 700;
  377. }
  378. .ui.tiny.buttons .or:before,
  379. .ui.mini.buttons .or:before {
  380. width: 1.45em;
  381. height: 1.55em;
  382. line-height: 1.4;
  383. margin-left: -.725em;
  384. margin-top: -.25em;
  385. }
  386. .ui.tiny.buttons .or:after,
  387. .ui.mini.buttons .or:after {
  388. height: 1.45em;
  389. }
  390. .ui.huge.loading.button:after {
  391. background-image: url(../images/loader-small.gif);
  392. }
  393. .ui.massive.buttons .loading.button:after,
  394. .ui.gigantic.buttons .loading.button:after,
  395. .ui.massive.loading.button:after,
  396. .ui.gigantic.loading.button:after {
  397. background-image: url(../images/loader-medium.gif);
  398. }
  399. .ui.huge.loading.button:after,
  400. .ui.huge.loading.button.active:after {
  401. background-image: url(../images/loader-small.gif);
  402. }
  403. .ui.massive.buttons .loading.button:after,
  404. .ui.gigantic.buttons .loading.button:after,
  405. .ui.massive.loading.button:after,
  406. .ui.gigantic.loading.button:after,
  407. .ui.massive.buttons .loading.button.active:after,
  408. .ui.gigantic.buttons .loading.button.active:after,
  409. .ui.massive.loading.button.active:after,
  410. .ui.gigantic.loading.button.active:after {
  411. background-image: url(../images/loader-medium.gif);
  412. }
  413. .ui.icon.buttons .button,
  414. .ui.icon.button {
  415. padding: .8em .8em .875em;
  416. }
  417. .ui.icon.buttons .button>.icon,
  418. .ui.icon.button>.icon {
  419. opacity: .9;
  420. margin: 0;
  421. }
  422. .ui.basic.buttons .button,
  423. .ui.basic.button {
  424. background-color: transparent!important;
  425. background-image: none;
  426. color: gray!important;
  427. font-weight: 400;
  428. text-transform: none;
  429. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  430. }
  431. .ui.basic.buttons {
  432. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  433. border-radius: .25em;
  434. }
  435. .ui.basic.buttons .button:hover,
  436. .ui.basic.button:hover {
  437. background-image: none;
  438. color: #7F7F7F!important;
  439. box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
  440. }
  441. .ui.basic.buttons .button:active,
  442. .ui.basic.button:active {
  443. background-color: rgba(0,0,0,.02)!important;
  444. color: #7F7F7F!important;
  445. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  446. }
  447. .ui.basic.buttons .button.active,
  448. .ui.basic.button.active {
  449. background-color: rgba(0,0,0,.05);
  450. color: #7F7F7F;
  451. box-shadow: 0 0 0 1px #BDBDBD inset;
  452. }
  453. .ui.basic.buttons .button.active:hover,
  454. .ui.basic.button.active:hover {
  455. background-color: rgba(0,0,0,.1);
  456. }
  457. .ui.basic.buttons .button {
  458. border-left: 1px solid rgba(0,0,0,.1);
  459. box-shadow: none;
  460. }
  461. .ui.basic.buttons .button:hover,
  462. .ui.basic.buttons .button:active {
  463. box-shadow: none;
  464. }
  465. .ui.basic.buttons .button.active,
  466. .ui.basic.buttons .button.active:hover {
  467. box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  468. }
  469. .ui.labeled.icon.buttons .button,
  470. .ui.labeled.icon.button {
  471. position: relative;
  472. padding-left: 4em!important;
  473. padding-right: 1.4em!important;
  474. }
  475. .ui.labeled.icon.buttons>.button>.icon,
  476. .ui.labeled.icon.button>.icon {
  477. position: absolute;
  478. top: 0;
  479. left: 0;
  480. -moz-box-sizing: border-box;
  481. -ms-box-sizing: border-box;
  482. box-sizing: border-box;
  483. width: 2.75em;
  484. height: 100%;
  485. padding-top: .85em;
  486. background-color: rgba(0,0,0,.05);
  487. text-align: center;
  488. border-radius: .25em 0 0 .25em;
  489. line-height: 1;
  490. box-shadow: -1px 0 0 0 rgba(0,0,0,.05) inset;
  491. }
  492. .ui.labeled.icon.buttons .button>.icon {
  493. border-radius: 0;
  494. }
  495. .ui.labeled.icon.buttons .button:first-child>.icon {
  496. border-top-left-radius: .25em;
  497. border-bottom-left-radius: .25em;
  498. }
  499. .ui.labeled.icon.buttons .button:last-child>.icon {
  500. border-top-right-radius: .25em;
  501. border-bottom-right-radius: .25em;
  502. }
  503. .ui.vertical.labeled.icon.buttons .button:first-child>.icon {
  504. border-radius: 0;
  505. border-top-left-radius: .25em;
  506. }
  507. .ui.vertical.labeled.icon.buttons .button:last-child>.icon {
  508. border-radius: 0;
  509. border-bottom-left-radius: .25em;
  510. }
  511. .ui.right.labeled.icon.button {
  512. padding-left: 1.4em!important;
  513. padding-right: 4em!important;
  514. }
  515. .ui.left.fluid.labeled.icon.button,
  516. .ui.right.fluid.labeled.icon.button {
  517. padding-left: 1.4em!important;
  518. padding-right: 1.4em!important;
  519. }
  520. .ui.right.labeled.icon.button .icon {
  521. left: auto;
  522. right: 0;
  523. border-radius: 0 .25em .25em 0;
  524. box-shadow: 1px 0 0 0 rgba(0,0,0,.05) inset;
  525. }
  526. .ui.toggle.buttons .active.button,
  527. .ui.buttons .button.toggle.active,
  528. .ui.button.toggle.active {
  529. background-color: #5BBD72!important;
  530. color: #FFF!important;
  531. box-shadow: none!important;
  532. }
  533. .ui.button.toggle.active:hover {
  534. background-color: #58CB73!important;
  535. color: #FFF!important;
  536. box-shadow: none!important;
  537. }
  538. .ui.circular.button {
  539. border-radius: 10em;
  540. }
  541. .ui.attached.button {
  542. display: block;
  543. box-shadow: 0 0 0 1px rgba(0,0,0,.1)!important;
  544. }
  545. .ui.attached.top.button {
  546. border-radius: .25em .25em 0 0;
  547. }
  548. .ui.attached.bottom.button {
  549. border-radius: 0 0 .25em .25em;
  550. }
  551. .ui.attached.left.button {
  552. display: inline-block;
  553. border-left: 0;
  554. padding-right: .75em;
  555. text-align: right;
  556. border-radius: .25em 0 0 .25em;
  557. }
  558. .ui.attached.right.button {
  559. display: inline-block;
  560. padding-left: .75em;
  561. text-align: left;
  562. border-radius: 0 .25em .25em 0;
  563. }
  564. .ui.buttons .or {
  565. position: relative;
  566. float: left;
  567. width: .3em;
  568. height: 1.1em;
  569. z-index: 3;
  570. }
  571. .ui.buttons .or:before {
  572. position: absolute;
  573. top: 50%;
  574. left: 50%;
  575. content: 'or';
  576. background-color: #FFF;
  577. margin-top: -.1em;
  578. margin-left: -.9em;
  579. width: 1.8em;
  580. height: 1.8em;
  581. line-height: 1.55;
  582. color: #AAA;
  583. font-style: normal;
  584. font-weight: 400;
  585. text-align: center;
  586. border-radius: 500px;
  587. box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  588. -moz-box-sizing: border-box;
  589. -ms-box-sizing: border-box;
  590. box-sizing: border-box;
  591. }
  592. .ui.buttons .or:after {
  593. position: absolute;
  594. top: 0;
  595. left: 0;
  596. content: ' ';
  597. width: .3em;
  598. height: 1.7em;
  599. background-color: transparent;
  600. border-top: .5em solid #FFF;
  601. border-bottom: .5em solid #FFF;
  602. }
  603. .ui.fluid.buttons .or {
  604. width: 0!important;
  605. }
  606. .ui.fluid.buttons .or:after {
  607. display: none;
  608. }
  609. .attached.ui.buttons {
  610. margin: 0;
  611. border-radius: 4px 4px 0 0;
  612. }
  613. .attached.ui.buttons .button:first-child {
  614. border-radius: 4px 0 0;
  615. }
  616. .attached.ui.buttons .button:last-child {
  617. border-radius: 0 4px 0 0;
  618. }
  619. .bottom.attached.ui.buttons {
  620. margin-top: -1px;
  621. border-radius: 0 0 4px 4px;
  622. }
  623. .bottom.attached.ui.buttons .button:first-child {
  624. border-radius: 0 0 0 4px;
  625. }
  626. .bottom.attached.ui.buttons .button:last-child {
  627. border-radius: 0 0 4px;
  628. }
  629. .left.attached.ui.buttons {
  630. margin-left: -1px;
  631. border-radius: 0 4px 4px 0;
  632. }
  633. .left.attached.ui.buttons .button:first-child {
  634. margin-left: -1px;
  635. border-radius: 0 4px 0 0;
  636. }
  637. .left.attached.ui.buttons .button:last-child {
  638. margin-left: -1px;
  639. border-radius: 0 0 4px;
  640. }
  641. .right.attached.ui.buttons,
  642. .right.attached.ui.buttons .button {
  643. margin-right: -1px;
  644. border-radius: 4px 0 0 4px;
  645. }
  646. .right.attached.ui.buttons .button:first-child {
  647. margin-left: -1px;
  648. border-radius: 4px 0 0;
  649. }
  650. .right.attached.ui.buttons .button:last-child {
  651. margin-left: -1px;
  652. border-radius: 0 0 0 4px;
  653. }
  654. .ui.fluid.buttons,
  655. .ui.button.fluid,
  656. .ui.fluid.buttons>.button {
  657. display: block;
  658. width: 100%;
  659. }
  660. .ui.\32.buttons>.button,
  661. .ui.two.buttons>.button {
  662. width: 50%;
  663. }
  664. .ui.\33.buttons>.button,
  665. .ui.three.buttons>.button {
  666. width: 33.333%;
  667. }
  668. .ui.\34.buttons>.button,
  669. .ui.four.buttons>.button {
  670. width: 25%;
  671. }
  672. .ui.\35.buttons>.button,
  673. .ui.five.buttons>.button {
  674. width: 20%;
  675. }
  676. .ui.\36.buttons>.button,
  677. .ui.six.buttons>.button {
  678. width: 16.666%;
  679. }
  680. .ui.\37.buttons>.button,
  681. .ui.seven.buttons>.button {
  682. width: 14.285%;
  683. }
  684. .ui.\38.buttons>.button,
  685. .ui.eight.buttons>.button {
  686. width: 12.5%;
  687. }
  688. .ui.\39.buttons>.button,
  689. .ui.nine.buttons>.button {
  690. width: 11.11%;
  691. }
  692. .ui.\31\30.buttons>.button,
  693. .ui.ten.buttons>.button {
  694. width: 10%;
  695. }
  696. .ui.\31\31.buttons>.button,
  697. .ui.eleven.buttons>.button {
  698. width: 9.09%;
  699. }
  700. .ui.\31\32.buttons>.button,
  701. .ui.twelve.buttons>.button {
  702. width: 8.3333%;
  703. }
  704. .ui.fluid.vertical.buttons,
  705. .ui.fluid.vertical.buttons>.button {
  706. display: block;
  707. width: auto;
  708. -moz-box-sizing: border-box;
  709. -ms-box-sizing: border-box;
  710. box-sizing: border-box;
  711. }
  712. .ui.\32.vertical.buttons>.button,
  713. .ui.two.vertical.buttons>.button {
  714. height: 50%;
  715. }
  716. .ui.\33.vertical.buttons>.button,
  717. .ui.three.vertical.buttons>.button {
  718. height: 33.333%;
  719. }
  720. .ui.\34.vertical.buttons>.button,
  721. .ui.four.vertical.buttons>.button {
  722. height: 25%;
  723. }
  724. .ui.\35.vertical.buttons>.button,
  725. .ui.five.vertical.buttons>.button {
  726. height: 20%;
  727. }
  728. .ui.\36.vertical.buttons>.button,
  729. .ui.six.vertical.buttons>.button {
  730. height: 16.666%;
  731. }
  732. .ui.\37.vertical.buttons>.button,
  733. .ui.seven.vertical.buttons>.button {
  734. height: 14.285%;
  735. }
  736. .ui.\38.vertical.buttons>.button,
  737. .ui.eight.vertical.buttons>.button {
  738. height: 12.5%;
  739. }
  740. .ui.\39.vertical.buttons>.button,
  741. .ui.nine.vertical.buttons>.button {
  742. height: 11.11%;
  743. }
  744. .ui.\31\30.vertical.buttons>.button,
  745. .ui.ten.vertical.buttons>.button {
  746. height: 10%;
  747. }
  748. .ui.\31\31.vertical.buttons>.button,
  749. .ui.eleven.vertical.buttons>.button {
  750. height: 9.09%;
  751. }
  752. .ui.\31\32.vertical.buttons>.button,
  753. .ui.twelve.vertical.buttons>.button {
  754. height: 8.3333%;
  755. }
  756. .ui.black.buttons .button,
  757. .ui.black.button {
  758. background-color: #5C6166;
  759. color: #FFF;
  760. }
  761. .ui.black.buttons .button:hover,
  762. .ui.black.button:hover {
  763. background-color: #4C4C4C;
  764. color: #FFF;
  765. }
  766. .ui.black.buttons .button:active,
  767. .ui.black.button:active {
  768. background-color: #333;
  769. color: #FFF;
  770. }
  771. .ui.green.buttons .button,
  772. .ui.green.button {
  773. background-color: #5BBD72;
  774. color: #FFF;
  775. }
  776. .ui.green.buttons .button:hover,
  777. .ui.green.button:hover,
  778. .ui.green.buttons .active.button,
  779. .ui.green.button.active {
  780. background-color: #58cb73;
  781. color: #FFF;
  782. }
  783. .ui.green.buttons .button:active,
  784. .ui.green.button:active {
  785. background-color: #4CB164;
  786. color: #FFF;
  787. }
  788. .ui.red.buttons .button,
  789. .ui.red.button {
  790. background-color: #D95C5C;
  791. color: #FFF;
  792. }
  793. .ui.red.buttons .button:hover,
  794. .ui.red.button:hover,
  795. .ui.red.buttons .active.button,
  796. .ui.red.button.active {
  797. background-color: #E75859;
  798. color: #FFF;
  799. }
  800. .ui.red.buttons .button:active,
  801. .ui.red.button:active {
  802. background-color: #D24B4C;
  803. color: #FFF;
  804. }
  805. .ui.orange.buttons .button,
  806. .ui.orange.button {
  807. background-color: #E96633;
  808. color: #FFF;
  809. }
  810. .ui.orange.buttons .button:hover,
  811. .ui.orange.button:hover,
  812. .ui.orange.buttons .active.button,
  813. .ui.orange.button.active {
  814. background-color: #FF7038;
  815. color: #FFF;
  816. }
  817. .ui.orange.buttons .button:active,
  818. .ui.orange.button:active {
  819. background-color: #DA683B;
  820. color: #FFF;
  821. }
  822. .ui.blue.buttons .button,
  823. .ui.blue.button {
  824. background-color: #6ECFF5;
  825. color: #FFF;
  826. }
  827. .ui.blue.buttons .button:hover,
  828. .ui.blue.button:hover,
  829. .ui.blue.buttons .active.button,
  830. .ui.blue.button.active {
  831. background-color: #1AB8F3;
  832. color: #FFF;
  833. }
  834. .ui.blue.buttons .button:active,
  835. .ui.blue.button:active {
  836. background-color: #0AA5DF;
  837. color: #FFF;
  838. }
  839. .ui.purple.buttons .button,
  840. .ui.purple.button {
  841. background-color: #564F8A;
  842. color: #FFF;
  843. }
  844. .ui.purple.buttons .button:hover,
  845. .ui.purple.button:hover,
  846. .ui.purple.buttons .active.button,
  847. .ui.purple.button.active {
  848. background-color: #3E3773;
  849. color: #FFF;
  850. }
  851. .ui.purple.buttons .button:active,
  852. .ui.purple.button:active {
  853. background-color: #2E2860;
  854. color: #FFF;
  855. }
  856. .ui.teal.buttons .button,
  857. .ui.teal.button {
  858. background-color: #00B5AD;
  859. color: #FFF;
  860. }
  861. .ui.teal.buttons .button:hover,
  862. .ui.teal.button:hover,
  863. .ui.teal.buttons .active.button,
  864. .ui.teal.button.active {
  865. background-color: #009A93;
  866. color: #FFF;
  867. }
  868. .ui.teal.buttons .button:active,
  869. .ui.teal.button:active {
  870. background-color: #00847E;
  871. color: #FFF;
  872. }
  873. .ui.positive.buttons .button,
  874. .ui.positive.button {
  875. background-color: #5BBD72!important;
  876. color: #FFF;
  877. }
  878. .ui.positive.buttons .button:hover,
  879. .ui.positive.button:hover,
  880. .ui.positive.buttons .active.button,
  881. .ui.positive.button.active {
  882. background-color: #58CB73!important;
  883. color: #FFF;
  884. }
  885. .ui.positive.buttons .button:active,
  886. .ui.positive.button:active {
  887. background-color: #4CB164!important;
  888. color: #FFF;
  889. }
  890. .ui.negative.buttons .button,
  891. .ui.negative.button {
  892. background-color: #D95C5C!important;
  893. color: #FFF;
  894. }
  895. .ui.negative.buttons .button:hover,
  896. .ui.negative.button:hover,
  897. .ui.negative.buttons .active.button,
  898. .ui.negative.button.active {
  899. background-color: #E75859!important;
  900. color: #FFF;
  901. }
  902. .ui.negative.buttons .button:active,
  903. .ui.negative.button:active {
  904. background-color: #D24B4C!important;
  905. color: #FFF;
  906. }
  907. .ui.buttons {
  908. display: inline-block;
  909. vertical-align: middle;
  910. }
  911. .ui.buttons:after {
  912. content: ".";
  913. display: block;
  914. height: 0;
  915. clear: both;
  916. visibility: hidden;
  917. }
  918. .ui.buttons .button:first-child {
  919. border-left: 0;
  920. }
  921. .ui.buttons .button {
  922. float: left;
  923. border-radius: 0;
  924. }
  925. .ui.buttons .button:first-child {
  926. margin-left: 0;
  927. border-top-left-radius: .25em;
  928. border-bottom-left-radius: .25em;
  929. }
  930. .ui.buttons .button:last-child {
  931. border-top-right-radius: .25em;
  932. border-bottom-right-radius: .25em;
  933. }
  934. .ui.vertical.buttons {
  935. display: inline-block;
  936. }
  937. .ui.vertical.buttons .button {
  938. display: block;
  939. float: none;
  940. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  941. }
  942. .ui.vertical.buttons .button:first-child,
  943. .ui.vertical.buttons .mini.button:first-child,
  944. .ui.vertical.buttons .tiny.button:first-child,
  945. .ui.vertical.buttons .small.button:first-child,
  946. .ui.vertical.buttons .massive.button:first-child,
  947. .ui.vertical.buttons .huge.button:first-child {
  948. margin-top: 0;
  949. border-radius: .25em .25em 0 0;
  950. }
  951. .ui.vertical.buttons .button:last-child,
  952. .ui.vertical.buttons .mini.button:last-child,
  953. .ui.vertical.buttons .tiny.button:last-child,
  954. .ui.vertical.buttons .small.button:last-child,
  955. .ui.vertical.buttons .massive.button:last-child,
  956. .ui.vertical.buttons .huge.button:last-child,
  957. .ui.vertical.buttons .gigantic.button:last-child {
  958. border-radius: 0 0 .25em .25em;
  959. }