github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/statistic.css (about)

     1  /*!
     2   * # Semantic UI x.x - 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  /*******************************
    14             Statistic
    15  *******************************/
    16  
    17  
    18  /* Standalone */
    19  .ui.statistic {
    20    display: inline-block;
    21    margin: 1em 0em;
    22    max-width: 175px;
    23  }
    24  .ui.statistic + .ui.statistic {
    25    margin: 0em 0em 0em 1em;
    26  }
    27  .ui.statistic:first-child {
    28    margin-top: 0em;
    29  }
    30  .ui.statistic:last-child {
    31    margin-bottom: 0em;
    32  }
    33  
    34  /* Grouped */
    35  .ui.statistics > .statistic {
    36    display: block;
    37    float: left;
    38    margin: 0em 1em 2em;
    39    max-width: 175px;
    40  }
    41  
    42  
    43  /*******************************
    44              Group
    45  *******************************/
    46  
    47  .ui.statistics {
    48    display: block;
    49    margin: 1em -1em;
    50  }
    51  
    52  /* Clearing */
    53  .ui.statistics:after {
    54    display: block;
    55    content: ' ';
    56    height: 0px;
    57    clear: both;
    58    overflow: hidden;
    59    visibility: hidden;
    60  }
    61  .ui.statistics:first-child {
    62    margin-top: 0em;
    63  }
    64  .ui.statistics:last-child {
    65    margin-bottom: 0em;
    66  }
    67  
    68  
    69  /*******************************
    70              Content
    71  *******************************/
    72  
    73  
    74  /*--------------
    75        Value
    76  ---------------*/
    77  
    78  .ui.statistics .statistic > .value,
    79  .ui.statistic > .value {
    80    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    81    font-size: 4rem;
    82    font-weight: normal;
    83    line-height: 1em;
    84    color: #1b1c1d;
    85    text-transform: uppercase;
    86    text-align: center;
    87  }
    88  
    89  /*--------------
    90       Label
    91  ---------------*/
    92  
    93  .ui.statistics .statistic > .label,
    94  .ui.statistic > .label {
    95    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    96    font-size: 1rem;
    97    font-weight: normal;
    98    color: rgba(0, 0, 0, 0.4);
    99    text-transform: none;
   100    text-align: center;
   101  }
   102  
   103  /* Top Label */
   104  .ui.statistics .statistic > .label ~ .value,
   105  .ui.statistic > .label ~ .value {
   106    margin-top: 0rem;
   107  }
   108  
   109  /* Bottom Label */
   110  .ui.statistics .statistic > .value ~ .label,
   111  .ui.statistic > .value ~ .label {
   112    margin-top: 0.25rem;
   113  }
   114  
   115  
   116  /*******************************
   117               Types
   118  *******************************/
   119  
   120  
   121  /*--------------
   122     Icon Value
   123  ---------------*/
   124  
   125  .ui.statistics .statistic > .value .icon,
   126  .ui.statistic > .value .icon {
   127    opacity: 1;
   128    width: auto;
   129    margin: 0em;
   130  }
   131  
   132  /*--------------
   133     Text Value
   134  ---------------*/
   135  
   136  .ui.statistics .statistic > .text.value,
   137  .ui.statistic > .text.value {
   138    line-height: 1em;
   139    min-height: 2em;
   140    text-align: center;
   141  }
   142  .ui.statistics .statistic > .text.value + .label,
   143  .ui.statistic > .text.value + .label {
   144    text-align: center;
   145  }
   146  
   147  /*--------------
   148     Image Value
   149  ---------------*/
   150  
   151  .ui.statistics .statistic > .value img,
   152  .ui.statistic > .value img {
   153    max-height: 3rem;
   154    vertical-align: baseline;
   155  }
   156  
   157  
   158  /*******************************
   159              Variations
   160  *******************************/
   161  
   162  
   163  /*--------------
   164     Horizontal
   165  ---------------*/
   166  
   167  .ui.horizontal.statistics,
   168  .ui.horizontal.statistic {
   169    display: block;
   170    margin: 0em;
   171    max-width: 9999px;
   172  }
   173  .ui.horizontal.statistics .statistic {
   174    float: none;
   175    margin: 1em 0em;
   176    max-width: 9999px;
   177  }
   178  .ui.horizontal.statistic > .text.value,
   179  .ui.horizontal.statistics > .statistic > .text.value {
   180    min-height: 0em !important;
   181  }
   182  .ui.horizontal.statistics .statistic > .value .icon,
   183  .ui.horizontal.statistic > .value .icon {
   184    width: 1.18em;
   185  }
   186  .ui.horizontal.statistics .statistic > .value,
   187  .ui.horizontal.statistic > .value {
   188    display: inline-block;
   189    vertical-align: middle;
   190  }
   191  .ui.horizontal.statistics .statistic > .label,
   192  .ui.horizontal.statistic > .label {
   193    display: inline-block;
   194    vertical-align: middle;
   195    margin: 0em 0em 0em 0.75em;
   196  }
   197  
   198  /*--------------
   199       Colors
   200  ---------------*/
   201  
   202  .ui.blue.statistics .statistic > .value,
   203  .ui.statistics .blue.statistic > .value,
   204  .ui.blue.statistic > .value {
   205    color: #006e93;
   206  }
   207  .ui.green.statistics .statistic > .value,
   208  .ui.statistics .green.statistic > .value,
   209  .ui.green.statistic > .value {
   210    color: #5bbd72;
   211  }
   212  .ui.orange.statistics .statistic > .value,
   213  .ui.statistics .orange.statistic > .value,
   214  .ui.orange.statistic > .value {
   215    color: #e07b53;
   216  }
   217  .ui.pink.statistics .statistic > .value,
   218  .ui.statistics .pink.statistic > .value,
   219  .ui.pink.statistic > .value {
   220    color: #d9499a;
   221  }
   222  .ui.purple.statistics .statistic > .value,
   223  .ui.statistics .purple.statistic > .value,
   224  .ui.purple.statistic > .value {
   225    color: #564f8a;
   226  }
   227  .ui.red.statistics .statistic > .value,
   228  .ui.statistics .red.statistic > .value,
   229  .ui.red.statistic > .value {
   230    color: #d95c5c;
   231  }
   232  .ui.teal.statistics .statistic > .value,
   233  .ui.statistics .teal.statistic > .value,
   234  .ui.teal.statistic > .value {
   235    color: #00b5ad;
   236  }
   237  .ui.yellow.statistics .statistic > .value,
   238  .ui.statistics .yellow.statistic > .value,
   239  .ui.yellow.statistic > .value {
   240    color: #f2c61f;
   241  }
   242  
   243  /*--------------
   244      Floated
   245  ---------------*/
   246  
   247  .ui[class*="left floated"].statistic {
   248    float: left;
   249    margin: 0em 2em 1em 0em;
   250  }
   251  .ui[class*="right floated"].statistic {
   252    float: right;
   253    margin: 0em 0em 1em 2em;
   254  }
   255  .ui.floated.statistic:last-child {
   256    margin-bottom: 0em;
   257  }
   258  
   259  /*--------------
   260      Inverted
   261  ---------------*/
   262  
   263  .ui.inverted.statistic .value {
   264    color: #ffffff;
   265  }
   266  .ui.inverted.statistic .label {
   267    color: rgba(255, 255, 255, 0.8);
   268  }
   269  .ui.inverted.blue.statistics .statistic > .value,
   270  .ui.statistics .inverted.blue.statistic > .value,
   271  .ui.inverted.blue.statistic > .value {
   272    color: #0097c9;
   273  }
   274  .ui.inverted.green.statistics .statistic > .value,
   275  .ui.statistics .inverted.green.statistic > .value,
   276  .ui.inverted.green.statistic > .value {
   277    color: #2ecc40;
   278  }
   279  .ui.inverted.orange.statistics .statistic > .value,
   280  .ui.statistics .inverted.orange.statistic > .value,
   281  .ui.inverted.orange.statistic > .value {
   282    color: #ff851b;
   283  }
   284  .ui.inverted.pink.statistics .statistic > .value,
   285  .ui.statistics .inverted.pink.statistic > .value,
   286  .ui.inverted.pink.statistic > .value {
   287    color: #ff8edf;
   288  }
   289  .ui.inverted.purple.statistics .statistic > .value,
   290  .ui.statistics .inverted.purple.statistic > .value,
   291  .ui.inverted.purple.statistic > .value {
   292    color: #cdc6ff;
   293  }
   294  .ui.inverted.red.statistics .statistic > .value,
   295  .ui.statistics .inverted.red.statistic > .value,
   296  .ui.inverted.red.statistic > .value {
   297    color: #ff695e;
   298  }
   299  .ui.inverted.teal.statistics .statistic > .value,
   300  .ui.statistics .inverted.teal.statistic > .value,
   301  .ui.inverted.teal.statistic > .value {
   302    color: #6dffff;
   303  }
   304  .ui.inverted.yellow.statistics .statistic > .value,
   305  .ui.statistics .inverted.yellow.statistic > .value,
   306  .ui.inverted.yellow.statistic > .value {
   307    color: #ffe21f;
   308  }
   309  
   310  /*--------------
   311       Sizes
   312  ---------------*/
   313  
   314  
   315  /* Mini */
   316  .ui.mini.statistics .statistic > .value,
   317  .ui.mini.statistic > .value {
   318    font-size: 1.5rem;
   319  }
   320  .ui.mini.horizontal.statistics .statistic > .value,
   321  .ui.mini.horizontal.statistic > .value {
   322    font-size: 1.5rem;
   323  }
   324  .ui.mini.statistics .statistic > .text.value,
   325  .ui.mini.statistic > .text.value {
   326    font-size: 1rem;
   327  }
   328  
   329  /* Tiny */
   330  .ui.tiny.statistics .statistic > .value,
   331  .ui.tiny.statistic > .value {
   332    font-size: 2rem;
   333  }
   334  .ui.tiny.horizontal.statistics .statistic > .value,
   335  .ui.tiny.horizontal.statistic > .value {
   336    font-size: 2rem;
   337  }
   338  .ui.tiny.statistics .statistic > .text.value,
   339  .ui.tiny.statistic > .text.value {
   340    font-size: 1rem;
   341  }
   342  
   343  /* Small */
   344  .ui.small.statistics .statistic > .value,
   345  .ui.small.statistic > .value {
   346    font-size: 3rem;
   347  }
   348  .ui.small.horizontal.statistics .statistic > .value,
   349  .ui.small.horizontal.statistic > .value {
   350    font-size: 2rem;
   351  }
   352  .ui.small.statistics .statistic > .text.value,
   353  .ui.small.statistic > .text.value {
   354    font-size: 1.5rem;
   355  }
   356  
   357  /* Medium */
   358  .ui.statistics .statistic > .value,
   359  .ui.statistic > .value {
   360    font-size: 4rem;
   361  }
   362  .ui.horizontal.statistics .statistic > .value,
   363  .ui.horizontal.statistic > .value {
   364    font-size: 3rem;
   365  }
   366  .ui.statistics .statistic > .text.value,
   367  .ui.statistic > .text.value {
   368    font-size: 2rem;
   369  }
   370  
   371  /* Large */
   372  .ui.large.statistics .statistic > .value,
   373  .ui.large.statistic > .value {
   374    font-size: 5rem;
   375  }
   376  .ui.large.horizontal.statistics .statistic > .value,
   377  .ui.large.horizontal.statistic > .value {
   378    font-size: 4rem;
   379  }
   380  .ui.large.statistics .statistic > .text.value,
   381  .ui.large.statistic > .text.value {
   382    font-size: 2.5rem;
   383  }
   384  
   385  /* Huge */
   386  .ui.huge.statistics .statistic > .value,
   387  .ui.huge.statistic > .value {
   388    font-size: 6rem;
   389  }
   390  .ui.huge.horizontal.statistics .statistic > .value,
   391  .ui.huge.horizontal.statistic > .value {
   392    font-size: 5rem;
   393  }
   394  .ui.huge.statistics .statistic > .text.value,
   395  .ui.huge.statistic > .text.value {
   396    font-size: 2.5rem;
   397  }
   398  
   399  
   400  /*******************************
   401           Theme Overrides
   402  *******************************/
   403  
   404  
   405  
   406  /*******************************
   407      User Variable Overrides
   408  *******************************/
   409