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.

993 lines
26 KiB

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