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

     1  /*!
     2   * # Semantic UI x.x - Label
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributors
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Label
    15  *******************************/
    16  
    17  .ui.label {
    18    display: inline-block;
    19    vertical-align: baseline;
    20    line-height: 1;
    21    margin: 0em 0.125em;
    22    background-color: #e8e8e8;
    23    border-color: #e8e8e8;
    24    background-image: none;
    25    padding: 0.6em 0.8em;
    26    color: rgba(0, 0, 0, 0.6);
    27    text-transform: none;
    28    font-weight: bold;
    29    border-radius: 0.2857rem;
    30    box-sizing: border-box;
    31    -webkit-transition: background 0.2s ease;
    32            transition: background 0.2s ease;
    33  }
    34  .ui.label:first-child {
    35    margin-left: 0em;
    36  }
    37  .ui.label:last-child {
    38    margin-right: 0em;
    39  }
    40  
    41  /* Link */
    42  a.ui.label {
    43    cursor: pointer;
    44  }
    45  
    46  /* Inside Link */
    47  .ui.label a {
    48    cursor: pointer;
    49    color: inherit;
    50    opacity: 0.8;
    51    -webkit-transition: 0.2s opacity ease;
    52            transition: 0.2s opacity ease;
    53  }
    54  .ui.label a:hover {
    55    opacity: 1;
    56  }
    57  
    58  /* Icon */
    59  .ui.label .icon {
    60    width: auto;
    61    margin: 0em 0.75em 0em 0em;
    62  }
    63  
    64  /* Detail */
    65  .ui.label .detail {
    66    display: inline-block;
    67    vertical-align: top;
    68    font-weight: bold;
    69    margin-left: 1em;
    70    opacity: 0.8;
    71  }
    72  .ui.label .detail .icon {
    73    margin: 0em 0.25em 0em 0em;
    74  }
    75  
    76  /* Removable label */
    77  .ui.label .close.icon,
    78  .ui.label .delete.icon {
    79    cursor: pointer;
    80    margin-right: 0em;
    81    margin-left: 0.5em;
    82    opacity: 0.8;
    83    -webkit-transition: background 0.2s ease;
    84            transition: background 0.2s ease;
    85  }
    86  .ui.label .delete.icon:hover {
    87    opacity: 1;
    88  }
    89  
    90  /*-------------------
    91         Group
    92  --------------------*/
    93  
    94  .ui.labels .label {
    95    margin: 0em 0.5em 0.75em 0em;
    96  }
    97  
    98  /*-------------------
    99         Coupling
   100  --------------------*/
   101  
   102  
   103  /* Remove border radius on attached segment */
   104  .ui.attached.segment > .ui.top.left.attached.label,
   105  .ui.bottom.attached.segment > .ui.top.left.attached.label {
   106    border-top-left-radius: 0;
   107  }
   108  .ui.attached.segment > .ui.top.right.attached.label,
   109  .ui.bottom.attached.segment > .ui.top.right.attached.label {
   110    border-top-right-radius: 0;
   111  }
   112  .ui.top.attached.segment > .ui.bottom.left.attached.label {
   113    border-bottom-left-radius: 0;
   114  }
   115  .ui.top.attached.segment > .ui.bottom.right.attached.label {
   116    border-bottom-right-radius: 0;
   117  }
   118  
   119  /* Padding on next content after a label */
   120  .ui.top.attached.label:first-child + :not(.attached) {
   121    margin-top: 2rem !important;
   122  }
   123  .ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {
   124    margin-top: 0em;
   125    margin-bottom: 2rem !important;
   126  }
   127  
   128  
   129  /*******************************
   130               Types
   131  *******************************/
   132  
   133  .ui.image.label {
   134    width: auto !important;
   135    margin-top: 0em;
   136    margin-bottom: 0em;
   137    max-width: 9999px;
   138    vertical-align: baseline;
   139    text-transform: none;
   140    background: #e8e8e8;
   141    padding: 0.6em 0.8em 0.6em 0.5em;
   142    border-radius: 0.2857rem;
   143    box-shadow: none;
   144  }
   145  .ui.image.label img {
   146    display: inline-block;
   147    vertical-align: top;
   148    height: 2.2em;
   149    margin: -0.6em 0.5em -0.6em -0.5em;
   150    border-radius: 0.2857rem;
   151  }
   152  .ui.image.label .detail {
   153    background: rgba(0, 0, 0, 0.1);
   154    margin: -0.6em -0.8em -0.6em 0.5em;
   155    padding: 0.6em 0.8em;
   156    border-radius: 0em 0.2857rem 0.2857rem 0em;
   157  }
   158  
   159  /*-------------------
   160           Tag
   161  --------------------*/
   162  
   163  .ui.tag.labels .label,
   164  .ui.tag.label {
   165    margin-left: 1em;
   166    position: relative;
   167    padding-left: 1.5em;
   168    padding-right: 1.5em;
   169    border-radius: 0em 0.2857rem 0.2857rem 0em;
   170  }
   171  .ui.tag.labels .label:before,
   172  .ui.tag.label:before {
   173    position: absolute;
   174    -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
   175        -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
   176            transform: translateY(-50%) translateX(50%) rotate(-45deg);
   177    top: 50%;
   178    right: 100%;
   179    content: '';
   180    background-color: #e8e8e8;
   181    background-image: none;
   182    width: 1.56em;
   183    height: 1.56em;
   184    -webkit-transition: background 0.2s ease;
   185            transition: background 0.2s ease;
   186  }
   187  .ui.tag.labels .label:after,
   188  .ui.tag.label:after {
   189    position: absolute;
   190    content: '';
   191    top: 50%;
   192    left: -0.25em;
   193    margin-top: -0.25em;
   194    background-color: #ffffff !important;
   195    width: 0.5em;
   196    height: 0.5em;
   197    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
   198    border-radius: 500rem;
   199  }
   200  
   201  /*-------------------
   202      Corner Label
   203  --------------------*/
   204  
   205  .ui.corner.label {
   206    position: absolute;
   207    top: 0em;
   208    right: 0em;
   209    margin: 0em;
   210    padding: 0em;
   211    text-align: center;
   212    width: 3.25em;
   213    height: 3.25em;
   214    z-index: 1;
   215    -webkit-transition: border-color 0.2s ease;
   216            transition: border-color 0.2s ease;
   217  }
   218  
   219  /* Icon Label */
   220  .ui.corner.label {
   221    background-color: transparent !important;
   222  }
   223  .ui.corner.label:after {
   224    position: absolute;
   225    content: "";
   226    right: 0em;
   227    top: 0em;
   228    z-index: -1;
   229    width: 0em;
   230    height: 0em;
   231    background-color: transparent !important;
   232    border-top: 0em solid transparent;
   233    border-right: 3.25em solid transparent;
   234    border-bottom: 3.25em solid transparent;
   235    border-left: 0em solid transparent;
   236    border-right-color: inherit;
   237    -webkit-transition: border-color 0.2s ease;
   238            transition: border-color 0.2s ease;
   239  }
   240  .ui.corner.label .icon {
   241    position: relative;
   242    top: 0.4em;
   243    left: 0.75em;
   244    font-size: 1em;
   245    margin: 0em;
   246  }
   247  
   248  /* Left Corner */
   249  .ui.left.corner.label,
   250  .ui.left.corner.label:after {
   251    right: auto;
   252    left: 0em;
   253  }
   254  .ui.left.corner.label:after {
   255    border-top: 3.25em solid transparent;
   256    border-right: 3.25em solid transparent;
   257    border-bottom: 0em solid transparent;
   258    border-left: 0em solid transparent;
   259    border-top-color: inherit;
   260  }
   261  .ui.left.corner.label .icon {
   262    left: -0.75em;
   263  }
   264  
   265  /* Segment */
   266  .ui.segment > .ui.corner.label {
   267    top: -1px;
   268    right: -1px;
   269  }
   270  .ui.segment > .ui.left.corner.label {
   271    right: auto;
   272    left: -1px;
   273  }
   274  
   275  /* Input */
   276  .ui.input > .ui.corner.label {
   277    top: 1px;
   278    right: 1px;
   279  }
   280  .ui.input > .ui.right.corner.label {
   281    right: auto;
   282    left: 1px;
   283  }
   284  
   285  /*-------------------
   286         Ribbon
   287  --------------------*/
   288  
   289  .ui.ribbon.label {
   290    position: relative;
   291    margin: 0em;
   292    min-width: -webkit-max-content;
   293    min-width: -moz-max-content;
   294    min-width: max-content;
   295    border-radius: 0em 0.2857rem 0.2857rem 0em;
   296    border-color: rgba(0, 0, 0, 0.15);
   297  }
   298  .ui.ribbon.label:after {
   299    position: absolute;
   300    content: '';
   301    top: 100%;
   302    left: 0%;
   303    background-color: transparent !important;
   304    border-style: solid;
   305    border-width: 0em 1.2em 1.2em 0em;
   306    border-color: transparent;
   307    border-right-color: inherit;
   308    width: 0em;
   309    height: 0em;
   310  }
   311  
   312  /* Right Ribbon */
   313  .ui[class*="right ribbon"].label {
   314    text-align: left;
   315    -webkit-transform: translateX(-100%);
   316        -ms-transform: translateX(-100%);
   317            transform: translateX(-100%);
   318    border-radius: 0.2857rem 0em 0em 0.2857rem;
   319    padding-left: 0.8em;
   320  }
   321  .ui[class*="right ribbon"].label:after {
   322    left: auto;
   323    right: 0%;
   324    border-style: solid;
   325    border-width: 1.2em 1.2em 0em 0em;
   326    border-color: transparent;
   327    border-top-color: inherit;
   328  }
   329  
   330  /* Positioning */
   331  .ui.ribbon.label {
   332    left: -webkit-calc( -1rem  -  1.2em );
   333    left: calc( -1rem  -  1.2em );
   334    margin-right: -1.2em;
   335    padding-left: -webkit-calc( 1rem  +  1.2em );
   336    padding-left: calc( 1rem  +  1.2em );
   337  }
   338  .ui[class*="right ribbon"].label {
   339    left: -webkit-calc(100% +  1rem  +  1.2em );
   340    left: calc(100% +  1rem  +  1.2em );
   341    padding-right: -webkit-calc( 1rem  +  1.2em );
   342    padding-right: calc( 1rem  +  1.2em );
   343  }
   344  
   345  /* Inside Image */
   346  .ui.image > .ribbon.label,
   347  .ui.card .image > .ribbon.label {
   348    position: absolute;
   349    top: 1rem;
   350  }
   351  .ui.card .image > .ui.ribbon.label,
   352  .ui.image > .ui.ribbon.label {
   353    left: -webkit-calc( 0.05rem  -  1.2em );
   354    left: calc( 0.05rem  -  1.2em );
   355    padding-left: -webkit-calc( -0.05rem  +  1.2em );
   356    padding-left: calc( -0.05rem  +  1.2em );
   357  }
   358  .ui.card .image > .ui[class*="right ribbon"].label,
   359  .ui.image > .ui[class*="right ribbon"].label {
   360    left: -webkit-calc(100% +  -0.05rem  +  1.2em );
   361    left: calc(100% +  -0.05rem  +  1.2em );
   362    padding-left: 0.8em;
   363    padding-right: -webkit-calc( -0.05rem  +  1.2em );
   364    padding-right: calc( -0.05rem  +  1.2em );
   365  }
   366  
   367  /*-------------------
   368        Attached
   369  --------------------*/
   370  
   371  .ui.top.attached.label,
   372  .ui.attached.label {
   373    width: 100%;
   374    position: absolute;
   375    margin: 0em;
   376    top: 0em;
   377    left: 0em;
   378    padding: 0.75em 1em;
   379    border-radius: 0.2857rem 0.2857rem 0em 0em;
   380  }
   381  .ui.bottom.attached.label {
   382    top: auto;
   383    bottom: 0em;
   384    border-radius: 0em 0em 0.2857rem 0.2857rem;
   385  }
   386  .ui.top.left.attached.label {
   387    width: auto;
   388    margin-top: 0em !important;
   389    border-radius: 0.2857rem 0em 0.2857rem 0em;
   390  }
   391  .ui.top.right.attached.label {
   392    width: auto;
   393    left: auto;
   394    right: 0em;
   395    border-radius: 0em 0.2857rem 0em 0.2857rem;
   396  }
   397  .ui.bottom.left.attached.label {
   398    width: auto;
   399    top: auto;
   400    bottom: 0em;
   401    border-radius: 0em 0.2857rem 0em 0.2857rem;
   402  }
   403  .ui.bottom.right.attached.label {
   404    top: auto;
   405    bottom: 0em;
   406    left: auto;
   407    right: 0em;
   408    width: auto;
   409    border-radius: 0.2857rem 0em 0.2857rem 0em;
   410  }
   411  
   412  
   413  /*******************************
   414               States
   415  *******************************/
   416  
   417  
   418  /*-------------------
   419        Disabled
   420  --------------------*/
   421  
   422  .ui.label.disabled {
   423    opacity: 0.5;
   424  }
   425  
   426  /*-------------------
   427          Hover
   428  --------------------*/
   429  
   430  a.ui.labels .label:hover,
   431  a.ui.label:hover {
   432    background-color: #e0e0e0;
   433    border-color: #e0e0e0;
   434    background-image: none;
   435    color: rgba(0, 0, 0, 0.8);
   436  }
   437  .ui.labels a.label:hover:before,
   438  a.ui.label:hover:before {
   439    background-color: #e0e0e0;
   440    background-image: none;
   441    color: rgba(0, 0, 0, 0.8);
   442  }
   443  
   444  /*-------------------
   445        Visible
   446  --------------------*/
   447  
   448  .ui.labels.visible .label,
   449  .ui.label.visible {
   450    display: inline-block !important;
   451  }
   452  
   453  /*-------------------
   454        Hidden
   455  --------------------*/
   456  
   457  .ui.labels.hidden .label,
   458  .ui.label.hidden {
   459    display: none !important;
   460  }
   461  
   462  
   463  /*******************************
   464             Variations
   465  *******************************/
   466  
   467  
   468  /*-------------------
   469         Colors
   470  --------------------*/
   471  
   472  
   473  /*--- Black ---*/
   474  
   475  .ui.black.labels .label,
   476  .ui.black.label {
   477    background-color: #1b1c1d !important;
   478    border-color: #1b1c1d !important;
   479    color: #ffffff !important;
   480  }
   481  .ui.labels .black.label:before,
   482  .ui.black.labels .label:before,
   483  .ui.black.label:before {
   484    background-color: #1b1c1d !important;
   485  }
   486  a.ui.black.labels .label:hover,
   487  a.ui.black.label:hover {
   488    background-color: #1b1c1d !important;
   489    border-color: #1b1c1d !important;
   490  }
   491  .ui.labels a.black.label:hover:before,
   492  .ui.black.labels a.label:hover:before,
   493  a.ui.black.label:hover:before {
   494    background-color: #1b1c1d !important;
   495  }
   496  .ui.black.corner.label,
   497  .ui.black.corner.label:hover {
   498    background-color: transparent !important;
   499  }
   500  .ui.black.ribbon.label {
   501    border-color: #020203 !important;
   502  }
   503  
   504  /*--- Blue ---*/
   505  
   506  .ui.blue.labels .label,
   507  .ui.blue.label {
   508    background-color: #006e93 !important;
   509    border-color: #006e93 !important;
   510    color: #ffffff !important;
   511  }
   512  .ui.labels .blue.label:before,
   513  .ui.blue.labels .label:before,
   514  .ui.blue.label:before {
   515    background-color: #006e93 !important;
   516  }
   517  a.ui.blue.labels .label:hover,
   518  .ui.blue.labels a.label:hover,
   519  a.ui.blue.label:hover {
   520    background-color: #0079a2 !important;
   521    border-color: #0079a2 !important;
   522    color: #ffffff !important;
   523  }
   524  .ui.labels a.blue.label:hover:before,
   525  .ui.blue.labels a.label:hover:before,
   526  a.ui.blue.label:hover:before {
   527    background-color: #0079a2 !important;
   528  }
   529  .ui.blue.corner.label,
   530  .ui.blue.corner.label:hover {
   531    background-color: transparent !important;
   532  }
   533  .ui.blue.ribbon.label {
   534    border-color: #004860 !important;
   535  }
   536  
   537  /*--- Green ---*/
   538  
   539  .ui.green.labels .label,
   540  .ui.green.label {
   541    background-color: #5bbd72 !important;
   542    border-color: #5bbd72 !important;
   543    color: #ffffff !important;
   544  }
   545  .ui.labels .green.label:before,
   546  .ui.green.labels .label:before,
   547  .ui.green.label:before {
   548    background-color: #5bbd72 !important;
   549  }
   550  a.ui.green.labels .label:hover,
   551  a.ui.green.label:hover {
   552    background-color: #66c17b !important;
   553    border-color: #66c17b !important;
   554  }
   555  .ui.labels a.green.label:hover:before,
   556  .ui.green.labels a.label:hover:before,
   557  a.ui.green.label:hover:before {
   558    background-color: #66c17b !important;
   559  }
   560  .ui.green.corner.label,
   561  .ui.green.corner.label:hover {
   562    background-color: transparent !important;
   563  }
   564  .ui.green.ribbon.label {
   565    border-color: #42a359 !important;
   566  }
   567  
   568  /*--- Orange ---*/
   569  
   570  .ui.orange.labels .label,
   571  .ui.orange.label {
   572    background-color: #e07b53 !important;
   573    border-color: #e07b53 !important;
   574    color: #ffffff !important;
   575  }
   576  .ui.labels .orange.label:before,
   577  .ui.orange.labels .label:before,
   578  .ui.orange.label:before {
   579    background-color: #e07b53 !important;
   580  }
   581  a.ui.orange.labels .label:hover,
   582  .ui.orange.labels a.label:hover,
   583  a.ui.orange.label:hover {
   584    background-color: #e28560 !important;
   585    border-color: #e28560 !important;
   586    color: #ffffff !important;
   587  }
   588  .ui.labels a.orange.label:hover:before,
   589  .ui.orange.labels a.label:hover:before,
   590  a.ui.orange.label:hover:before {
   591    background-color: #e28560 !important;
   592  }
   593  .ui.orange.corner.label,
   594  .ui.orange.corner.label:hover {
   595    background-color: transparent !important;
   596  }
   597  .ui.orange.ribbon.label {
   598    border-color: #d85a28 !important;
   599  }
   600  
   601  /*--- Pink ---*/
   602  
   603  .ui.pink.labels .label,
   604  .ui.pink.label {
   605    background-color: #d9499a !important;
   606    border-color: #d9499a !important;
   607    color: #ffffff !important;
   608  }
   609  .ui.labels .pink.label:before,
   610  .ui.pink.labels .label:before,
   611  .ui.pink.label:before {
   612    background-color: #d9499a !important;
   613  }
   614  a.ui.pink.labels .label:hover,
   615  .ui.pink.labels a.label:hover,
   616  a.ui.pink.label:hover {
   617    background-color: #dc56a1 !important;
   618    border-color: #dc56a1 !important;
   619    color: #ffffff !important;
   620  }
   621  .ui.labels a.pink.label:hover:before,
   622  .ui.pink.labels a.label:hover:before,
   623  a.ui.pink.label:hover:before {
   624    background-color: #dc56a1 !important;
   625  }
   626  .ui.pink.corner.label,
   627  .ui.pink.corner.label:hover {
   628    background-color: transparent !important;
   629  }
   630  .ui.pink.ribbon.label {
   631    border-color: #c62981 !important;
   632  }
   633  
   634  /*--- Purple ---*/
   635  
   636  .ui.purple.labels .label,
   637  .ui.purple.label {
   638    background-color: #564f8a !important;
   639    border-color: #564f8a !important;
   640    color: #ffffff !important;
   641  }
   642  .ui.labels .purple.label:before,
   643  .ui.purple.labels .label:before,
   644  .ui.purple.label:before {
   645    background-color: #564f8a !important;
   646  }
   647  a.ui.purple.labels .label:hover,
   648  .ui.purple.labels a.label:hover,
   649  a.ui.purple.label:hover {
   650    background-color: #5c5594 !important;
   651    border-color: #5c5594 !important;
   652    color: #ffffff !important;
   653  }
   654  .ui.labels a.purple.label:hover:before,
   655  .ui.purple.labels a.label:hover:before,
   656  a.ui.purple.label:hover:before {
   657    background-color: #5c5594 !important;
   658  }
   659  .ui.purple.corner.label,
   660  .ui.purple.corner.label:hover {
   661    background-color: transparent !important;
   662  }
   663  .ui.purple.ribbon.label {
   664    border-color: #423c6a !important;
   665  }
   666  
   667  /*--- Red ---*/
   668  
   669  .ui.red.labels .label,
   670  .ui.red.label {
   671    background-color: #d95c5c !important;
   672    border-color: #d95c5c !important;
   673    color: #ffffff !important;
   674  }
   675  .ui.labels .red.label:before,
   676  .ui.red.labels .label:before,
   677  .ui.red.label:before {
   678    background-color: #d95c5c !important;
   679  }
   680  .ui.red.corner.label,
   681  .ui.red.corner.label:hover {
   682    background-color: transparent !important;
   683  }
   684  a.ui.red.labels .label:hover,
   685  a.ui.red.label:hover {
   686    background-color: #dc6868 !important;
   687    border-color: #dc6868 !important;
   688    color: #ffffff !important;
   689  }
   690  .ui.labels a.red.label:hover:before,
   691  .ui.red.labels a.label:hover:before,
   692  a.ui.red.label:hover:before {
   693    background-color: #dc6868 !important;
   694  }
   695  .ui.red.ribbon.label {
   696    border-color: #cf3333 !important;
   697  }
   698  
   699  /*--- Teal ---*/
   700  
   701  .ui.teal.labels .label,
   702  .ui.teal.label {
   703    background-color: #00b5ad !important;
   704    border-color: #00b5ad !important;
   705    color: #ffffff !important;
   706  }
   707  .ui.labels .teal.label:before,
   708  .ui.teal.labels .label:before,
   709  .ui.teal.label:before {
   710    background-color: #00b5ad !important;
   711  }
   712  a.ui.teal.labels .label:hover,
   713  .ui.teal.labels a.label:hover,
   714  a.ui.teal.label:hover {
   715    background-color: #00c4bc !important;
   716    border-color: #00c4bc !important;
   717    color: #ffffff !important;
   718  }
   719  .ui.labels a.teal.label:hover:before,
   720  .ui.teal.labels a.label:hover:before,
   721  a.ui.teal.label:hover:before {
   722    background-color: #00c4bc !important;
   723  }
   724  .ui.teal.corner.label,
   725  .ui.teal.corner.label:hover {
   726    background-color: transparent !important;
   727  }
   728  .ui.teal.ribbon.label {
   729    border-color: #00827c !important;
   730  }
   731  
   732  /*--- Yellow ---*/
   733  
   734  .ui.yellow.labels .label,
   735  .ui.yellow.label {
   736    background-color: #f2c61f !important;
   737    border-color: #f2c61f !important;
   738    color: #ffffff !important;
   739  }
   740  .ui.labels .yellow.label:before,
   741  .ui.yellow.labels .label:before,
   742  .ui.yellow.label:before {
   743    background-color: #f2c61f !important;
   744  }
   745  a.ui.yellow.labels .label:hover,
   746  .ui.yellow.labels a.label:hover,
   747  a.ui.yellow.label:hover {
   748    background-color: #f3ca2d !important;
   749    border-color: #f3ca2d !important;
   750    color: #ffffff !important;
   751  }
   752  .ui.labels a.yellow.label:hover:before,
   753  .ui.yellow.labels a.label:hover:before,
   754  a.ui.yellow.label:hover:before {
   755    background-color: #f3ca2d !important;
   756  }
   757  .ui.yellow.corner.label,
   758  .ui.yellow.corner.label:hover {
   759    background-color: transparent !important;
   760  }
   761  .ui.yellow.ribbon.label {
   762    border-color: #d2a90c !important;
   763  }
   764  
   765  /*-------------------
   766         Fluid
   767  --------------------*/
   768  
   769  .ui.label.fluid,
   770  .ui.fluid.labels > .label {
   771    width: 100%;
   772    box-sizing: border-box;
   773  }
   774  
   775  /*-------------------
   776         Inverted
   777  --------------------*/
   778  
   779  .ui.inverted.labels .label,
   780  .ui.inverted.label {
   781    color: #ffffff !important;
   782  }
   783  
   784  /*-------------------
   785       Horizontal
   786  --------------------*/
   787  
   788  .ui.horizontal.labels .label,
   789  .ui.horizontal.label {
   790    margin: 0em 0.5em 0em 0em;
   791    padding: 0.4em 0.8em;
   792    min-width: 3em;
   793    text-align: center;
   794  }
   795  
   796  /*-------------------
   797         Circular
   798  --------------------*/
   799  
   800  .ui.circular.labels .label,
   801  .ui.circular.label {
   802    min-width: 2em;
   803    min-height: 2em;
   804    padding: 0.5em !important;
   805    line-height: 1em;
   806    text-align: center;
   807    border-radius: 500rem;
   808  }
   809  .ui.empty.circular.labels .label,
   810  .ui.empty.circular.label {
   811    min-width: 0em;
   812    min-height: 0em;
   813    overflow: hidden;
   814    width: 0.5em;
   815    height: 0.5em;
   816    vertical-align: baseline;
   817  }
   818  
   819  /*-------------------
   820         Pointing
   821  --------------------*/
   822  
   823  .ui.pointing.label {
   824    position: relative;
   825  }
   826  .ui.attached.pointing.label {
   827    position: absolute;
   828  }
   829  .ui.pointing.label:before {
   830    position: absolute;
   831    content: '';
   832    -webkit-transform: rotate(45deg);
   833        -ms-transform: rotate(45deg);
   834            transform: rotate(45deg);
   835    background-image: none;
   836    z-index: 2;
   837    width: 0.6em;
   838    height: 0.6em;
   839    -webkit-transition: background 0.2s ease;
   840            transition: background 0.2s ease;
   841  }
   842  
   843  /*--- Above ---*/
   844  
   845  .ui.pointing.label:before {
   846    background-color: #e8e8e8;
   847    background-image: none;
   848  }
   849  .ui.pointing.label,
   850  .ui.pointing.above.label {
   851    margin-top: 1em;
   852  }
   853  .ui.pointing.label:before,
   854  .ui.pointing.above.label:before {
   855    margin-left: -0.3em;
   856    top: -0.3em;
   857    left: 50%;
   858  }
   859  
   860  /*--- Below ---*/
   861  
   862  .ui.pointing.bottom.label,
   863  .ui.pointing.below.label {
   864    margin-top: 0em;
   865    margin-bottom: 1em;
   866  }
   867  .ui.pointing.bottom.label:before,
   868  .ui.pointing.below.label:before {
   869    margin-left: -0.3em;
   870    top: auto;
   871    right: auto;
   872    bottom: -0.3em;
   873    left: 50%;
   874  }
   875  
   876  /*--- Left ---*/
   877  
   878  .ui.pointing.left.label {
   879    margin-top: 0em;
   880    margin-left: 0.6em;
   881  }
   882  .ui.pointing.left.label:before {
   883    margin-top: -0.3em;
   884    bottom: auto;
   885    right: auto;
   886    top: 50%;
   887    left: 0em;
   888  }
   889  
   890  /*--- Right ---*/
   891  
   892  .ui.pointing.right.label {
   893    margin-top: 0em;
   894    margin-right: 0.6em;
   895  }
   896  .ui.pointing.right.label:before {
   897    margin-top: -0.3em;
   898    right: -0.3em;
   899    top: 50%;
   900    bottom: auto;
   901    left: auto;
   902  }
   903  
   904  /*------------------
   905     Floating Label
   906  -------------------*/
   907  
   908  .ui.floating.label {
   909    position: absolute;
   910    z-index: 100;
   911    top: -1em;
   912    left: 100%;
   913    margin: 0em 0em 0em -1.5em !important;
   914  }
   915  
   916  /*-------------------
   917          Sizes
   918  --------------------*/
   919  
   920  .ui.mini.labels .label,
   921  .ui.mini.label {
   922    font-size: 0.6428rem;
   923  }
   924  .ui.tiny.labels .label,
   925  .ui.tiny.label {
   926    font-size: 0.7142rem;
   927  }
   928  .ui.small.labels .label,
   929  .ui.small.label {
   930    font-size: 0.7857rem;
   931  }
   932  .ui.labels .label,
   933  .ui.label {
   934    font-size: 0.8571rem;
   935  }
   936  .ui.large.labels .label,
   937  .ui.large.label {
   938    font-size: 1rem;
   939  }
   940  .ui.big.labels .label,
   941  .ui.big.label {
   942    font-size: 1.1428rem;
   943  }
   944  .ui.huge.labels .label,
   945  .ui.huge.label {
   946    font-size: 1.2857rem;
   947  }
   948  .ui.massive.labels .label,
   949  .ui.massive.label {
   950    font-size: 1.4285rem;
   951  }
   952  
   953  
   954  /*******************************
   955           Theme Overrides
   956  *******************************/
   957  
   958  
   959  
   960  /*******************************
   961           Site Overrides
   962  *******************************/
   963