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

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