statistic.css 13 KB

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