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.

578 lines
13 KiB

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