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

     1  /*!
     2   * # Semantic UI - Dropdown
     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    : 'module';
    18  @element : 'dropdown';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23              Dropdown
    24  *******************************/
    25  
    26  .ui.dropdown {
    27    cursor: pointer;
    28    position: relative;
    29    display: inline-block;
    30    line-height: 1em;
    31    tap-highlight-color: rgba(0, 0, 0, 0);
    32    outline: none;
    33    text-align: left;
    34    transition: @transition;
    35  }
    36  
    37  
    38  /*******************************
    39              Content
    40  *******************************/
    41  
    42  /*--------------
    43        Menu
    44  ---------------*/
    45  
    46  .ui.dropdown .menu {
    47    cursor: auto;
    48    position: absolute;
    49    display: none;
    50    outline: none;
    51    top: 100%;
    52    transition: @menuTransition;
    53  
    54    margin: @menuMargin;
    55    padding: @menuPadding;
    56    background: @menuBackground;
    57    min-width: 100%;
    58  
    59    white-space: @menuWrap;
    60    font-size: 1rem;
    61    text-shadow: none;
    62    text-align: @menuTextAlign;
    63  
    64    box-shadow: @menuBoxShadow;
    65    border: @menuBorder;
    66    border-radius: @menuBorderRadius;
    67    transition: @menuTransition;
    68    z-index: @menuZIndex;
    69    will-change: transform, opacity;
    70  }
    71  
    72  /*--------------
    73    Hidden Input
    74  ---------------*/
    75  
    76  .ui.dropdown > input:not(.search):first-child,
    77  .ui.dropdown > select {
    78    display: none !important;
    79  }
    80  
    81  /*--------------
    82   Dropdown Icon
    83  ---------------*/
    84  
    85  .ui.dropdown > .dropdown.icon {
    86    width: auto;
    87    margin: @dropdownIconMargin;
    88  }
    89  .ui.dropdown .menu > .item .dropdown.icon {
    90    width: auto;
    91    float: @itemDropdownIconFloat;
    92    margin: @itemDropdownIconMargin;
    93  }
    94  .ui.dropdown .menu > .item .dropdown.icon + .text {
    95    margin-right: @itemDropdownIconDistance;
    96  }
    97  
    98  
    99  /*--------------
   100        Text
   101  ---------------*/
   102  
   103  .ui.dropdown > .text {
   104    display: inline-block;
   105    transition: @textTransition;
   106  }
   107  
   108  /*--------------
   109      Menu Item
   110  ---------------*/
   111  
   112  .ui.dropdown .menu > .item {
   113    position: relative;
   114    cursor: pointer;
   115    display: block;
   116    border: @itemBorder;
   117    height: @itemHeight;
   118  
   119    border-top: @itemDivider;
   120    line-height: @itemLineHeight;
   121    font-size: @itemFontSize;
   122    color: @itemColor;
   123  
   124    padding: @itemVerticalPadding @itemHorizontalPadding !important;
   125    font-size: @itemFontSize;
   126    text-transform: @itemTextTransform;
   127    font-weight: @itemFontWeight;
   128    box-shadow: @itemBoxShadow;
   129    -webkit-touch-callout: none;
   130  }
   131  .ui.dropdown .menu > .item:first-child {
   132    border-top-width: 0px;
   133  }
   134  
   135  /*--------------
   136    Floated Content
   137  ---------------*/
   138  
   139  .ui.dropdown > .text > [class*="right floated"],
   140  .ui.dropdown .menu .item > [class*="right floated"] {
   141    float: right !important;
   142    margin-right: 0em !important;
   143    margin-left: @floatedDistance !important;
   144  }
   145  .ui.dropdown > .text > [class*="left floated"],
   146  .ui.dropdown .menu .item > [class*="left floated"] {
   147    float: left !important;
   148    margin-left: 0em !important;
   149    margin-right: @floatedDistance !important;
   150  }
   151  
   152  .ui.dropdown .menu .item > .icon.floated,
   153  .ui.dropdown .menu .item > .flag.floated,
   154  .ui.dropdown .menu .item > .image.floated,
   155  .ui.dropdown .menu .item > img.floated {
   156    margin-top: @itemLineHeightOffset;
   157  }
   158  
   159  
   160  /*--------------
   161    Menu Divider
   162  ---------------*/
   163  
   164  .ui.dropdown .menu > .header {
   165    margin: @menuHeaderMargin;
   166    padding: @menuHeaderPadding;
   167    color: @menuHeaderColor;
   168    font-size: @menuHeaderFontSize;
   169    font-weight: @menuHeaderFontWeight;
   170    text-transform: @menuHeaderTextTransform;
   171  }
   172  
   173  .ui.dropdown .menu > .divider {
   174    border-top: @menuDividerBorder;
   175    height: 0em;
   176    margin: @menuDividerMargin;
   177  }
   178  
   179  .ui.dropdown .menu > .input {
   180    margin: @menuInputMargin;
   181    min-width: @menuInputMinWidth;
   182  }
   183  .ui.dropdown .menu > .header + .input {
   184    margin-top: 0em;
   185  }
   186  .ui.dropdown .menu > .input:not(.transparent) input {
   187    padding: @menuInputPadding;
   188  }
   189  .ui.dropdown .menu > .input:not(.transparent) .button,
   190  .ui.dropdown .menu > .input:not(.transparent) .icon,
   191  .ui.dropdown .menu > .input:not(.transparent) .label {
   192    padding-top: @menuInputVerticalPadding;
   193    padding-bottom: @menuInputVerticalPadding;
   194  }
   195  
   196  /*-----------------
   197    Item Description
   198  -------------------*/
   199  
   200  .ui.dropdown > .text > .description,
   201  .ui.dropdown .menu > .item > .description {
   202    margin: @itemDescriptionMargin;
   203    color: @itemDescriptionColor;
   204  }
   205  
   206  
   207  /*--------------
   208      Sub Menu
   209  ---------------*/
   210  
   211  .ui.dropdown .menu .menu {
   212    top: @subMenuTop !important;
   213    left: @subMenuLeft !important;
   214    right: @subMenuRight !important;
   215    margin: @subMenuMargin !important;
   216    border-radius: @subMenuBorderRadius !important;
   217    z-index: @subMenuZIndex !important;
   218  }
   219  
   220  /* Hide Arrow */
   221  .ui.dropdown .menu .menu:after {
   222    display: none;
   223  }
   224  
   225  
   226  /*******************************
   227              Coupling
   228  *******************************/
   229  
   230  /*--------------
   231     Sub Elements
   232  ---------------*/
   233  
   234  /* Icons / Flags / Labels / Image */
   235  .ui.dropdown > .text > .icon,
   236  .ui.dropdown > .text > .label,
   237  .ui.dropdown > .text > .flag,
   238  .ui.dropdown > .text > img,
   239  .ui.dropdown > .text > .image {
   240    margin-top: @textLineHeightOffset;
   241  }
   242  .ui.dropdown .menu > .item > .icon,
   243  .ui.dropdown .menu > .item > .label,
   244  .ui.dropdown .menu > .item > .flag,
   245  .ui.dropdown .menu > .item > .image,
   246  .ui.dropdown .menu > .item > img  {
   247    margin-top: @itemLineHeightOffset;
   248  }
   249  
   250  .ui.dropdown > .text > .icon,
   251  .ui.dropdown > .text > .label,
   252  .ui.dropdown > .text > .flag,
   253  .ui.dropdown > .text > img,
   254  .ui.dropdown > .text > .image,
   255  .ui.dropdown .menu > .item > .icon,
   256  .ui.dropdown .menu > .item > .label,
   257  .ui.dropdown .menu > .item > .flag,
   258  .ui.dropdown .menu > .item > .image,
   259  .ui.dropdown .menu > .item > img  {
   260    margin-left: 0em;
   261    float: @itemElementFloat;
   262    margin-right: @itemElementDistance;
   263  }
   264  
   265  /*--------------
   266       Image
   267  ---------------*/
   268  
   269  .ui.dropdown > .text > img,
   270  .ui.dropdown > .text > .image,
   271  .ui.dropdown .menu > .item > .image,
   272  .ui.dropdown .menu > .item > img {
   273    display: inline-block;
   274    vertical-align: middle;
   275    width: auto;
   276    max-height: @menuImageMaxHeight;
   277  }
   278  
   279  
   280  /*--------------
   281        Menu
   282  ---------------*/
   283  
   284  /* Remove Menu Item Divider */
   285  .ui.dropdown .ui.menu > .item:before,
   286  .ui.menu .ui.dropdown .menu > .item:before {
   287    display: none;
   288  }
   289  
   290  /* Prevent Menu Item Border */
   291  .ui.menu .ui.dropdown .menu .active.item {
   292    border-left: none;
   293  }
   294  
   295  /* Automatically float dropdown menu right on last menu item */
   296  .ui.menu .right.menu .dropdown:last-child .menu,
   297  .ui.menu .right.dropdown.item .menu,
   298  .ui.buttons > .ui.dropdown:last-child .menu {
   299    left: auto;
   300    right: 0em;
   301  }
   302  
   303  /*--------------
   304       Button
   305  ---------------*/
   306  
   307  /* No Margin On Icon Button */
   308  .ui.dropdown.icon.button > .dropdown.icon {
   309    margin: 0em;
   310  }
   311  .ui.dropdown.button:not(.pointing):not(.floating).active,
   312  .ui.dropdown.button:not(.pointing):not(.floating).visible {
   313    border-bottom-left-radius: 0em;
   314    border-bottom-right-radius: 0em;
   315  }
   316  
   317  
   318  
   319  /*******************************
   320                Types
   321  *******************************/
   322  
   323  /*--------------
   324      Selection
   325  ---------------*/
   326  
   327  /* Displays like a select box */
   328  .ui.selection.dropdown {
   329    cursor: pointer;
   330    word-wrap: break-word;
   331    white-space: normal;
   332    outline: 0;
   333    transform: rotateZ(0deg);
   334  
   335    min-width: @selectionMinWidth;
   336  
   337    background: @selectionBackground;
   338    display: @selectionDisplay;
   339    padding: @selectionPadding;
   340    color: @selectionTextColor;
   341    box-shadow: @selectionBoxShadow;
   342    border: @selectionBorder;
   343    border-radius: @selectionBorderRadius;
   344    transition: @selectionTransition;
   345  }
   346  .ui.selection.dropdown.visible,
   347  .ui.selection.dropdown.active {
   348    z-index: @selectionZIndex;
   349  }
   350  
   351  select.ui.dropdown {
   352    height: @selectHeight;
   353    padding: @selectPadding;
   354    border: @selectBorder;
   355    visibility: @selectVisibility;
   356  }
   357  .ui.selection.dropdown > .text {
   358    margin-right: @selectionTextIconDistance;
   359  }
   360  .ui.selection.dropdown > .search.icon,
   361  .ui.selection.dropdown > .delete.icon,
   362  .ui.selection.dropdown > .dropdown.icon {
   363    cursor: pointer;
   364    position: absolute;
   365    top: auto;
   366    width: auto;
   367    margin: @selectionIconMargin;
   368    padding: @selectionIconPadding;
   369    right: @selectionHorizontalPadding;
   370    opacity: @selectionIconOpacity;
   371    transition: @selectionIconTransition;
   372  }
   373  
   374  /* Compact */
   375  .ui.compact.selection.dropdown {
   376    min-width:  0px;
   377  }
   378  
   379  /*  Selection Menu */
   380  .ui.selection.dropdown .menu {
   381    overflow-x: hidden;
   382    overflow-y: auto;
   383    backface-visibility: hidden;
   384    -webkit-overflow-scrolling: touch;
   385    border-top-width: 0px !important;
   386    width: auto;
   387    margin: 0px -@menuBorderWidth;
   388    min-width: @menuMinWidth;
   389    outline: none;
   390  
   391    box-shadow: @selectionMenuBoxShadow;
   392    transition: @selectionMenuTransition;
   393  }
   394  .ui.selection.dropdown .menu:after,
   395  .ui.selection.dropdown .menu:before {
   396    display: none;
   397  }
   398  
   399  
   400  /* Scrollbar in IE */
   401  @media all and (-ms-high-contrast:none) {
   402    .ui.selection.dropdown .menu {
   403      min-width: ~"calc(100% - "@scrollbarWidth~")";
   404    }
   405  }
   406  
   407  @media only screen and (max-width : @largestMobileScreen) {
   408    .ui.selection.dropdown .menu {
   409      max-height: @selectionMobileMaxMenuHeight;
   410    }
   411  }
   412  @media only screen and (min-width: @tabletBreakpoint) {
   413    .ui.selection.dropdown .menu {
   414      max-height: @selectionTabletMaxMenuHeight;
   415    }
   416  }
   417  @media only screen and (min-width: @computerBreakpoint) {
   418    .ui.selection.dropdown .menu {
   419      max-height: @selectionComputerMaxMenuHeight;
   420    }
   421  }
   422  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
   423    .ui.selection.dropdown .menu {
   424      max-height: @selectionWidescreenMaxMenuHeight;
   425    }
   426  }
   427  
   428  /* Menu Item */
   429  .ui.selection.dropdown .menu > .item {
   430    border-top: @selectionItemDivider;
   431    padding: @selectionItemPadding !important;
   432    white-space: normal;
   433    word-wrap: normal;
   434  }
   435  
   436  /* Hover */
   437  .ui.selection.dropdown:hover {
   438    border-color: @selectionHoverBorderColor;
   439    box-shadow: @selectionHoverBoxShadow;
   440  }
   441  
   442  /* Disabled */
   443  .ui.selection.dropdown.disabled,
   444  .ui.selection.dropdown.disabled:hover {
   445    cursor: default;
   446    box-shadow: none;
   447    color: @selectionTextColor;
   448    border: @selectionBorder;
   449    opacity: @disabledOpacity !important;
   450  }
   451  /* Visible */
   452  .ui.selection.dropdown.visible {
   453    border-color: @selectionVisibleBorderColor;
   454    box-shadow: @selectionVisibleBoxShadow;
   455  }
   456  
   457  .ui.selection.visible.dropdown .menu {
   458    border-color: @selectionVisibleBorderColor;
   459    box-shadow: @selectionVisibleMenuBoxShadow;
   460  }
   461  
   462  
   463  /* Visible Hover */
   464  .ui.selection.visible.dropdown:hover {
   465    border-color: @selectionVisibleHoverBorderColor;
   466    box-shadow: @selectionVisibleHoverBoxShadow;
   467  }
   468  
   469  .ui.selection.visible.dropdown .menu {
   470    border-color: @selectionVisibleHoverBorderColor;
   471    box-shadow: @selectionVisibleHoverMenuBoxShadow;
   472  }
   473  
   474  
   475  /* Active Item */
   476  .ui.selection.active.dropdown > .text:not(.default),
   477  .ui.selection.visible.dropdown > .text:not(.default) {
   478    font-weight: @selectionVisibleTextFontWeight;
   479    color: @selectionVisibleTextColor;
   480  }
   481  
   482  /* Dropdown Icon */
   483  .ui.active.selection.dropdown > .dropdown.icon,
   484  .ui.visible.selection.dropdown > .dropdown.icon {
   485    opacity: @selectionVisibleIconOpacity;
   486    z-index: 3;
   487  }
   488  
   489  /* Connecting Border */
   490  .ui.active.selection.dropdown,
   491  .ui.visible.selection.dropdown {
   492    border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
   493    border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
   494  }
   495  
   496  /*--------------
   497     Searchable
   498  ---------------*/
   499  
   500  /* Search Selection */
   501  .ui.search.dropdown {
   502    min-width: @searchMinWidth;
   503  }
   504  
   505  /* Search Dropdown */
   506  .ui.search.dropdown > input.search {
   507    background: none transparent !important;
   508    border: none !important;
   509    box-shadow: none !important;
   510    border-radius: 0em !important;
   511    cursor: pointer;
   512    top: 0em;
   513    left: 0em;
   514    width: 100%;
   515    outline: none;
   516    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   517    padding: inherit;
   518  }
   519  
   520  /* Text Layering */
   521  .ui.search.dropdown > input.search {
   522    position: absolute;
   523    z-index: 2;
   524  }
   525  .ui.search.dropdown > .text {
   526    cursor: text;
   527    position: relative;
   528    z-index: 3;
   529  }
   530  
   531  /* Search Selection */
   532  .ui.search.selection.dropdown > input.search {
   533    line-height: @searchSelectionLineHeight;
   534    padding: @searchSelectionInputPadding;
   535  }
   536  
   537  /* Active/Visible Search */
   538  .ui.search.dropdown.active > input.search,
   539  .ui.search.dropdown.visible > input.search {
   540    cursor: auto;
   541  }
   542  .ui.search.dropdown.active > .text,
   543  .ui.search.dropdown.visible > .text {
   544    pointer-events: none;
   545  }
   546  .ui.active.search.dropdown > input.search:focus + .text {
   547    color: @unselectedTextColor !important;
   548  }
   549  
   550  /* Search Menu */
   551  .ui.search.dropdown .menu {
   552    overflow-x: hidden;
   553    overflow-y: auto;
   554    backface-visibility: hidden;
   555    -webkit-overflow-scrolling: touch;
   556  }
   557  @media only screen and (max-width : @largestMobileScreen) {
   558    .ui.search.dropdown .menu {
   559      max-height: @searchMobileMaxMenuHeight;
   560    }
   561  }
   562  @media only screen and (min-width: @tabletBreakpoint) {
   563    .ui.search.dropdown .menu {
   564      max-height: @searchTabletMaxMenuHeight;
   565    }
   566  }
   567  @media only screen and (min-width: @computerBreakpoint) {
   568    .ui.search.dropdown .menu {
   569      max-height: @searchComputerMaxMenuHeight;
   570    }
   571  }
   572  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
   573    .ui.search.dropdown .menu {
   574      max-height: @searchWidescreenMaxMenuHeight;
   575    }
   576  }
   577  
   578  
   579  /*--------------
   580       Inline
   581  ---------------*/
   582  
   583  .ui.inline.dropdown {
   584    cursor: pointer;
   585    display: inline-block;
   586    color: @inlineTextColor;
   587  }
   588  .ui.inline.dropdown .dropdown.icon {
   589    margin: @inlineIconMargin;
   590    vertical-align: top;
   591  }
   592  .ui.inline.dropdown > .text {
   593    font-weight: @inlineTextFontWeight;
   594  }
   595  .ui.inline.dropdown .menu {
   596    cursor: auto;
   597    margin-top: @inlineMenuDistance;
   598    border-radius: @inlineMenuBorderRadius;
   599  }
   600  
   601  
   602  /*******************************
   603              States
   604  *******************************/
   605  
   606  
   607  /*--------------------
   608          Hover
   609  ----------------------*/
   610  
   611  /* Menu Item Hover */
   612  .ui.dropdown .menu > .item:hover {
   613    background: @hoveredItemBackground;
   614    color: @hoveredItemColor;
   615    z-index: @hoveredZIndex;
   616  }
   617  
   618  /*--------------------
   619          Active
   620  ----------------------*/
   621  
   622  /* Menu Item Active */
   623  .ui.dropdown .menu .active.item {
   624    background: @activeItemBackground;
   625    font-weight: @activeItemFontWeight;
   626    color: @activeItemColor;
   627    box-shadow: @activeItemBoxShadow;
   628    z-index: @activeItemZIndex;
   629  }
   630  
   631  /*--------------------
   632       Default Text
   633  ----------------------*/
   634  
   635  .ui.dropdown > .default.text,
   636  .ui.default.dropdown > .text {
   637    color: @defaultTextColor;
   638  }
   639  .ui.dropdown:hover > .default.text,
   640  .ui.default.dropdown:hover > .text {
   641    color: @defaultTextHoverColor;
   642  }
   643  
   644  /*--------------------
   645          Loading
   646  ----------------------*/
   647  
   648  .ui.loading.dropdown > .text {
   649    transition: none;
   650  }
   651  .ui.dropdown > .loading.menu {
   652    display: block;
   653    visibility: hidden;
   654    z-index: @loadingZIndex;
   655  }
   656  
   657  /*--------------------
   658      Keyboard Select
   659  ----------------------*/
   660  
   661  /* Selected Item */
   662  .ui.dropdown.selected,
   663  .ui.dropdown .menu .selected.item {
   664    background: @selectedBackground;
   665    color: @selectedColor;
   666  }
   667  
   668  
   669  /*--------------------
   670      Search Filtered
   671  ----------------------*/
   672  
   673  /* Filtered Item */
   674  .ui.dropdown > .filtered.text {
   675    visibility: hidden;
   676  }
   677  .ui.dropdown .filtered.item {
   678    display: none !important;
   679  }
   680  
   681  
   682  /*--------------------
   683          Error
   684  ----------------------*/
   685  
   686  .ui.dropdown.error,
   687  .ui.dropdown.error > .text,
   688  .ui.dropdown.error > .default.text {
   689    color: @errorTextColor;
   690  }
   691  
   692  .ui.selection.dropdown.error {
   693    background: @errorBackgroundColor;
   694    border-color: @errorBorderColor;
   695  }
   696  
   697  .ui.selection.dropdown.error:hover {
   698    border-color: @errorBorderColor;
   699  }
   700  
   701  .ui.dropdown.error > .menu,
   702  .ui.dropdown.error > .menu .menu {
   703    border-color: @errorBorderColor;
   704  }
   705  
   706  .ui.dropdown.error > .menu > .item {
   707    color: @errorItemTextColor;
   708  }
   709  
   710  /* Item Hover */
   711  .ui.dropdown.error > .menu > .item:hover {
   712    background-color: @errorItemHoverBackground;
   713  }
   714  
   715  /* Item Active */
   716  .ui.dropdown.error > .menu .active.item {
   717    background-color: @errorItemActiveBackground;
   718  }
   719  
   720  
   721  
   722  /*--------------------
   723          Disabled
   724  ----------------------*/
   725  
   726  /* Disabled */
   727  .ui.disabled.dropdown {
   728    cursor: default;
   729    pointer-events: none;
   730    opacity: @disabledOpacity;
   731  }
   732  
   733  
   734  /*******************************
   735             Variations
   736  *******************************/
   737  
   738  /*--------------
   739      Direction
   740  ---------------*/
   741  
   742  /* Flyout Direction */
   743  .ui.dropdown .menu {
   744    left: 0px;
   745  }
   746  
   747  
   748  /* Default Side (Right) */
   749  .ui.dropdown .right.menu > .menu,
   750  .ui.dropdown .menu .right.menu {
   751    left: 100% !important;
   752    right: auto !important;
   753  }
   754  
   755  /* Left Flyout Menu */
   756  .ui.dropdown > .left.menu .menu,
   757  .ui.dropdown .menu .left.menu {
   758    left: auto !important;
   759    right: 100% !important;
   760  }
   761  
   762  .ui.dropdown .item .left.dropdown.icon,
   763  .ui.dropdown .left.menu .item .dropdown.icon {
   764    width: auto;
   765    float: @leftMenuDropdownIconFloat;
   766    margin: @leftMenuDropdownIconMargin;
   767  }
   768  .ui.dropdown .item .left.dropdown.icon,
   769  .ui.dropdown .left.menu .item .dropdown.icon {
   770    width: auto;
   771    float: @leftMenuDropdownIconFloat;
   772    margin: @leftMenuDropdownIconMargin;
   773  }
   774  .ui.dropdown .item .left.dropdown.icon + .text,
   775  .ui.dropdown .left.menu .item .dropdown.icon + .text {
   776    margin-left: @itemDropdownIconDistance;
   777  }
   778  
   779  
   780  /*--------------
   781       Upward
   782  ---------------*/
   783  
   784  .ui.upward.dropdown > .menu {
   785    top: auto;
   786    bottom: 100%;
   787    box-shadow: @upwardMenuBoxShadow;
   788    border-radius: @upwardMenuBorderRadius;
   789  }
   790  
   791  /* Active Upward */
   792  .ui.simple.upward.active.dropdown,
   793  .ui.simple.upward.dropdown:hover {
   794    border-radius: @borderRadius @borderRadius 0em 0em !important;
   795  }
   796  .ui.upward.dropdown.button:not(.pointing):not(.floating).active,
   797  .ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
   798    border-radius: @borderRadius @borderRadius 0em 0em;
   799  }
   800  
   801  /* Selection */
   802  .ui.upward.selection.dropdown .menu {
   803    border-top-width: @menuBorderWidth !important;
   804    border-bottom-width: 0px !important;
   805  }
   806  .ui.upward.selection.dropdown:hover {
   807    box-shadow: @upwardSelectionHoverBoxShadow;
   808  }
   809  .ui.upward.selection.visible.dropdown:hover {
   810    box-shadow: @upwardSelectionVisibleHoverBoxShadow;
   811  }
   812  .ui.active.upward.selection.dropdown,
   813  .ui.visible.upward.selection.dropdown {
   814    border-radius: @upwardSelectionVisibleBorderRadius !important;
   815  }
   816  .ui.upward.selection.dropdown.visible {
   817    box-shadow: @upwardSelectionVisibleBoxShadow;
   818  }
   819  .ui.upward.selection.visible.dropdown:hover .menu {
   820    box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
   821  }
   822  
   823  /*--------------
   824       Simple
   825  ---------------*/
   826  
   827  /* Displays without javascript */
   828  
   829  .ui.simple.dropdown .menu:before,
   830  .ui.simple.dropdown .menu:after {
   831    display: none;
   832  }
   833  .ui.simple.dropdown .menu {
   834    position: absolute;
   835    display: block;
   836    overflow: hidden;
   837    top: -9999px !important;
   838    opacity: 0;
   839    width: 0;
   840    height: 0;
   841    transition: @simpleTransition;
   842  }
   843  
   844  .ui.simple.active.dropdown,
   845  .ui.simple.dropdown:hover {
   846    border-bottom-left-radius: 0em !important;
   847    border-bottom-right-radius: 0em !important;
   848  }
   849  
   850  .ui.simple.active.dropdown > .menu,
   851  .ui.simple.dropdown:hover > .menu {
   852    overflow: visible;
   853    width: auto;
   854    height: auto;
   855    top: 100% !important;
   856    opacity: 1;
   857  }
   858  .ui.simple.dropdown > .menu > .item:active > .menu,
   859  .ui.simple.dropdown:hover > .menu > .item:hover > .menu {
   860    overflow: visible;
   861    width: auto;
   862    height: auto;
   863    top: 0% !important;
   864    left: 100% !important;
   865    opacity: 1;
   866  }
   867  .ui.simple.disabled.dropdown:hover .menu {
   868    display: none;
   869    height: 0px;
   870    width: 0px;
   871    overflow: hidden;
   872  }
   873  
   874  /* Visible */
   875  .ui.simple.visible.dropdown > .menu {
   876    display: block;
   877  }
   878  
   879  /*--------------
   880        Fluid
   881  ---------------*/
   882  
   883  .ui.fluid.dropdown {
   884    display: block;
   885    width: 100%;
   886    min-width: 0em;
   887  }
   888  .ui.fluid.dropdown > .dropdown.icon {
   889    float: right;
   890  }
   891  
   892  
   893  /*--------------
   894      Floating
   895  ---------------*/
   896  
   897  .ui.floating.dropdown .menu {
   898    left: 0;
   899    right: auto;
   900    box-shadow: @floatingMenuBoxShadow;
   901    border-radius: @floatingMenuBorderRadius;
   902  }
   903  .ui.floating.dropdown > .menu {
   904    margin-top: @floatingMenuDistance !important;
   905  }
   906  
   907  /*--------------
   908       Pointing
   909  ---------------*/
   910  
   911  .ui.pointing.dropdown > .menu {
   912    top: 100%;
   913    margin-top: @pointingMenuDistance;
   914    border-radius: @pointingMenuBorderRadius;
   915  }
   916  
   917  .ui.pointing.dropdown > .menu:after {
   918    display: block;
   919    position: absolute;
   920    pointer-events: none;
   921    content: '';
   922    visibility: visible;
   923    transform: rotate(45deg);
   924  
   925    width: @pointingArrowSize;
   926    height: @pointingArrowSize;
   927    box-shadow: @pointingArrowBoxShadow;
   928    background: @pointingArrowBackground;
   929    z-index: @pointingArrowZIndex;
   930  }
   931  
   932  .ui.pointing.dropdown > .menu:after {
   933    top: @pointingArrowOffset;
   934    left: 50%;
   935    margin: 0em 0em 0em @pointingArrowOffset;
   936  }
   937  
   938  /* Top Left Pointing */
   939  .ui.top.left.pointing.dropdown > .menu {
   940    top: 100%;
   941    bottom: auto;
   942    left: 0%;
   943    right: auto;
   944    margin: @pointingArrowDistanceFromEdge 0em 0em;
   945  }
   946  .ui.top.left.pointing.dropdown > .menu {
   947    top: 100%;
   948    bottom: auto;
   949    left: 0%;
   950    right: auto;
   951    margin: @pointingArrowDistanceFromEdge 0em 0em;
   952  }
   953  .ui.top.left.pointing.dropdown > .menu:after {
   954    top: @pointingArrowOffset;
   955    left: @pointingArrowDistanceFromEdge;
   956    right: auto;
   957    margin: 0em;
   958    transform: rotate(45deg);
   959  }
   960  /* Top Right  Pointing */
   961  .ui.top.right.pointing.dropdown > .menu {
   962    top: 100%;
   963    bottom: auto;
   964    right: 0%;
   965    left: auto;
   966    margin: @pointingArrowDistanceFromEdge 0em 0em;
   967  }
   968  .ui.top.right.pointing.dropdown > .menu:after {
   969    top: @pointingArrowOffset;
   970    left: auto;
   971    right: @pointingArrowDistanceFromEdge;
   972    margin: 0em;
   973    transform: rotate(45deg);
   974  }
   975  
   976  /* Left Pointing */
   977  .ui.left.pointing.dropdown > .menu {
   978    top: 0%;
   979    left: 100%;
   980    right: auto;
   981    margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
   982  }
   983  .ui.left.pointing.dropdown > .menu:after {
   984    top: 1em;
   985    left: @pointingArrowOffset;
   986    margin: 0em 0em 0em 0em;
   987    transform: rotate(-45deg);
   988  }
   989  
   990  /* Right Pointing */
   991  .ui.right.pointing.dropdown > .menu {
   992    top: 0%;
   993    left: auto;
   994    right: 100%;
   995    margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
   996  }
   997  .ui.right.pointing.dropdown > .menu:after {
   998    top: 1em;
   999    left: auto;
  1000    right: @pointingArrowOffset;
  1001    margin: 0em 0em 0em 0em;
  1002    transform: rotate(135deg);
  1003  }
  1004  
  1005  /* Bottom Pointing */
  1006  .ui.bottom.pointing.dropdown > .menu {
  1007    top: auto;
  1008    bottom: 100%;
  1009    left: 0%;
  1010    right: auto;
  1011    margin: 0em 0em @pointingArrowDistanceFromEdge ;
  1012  }
  1013  .ui.bottom.pointing.dropdown > .menu:after {
  1014    top: auto;
  1015    bottom: @pointingArrowOffset;
  1016    right: auto;
  1017    margin: 0em;
  1018    transform: rotate(-135deg);
  1019  }
  1020  /* Reverse Sub-Menu Direction */
  1021  .ui.bottom.pointing.dropdown > .menu .menu {
  1022    top: auto !important;
  1023    bottom: 0px !important;
  1024  }
  1025  
  1026  /* Bottom Left */
  1027  .ui.bottom.left.pointing.dropdown > .menu {
  1028    left: 0%;
  1029    right: auto;
  1030  }
  1031  .ui.bottom.left.pointing.dropdown > .menu:after {
  1032    left: @pointingArrowDistanceFromEdge;
  1033    right: auto;
  1034  }
  1035  
  1036  /* Bottom Right */
  1037  .ui.bottom.right.pointing.dropdown > .menu {
  1038    right: 0%;
  1039    left: auto;
  1040  }
  1041  .ui.bottom.right.pointing.dropdown > .menu:after {
  1042    left: auto;
  1043    right: @pointingArrowDistanceFromEdge;
  1044  }
  1045  
  1046  .loadUIOverrides();