1
0

statistic.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. /*!
  2. * # Semantic UI 2.3.3 - 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: -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 0em;
  23. max-width: auto;
  24. }
  25. .ui.statistic + .ui.statistic {
  26. margin: 0em 0em 0em 1.5em;
  27. }
  28. .ui.statistic:first-child {
  29. margin-top: 0em;
  30. }
  31. .ui.statistic:last-child {
  32. margin-bottom: 0em;
  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: 0em 1.5em 1em;
  60. max-width: auto;
  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: 0px;
  73. clear: both;
  74. overflow: hidden;
  75. visibility: hidden;
  76. }
  77. .ui.statistics:first-child {
  78. margin-top: 0em;
  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: 0rem;
  112. }
  113. /* Bottom Label */
  114. .ui.statistics .statistic > .value ~ .label,
  115. .ui.statistic > .value ~ .label {
  116. margin-top: 0rem;
  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: 0em;
  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: 0em 0em -1em;
  160. }
  161. .ui.ten.statistics .statistic {
  162. min-width: 10%;
  163. margin: 0em 0em 1em;
  164. }
  165. .ui.nine.statistics {
  166. margin: 0em 0em -1em;
  167. }
  168. .ui.nine.statistics .statistic {
  169. min-width: 11.11111111%;
  170. margin: 0em 0em 1em;
  171. }
  172. .ui.eight.statistics {
  173. margin: 0em 0em -1em;
  174. }
  175. .ui.eight.statistics .statistic {
  176. min-width: 12.5%;
  177. margin: 0em 0em 1em;
  178. }
  179. .ui.seven.statistics {
  180. margin: 0em 0em -1em;
  181. }
  182. .ui.seven.statistics .statistic {
  183. min-width: 14.28571429%;
  184. margin: 0em 0em 1em;
  185. }
  186. .ui.six.statistics {
  187. margin: 0em 0em -1em;
  188. }
  189. .ui.six.statistics .statistic {
  190. min-width: 16.66666667%;
  191. margin: 0em 0em 1em;
  192. }
  193. .ui.five.statistics {
  194. margin: 0em 0em -1em;
  195. }
  196. .ui.five.statistics .statistic {
  197. min-width: 20%;
  198. margin: 0em 0em 1em;
  199. }
  200. .ui.four.statistics {
  201. margin: 0em 0em -1em;
  202. }
  203. .ui.four.statistics .statistic {
  204. min-width: 25%;
  205. margin: 0em 0em 1em;
  206. }
  207. .ui.three.statistics {
  208. margin: 0em 0em -1em;
  209. }
  210. .ui.three.statistics .statistic {
  211. min-width: 33.33333333%;
  212. margin: 0em 0em 1em;
  213. }
  214. .ui.two.statistics {
  215. margin: 0em 0em -1em;
  216. }
  217. .ui.two.statistics .statistic {
  218. min-width: 50%;
  219. margin: 0em 0em 1em;
  220. }
  221. .ui.one.statistics {
  222. margin: 0em 0em -1em;
  223. }
  224. .ui.one.statistics .statistic {
  225. min-width: 100%;
  226. margin: 0em 0em 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: 0em;
  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 0em;
  258. }
  259. .ui.horizontal.statistic > .text.value,
  260. .ui.horizontal.statistics > .statistic > .text.value {
  261. min-height: 0em !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: 0em 0em 0em 0.75em;
  277. }
  278. /*--------------
  279. Colors
  280. ---------------*/
  281. .ui.red.statistics .statistic > .value,
  282. .ui.statistics .red.statistic > .value,
  283. .ui.red.statistic > .value {
  284. color: #DB2828;
  285. }
  286. .ui.orange.statistics .statistic > .value,
  287. .ui.statistics .orange.statistic > .value,
  288. .ui.orange.statistic > .value {
  289. color: #F2711C;
  290. }
  291. .ui.yellow.statistics .statistic > .value,
  292. .ui.statistics .yellow.statistic > .value,
  293. .ui.yellow.statistic > .value {
  294. color: #FBBD08;
  295. }
  296. .ui.olive.statistics .statistic > .value,
  297. .ui.statistics .olive.statistic > .value,
  298. .ui.olive.statistic > .value {
  299. color: #B5CC18;
  300. }
  301. .ui.green.statistics .statistic > .value,
  302. .ui.statistics .green.statistic > .value,
  303. .ui.green.statistic > .value {
  304. color: #21BA45;
  305. }
  306. .ui.teal.statistics .statistic > .value,
  307. .ui.statistics .teal.statistic > .value,
  308. .ui.teal.statistic > .value {
  309. color: #00B5AD;
  310. }
  311. .ui.blue.statistics .statistic > .value,
  312. .ui.statistics .blue.statistic > .value,
  313. .ui.blue.statistic > .value {
  314. color: #2185D0;
  315. }
  316. .ui.violet.statistics .statistic > .value,
  317. .ui.statistics .violet.statistic > .value,
  318. .ui.violet.statistic > .value {
  319. color: #6435C9;
  320. }
  321. .ui.purple.statistics .statistic > .value,
  322. .ui.statistics .purple.statistic > .value,
  323. .ui.purple.statistic > .value {
  324. color: #A333C8;
  325. }
  326. .ui.pink.statistics .statistic > .value,
  327. .ui.statistics .pink.statistic > .value,
  328. .ui.pink.statistic > .value {
  329. color: #E03997;
  330. }
  331. .ui.brown.statistics .statistic > .value,
  332. .ui.statistics .brown.statistic > .value,
  333. .ui.brown.statistic > .value {
  334. color: #A5673F;
  335. }
  336. .ui.grey.statistics .statistic > .value,
  337. .ui.statistics .grey.statistic > .value,
  338. .ui.grey.statistic > .value {
  339. color: #767676;
  340. }
  341. /*--------------
  342. Inverted
  343. ---------------*/
  344. .ui.inverted.statistics .statistic > .value,
  345. .ui.inverted.statistic .value {
  346. color: #FFFFFF;
  347. }
  348. .ui.inverted.statistics .statistic > .label,
  349. .ui.inverted.statistic .label {
  350. color: rgba(255, 255, 255, 0.9);
  351. }
  352. .ui.inverted.red.statistics .statistic > .value,
  353. .ui.statistics .inverted.red.statistic > .value,
  354. .ui.inverted.red.statistic > .value {
  355. color: #FF695E;
  356. }
  357. .ui.inverted.orange.statistics .statistic > .value,
  358. .ui.statistics .inverted.orange.statistic > .value,
  359. .ui.inverted.orange.statistic > .value {
  360. color: #FF851B;
  361. }
  362. .ui.inverted.yellow.statistics .statistic > .value,
  363. .ui.statistics .inverted.yellow.statistic > .value,
  364. .ui.inverted.yellow.statistic > .value {
  365. color: #FFE21F;
  366. }
  367. .ui.inverted.olive.statistics .statistic > .value,
  368. .ui.statistics .inverted.olive.statistic > .value,
  369. .ui.inverted.olive.statistic > .value {
  370. color: #D9E778;
  371. }
  372. .ui.inverted.green.statistics .statistic > .value,
  373. .ui.statistics .inverted.green.statistic > .value,
  374. .ui.inverted.green.statistic > .value {
  375. color: #2ECC40;
  376. }
  377. .ui.inverted.teal.statistics .statistic > .value,
  378. .ui.statistics .inverted.teal.statistic > .value,
  379. .ui.inverted.teal.statistic > .value {
  380. color: #6DFFFF;
  381. }
  382. .ui.inverted.blue.statistics .statistic > .value,
  383. .ui.statistics .inverted.blue.statistic > .value,
  384. .ui.inverted.blue.statistic > .value {
  385. color: #54C8FF;
  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.inverted.purple.statistics .statistic > .value,
  393. .ui.statistics .inverted.purple.statistic > .value,
  394. .ui.inverted.purple.statistic > .value {
  395. color: #DC73FF;
  396. }
  397. .ui.inverted.pink.statistics .statistic > .value,
  398. .ui.statistics .inverted.pink.statistic > .value,
  399. .ui.inverted.pink.statistic > .value {
  400. color: #FF8EDF;
  401. }
  402. .ui.inverted.brown.statistics .statistic > .value,
  403. .ui.statistics .inverted.brown.statistic > .value,
  404. .ui.inverted.brown.statistic > .value {
  405. color: #D67C1C;
  406. }
  407. .ui.inverted.grey.statistics .statistic > .value,
  408. .ui.statistics .inverted.grey.statistic > .value,
  409. .ui.inverted.grey.statistic > .value {
  410. color: #DCDDDE;
  411. }
  412. /*--------------
  413. Floated
  414. ---------------*/
  415. .ui[class*="left floated"].statistic {
  416. float: left;
  417. margin: 0em 2em 1em 0em;
  418. }
  419. .ui[class*="right floated"].statistic {
  420. float: right;
  421. margin: 0em 0em 1em 2em;
  422. }
  423. .ui.floated.statistic:last-child {
  424. margin-bottom: 0em;
  425. }
  426. /*--------------
  427. Sizes
  428. ---------------*/
  429. /* Mini */
  430. .ui.mini.statistics .statistic > .value,
  431. .ui.mini.statistic > .value {
  432. font-size: 1.5rem !important;
  433. }
  434. .ui.mini.horizontal.statistics .statistic > .value,
  435. .ui.mini.horizontal.statistic > .value {
  436. font-size: 1.5rem !important;
  437. }
  438. .ui.mini.statistics .statistic > .text.value,
  439. .ui.mini.statistic > .text.value {
  440. font-size: 1rem !important;
  441. }
  442. /* Tiny */
  443. .ui.tiny.statistics .statistic > .value,
  444. .ui.tiny.statistic > .value {
  445. font-size: 2rem !important;
  446. }
  447. .ui.tiny.horizontal.statistics .statistic > .value,
  448. .ui.tiny.horizontal.statistic > .value {
  449. font-size: 2rem !important;
  450. }
  451. .ui.tiny.statistics .statistic > .text.value,
  452. .ui.tiny.statistic > .text.value {
  453. font-size: 1rem !important;
  454. }
  455. /* Small */
  456. .ui.small.statistics .statistic > .value,
  457. .ui.small.statistic > .value {
  458. font-size: 3rem !important;
  459. }
  460. .ui.small.horizontal.statistics .statistic > .value,
  461. .ui.small.horizontal.statistic > .value {
  462. font-size: 2rem !important;
  463. }
  464. .ui.small.statistics .statistic > .text.value,
  465. .ui.small.statistic > .text.value {
  466. font-size: 1rem !important;
  467. }
  468. /* Medium */
  469. .ui.statistics .statistic > .value,
  470. .ui.statistic > .value {
  471. font-size: 4rem !important;
  472. }
  473. .ui.horizontal.statistics .statistic > .value,
  474. .ui.horizontal.statistic > .value {
  475. font-size: 3rem !important;
  476. }
  477. .ui.statistics .statistic > .text.value,
  478. .ui.statistic > .text.value {
  479. font-size: 2rem !important;
  480. }
  481. /* Large */
  482. .ui.large.statistics .statistic > .value,
  483. .ui.large.statistic > .value {
  484. font-size: 5rem !important;
  485. }
  486. .ui.large.horizontal.statistics .statistic > .value,
  487. .ui.large.horizontal.statistic > .value {
  488. font-size: 4rem !important;
  489. }
  490. .ui.large.statistics .statistic > .text.value,
  491. .ui.large.statistic > .text.value {
  492. font-size: 2.5rem !important;
  493. }
  494. /* Huge */
  495. .ui.huge.statistics .statistic > .value,
  496. .ui.huge.statistic > .value {
  497. font-size: 6rem !important;
  498. }
  499. .ui.huge.horizontal.statistics .statistic > .value,
  500. .ui.huge.horizontal.statistic > .value {
  501. font-size: 5rem !important;
  502. }
  503. .ui.huge.statistics .statistic > .text.value,
  504. .ui.huge.statistic > .text.value {
  505. font-size: 2.5rem !important;
  506. }
  507. /*******************************
  508. Theme Overrides
  509. *******************************/
  510. /*******************************
  511. User Variable Overrides
  512. *******************************/