|
|
/* * # Semantic - Statistic * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Theme*******************************/
@type : 'view';@element : 'statistic';
@import '../../semantic.config';
/******************************* Statistic*******************************/
/* Standalone */.ui.statistic { display: @display; margin: @margin; max-width: @maxWidth;}
.ui.statistic + .ui.statistic { margin: 0em 0em 0em @horizontalSpacing;}
.ui.statistic:first-child { margin-top: 0em;}.ui.statistic:last-child { margin-bottom: 0em;}
/* Grouped */.ui.statistics > .statistic { display: @elementDisplay; float: @elementFloat; margin: @elementMargin; max-width: @elementMaxWidth;}
/******************************* Group*******************************/
.ui.statistics { display: @groupDisplay; margin: @groupMargin;}
/* Clearing */.ui.statistics:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden;}
.ui.statistics:first-child { margin-top: 0em;}.ui.statistics:last-child { margin-bottom: 0em;}
/******************************* Content*******************************/
/*-------------- Value---------------*/
.ui.statistics .statistic > .value,.ui.statistic > .value { font-family: @valueFont; font-size: @valueSize; font-weight: @valueFontWeight; line-height: @valueLineHeight; color: @valueColor; text-transform: @valueTextTransform; text-align: @textAlign;}
/*-------------- Label---------------*/
.ui.statistics .statistic > .label,.ui.statistic > .label { font-family: @labelFont; font-size: @labelSize; font-weight: @labelFontWeight; color: @labelColor; text-transform: @labelTextTransform; text-align: @textAlign;}
/* Top Label */.ui.statistics .statistic > .label ~ .value,.ui.statistic > .label ~ .value { margin-top: @topLabelDistance;}
/* Bottom Label */.ui.statistics .statistic > .value ~ .label,.ui.statistic > .value ~ .label { margin-top: @bottomLabelDistance;}
/******************************* Types*******************************/
/*-------------- Icon Value---------------*/
.ui.statistics .statistic > .value .icon,.ui.statistic > .value .icon { opacity: 1; width: auto;}
/*-------------- Text Value---------------*/
.ui.statistics .statistic > .text.value,.ui.statistic > .text.value { line-height: @textLabelLineHeight; min-height: @textLabelMinHeight; text-align: center;}.ui.statistics .statistic > .text.value + .label,.ui.statistic > .text.value + .label { text-align: center;}
/*-------------- Image Value---------------*/
.ui.statistics .statistic > .value img,.ui.statistic > .value img { max-height: @imageHeight; vertical-align: @imageVerticalAlign;}
/******************************* Variations*******************************/
/*-------------- Horizontal---------------*/
.ui.horizontal.statistics,.ui.horizontal.statistic { display: block; margin: 0em; max-width: 9999px;}.ui.horizontal.statistics .statistic { float: none; margin: @horizontalGroupElementMargin; max-width: 9999px;}
.ui.horizontal.statistic > .text.value,.ui.horizontal.statistics > .statistic > .text.value { min-height: 0em !important;}
.ui.horizontal.statistics .statistic > .value,.ui.horizontal.statistic > .value { display: inline-block; vertical-align: middle;}.ui.horizontal.statistics .statistic > .label,.ui.horizontal.statistic > .label { display: inline-block; vertical-align: middle; margin: 0em 0em 0em @horizontalLabelDistance;}
/*-------------- Colors---------------*/
.ui.blue.statistics .statistic > .value,.ui.statistics .blue.statistic > .value,.ui.blue.statistic > .value { color: @blue;}.ui.green.statistics .statistic > .value,.ui.statistics .green.statistic > .value,.ui.green.statistic > .value { color: @green;}.ui.orange.statistics .statistic > .value,.ui.statistics .orange.statistic > .value,.ui.orange.statistic > .value { color: @orange;}.ui.pink.statistics .statistic > .value,.ui.statistics .pink.statistic > .value,.ui.pink.statistic > .value { color: @pink;}.ui.purple.statistics .statistic > .value,.ui.statistics .purple.statistic > .value,.ui.purple.statistic > .value { color: @purple;}.ui.red.statistics .statistic > .value,.ui.statistics .red.statistic > .value,.ui.red.statistic > .value { color: @red;}.ui.teal.statistics .statistic > .value,.ui.statistics .teal.statistic > .value,.ui.teal.statistic > .value { color: @teal;}.ui.yellow.statistics .statistic > .value,.ui.statistics .yellow.statistic > .value,.ui.yellow.statistic > .value { color: @yellow;}
/*-------------- Floated---------------*/
.ui.left.floated.statistic { float: left; margin: @leftFloatedMargin;}.ui.right.floated.statistic { float: right; margin: @rightFloatedMargin;}.ui.floated.statistic:last-child { margin-bottom: 0em;}
/*-------------- Inverted---------------*/
.ui.inverted.statistic .value { color: @invertedValueColor;}.ui.inverted.statistic .label { color: @invertedLabelColor;}
.ui.inverted.blue.statistics .statistic > .value,.ui.statistics .inverted.blue.statistic > .value,.ui.inverted.blue.statistic > .value { color: @lightBlue;}.ui.inverted.green.statistics .statistic > .value,.ui.statistics .inverted.green.statistic > .value,.ui.inverted.green.statistic > .value { color: @lightGreen;}.ui.inverted.orange.statistics .statistic > .value,.ui.statistics .inverted.orange.statistic > .value,.ui.inverted.orange.statistic > .value { color: @lightOrange;}.ui.inverted.pink.statistics .statistic > .value,.ui.statistics .inverted.pink.statistic > .value,.ui.inverted.pink.statistic > .value { color: @lightPink;}.ui.inverted.purple.statistics .statistic > .value,.ui.statistics .inverted.purple.statistic > .value,.ui.inverted.purple.statistic > .value { color: @lightPurple;}.ui.inverted.red.statistics .statistic > .value,.ui.statistics .inverted.red.statistic > .value,.ui.inverted.red.statistic > .value { color: @lightRed;}.ui.inverted.teal.statistics .statistic > .value,.ui.statistics .inverted.teal.statistic > .value,.ui.inverted.teal.statistic > .value { color: @lightTeal;}.ui.inverted.yellow.statistics .statistic > .value,.ui.statistics .inverted.yellow.statistic > .value,.ui.inverted.yellow.statistic > .value { color: @lightYellow;}
/*-------------- Sizes---------------*/
/* Mini */.ui.mini.statistics .statistic > .value,.ui.mini.statistic > .value { font-size: @miniValueSize;}.ui.mini.horizontal.statistics .statistic > .value,.ui.mini.horizontal.statistic > .value { font-size: @miniHorizontalValueSize;}.ui.mini.statistics .statistic > .text.value,.ui.mini.statistic > .text.value { font-size: @miniTextLabelSize;}
/* Tiny */.ui.tiny.statistics .statistic > .value,.ui.tiny.statistic > .value { font-size: @tinyValueSize;}.ui.tiny.horizontal.statistics .statistic > .value,.ui.tiny.horizontal.statistic > .value { font-size: @tinyHorizontalValueSize;}.ui.tiny.statistics .statistic > .text.value,.ui.tiny.statistic > .text.value { font-size: @tinyTextLabelSize;}
/* Small */.ui.small.statistics .statistic > .value,.ui.small.statistic > .value { font-size: @smallValueSize;}.ui.small.horizontal.statistics .statistic > .value,.ui.small.horizontal.statistic > .value { font-size: @smallHorizontalValueSize;}.ui.small.statistics .statistic > .text.value,.ui.small.statistic > .text.value { font-size: @smallTextLabelSize;}
/* Medium */.ui.statistics .statistic > .value,.ui.statistic > .value { font-size: @valueSize;}.ui.horizontal.statistics .statistic > .value,.ui.horizontal.statistic > .value { font-size: @horizontalValueSize;}.ui.statistics .statistic > .text.value,.ui.statistic > .text.value { font-size: @textLabelSize;}
/* Large */.ui.large.statistics .statistic > .value,.ui.large.statistic > .value { font-size: @largeValueSize;}.ui.large.horizontal.statistics .statistic > .value,.ui.large.horizontal.statistic > .value { font-size: @largeHorizontalValueSize;}.ui.large.statistics .statistic > .text.value,.ui.large.statistic > .text.value { font-size: @largeTextLabelSize;}
/* Huge */.ui.huge.statistics .statistic > .value,.ui.huge.statistic > .value { font-size: @hugeValueSize;}.ui.huge.horizontal.statistics .statistic > .value,.ui.huge.horizontal.statistic > .value { font-size: @hugeHorizontalValueSize;}.ui.huge.statistics .statistic > .text.value,.ui.huge.statistic > .text.value { font-size: @hugeTextLabelSize;}
.loadUIOverrides();
|
