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.

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