github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/views/statistic.less (about)

     1  /*!
     2   * # Semantic UI - Statistic
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  /*******************************
    13              Theme
    14  *******************************/
    15  
    16  @type    : 'view';
    17  @element : 'statistic';
    18  
    19  @import (multiple) '../../theme.config';
    20  
    21  /*******************************
    22             Statistic
    23  *******************************/
    24  
    25  /* Standalone */
    26  .ui.statistic {
    27    display: @display;
    28    margin: @margin;
    29    max-width: @maxWidth;
    30  }
    31  
    32  .ui.statistic + .ui.statistic {
    33    margin: 0em 0em 0em @horizontalSpacing;
    34  }
    35  
    36  .ui.statistic:first-child {
    37    margin-top: 0em;
    38  }
    39  .ui.statistic:last-child {
    40    margin-bottom: 0em;
    41  }
    42  
    43  /* Grouped */
    44  .ui.statistics > .statistic {
    45    display: @elementDisplay;
    46    float: @elementFloat;
    47    margin: @elementMargin;
    48    max-width: @elementMaxWidth;
    49  }
    50  
    51  
    52  /*******************************
    53              Group
    54  *******************************/
    55  
    56  .ui.statistics {
    57    display: @groupDisplay;
    58    margin: @groupMargin;
    59  }
    60  
    61  /* Clearing */
    62  .ui.statistics:after {
    63    display: block;
    64    content: ' ';
    65    height: 0px;
    66    clear: both;
    67    overflow: hidden;
    68    visibility: hidden;
    69  }
    70  
    71  .ui.statistics:first-child {
    72    margin-top: 0em;
    73  }
    74  .ui.statistics:last-child {
    75    margin-bottom: 0em;
    76  }
    77  
    78  
    79  /*******************************
    80              Content
    81  *******************************/
    82  
    83  
    84  /*--------------
    85        Value
    86  ---------------*/
    87  
    88  .ui.statistics .statistic > .value,
    89  .ui.statistic > .value {
    90    font-family: @valueFont;
    91    font-size: @valueSize;
    92    font-weight: @valueFontWeight;
    93    line-height: @valueLineHeight;
    94    color: @valueColor;
    95    text-transform: @valueTextTransform;
    96    text-align: @textAlign;
    97  }
    98  
    99  /*--------------
   100       Label
   101  ---------------*/
   102  
   103  .ui.statistics .statistic > .label,
   104  .ui.statistic > .label {
   105    font-family: @labelFont;
   106    font-size: @labelSize;
   107    font-weight: @labelFontWeight;
   108    color: @labelColor;
   109    text-transform: @labelTextTransform;
   110    text-align: @textAlign;
   111  }
   112  
   113  /* Top Label */
   114  .ui.statistics .statistic > .label ~ .value,
   115  .ui.statistic > .label ~ .value {
   116    margin-top: @topLabelDistance;
   117  }
   118  
   119  /* Bottom Label */
   120  .ui.statistics .statistic > .value ~ .label,
   121  .ui.statistic > .value ~ .label {
   122    margin-top: @bottomLabelDistance;
   123  }
   124  
   125  
   126  
   127  /*******************************
   128               Types
   129  *******************************/
   130  
   131  /*--------------
   132     Icon Value
   133  ---------------*/
   134  
   135  .ui.statistics .statistic > .value .icon,
   136  .ui.statistic > .value .icon {
   137    opacity: 1;
   138    width: auto;
   139    margin: 0em;
   140  }
   141  
   142  /*--------------
   143     Text Value
   144  ---------------*/
   145  
   146  .ui.statistics .statistic > .text.value,
   147  .ui.statistic > .text.value {
   148    line-height: @textLabelLineHeight;
   149    min-height: @textLabelMinHeight;
   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  /*--------------
   158     Image Value
   159  ---------------*/
   160  
   161  .ui.statistics .statistic > .value img,
   162  .ui.statistic > .value img {
   163    max-height: @imageHeight;
   164    vertical-align: @imageVerticalAlign;
   165  }
   166  
   167  
   168  
   169  /*******************************
   170              Variations
   171  *******************************/
   172  
   173  /*--------------
   174     Horizontal
   175  ---------------*/
   176  
   177  .ui.horizontal.statistics,
   178  .ui.horizontal.statistic {
   179    display: block;
   180    margin: 0em;
   181    max-width: 9999px;
   182  }
   183  .ui.horizontal.statistics .statistic {
   184    float: none;
   185    margin: @horizontalGroupElementMargin;
   186    max-width: 9999px;
   187  }
   188  
   189  .ui.horizontal.statistic > .text.value,
   190  .ui.horizontal.statistics > .statistic > .text.value {
   191    min-height: 0em !important;
   192  }
   193  .ui.horizontal.statistics .statistic > .value .icon,
   194  .ui.horizontal.statistic > .value .icon {
   195    width: @iconWidth;
   196  }
   197  
   198  .ui.horizontal.statistics .statistic > .value,
   199  .ui.horizontal.statistic > .value {
   200    display: inline-block;
   201    vertical-align: middle;
   202  }
   203  .ui.horizontal.statistics .statistic > .label,
   204  .ui.horizontal.statistic > .label {
   205    display: inline-block;
   206    vertical-align: middle;
   207    margin: 0em 0em 0em @horizontalLabelDistance;
   208  }
   209  
   210  /*--------------
   211       Colors
   212  ---------------*/
   213  
   214  .ui.blue.statistics .statistic > .value,
   215  .ui.statistics .blue.statistic > .value,
   216  .ui.blue.statistic > .value {
   217    color: @blue;
   218  }
   219  .ui.green.statistics .statistic > .value,
   220  .ui.statistics .green.statistic > .value,
   221  .ui.green.statistic > .value {
   222    color: @green;
   223  }
   224  .ui.orange.statistics .statistic > .value,
   225  .ui.statistics .orange.statistic > .value,
   226  .ui.orange.statistic > .value {
   227    color: @orange;
   228  }
   229  .ui.pink.statistics .statistic > .value,
   230  .ui.statistics .pink.statistic > .value,
   231  .ui.pink.statistic > .value {
   232    color: @pink;
   233  }
   234  .ui.purple.statistics .statistic > .value,
   235  .ui.statistics .purple.statistic > .value,
   236  .ui.purple.statistic > .value {
   237    color: @purple;
   238  }
   239  .ui.red.statistics .statistic > .value,
   240  .ui.statistics .red.statistic > .value,
   241  .ui.red.statistic > .value {
   242    color: @red;
   243  }
   244  .ui.teal.statistics .statistic > .value,
   245  .ui.statistics .teal.statistic > .value,
   246  .ui.teal.statistic > .value {
   247    color: @teal;
   248  }
   249  .ui.yellow.statistics .statistic > .value,
   250  .ui.statistics .yellow.statistic > .value,
   251  .ui.yellow.statistic > .value {
   252    color: @yellow;
   253  }
   254  
   255  /*--------------
   256      Floated
   257  ---------------*/
   258  
   259  .ui[class*="left floated"].statistic {
   260    float: left;
   261    margin: @leftFloatedMargin;
   262  }
   263  .ui[class*="right floated"].statistic {
   264    float: right;
   265    margin: @rightFloatedMargin;
   266  }
   267  .ui.floated.statistic:last-child {
   268    margin-bottom: 0em;
   269  }
   270  
   271  /*--------------
   272      Inverted
   273  ---------------*/
   274  
   275  .ui.inverted.statistic .value {
   276    color: @invertedValueColor;
   277  }
   278  .ui.inverted.statistic .label {
   279    color: @invertedLabelColor;
   280  }
   281  
   282  .ui.inverted.blue.statistics .statistic > .value,
   283  .ui.statistics .inverted.blue.statistic > .value,
   284  .ui.inverted.blue.statistic > .value {
   285    color: @lightBlue;
   286  }
   287  .ui.inverted.green.statistics .statistic > .value,
   288  .ui.statistics .inverted.green.statistic > .value,
   289  .ui.inverted.green.statistic > .value {
   290    color: @lightGreen;
   291  }
   292  .ui.inverted.orange.statistics .statistic > .value,
   293  .ui.statistics .inverted.orange.statistic > .value,
   294  .ui.inverted.orange.statistic > .value {
   295    color: @lightOrange;
   296  }
   297  .ui.inverted.pink.statistics .statistic > .value,
   298  .ui.statistics .inverted.pink.statistic > .value,
   299  .ui.inverted.pink.statistic > .value {
   300    color: @lightPink;
   301  }
   302  .ui.inverted.purple.statistics .statistic > .value,
   303  .ui.statistics .inverted.purple.statistic > .value,
   304  .ui.inverted.purple.statistic > .value {
   305    color: @lightPurple;
   306  }
   307  .ui.inverted.red.statistics .statistic > .value,
   308  .ui.statistics .inverted.red.statistic > .value,
   309  .ui.inverted.red.statistic > .value {
   310    color: @lightRed;
   311  }
   312  .ui.inverted.teal.statistics .statistic > .value,
   313  .ui.statistics .inverted.teal.statistic > .value,
   314  .ui.inverted.teal.statistic > .value {
   315    color: @lightTeal;
   316  }
   317  .ui.inverted.yellow.statistics .statistic > .value,
   318  .ui.statistics .inverted.yellow.statistic > .value,
   319  .ui.inverted.yellow.statistic > .value {
   320    color: @lightYellow;
   321  }
   322  
   323  /*--------------
   324       Sizes
   325  ---------------*/
   326  
   327  
   328  /* Mini */
   329  .ui.mini.statistics .statistic > .value,
   330  .ui.mini.statistic > .value {
   331    font-size: @miniValueSize;
   332  }
   333  .ui.mini.horizontal.statistics .statistic > .value,
   334  .ui.mini.horizontal.statistic > .value {
   335    font-size: @miniHorizontalValueSize;
   336  }
   337  .ui.mini.statistics .statistic > .text.value,
   338  .ui.mini.statistic > .text.value {
   339    font-size: @miniTextLabelSize;
   340  }
   341  
   342  
   343  /* Tiny */
   344  .ui.tiny.statistics .statistic > .value,
   345  .ui.tiny.statistic > .value {
   346    font-size: @tinyValueSize;
   347  }
   348  .ui.tiny.horizontal.statistics .statistic > .value,
   349  .ui.tiny.horizontal.statistic > .value {
   350    font-size: @tinyHorizontalValueSize;
   351  }
   352  .ui.tiny.statistics .statistic > .text.value,
   353  .ui.tiny.statistic > .text.value {
   354    font-size: @tinyTextLabelSize;
   355  }
   356  
   357  /* Small */
   358  .ui.small.statistics .statistic > .value,
   359  .ui.small.statistic > .value {
   360    font-size: @smallValueSize;
   361  }
   362  .ui.small.horizontal.statistics .statistic > .value,
   363  .ui.small.horizontal.statistic > .value {
   364    font-size: @smallHorizontalValueSize;
   365  }
   366  .ui.small.statistics .statistic > .text.value,
   367  .ui.small.statistic > .text.value {
   368    font-size: @smallTextLabelSize;
   369  }
   370  
   371  /* Medium */
   372  .ui.statistics .statistic > .value,
   373  .ui.statistic > .value {
   374    font-size: @valueSize;
   375  }
   376  .ui.horizontal.statistics .statistic > .value,
   377  .ui.horizontal.statistic > .value {
   378    font-size: @horizontalValueSize;
   379  }
   380  .ui.statistics .statistic > .text.value,
   381  .ui.statistic > .text.value {
   382    font-size: @textLabelSize;
   383  }
   384  
   385  /* Large */
   386  .ui.large.statistics .statistic > .value,
   387  .ui.large.statistic > .value {
   388    font-size: @largeValueSize;
   389  }
   390  .ui.large.horizontal.statistics .statistic > .value,
   391  .ui.large.horizontal.statistic > .value {
   392    font-size: @largeHorizontalValueSize;
   393  }
   394  .ui.large.statistics .statistic > .text.value,
   395  .ui.large.statistic > .text.value {
   396    font-size: @largeTextLabelSize;
   397  }
   398  
   399  /* Huge */
   400  .ui.huge.statistics .statistic > .value,
   401  .ui.huge.statistic > .value {
   402    font-size: @hugeValueSize;
   403  }
   404  .ui.huge.horizontal.statistics .statistic > .value,
   405  .ui.huge.horizontal.statistic > .value {
   406    font-size: @hugeHorizontalValueSize;
   407  }
   408  .ui.huge.statistics .statistic > .text.value,
   409  .ui.huge.statistic > .text.value {
   410    font-size: @hugeTextLabelSize;
   411  }
   412  
   413  
   414  .loadUIOverrides();