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

     1  /*!
     2   * # Semantic UI - Menu
     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    : 'collection';
    18  @element : 'menu';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23              Standard
    24  *******************************/
    25  
    26  /*--------------
    27        Menu
    28  ---------------*/
    29  
    30  .ui.menu {
    31    margin: @margin;
    32    background: @background;
    33    font-size: 0em;
    34    font-weight: @fontWeight;
    35    box-shadow: @boxShadow;
    36    border-radius: @borderRadius;
    37  }
    38  
    39  .ui.menu:after {
    40    content: '';
    41    display: block;
    42    height: 0px;
    43    clear: both;
    44    visibility: hidden;
    45  }
    46  
    47  .ui.menu:first-child {
    48    margin-top: 0rem;
    49  }
    50  .ui.menu:last-child {
    51    margin-bottom: 0rem;
    52  }
    53  
    54  .ui.menu .menu {
    55    margin: 0em;
    56  }
    57  .ui.menu:not(.vertical) .menu {
    58    font-size: 0em;
    59  }
    60  
    61  /*--------------
    62       Colors
    63  ---------------*/
    64  
    65  /* Text Color */
    66  .ui.menu .item {
    67    color: @menuTextColor;
    68  }
    69  .ui.menu .item .item {
    70    color: @subMenuTextColor;
    71  }
    72  
    73  /* Hover */
    74  .ui.menu .item .menu a.item:hover,
    75  .ui.menu .item .menu .link.item:hover {
    76    color: @darkTextColor;
    77  }
    78  
    79  
    80  /*--------------
    81        Items
    82  ---------------*/
    83  
    84  .ui.menu .item {
    85    position: relative;
    86    display: inline-block;
    87    padding: @verticalPadding @horizontalPadding;
    88    border-top: @borderSize solid transparent;
    89  
    90    background: @itemBackground;
    91    vertical-align: middle;
    92    line-height: 1;
    93    text-decoration: none;
    94    box-sizing: border-box;
    95  
    96    -webkit-tap-highlight-color: transparent;
    97    user-select: none;
    98    transition: @transition;
    99  }
   100  
   101  
   102  /* Floated Content */
   103  .ui.menu > .item:first-child {
   104    border-radius: @borderRadius 0px 0px @borderRadius;
   105  }
   106  .ui.menu:not(.vertical) .item.left,
   107  .ui.menu:not(.vertical) .menu.left {
   108    float: left;
   109  }
   110  .ui.menu:not(.vertical) .item.right,
   111  .ui.menu:not(.vertical) .menu.right {
   112    float: right;
   113  }
   114  
   115  
   116  /*--------------
   117      Borders
   118  ---------------*/
   119  
   120  .ui.menu .item:before {
   121    position: absolute;
   122    content: '';
   123    top: 0%;
   124    right: 0px;
   125    width: @dividerSize;
   126    height: 100%;
   127    background: @dividerBackground;
   128  }
   129  .ui.menu > .right.menu:first-child {
   130    display: none;
   131  }
   132  .ui.menu .menu.right .item:before,
   133  .ui.menu .item.right:before {
   134    right: auto;
   135    left: 0px;
   136  }
   137  
   138  /*--------------
   139    Text Content
   140  ---------------*/
   141  
   142  .ui.menu .text.item > *,
   143  .ui.menu .item > a:not(.ui),
   144  .ui.menu .item > p:only-child {
   145    user-select: text;
   146    line-height: @textLineHeight;
   147    color: @textColor;
   148  }
   149  .ui.menu .item > p:first-child {
   150    margin-top: 0;
   151  }
   152  .ui.menu .item > p:last-child {
   153    margin-bottom: 0;
   154  }
   155  
   156  /*--------------
   157        Icons
   158  ---------------*/
   159  
   160  .ui.menu .item > i.icon {
   161    opacity: @iconOpacity;
   162    float: @iconFloat;
   163    margin: @iconMargin;
   164  }
   165  
   166  .ui.menu .item > i.dropdown.icon {
   167    float: @dropdownIconFloat;
   168    margin-left: @dropdownIconDistance;
   169  }
   170  
   171  /*--------------
   172       Button
   173  ---------------*/
   174  
   175  .ui.menu:not(.vertical) .item > .button {
   176    position: relative;
   177    top: @buttonOffset;
   178    margin: -@buttonVerticalPadding 0;
   179    padding-bottom: @buttonVerticalPadding;
   180    padding-top: @buttonVerticalPadding;
   181    font-size: @buttonSize;
   182  }
   183  
   184  
   185  /*--------------
   186       Inputs
   187  ---------------*/
   188  
   189  .ui.menu .item > .input {
   190    width: 100%;
   191  }
   192  .ui.menu:not(.vertical) .item > .input {
   193    position: relative;
   194    top: @inputOffset;
   195    margin: @inputVerticalMargin 0em;
   196  }
   197  .ui.menu .item > .input input {
   198    font-size: @inputSize;
   199    padding-top: @inputVerticalPadding;
   200    padding-bottom: @inputVerticalPadding;
   201  }
   202  .ui.menu .item > .input .button,
   203  .ui.menu .item > .input .label {
   204    padding-top: @inputVerticalPadding;
   205    padding-bottom: @inputVerticalPadding;
   206  }
   207  
   208  /* Resizes */
   209  .ui.small.menu .item > .input input {
   210    top: @smallInputOffset;
   211    padding-top: @smallInputVerticalPadding;
   212    padding-bottom: @smallInputVerticalPadding;
   213  }
   214  .ui.small.menu .item > .input .button,
   215  .ui.small.menu .item > .input .label {
   216    padding-top: @smallInputVerticalPadding;
   217    padding-bottom: @smallInputVerticalPadding;
   218  }
   219  .ui.large.menu .item > .input input {
   220    top: @largeInputOffset;
   221    padding-bottom: @largeInputVerticalPadding;
   222    padding-top: @largeInputVerticalPadding;
   223  }
   224  .ui.large.menu .item > .input .button,
   225  .ui.large.menu .item > .input .label {
   226    padding-top: @largeInputVerticalPadding;
   227    padding-bottom: @largeInputVerticalPadding;
   228  }
   229  
   230  
   231  /*--------------
   232       Header
   233  ---------------*/
   234  
   235  .ui.menu .header.item,
   236  .ui.vertical.menu .header.item {
   237    background: @headerBackground;
   238    margin: 0em;
   239    text-transform: @headerTextTransform;
   240    font-weight: @headerWeight;
   241  }
   242  
   243  
   244  /*--------------
   245      Dropdowns
   246  ---------------*/
   247  
   248  /* Dropdown */
   249  .ui.menu .ui.dropdown.item.visible {
   250    background: @subtleTransparentBlack;
   251    border-bottom-right-radius: 0em;
   252    border-bottom-left-radius: 0em;
   253  }
   254  .ui.menu .ui.dropdown.active {
   255    box-shadow: none;
   256  }
   257  
   258  /* Menu Position */
   259  .ui.menu .dropdown.item .menu {
   260    background: @dropdownBackground;
   261    left: 0px;
   262    margin: @dropdownMenuOffset 0px 0px;
   263    min-width: ~"calc(100% - 1px)";
   264    box-shadow: @dropdownBoxShadow;
   265  }
   266  .ui.menu:not(.secondary) .pointing.dropdown.item .menu {
   267    margin-top: @dropdownPointingDistance;
   268    border-top-left-radius: 0em;
   269    border-top-right-radius: 0em;
   270  }
   271  .ui.menu .simple.dropdown.item .menu {
   272    margin: 0px !important;
   273  }
   274  
   275  
   276  /* Secondary Menu Dropdown */
   277  .ui.secondary.menu > .menu > .active.dropdown.item {
   278    background-color: transparent;
   279  }
   280  .ui.secondary.menu .dropdown.item .menu {
   281    left: 0px;
   282    min-width: 100%;
   283  }
   284  
   285  /* Even Width Menu Dropdown */
   286  .ui.item.menu .dropdown .menu .item {
   287    width: 100%;
   288  }
   289  
   290  /*--------------
   291       Labels
   292  ---------------*/
   293  
   294  .ui.menu .item > .label {
   295    background: @labelBackground;
   296    color: @labelTextColor;
   297    margin: @labelOffset 0em @labelOffset @labelTextMargin;
   298    padding: @labelVerticalPadding @labelHorizontalPadding;
   299    vertical-align: baseline;
   300  }
   301  .ui.menu .item > .floating.label {
   302    padding: @labelVerticalPadding @labelHorizontalPadding;
   303  }
   304  
   305  /*--------------
   306       Images
   307  ---------------*/
   308  
   309  .ui.menu .item > img:only-child {
   310    display: block;
   311    max-width: 100%;
   312    margin: 0em auto;
   313  }
   314  
   315  
   316  /*******************************
   317               States
   318  *******************************/
   319  
   320  /*--------------
   321        Hover
   322  ---------------*/
   323  
   324  .ui.link.menu > .item:hover,
   325  .ui.menu > .link.item:hover,
   326  .ui.menu > a.item:hover,
   327  .ui.link.menu .menu > .item:hover,
   328  .ui.menu .menu > .link.item:hover,
   329  .ui.menu .menu > a.item:hover {
   330    cursor: pointer;
   331    background: @hoverBackground;
   332    color: @hoverColor;
   333  }
   334  
   335  
   336  /*--------------
   337       Pressed
   338  ---------------*/
   339  
   340  .ui.link.menu .item:active,
   341  .ui.menu .link.item:active,
   342  .ui.menu a.item:active {
   343    background: @pressedBackground;
   344    color: @pressedColor;
   345  }
   346  
   347  /*--------------
   348       Active
   349  ---------------*/
   350  
   351  .ui.menu .active.item  {
   352    background: @activeBackground;
   353    color: @selectedTextColor;
   354    font-weight: @activeFontWeight;
   355    box-shadow: 0em @activeBorderSize 0em inset;
   356  }
   357  .ui.menu .active.item > i.icon {
   358    opacity: @activeIconOpacity;
   359  }
   360  
   361  /* Vertical */
   362  .ui.vertical.menu .active.item {
   363    background: @activeBackground;
   364    border-radius: 0em;
   365    box-shadow: @activeBorderSize 0em 0em inset;
   366  }
   367  .ui.vertical.menu > .active.item:first-child {
   368    border-radius: 0em @borderRadius 0em 0em;
   369  }
   370  .ui.vertical.menu > .active.item:last-child {
   371    border-radius: 0em 0em @borderRadius 0em;
   372  }
   373  .ui.vertical.menu > .active.item:only-child {
   374    border-radius: 0em @borderRadius @borderRadius 0em;
   375  }
   376  .ui.vertical.menu .active.item .menu .active.item {
   377    border-left: none;
   378  }
   379  .ui.vertical.menu .item .menu .active.item {
   380    background-color: @subMenuActiveBackground;
   381    box-shadow: none;
   382  }
   383  
   384  
   385  /*--------------
   386    Active Hover
   387  ---------------*/
   388  
   389  .ui.vertical.menu .active.item:hover,
   390  .ui.menu .active.item:hover {
   391    background-color: @activeHoverBackground;
   392  }
   393  
   394  /*--------------
   395       Disabled
   396  ---------------*/
   397  
   398  .ui.menu .item.disabled,
   399  .ui.menu .item.disabled:hover {
   400    cursor: default;
   401    color: @disabledTextColor;
   402    background-color: transparent !important;
   403  }
   404  
   405  
   406  /*******************************
   407               Types
   408  *******************************/
   409  
   410  /*--------------
   411      Vertical
   412  ---------------*/
   413  
   414  .ui.vertical.menu {
   415    background: @verticalBackground;
   416  }
   417  
   418  /*--- Item ---*/
   419  .ui.vertical.menu .item {
   420    background: @verticalItemBackground;
   421    display: block;
   422    height: auto !important;
   423    border-top: none;
   424    border-left: @borderSize solid transparent;
   425    border-right: none;
   426  }
   427  .ui.vertical.menu > .item:first-child {
   428    border-radius: @borderRadius @borderRadius 0px 0px;
   429  }
   430  .ui.vertical.menu > .item:last-child {
   431    border-radius: 0px 0px @borderRadius @borderRadius;
   432  }
   433  
   434  /*--- Label ---*/
   435  .ui.vertical.menu .item > .label {
   436    float: right;
   437    text-align: center;
   438  }
   439  
   440  /*--- Icon ---*/
   441  .ui.vertical.menu .item > i.icon {
   442    width: @iconWidth;
   443    float: @verticalIconFloat;
   444    margin: @verticalIconMargin;
   445  }
   446  .ui.vertical.menu .item > .label + i.icon {
   447    float: @labelAndIconFloat;
   448    margin: @labelAndIconMargin;
   449  }
   450  
   451  
   452  /*--- Border ---*/
   453  .ui.vertical.menu .item:before {
   454    position: absolute;
   455    content: '';
   456    top: 0%;
   457    left: 0px;
   458    width: 100%;
   459    height: @dividerSize;
   460    background: @verticalDividerBackground;
   461    height: 1px;
   462  }
   463  
   464  .ui.vertical.menu .item:first-child:before {
   465    background: none !important;
   466  }
   467  
   468  /*--- Dropdown ---*/
   469  .ui.vertical.menu .dropdown.item > .icon {
   470    float: right;
   471    content: "\f0da";
   472    margin-left: 1em;
   473  }
   474  .ui.vertical.menu .active.dropdown.item {
   475    border-top-right-radius: 0em;
   476    border-bottom-right-radius: 0em;
   477  }
   478  .ui.vertical.menu .dropdown.item .menu {
   479    top: 0% !important;
   480    left: 100%;
   481    margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset;
   482    box-shadow: @dropdownVerticalBoxShadow;
   483    border-radius: 0em @borderRadius @borderRadius @borderRadius;
   484  }
   485  .ui.vertical.menu .dropdown.item .menu .item {
   486    font-size: 1rem;
   487  }
   488  .ui.vertical.menu .dropdown.item .menu .item i.icon {
   489    margin-right: 0em;
   490  }
   491  .ui.vertical.menu .dropdown.item.active {
   492    box-shadow: none;
   493  }
   494  
   495  /*--- Sub Menu ---*/
   496  .ui.vertical.menu .item:not(.dropdown) > .menu {
   497    margin: @subMenuMargin -@horizontalPadding 0em;
   498  }
   499  .ui.vertical.menu .item:not(.dropdown) > .menu > .item {
   500    background: none;
   501    padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
   502    font-size: @subMenuFontSize;
   503  }
   504  .ui.vertical.menu .item > .menu > .item:before {
   505    display: none;
   506  }
   507  
   508  
   509  /*--------------
   510       Tiered
   511  ---------------*/
   512  
   513  .ui.tiered.menu > .menu > .item:hover {
   514    color: @tieredSubMenuActiveColor;
   515  }
   516  .ui.tiered.menu .active.item {
   517    background: @tieredActiveItemBackground;
   518  }
   519  .ui.tiered.menu > .menu .item.active:after {
   520    position: absolute;
   521    content: '';
   522    margin-top: -@dividerSize;
   523    top: 100%;
   524    left: 0px;
   525  
   526    width: 100%;
   527    height: 2px;
   528    background-color: @tieredActiveMenuBackground;
   529  }
   530  
   531  /* Sub Menu */
   532  .ui.tiered.menu .sub.menu {
   533    background-color: @tieredActiveMenuBackground;
   534    border-radius: 0em 0em @borderRadius @borderRadius;
   535    border-top: 1px solid @borderColor;
   536    box-shadow: none;
   537  }
   538  .ui.tiered.menu > .sub.menu > .item {
   539    color: @tieredSubMenuColor;
   540    font-weight: @tieredSubMenuFontWeight;
   541    text-transform: @tieredSubMenuTextTransform;
   542    font-size: @subMenuFontSize;
   543  }
   544  
   545  /* Sub Menu Divider */
   546  .ui.tiered.menu .sub.menu .item:before {
   547    background: none;
   548  }
   549  
   550  /* Sub Menu Hover */
   551  .ui.tiered.menu .sub.menu .item:hover {
   552    background: @tieredSubMenuHoverBackground;
   553    color: @tieredSubMenuHoverColor;
   554  }
   555  
   556  /* Sub Menu Active */
   557  .ui.tiered.menu .sub.menu .active.item {
   558    padding-top: @verticalPadding;
   559    background: @tieredSubMenuActiveBackground;
   560    border-radius: 0;
   561    border-top: medium none;
   562    box-shadow: none;
   563    color: @tieredSubMenuActiveColor !important;
   564  }
   565  .ui.tiered.menu .sub.menu .active.item:after {
   566    display: none;
   567  }
   568  
   569  /* Inverted Tiered Menu */
   570  .ui.inverted.tiered.menu > .menu > .item {
   571    color: @invertedUnselectedTextColor;
   572  }
   573  .ui.inverted.tiered.menu .sub.menu {
   574    background-color: @tieredInvertedSubMenuBackground;
   575  }
   576  .ui.inverted.tiered.menu .sub.menu .item {
   577    color: @invertedLightTextColor;
   578  }
   579  .ui.inverted.tiered.menu > .menu > .item:hover {
   580    color: @invertedHoveredTextColor;
   581  }
   582  .ui.inverted.tiered.menu .active.item:after {
   583    display: none;
   584  }
   585  .ui.inverted.tiered.menu > .sub.menu > .active.item,
   586  .ui.inverted.tiered.menu > .menu > .active.item {
   587    color: @invertedSelectedTextColor !important;
   588    box-shadow: none;
   589  }
   590  
   591  /* Tiered Pointing */
   592  .ui.pointing.tiered.menu > .menu > .item:after {
   593    display: none;
   594  }
   595  .ui.pointing.tiered.menu > .sub.menu > .item:after {
   596    display: block;
   597  }
   598  
   599  
   600  /*--------------
   601       Tabular
   602  ---------------*/
   603  
   604  .ui.tabular.menu {
   605    background-color: transparent;
   606    border-radius: 0em;
   607    box-shadow: none !important;
   608    border-bottom: @tabularBorderWidth solid @tabularBorderColor;
   609  }
   610  .ui.tabular.fluid.menu {
   611    width: @tabularFluidWidth !important;
   612  }
   613  .ui.tabular.menu .item {
   614    background-color: transparent;
   615  
   616    border-left: @tabularBorderWidth solid transparent;
   617    border-right: @tabularBorderWidth solid transparent;
   618    border-top: @tabularBorderWidth solid transparent;
   619  
   620    padding-left: @tabularHorizontalPadding;
   621    padding-right: @tabularHorizontalPadding;
   622    color: @tabularMenuTextColor;
   623  }
   624  .ui.tabular.menu .item:before {
   625    display: none;
   626  }
   627  
   628  /* Hover */
   629  .ui.tabular.menu .item:hover {
   630    background-color: transparent;
   631    color: @hoveredTextColor;
   632  }
   633  
   634  /* Active */
   635  .ui.tabular.menu .active.item {
   636    position: relative;
   637    border-bottom: none;
   638    vertical-align: bottom;
   639  
   640    background-color: @tabularMenuActiveBackground;
   641    color: @tabularActiveColor;
   642    border-color: @tabularBorderColor;
   643    font-weight: @tabularActiveWeight;
   644    margin-bottom: -@tabularBorderWidth;
   645    box-shadow: @tabularActiveBoxShadow;
   646    border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px;
   647  }
   648  
   649  /* Coupling with segment for attachment */
   650  .ui.attached.tabular.menu {
   651    position: relative;
   652    z-index: 2;
   653  }
   654  .ui.tabular.menu + .bottom.attached.segment,
   655  .ui.tabular.menu ~ .bottom.attached.segment + .bottom.attached.segment {
   656    border-top: none;
   657    margin: 0px;
   658  }
   659  
   660  
   661  
   662  /*--------------
   663     Pagination
   664  ---------------*/
   665  
   666  .ui.pagination.menu {
   667    margin: 0em;
   668    display: inline-block;
   669    vertical-align: middle;
   670  }
   671  
   672  .ui.pagination.menu .item {
   673    min-width: @paginationMinWidth;
   674    text-align: center;
   675  }
   676  .ui.pagination.menu .icon.item i.icon {
   677    vertical-align: top;
   678  }
   679  .ui.pagination.menu.floated {
   680    display: block;
   681  }
   682  
   683  /* Active */
   684  .ui.pagination.menu .active.item {
   685    border-top: none;
   686    padding-top: @verticalPadding;
   687    background-color: @paginationActiveBackground;
   688    box-shadow: none;
   689  }
   690  
   691  /*--------------
   692     Secondary
   693  ---------------*/
   694  
   695  .ui.secondary.menu {
   696    background: @secondaryBackground;
   697    border-radius: 0em;
   698    box-shadow: none;
   699  }
   700  .ui.secondary.menu > .menu > .item,
   701  .ui.secondary.menu > .item {
   702    box-shadow: none;
   703  
   704    border: none;
   705    height: auto !important;
   706    background: @secondaryItemBackground;
   707  
   708    margin: 0em @secondaryMargin;
   709    padding: @secondaryVerticalPadding @secondaryHorizontalPadding;
   710  
   711    border-radius: @secondaryBorderRadius;
   712  }
   713  .ui.secondary.menu > .menu > .item:before,
   714  .ui.secondary.menu > .item:before {
   715    display: none !important;
   716  }
   717  
   718  .ui.secondary.menu .item > .input input {
   719    background-color: transparent;
   720    border: none;
   721  }
   722  
   723  .ui.secondary.menu .link.item,
   724  .ui.secondary.menu a.item {
   725    opacity: @secondaryLinkOpacity;
   726    transition: none;
   727  }
   728  .ui.secondary.menu .header.item {
   729    border-right: @secondaryHeaderBorder;
   730    background: @secondaryHeaderBackground;
   731    border-radius: 0em;
   732  }
   733  
   734  /* Hover */
   735  .ui.secondary.menu .link.item:hover,
   736  .ui.secondary.menu a.item:hover {
   737    opacity: 1;
   738  }
   739  
   740  /* Active */
   741  .ui.secondary.menu > .menu > .active.item,
   742  .ui.secondary.menu > .active.item {
   743    background: @secondaryActiveBackground;
   744    opacity: 1;
   745    box-shadow: none;
   746  }
   747  .ui.secondary.vertical.menu > .active.item {
   748    border-radius: @secondaryBorderRadius;
   749  }
   750  
   751  /* Inverted */
   752  .ui.secondary.inverted.menu .link.item,
   753  .ui.secondary.inverted.menu a.item {
   754    color: @secondaryInvertedColor;
   755  }
   756  .ui.secondary.inverted.menu .link.item:hover,
   757  .ui.secondary.inverted.menu a.item:hover {
   758    color: @secondaryInvertedHoverColor;
   759  }
   760  .ui.secondary.inverted.menu .active.item {
   761    background-color: @secondaryInvertedActiveBackground;
   762  }
   763  
   764  
   765  /* Disable variations */
   766  .ui.secondary.item.menu > .item {
   767    margin: 0em;
   768  }
   769  .ui.secondary.attached.menu {
   770    box-shadow: none;
   771  }
   772  
   773  
   774  /*---------------------
   775     Secondary Vertical
   776  -----------------------*/
   777  
   778  .ui.secondary.vertical.menu > .item {
   779    border: none;
   780    margin: 0em 0em @secondaryVerticalMargin;
   781    border-radius: @borderRadius;
   782  }
   783  .ui.secondary.vertical.menu > .header.item {
   784    border-radius: 0em;
   785  }
   786  
   787  /* Inverted */
   788  .ui.secondary.inverted.menu {
   789    background-color: transparent;
   790  }
   791  
   792  .ui.secondary.inverted.pointing.menu {
   793    border-bottom: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
   794  }
   795  .ui.secondary.inverted.pointing.menu > .item {
   796    color: rgba(255, 255, 255, 0.7);
   797  }
   798  .ui.secondary.inverted.pointing.menu > .header.item {
   799    color: #FFFFFF !important;
   800  }
   801  
   802  /* Hover */
   803  .ui.secondary.inverted.pointing.menu > .menu > .item:hover,
   804  .ui.secondary.inverted.pointing.menu > .item:hover {
   805    color: rgba(255, 255, 255, 0.85);
   806  }
   807  
   808  /* Pressed */
   809  .ui.secondary.inverted.pointing.menu > .menu > .item:active,
   810  .ui.secondary.inverted.pointing.menu > .item:active {
   811    border-color: rgba(255, 255, 255, 0.4);
   812  }
   813  
   814  /* Active */
   815  .ui.secondary.inverted.pointing.menu > .menu > .item.active,
   816  .ui.secondary.inverted.pointing.menu > .item.active {
   817    border-color: rgba(255, 255, 255, 0.8);
   818    color: rgba(255, 255, 255, 1);
   819  }
   820  
   821  
   822  /*---------------------
   823     Secondary Pointing
   824  -----------------------*/
   825  
   826  .ui.secondary.pointing.menu {
   827    border-bottom: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
   828  }
   829  
   830  .ui.secondary.pointing.menu > .menu > .item,
   831  .ui.secondary.pointing.menu > .item {
   832    margin: 0em 0em -@secondaryPointingBorderWidth;
   833    padding: @secondaryPointingVerticalPadding @secondaryPointingHorizontalPadding;
   834    border-bottom: @secondaryPointingBorderWidth solid transparent;
   835    border-radius: 0em;
   836    transition: @secondaryTransition;
   837  }
   838  
   839  /* Item Types */
   840  .ui.secondary.pointing.menu .header.item {
   841    margin-bottom: -@secondaryPointingBorderWidth;
   842    background-color: transparent !important;
   843    border-right-width: 0px !important;
   844    font-weight: bold !important;
   845    color: @secondaryPointingHeaderColor !important;
   846  }
   847  .ui.secondary.pointing.menu .text.item {
   848    box-shadow: none !important;
   849  }
   850  .ui.secondary.pointing.menu > .menu > .item:after,
   851  .ui.secondary.pointing.menu > .item:after {
   852    display: none;
   853  }
   854  
   855  /* Hover */
   856  .ui.secondary.pointing.menu > .menu > .link.item:hover,
   857  .ui.secondary.pointing.menu > .link.item:hover,
   858  .ui.secondary.pointing.menu > .menu > a.item:hover,
   859  .ui.secondary.pointing.menu > a.item:hover {
   860    background-color: transparent;
   861    color: @secondaryPointingHoverTextColor;
   862  }
   863  
   864  /* Pressed */
   865  .ui.secondary.pointing.menu > .menu > .link.item:active,
   866  .ui.secondary.pointing.menu > .link.item:active,
   867  .ui.secondary.pointing.menu > .menu > a.item:active,
   868  .ui.secondary.pointing.menu > a.item:active {
   869    background-color: transparent;
   870    border-color: @secondaryPointingBorderColor;
   871  }
   872  
   873  /* Active */
   874  .ui.secondary.pointing.menu > .menu > .item.active,
   875  .ui.secondary.pointing.menu > .item.active {
   876    background-color: transparent;
   877    border-color: rgba(0, 0, 0, 0.4);
   878    box-shadow: none;
   879    color: @secondaryPointingActiveTextColor;
   880  }
   881  
   882  /* Secondary Vertical Pointing */
   883  .ui.secondary.vertical.pointing.menu {
   884    border: none;
   885    border-right: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
   886  }
   887  .ui.secondary.vertical.pointing.menu > .item {
   888    margin: 0em -@secondaryPointingBorderWidth 0em 0em;
   889    border-bottom: none;
   890    border-right: @secondaryPointingBorderWidth solid transparent;
   891    border-radius: 0em;
   892  }
   893  
   894  /* Hover */
   895  .ui.secondary.vertical.pointing.menu > .item:hover {
   896    background-color: transparent;
   897    color: rgba(0, 0, 0, 0.7);
   898  }
   899  
   900  /* Pressed */
   901  .ui.secondary.vertical.pointing.menu > .item:active {
   902    background-color: transparent;
   903    border-color: rgba(0, 0, 0, 0.2);
   904  }
   905  
   906  /* Active */
   907  .ui.secondary.vertical.pointing.menu > .item.active {
   908    background-color: transparent;
   909    border-color: rgba(0, 0, 0, 0.4);
   910    color: rgba(0, 0, 0, 0.85);
   911  }
   912  
   913  /* Inverted Vertical Pointing Secondary */
   914  .ui.secondary.inverted.vertical.pointing.menu {
   915    border-right: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
   916    border-bottom: none;
   917  }
   918  
   919  
   920  /*--------------
   921      Text Menu
   922  ---------------*/
   923  
   924  .ui.text.menu {
   925    display: inline-block;
   926    background: none transparent;
   927  
   928    margin: 1rem -1rem;
   929    border-radius: 0px;
   930  
   931    box-shadow: none;
   932  }
   933  .ui.text.menu > .item {
   934    opacity: 0.8;
   935  
   936    margin: 0em 1em;
   937    padding: 0em;
   938    height: auto !important;
   939  
   940    border-radius: 0px;
   941  
   942    box-shadow: none;
   943    transition: @textMenuTransition;
   944  }
   945  .ui.text.menu > .item:before {
   946    display: none !important;
   947  }
   948  .ui.text.menu .header.item {
   949    background-color: transparent;
   950  
   951    opacity: 1;
   952    color: rgba(50, 50, 50, 0.8);
   953    font-size: 0.875rem;
   954    padding: 0em;
   955    text-transform: uppercase;
   956    font-weight: bold;
   957  }
   958  .ui.text.menu .text.item {
   959    opacity: 1;
   960    color: rgba(50, 50, 50, 0.8);
   961    font-weight: bold;
   962  }
   963  
   964  /*--- fluid text ---*/
   965  .ui.text.item.menu .item {
   966    margin: 0em;
   967  }
   968  
   969  /*--- vertical text ---*/
   970  .ui.vertical.text.menu {
   971    margin: 1rem 0em;
   972  }
   973  .ui.vertical.text.menu:first-child {
   974    margin-top: 0rem;
   975  }
   976  .ui.vertical.text.menu:last-child {
   977    margin-bottom: 0rem;
   978  }
   979  .ui.vertical.text.menu .item {
   980    float: left;
   981    clear: left;
   982    margin: 0.5em 0em;
   983  }
   984  .ui.vertical.text.menu .item > i.icon {
   985    float: none;
   986    margin: 0em @verticalPadding 0em 0em;
   987  }
   988  .ui.vertical.text.menu .header.item {
   989    margin: 0.8em 0em;
   990  }
   991  
   992  /*--- hover ---*/
   993  .ui.text.menu .item:hover {
   994    opacity: 1;
   995    background-color: transparent;
   996  }
   997  
   998  /*--- active ---*/
   999  .ui.text.menu .active.item {
  1000    background-color: transparent;
  1001    padding: 0em;
  1002    border: none;
  1003    opacity: 1;
  1004    font-weight: bold;
  1005    box-shadow: none;
  1006  }
  1007  
  1008  /* disable variations */
  1009  .ui.text.pointing.menu .active.item:after {
  1010    box-shadow: none;
  1011  }
  1012  .ui.text.attached.menu {
  1013    box-shadow: none;
  1014  }
  1015  
  1016  /* Inverted */
  1017  .ui.inverted.text.menu,
  1018  .ui.inverted.text.menu .item,
  1019  .ui.inverted.text.menu .item:hover,
  1020  .ui.inverted.text.menu .item.active {
  1021    background-color: transparent;
  1022  }
  1023  
  1024  /* Fluid */
  1025  .ui.fluid.text.menu {
  1026    margin-left: 0em;
  1027    margin-right: 0em;
  1028  }
  1029  
  1030  /*--------------
  1031      Icon Only
  1032  ---------------*/
  1033  
  1034  .ui.icon.menu,
  1035  .ui.vertical.icon.menu {
  1036    width: auto;
  1037    display: inline-block;
  1038    height: auto;
  1039  }
  1040  .ui.icon.menu > .item {
  1041    height: auto;
  1042    text-align: @iconMenuTextAlign;
  1043    color: @iconMenuItemColor;
  1044  }
  1045  .ui.icon.menu > .item > .icon {
  1046    display: block;
  1047    float: none !important;
  1048    margin: 0em auto !important;
  1049    opacity: 1;
  1050  }
  1051  .ui.icon.menu .icon:before {
  1052    opacity: 1;
  1053  }
  1054  
  1055  /* Item Icon Only */
  1056  .ui.menu .icon.item .icon {
  1057    margin: 0em;
  1058  }
  1059  
  1060  .ui.vertical.icon.menu {
  1061    float: none;
  1062  }
  1063  
  1064  /*--- inverted ---*/
  1065  .ui.inverted.icon.menu .item {
  1066    color: rgba(255, 255, 255, 0.8);
  1067  }
  1068  .ui.inverted.icon.menu .icon {
  1069    color: rgba(255, 255, 255, 1);
  1070  }
  1071  
  1072  /*--------------
  1073     Labeled Icon
  1074  ---------------*/
  1075  
  1076  .ui.labeled.icon.menu {
  1077    text-align: center;
  1078  }
  1079  .ui.fluid.labeled.icon.menu > .item {
  1080    min-width: 0em;
  1081  }
  1082  
  1083  .ui.labeled.icon.menu > .item {
  1084    min-width: @labeledIconMinWidth;
  1085  }
  1086  .ui.labeled.icon.menu > .item > .icon {
  1087    display: block;
  1088    font-size: @labeledIconSize !important;
  1089    margin: 0em auto @labeledIconTextMargin !important;
  1090  }
  1091  
  1092  
  1093  
  1094  /*******************************
  1095             Variations
  1096  *******************************/
  1097  
  1098  /*--------------
  1099      Colors
  1100  ---------------*/
  1101  
  1102  /*--- Light Colors  ---*/
  1103  .ui.menu .blue.active.item,
  1104  .ui.blue.menu .active.item {
  1105    border-color: @blue !important;
  1106    color: @blue !important;
  1107  }
  1108  .ui.menu .green.active.item,
  1109  .ui.green.menu .active.item {
  1110    border-color: @green !important;
  1111    color: @green !important;
  1112  }
  1113  .ui.menu .orange.active.item,
  1114  .ui.orange.menu .active.item {
  1115    border-color: @orange !important;
  1116    color: @orange !important;
  1117  }
  1118  .ui.menu .pink.active.item,
  1119  .ui.pink.menu .active.item {
  1120    border-color: @pink !important;
  1121    color: @pink !important;
  1122  }
  1123  .ui.menu .purple.active.item,
  1124  .ui.purple.menu .active.item {
  1125    border-color: @purple !important;
  1126    color: @purple !important;
  1127  }
  1128  .ui.menu .red.active.item,
  1129  .ui.red.menu .active.item {
  1130    border-color: @red !important;
  1131    color: @red !important;
  1132  }
  1133  .ui.menu .teal.active.item,
  1134  .ui.teal.menu .active.item {
  1135    border-color: @teal !important;
  1136    color: @teal !important;
  1137  }
  1138  .ui.menu .yellow.active.item,
  1139  .ui.yellow.menu .active.item {
  1140    border-color: @yellow !important;
  1141    color: @yellow !important;
  1142  }
  1143  
  1144  
  1145  
  1146  /*--------------
  1147      Inverted
  1148  ---------------*/
  1149  
  1150  .ui.inverted.menu {
  1151    background: @invertedBackground;
  1152    box-shadow: @invertedBoxShadow;
  1153  }
  1154  .ui.inverted.menu .header.item {
  1155    margin: 0em;
  1156    background: @invertedHeaderBackground;
  1157    box-shadow: none;
  1158  }
  1159  
  1160  .ui.inverted.menu .item,
  1161  .ui.inverted.menu .item > a:not(.ui) {
  1162    color: @invertedTextColor;
  1163  }
  1164  
  1165  .ui.inverted.menu .item:not(.dropdown).menu {
  1166    background: @invertedSubMenuBackground;
  1167  }
  1168  
  1169  .ui.inverted.menu .item .item,
  1170  .ui.inverted.menu .item .item > a:not(.ui) {
  1171    color: @invertedSubMenuColor;
  1172  }
  1173  .ui.inverted.menu .dropdown .menu .item {
  1174    color: @dropdownTextColor !important;
  1175    transition: none;
  1176  }
  1177  .ui.inverted.menu .dropdown .menu .item:hover {
  1178    background: @dropdownBackgroundHover !important;
  1179    color: @dropdownTextColorHover !important;
  1180  }
  1181  .ui.inverted.menu .item.disabled,
  1182  .ui.inverted.menu .item.disabled:hover {
  1183    color: @invertedDisabledTextColor;
  1184  }
  1185  
  1186  
  1187  
  1188  /*--- Border ---*/
  1189  .ui.inverted.menu .item:before {
  1190    background: @invertedDividerBackground;
  1191  }
  1192  .ui.vertical.inverted.menu .item:before {
  1193    background: @invertedVerticalDividerBackground;
  1194  }
  1195  
  1196  /*--- Hover ---*/
  1197  .ui.link.inverted.menu .item:hover,
  1198  .ui.inverted.menu .link.item:hover,
  1199  .ui.inverted.menu a.item:hover,
  1200  .ui.inverted.menu .dropdown.item:hover {
  1201    background: @invertedHoverBackground;
  1202    color: @invertedHoverColor;
  1203  }
  1204  .ui.inverted.menu .item .menu a.item:hover,
  1205  .ui.inverted.menu .item .menu .link.item:hover {
  1206    background: @invertedSubMenuBackground;
  1207    color: @invertedSubMenuHoverColor;
  1208  }
  1209  
  1210  /*--- Pressed ---*/
  1211  .ui.inverted.menu a.item:active,
  1212  .ui.inverted.menu .dropdown.item:active,
  1213  .ui.inverted.menu .link.item:active,
  1214  .ui.inverted.menu a.item:active {
  1215    background: @invertedMenuPressedBackground;
  1216    color: @invertedMenuPressedColor;
  1217  }
  1218  
  1219  /*--- Active ---*/
  1220  .ui.inverted.menu .active.item {
  1221    box-shadow: none !important;
  1222    background: @invertedActiveBackground;
  1223    color: @invertedActiveColor !important;
  1224  }
  1225  .ui.inverted.vertical.menu .item .menu .active.item {
  1226    background: @invertedSubMenuActiveBackground;
  1227    color: @invertedSubMenuActiveColor;
  1228  }
  1229  
  1230  /*--- Pointers ---*/
  1231  .ui.inverted.pointing.menu .active.item:after {
  1232    background: #5B5B5B;
  1233    box-shadow: none;
  1234  }
  1235  .ui.inverted.pointing.menu .active.item:hover:after {
  1236    background: #4A4A4A;
  1237  }
  1238  
  1239  
  1240  /*--------------
  1241      Selection
  1242  ---------------*/
  1243  
  1244  .ui.selection.menu > .item {
  1245    color: rgba(0, 0, 0, 0.4);
  1246  }
  1247  .ui.selection.menu > .item:hover {
  1248    color: rgba(0, 0, 0, 0.6);
  1249  }
  1250  .ui.selection.menu > .item.active {
  1251    color: rgba(0, 0, 0, 0.85);
  1252  }
  1253  
  1254  .ui.inverted.selection.menu > .item {
  1255    color: rgba(255, 255, 255, 0.4);
  1256  }
  1257  .ui.inverted.selection.menu > .item:hover {
  1258    color: rgba(255, 255, 255, 0.9);
  1259  }
  1260  .ui.inverted.selection.menu > .item.active {
  1261    color: #FFFFFF;
  1262  }
  1263  
  1264  
  1265  /*--------------
  1266       Floated
  1267  ---------------*/
  1268  
  1269  .ui.floated.menu {
  1270    float: left;
  1271    margin: 0rem 0.5rem 0rem 0rem;
  1272  }
  1273  .ui.right.floated.menu {
  1274    float: right;
  1275    margin: 0rem 0rem 0rem 0.5rem;
  1276  }
  1277  
  1278  
  1279  /*--------------
  1280   Inverted Colors
  1281  ---------------*/
  1282  
  1283  /*--- Light Colors  ---*/
  1284  .ui.grey.menu {
  1285    background-color: @offWhite;
  1286  }
  1287  
  1288  /*--- Inverted Colors  ---*/
  1289  
  1290  /* Blue */
  1291  .ui.inverted.blue.menu {
  1292    background-color: @blue;
  1293  }
  1294  .ui.inverted.blue.pointing.menu .active.item:after {
  1295    background-color: @blue;
  1296  }
  1297  /* Green */
  1298  .ui.inverted.green.menu {
  1299    background-color: @green;
  1300  }
  1301  .ui.inverted.green.pointing.menu .active.item:after {
  1302    background-color: @green;
  1303  }
  1304  /* Orange */
  1305  .ui.inverted.orange.menu {
  1306    background-color: @orange;
  1307  }
  1308  .ui.inverted.orange.pointing.menu .active.item:after {
  1309    background-color: @orange;
  1310  }
  1311  /* Pink */
  1312  .ui.inverted.pink.menu {
  1313    background-color: @pink;
  1314  }
  1315  .ui.inverted.pink.pointing.menu .active.item:after {
  1316    background-color: @pink;
  1317  }
  1318  /* Purple */
  1319  .ui.inverted.purple.menu {
  1320    background-color: @purple;
  1321  }
  1322  .ui.inverted.purple.pointing.menu .active.item:after {
  1323    background-color: @purple;
  1324  }
  1325  /* Red */
  1326  .ui.inverted.red.menu {
  1327    background-color: @red;
  1328  }
  1329  .ui.inverted.red.pointing.menu .active.item:after {
  1330    background-color: @red;
  1331  }
  1332  /* Teal */
  1333  .ui.inverted.teal.menu {
  1334    background-color: @teal;
  1335  }
  1336  .ui.inverted.teal.pointing.menu .active.item:after {
  1337    background-color: @teal;
  1338  }
  1339  /* Yellow */
  1340  .ui.inverted.yellow.menu {
  1341    background-color: @yellow;
  1342  }
  1343  .ui.inverted.yellow.pointing.menu .active.item:after {
  1344    background-color: @yellow;
  1345  }
  1346  
  1347  
  1348  /*--------------
  1349       Fitted
  1350  ---------------*/
  1351  
  1352  .ui.fitted.menu .item,
  1353  .ui.fitted.menu .item .menu .item,
  1354  .ui.menu .fitted.item {
  1355    padding: 0em;
  1356  }
  1357  .ui.horizontally.fitted.menu .item,
  1358  .ui.horizontally.fitted.menu .item .menu .item,
  1359  .ui.menu .horizontally.fitted.item {
  1360    padding-top: @verticalPadding;
  1361    padding-bottom: @verticalPadding;
  1362  }
  1363  .ui.vertically.fitted.menu .item,
  1364  .ui.vertically.fitted.menu .item .menu .item,
  1365  .ui.menu .vertically.fitted.item {
  1366    padding-left: @horizontalPadding;
  1367    padding-right: @horizontalPadding;
  1368  }
  1369  
  1370  /*--------------
  1371     Borderless
  1372  ---------------*/
  1373  
  1374  .ui.borderless.menu .item:before,
  1375  .ui.borderless.menu .item .menu .item:before,
  1376  .ui.menu .borderless.item:before {
  1377    background: none !important;
  1378  }
  1379  
  1380  /*-------------------
  1381         Compact
  1382  --------------------*/
  1383  
  1384  .ui.compact.menu {
  1385    display: inline-block;
  1386    margin: 0em;
  1387    vertical-align: middle;
  1388  }
  1389  .ui.compact.vertical.menu {
  1390    width: auto !important;
  1391  }
  1392  .ui.compact.vertical.menu .item:last-child::before {
  1393    display: block;
  1394  }
  1395  
  1396  /*-------------------
  1397          Fluid
  1398  --------------------*/
  1399  
  1400  .ui.menu.fluid,
  1401  .ui.vertical.menu.fluid {
  1402    display: block;
  1403    width: 100% !important;
  1404  }
  1405  
  1406  
  1407  /*-------------------
  1408        Evenly Sized
  1409  --------------------*/
  1410  
  1411  .ui.item.menu,
  1412  .ui.item.menu .item {
  1413    width: 100%;
  1414    padding-left: 0px !important;
  1415    padding-right: 0px !important;
  1416    text-align: center;
  1417  }
  1418  .ui.menu.two.item .item {
  1419    width: 50%;
  1420  }
  1421  .ui.menu.three.item .item {
  1422    width: 33.333%;
  1423  }
  1424  .ui.menu.four.item .item {
  1425    width: 25%;
  1426  }
  1427  .ui.menu.five.item .item {
  1428    width: 20%;
  1429  }
  1430  .ui.menu.six.item .item {
  1431    width: 16.666%;
  1432  }
  1433  .ui.menu.seven.item .item {
  1434    width: 14.285%;
  1435  }
  1436  .ui.menu.eight.item .item {
  1437    width: 12.500%;
  1438  }
  1439  .ui.menu.nine.item .item {
  1440    width: 11.11%;
  1441  }
  1442  .ui.menu.ten.item .item {
  1443    width: 10.0%;
  1444  }
  1445  .ui.menu.eleven.item .item {
  1446    width: 9.09%;
  1447  }
  1448  .ui.menu.twelve.item .item {
  1449    width: 8.333%;
  1450  }
  1451  
  1452  
  1453  /*--------------
  1454       Fixed
  1455  ---------------*/
  1456  
  1457  .ui.menu.fixed {
  1458    position: fixed;
  1459    z-index: 101;
  1460    margin: 0em;
  1461    border: none;
  1462    width: 100%;
  1463  }
  1464  .ui.menu.fixed,
  1465  .ui.menu.fixed .item:first-child,
  1466  .ui.menu.fixed .item:last-child {
  1467    border-radius: 0px !important;
  1468  }
  1469  
  1470  .ui.fixed.menu,
  1471  .ui.top.fixed.menu {
  1472    top: 0px;
  1473    left: 0px;
  1474    right: auto;
  1475    bottom: auto;
  1476  }
  1477  .ui.right.fixed.menu {
  1478    top: 0px;
  1479    right: 0px;
  1480    left: auto;
  1481    bottom: auto;
  1482    width: auto;
  1483    height: 100%;
  1484  }
  1485  .ui.bottom.fixed.menu {
  1486    bottom: 0px;
  1487    left: 0px;
  1488    top: auto;
  1489    right: auto;
  1490  }
  1491  .ui.left.fixed.menu {
  1492    top: 0px;
  1493    left: 0px;
  1494    right: auto;
  1495    bottom: auto;
  1496    width: auto;
  1497    height: 100%;
  1498  }
  1499  
  1500  /* Coupling with Grid */
  1501  .ui.fixed.menu + .ui.grid {
  1502    padding-top: @fixedGridMargin;
  1503  }
  1504  
  1505  
  1506  /*-------------------
  1507         Pointing
  1508  --------------------*/
  1509  
  1510  .ui.pointing.menu .active.item:after {
  1511    position: absolute;
  1512    content: '';
  1513    top: 100%;
  1514    left: 50%;
  1515    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1516    margin: 0em;
  1517    background: none;
  1518  
  1519    width: @arrowSize;
  1520    height: @arrowSize;
  1521  
  1522    border: none;
  1523    border-bottom: @arrowBorder;
  1524    border-right: @arrowBorder;
  1525  
  1526    z-index: @arrowZIndex;
  1527  
  1528    transition: @arrowTransition;
  1529  }
  1530  
  1531  /* Don't double up pointers */
  1532  .ui.pointing.menu .active.item .menu .active.item:after {
  1533    display: none;
  1534  }
  1535  
  1536  .ui.vertical.pointing.menu .active.item:after {
  1537    position: absolute;
  1538    top: 50%;
  1539    right: 0%;
  1540    bottom: auto;
  1541    left: auto;
  1542  
  1543    transform: translateX(50%) translateY(-50%) rotate(45deg);
  1544    margin: 0em -@arrowBorderSize 0em 0em;
  1545  
  1546    border: none;
  1547    border-top: @arrowBorder;
  1548    border-right: @arrowBorder;
  1549  }
  1550  
  1551  /* Colors */
  1552  .ui.pointing.menu .active.item:hover:after {
  1553    background-color: @arrowHoverColor;
  1554  }
  1555  .ui.pointing.menu .active.item:after {
  1556    background-color: @arrowActiveColor;
  1557  }
  1558  
  1559  .ui.vertical.pointing.menu .item:hover:after {
  1560    background-color: @arrowVerticalHoverColor;
  1561  }
  1562  .ui.vertical.pointing.menu .active.item:after {
  1563    background-color: @arrowVerticalActiveColor;
  1564  }
  1565  .ui.vertical.pointing.menu .menu .active.item:after {
  1566    background-color: @arrowVerticalSubMenuColor;
  1567  }
  1568  
  1569  
  1570  
  1571  /*--------------
  1572      Attached
  1573  ---------------*/
  1574  
  1575  .ui.menu.attached {
  1576    margin: 0rem;
  1577    border-radius: 0px;
  1578    /* avoid rgba multiplying */
  1579    box-shadow: @attachedBoxShadow;
  1580  }
  1581  .ui.top.attached.menu {
  1582    border-radius: @borderRadius @borderRadius 0em 0em;
  1583  }
  1584  .ui.menu.bottom.attached {
  1585    border-radius: 0em 0em @borderRadius @borderRadius;
  1586  }
  1587  
  1588  /*--------------
  1589       Sizes
  1590  ---------------*/
  1591  
  1592  /* Small */
  1593  .ui.small.menu .item {
  1594    font-size: @small;
  1595  }
  1596  .ui.small.vertical.menu {
  1597    width: @smallWidth;
  1598  }
  1599  
  1600  /* Medium */
  1601  .ui.menu .item {
  1602    font-size: @medium;
  1603  }
  1604  .ui.vertical.menu {
  1605    width: @mediumWidth;
  1606  }
  1607  
  1608  /* Large */
  1609  .ui.large.menu .item {
  1610    font-size: @large;
  1611  }
  1612  .ui.large.menu .item .item {
  1613    font-size: @largeSubMenu;
  1614  }
  1615  .ui.large.menu .dropdown .item {
  1616    font-size: @largeDropdown;
  1617  }
  1618  .ui.large.vertical.menu {
  1619    width: @largeWidth;
  1620  }
  1621  
  1622  .loadUIOverrides();