statistic.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. /*!
  2. * # Fomantic-UI - Statistic
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Statistic
  12. *******************************/
  13. /* Standalone */
  14. .ui.statistic {
  15. display: -webkit-inline-box;
  16. display: -ms-inline-flexbox;
  17. display: inline-flex;
  18. -webkit-box-orient: vertical;
  19. -webkit-box-direction: normal;
  20. -ms-flex-direction: column;
  21. flex-direction: column;
  22. margin: 1em 0;
  23. max-width: none;
  24. }
  25. .ui.statistic + .ui.statistic {
  26. margin: 0 0 0 1.5em;
  27. }
  28. .ui.statistic:first-child {
  29. margin-top: 0;
  30. }
  31. .ui.statistic:last-child {
  32. margin-bottom: 0;
  33. }
  34. /*******************************
  35. Group
  36. *******************************/
  37. /* Grouped */
  38. .ui.statistics {
  39. display: -webkit-box;
  40. display: -ms-flexbox;
  41. display: flex;
  42. -webkit-box-align: start;
  43. -ms-flex-align: start;
  44. align-items: flex-start;
  45. -ms-flex-wrap: wrap;
  46. flex-wrap: wrap;
  47. }
  48. .ui.statistics > .statistic {
  49. display: -webkit-inline-box;
  50. display: -ms-inline-flexbox;
  51. display: inline-flex;
  52. -webkit-box-flex: 0;
  53. -ms-flex: 0 1 auto;
  54. flex: 0 1 auto;
  55. -webkit-box-orient: vertical;
  56. -webkit-box-direction: normal;
  57. -ms-flex-direction: column;
  58. flex-direction: column;
  59. margin: 0 1.5em 1em;
  60. max-width: none;
  61. }
  62. .ui.statistics {
  63. display: -webkit-box;
  64. display: -ms-flexbox;
  65. display: flex;
  66. margin: 1em -1.5em -1em;
  67. }
  68. /* Clearing */
  69. .ui.statistics:after {
  70. display: block;
  71. content: ' ';
  72. height: 0;
  73. clear: both;
  74. overflow: hidden;
  75. visibility: hidden;
  76. }
  77. .ui.statistics:first-child {
  78. margin-top: 0;
  79. }
  80. /*******************************
  81. Content
  82. *******************************/
  83. /*--------------
  84. Value
  85. ---------------*/
  86. .ui.statistics .statistic > .value,
  87. .ui.statistic > .value {
  88. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  89. font-size: 4rem;
  90. font-weight: normal;
  91. line-height: 1em;
  92. color: #1B1C1D;
  93. text-transform: uppercase;
  94. text-align: center;
  95. }
  96. /*--------------
  97. Label
  98. ---------------*/
  99. .ui.statistics .statistic > .label,
  100. .ui.statistic > .label {
  101. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  102. font-size: 1em;
  103. font-weight: bold;
  104. color: rgba(0, 0, 0, 0.87);
  105. text-transform: uppercase;
  106. text-align: center;
  107. }
  108. /* Top Label */
  109. .ui.statistics .statistic > .label ~ .value,
  110. .ui.statistic > .label ~ .value {
  111. margin-top: 0;
  112. }
  113. /* Bottom Label */
  114. .ui.statistics .statistic > .value ~ .label,
  115. .ui.statistic > .value ~ .label {
  116. margin-top: 0;
  117. }
  118. /*******************************
  119. Types
  120. *******************************/
  121. /*--------------
  122. Icon Value
  123. ---------------*/
  124. .ui.statistics .statistic > .value .icon,
  125. .ui.statistic > .value .icon {
  126. opacity: 1;
  127. width: auto;
  128. margin: 0;
  129. }
  130. /*--------------
  131. Text Value
  132. ---------------*/
  133. .ui.statistics .statistic > .text.value,
  134. .ui.statistic > .text.value {
  135. line-height: 1em;
  136. min-height: 2em;
  137. font-weight: bold;
  138. text-align: center;
  139. }
  140. .ui.statistics .statistic > .text.value + .label,
  141. .ui.statistic > .text.value + .label {
  142. text-align: center;
  143. }
  144. /*--------------
  145. Image Value
  146. ---------------*/
  147. .ui.statistics .statistic > .value img,
  148. .ui.statistic > .value img {
  149. max-height: 3rem;
  150. vertical-align: baseline;
  151. }
  152. /*******************************
  153. Variations
  154. *******************************/
  155. /*--------------
  156. Count
  157. ---------------*/
  158. .ui.ten.statistics {
  159. margin: 0 0 -1em;
  160. }
  161. .ui.ten.statistics .statistic {
  162. min-width: 10%;
  163. margin: 0 0 1em;
  164. }
  165. .ui.nine.statistics {
  166. margin: 0 0 -1em;
  167. }
  168. .ui.nine.statistics .statistic {
  169. min-width: 11.11111111%;
  170. margin: 0 0 1em;
  171. }
  172. .ui.eight.statistics {
  173. margin: 0 0 -1em;
  174. }
  175. .ui.eight.statistics .statistic {
  176. min-width: 12.5%;
  177. margin: 0 0 1em;
  178. }
  179. .ui.seven.statistics {
  180. margin: 0 0 -1em;
  181. }
  182. .ui.seven.statistics .statistic {
  183. min-width: 14.28571429%;
  184. margin: 0 0 1em;
  185. }
  186. .ui.six.statistics {
  187. margin: 0 0 -1em;
  188. }
  189. .ui.six.statistics .statistic {
  190. min-width: 16.66666667%;
  191. margin: 0 0 1em;
  192. }
  193. .ui.five.statistics {
  194. margin: 0 0 -1em;
  195. }
  196. .ui.five.statistics .statistic {
  197. min-width: 20%;
  198. margin: 0 0 1em;
  199. }
  200. .ui.four.statistics {
  201. margin: 0 0 -1em;
  202. }
  203. .ui.four.statistics .statistic {
  204. min-width: 25%;
  205. margin: 0 0 1em;
  206. }
  207. .ui.three.statistics {
  208. margin: 0 0 -1em;
  209. }
  210. .ui.three.statistics .statistic {
  211. min-width: 33.33333333%;
  212. margin: 0 0 1em;
  213. }
  214. .ui.two.statistics {
  215. margin: 0 0 -1em;
  216. }
  217. .ui.two.statistics .statistic {
  218. min-width: 50%;
  219. margin: 0 0 1em;
  220. }
  221. .ui.one.statistics {
  222. margin: 0 0 -1em;
  223. }
  224. .ui.one.statistics .statistic {
  225. min-width: 100%;
  226. margin: 0 0 1em;
  227. }
  228. /*--------------
  229. Horizontal
  230. ---------------*/
  231. .ui.horizontal.statistic {
  232. -webkit-box-orient: horizontal;
  233. -webkit-box-direction: normal;
  234. -ms-flex-direction: row;
  235. flex-direction: row;
  236. -webkit-box-align: center;
  237. -ms-flex-align: center;
  238. align-items: center;
  239. }
  240. .ui.horizontal.statistics {
  241. -webkit-box-orient: vertical;
  242. -webkit-box-direction: normal;
  243. -ms-flex-direction: column;
  244. flex-direction: column;
  245. margin: 0;
  246. max-width: none;
  247. }
  248. .ui.horizontal.statistics .statistic {
  249. -webkit-box-orient: horizontal;
  250. -webkit-box-direction: normal;
  251. -ms-flex-direction: row;
  252. flex-direction: row;
  253. -webkit-box-align: center;
  254. -ms-flex-align: center;
  255. align-items: center;
  256. max-width: none;
  257. margin: 1em 0;
  258. }
  259. .ui.horizontal.statistic > .text.value,
  260. .ui.horizontal.statistics > .statistic > .text.value {
  261. min-height: 0 !important;
  262. }
  263. .ui.horizontal.statistics .statistic > .value .icon,
  264. .ui.horizontal.statistic > .value .icon {
  265. width: 1.18em;
  266. }
  267. .ui.horizontal.statistics .statistic > .value,
  268. .ui.horizontal.statistic > .value {
  269. display: inline-block;
  270. vertical-align: middle;
  271. }
  272. .ui.horizontal.statistics .statistic > .label,
  273. .ui.horizontal.statistic > .label {
  274. display: inline-block;
  275. vertical-align: middle;
  276. margin: 0 0 0 0.75em;
  277. }
  278. /*--------------
  279. Inverted
  280. ---------------*/
  281. .ui.inverted.statistics .statistic > .value,
  282. .ui.inverted.statistic .value {
  283. color: #FFFFFF;
  284. }
  285. .ui.inverted.statistics .statistic > .label,
  286. .ui.inverted.statistic .label {
  287. color: rgba(255, 255, 255, 0.9);
  288. }
  289. /*--------------
  290. Colors
  291. ---------------*/
  292. .ui.primary.statistics .statistic > .value,
  293. .ui.statistics .primary.statistic > .value,
  294. .ui.primary.statistic > .value {
  295. color: #2185D0;
  296. }
  297. .ui.inverted.primary.statistics .statistic > .value,
  298. .ui.statistics .inverted.primary.statistic > .value,
  299. .ui.inverted.primary.statistic > .value {
  300. color: #54C8FF;
  301. }
  302. .ui.secondary.statistics .statistic > .value,
  303. .ui.statistics .secondary.statistic > .value,
  304. .ui.secondary.statistic > .value {
  305. color: #1B1C1D;
  306. }
  307. .ui.inverted.secondary.statistics .statistic > .value,
  308. .ui.statistics .inverted.secondary.statistic > .value,
  309. .ui.inverted.secondary.statistic > .value {
  310. color: #545454;
  311. }
  312. .ui.red.statistics .statistic > .value,
  313. .ui.statistics .red.statistic > .value,
  314. .ui.red.statistic > .value {
  315. color: #DB2828;
  316. }
  317. .ui.inverted.red.statistics .statistic > .value,
  318. .ui.statistics .inverted.red.statistic > .value,
  319. .ui.inverted.red.statistic > .value {
  320. color: #FF695E;
  321. }
  322. .ui.orange.statistics .statistic > .value,
  323. .ui.statistics .orange.statistic > .value,
  324. .ui.orange.statistic > .value {
  325. color: #F2711C;
  326. }
  327. .ui.inverted.orange.statistics .statistic > .value,
  328. .ui.statistics .inverted.orange.statistic > .value,
  329. .ui.inverted.orange.statistic > .value {
  330. color: #FF851B;
  331. }
  332. .ui.yellow.statistics .statistic > .value,
  333. .ui.statistics .yellow.statistic > .value,
  334. .ui.yellow.statistic > .value {
  335. color: #FBBD08;
  336. }
  337. .ui.inverted.yellow.statistics .statistic > .value,
  338. .ui.statistics .inverted.yellow.statistic > .value,
  339. .ui.inverted.yellow.statistic > .value {
  340. color: #FFE21F;
  341. }
  342. .ui.olive.statistics .statistic > .value,
  343. .ui.statistics .olive.statistic > .value,
  344. .ui.olive.statistic > .value {
  345. color: #B5CC18;
  346. }
  347. .ui.inverted.olive.statistics .statistic > .value,
  348. .ui.statistics .inverted.olive.statistic > .value,
  349. .ui.inverted.olive.statistic > .value {
  350. color: #D9E778;
  351. }
  352. .ui.green.statistics .statistic > .value,
  353. .ui.statistics .green.statistic > .value,
  354. .ui.green.statistic > .value {
  355. color: #21BA45;
  356. }
  357. .ui.inverted.green.statistics .statistic > .value,
  358. .ui.statistics .inverted.green.statistic > .value,
  359. .ui.inverted.green.statistic > .value {
  360. color: #2ECC40;
  361. }
  362. .ui.teal.statistics .statistic > .value,
  363. .ui.statistics .teal.statistic > .value,
  364. .ui.teal.statistic > .value {
  365. color: #00B5AD;
  366. }
  367. .ui.inverted.teal.statistics .statistic > .value,
  368. .ui.statistics .inverted.teal.statistic > .value,
  369. .ui.inverted.teal.statistic > .value {
  370. color: #6DFFFF;
  371. }
  372. .ui.blue.statistics .statistic > .value,
  373. .ui.statistics .blue.statistic > .value,
  374. .ui.blue.statistic > .value {
  375. color: #2185D0;
  376. }
  377. .ui.inverted.blue.statistics .statistic > .value,
  378. .ui.statistics .inverted.blue.statistic > .value,
  379. .ui.inverted.blue.statistic > .value {
  380. color: #54C8FF;
  381. }
  382. .ui.violet.statistics .statistic > .value,
  383. .ui.statistics .violet.statistic > .value,
  384. .ui.violet.statistic > .value {
  385. color: #6435C9;
  386. }
  387. .ui.inverted.violet.statistics .statistic > .value,
  388. .ui.statistics .inverted.violet.statistic > .value,
  389. .ui.inverted.violet.statistic > .value {
  390. color: #A291FB;
  391. }
  392. .ui.purple.statistics .statistic > .value,
  393. .ui.statistics .purple.statistic > .value,
  394. .ui.purple.statistic > .value {
  395. color: #A333C8;
  396. }
  397. .ui.inverted.purple.statistics .statistic > .value,
  398. .ui.statistics .inverted.purple.statistic > .value,
  399. .ui.inverted.purple.statistic > .value {
  400. color: #DC73FF;
  401. }
  402. .ui.pink.statistics .statistic > .value,
  403. .ui.statistics .pink.statistic > .value,
  404. .ui.pink.statistic > .value {
  405. color: #E03997;
  406. }
  407. .ui.inverted.pink.statistics .statistic > .value,
  408. .ui.statistics .inverted.pink.statistic > .value,
  409. .ui.inverted.pink.statistic > .value {
  410. color: #FF8EDF;
  411. }
  412. .ui.brown.statistics .statistic > .value,
  413. .ui.statistics .brown.statistic > .value,
  414. .ui.brown.statistic > .value {
  415. color: #A5673F;
  416. }
  417. .ui.inverted.brown.statistics .statistic > .value,
  418. .ui.statistics .inverted.brown.statistic > .value,
  419. .ui.inverted.brown.statistic > .value {
  420. color: #D67C1C;
  421. }
  422. .ui.grey.statistics .statistic > .value,
  423. .ui.statistics .grey.statistic > .value,
  424. .ui.grey.statistic > .value {
  425. color: #767676;
  426. }
  427. .ui.inverted.grey.statistics .statistic > .value,
  428. .ui.statistics .inverted.grey.statistic > .value,
  429. .ui.inverted.grey.statistic > .value {
  430. color: #DCDDDE;
  431. }
  432. .ui.black.statistics .statistic > .value,
  433. .ui.statistics .black.statistic > .value,
  434. .ui.black.statistic > .value {
  435. color: #1B1C1D;
  436. }
  437. .ui.inverted.black.statistics .statistic > .value,
  438. .ui.statistics .inverted.black.statistic > .value,
  439. .ui.inverted.black.statistic > .value {
  440. color: #545454;
  441. }
  442. /*--------------
  443. Floated
  444. ---------------*/
  445. .ui[class*="left floated"].statistic {
  446. float: left;
  447. margin: 0 2em 1em 0;
  448. }
  449. .ui[class*="right floated"].statistic {
  450. float: right;
  451. margin: 0 0 1em 2em;
  452. }
  453. .ui.floated.statistic:last-child {
  454. margin-bottom: 0;
  455. }
  456. /*--------------
  457. Stackable
  458. ---------------*/
  459. @media only screen and (max-width: 767.98px) {
  460. .ui.stackable.statistics {
  461. width: auto;
  462. margin-left: 0 !important;
  463. margin-right: 0 !important;
  464. }
  465. .ui.stackable.statistics > .statistic {
  466. width: 100% !important;
  467. margin: 0 0 !important;
  468. padding: 1rem 1rem !important;
  469. }
  470. }
  471. /*--------------
  472. Sizes
  473. ---------------*/
  474. /* Medium */
  475. .ui.statistics .statistic > .value,
  476. .ui.statistic > .value {
  477. font-size: 4rem;
  478. }
  479. .ui.horizontal.statistics .statistic > .value,
  480. .ui.horizontal.statistic > .value {
  481. font-size: 3rem;
  482. }
  483. .ui.statistics .statistic > .text.value,
  484. .ui.statistic > .text.value {
  485. font-size: 2rem;
  486. }
  487. .ui.mini.statistics .statistic > .value,
  488. .ui.mini.statistic > .value {
  489. font-size: 1.5rem;
  490. }
  491. .ui.mini.horizontal.statistics .statistic > .value,
  492. .ui.mini.horizontal.statistic > .value {
  493. font-size: 1.5rem;
  494. }
  495. .ui.mini.statistics .statistic > .text.value,
  496. .ui.mini.statistic > .text.value {
  497. font-size: 1rem;
  498. }
  499. .ui.tiny.statistics .statistic > .value,
  500. .ui.tiny.statistic > .value {
  501. font-size: 2rem;
  502. }
  503. .ui.tiny.horizontal.statistics .statistic > .value,
  504. .ui.tiny.horizontal.statistic > .value {
  505. font-size: 2rem;
  506. }
  507. .ui.tiny.statistics .statistic > .text.value,
  508. .ui.tiny.statistic > .text.value {
  509. font-size: 1rem;
  510. }
  511. .ui.small.statistics .statistic > .value,
  512. .ui.small.statistic > .value {
  513. font-size: 3rem;
  514. }
  515. .ui.small.horizontal.statistics .statistic > .value,
  516. .ui.small.horizontal.statistic > .value {
  517. font-size: 2rem;
  518. }
  519. .ui.small.statistics .statistic > .text.value,
  520. .ui.small.statistic > .text.value {
  521. font-size: 1rem;
  522. }
  523. .ui.large.statistics .statistic > .value,
  524. .ui.large.statistic > .value {
  525. font-size: 5rem;
  526. }
  527. .ui.large.horizontal.statistics .statistic > .value,
  528. .ui.large.horizontal.statistic > .value {
  529. font-size: 4rem;
  530. }
  531. .ui.large.statistics .statistic > .text.value,
  532. .ui.large.statistic > .text.value {
  533. font-size: 2.5rem;
  534. }
  535. .ui.big.statistics .statistic > .value,
  536. .ui.big.statistic > .value {
  537. font-size: 5.5rem;
  538. }
  539. .ui.big.horizontal.statistics .statistic > .value,
  540. .ui.big.horizontal.statistic > .value {
  541. font-size: 4.5rem;
  542. }
  543. .ui.big.statistics .statistic > .text.value,
  544. .ui.big.statistic > .text.value {
  545. font-size: 2.5rem;
  546. }
  547. .ui.huge.statistics .statistic > .value,
  548. .ui.huge.statistic > .value {
  549. font-size: 6rem;
  550. }
  551. .ui.huge.horizontal.statistics .statistic > .value,
  552. .ui.huge.horizontal.statistic > .value {
  553. font-size: 5rem;
  554. }
  555. .ui.huge.statistics .statistic > .text.value,
  556. .ui.huge.statistic > .text.value {
  557. font-size: 2.5rem;
  558. }
  559. .ui.massive.statistics .statistic > .value,
  560. .ui.massive.statistic > .value {
  561. font-size: 7rem;
  562. }
  563. .ui.massive.horizontal.statistics .statistic > .value,
  564. .ui.massive.horizontal.statistic > .value {
  565. font-size: 6rem;
  566. }
  567. .ui.massive.statistics .statistic > .text.value,
  568. .ui.massive.statistic > .text.value {
  569. font-size: 3rem;
  570. }
  571. /*******************************
  572. Theme Overrides
  573. *******************************/
  574. /*******************************
  575. User Variable Overrides
  576. *******************************/