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

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