less/patternfly/dropdowns.less

   1 //
   2 // Dropdowns
   3 // --------------------------------------------------
   4
   5
   6 // Dropdown arrow/caret
   7 // Modified to use Font Awesome's angle-down icon
   8 .caret {
   9   font-family: @icon-font-name-fa;
  10   font-weight: normal;
  11   height: @font-size-base - 3;
  12   position: relative;
  13   vertical-align: baseline;
  14   width: @font-size-base;
  15   &:before {
  16     bottom: 0;
  17     content: @fa-var-angle-down;
  18     left: 0;
  19     line-height: @font-size-base;
  20     position: absolute;
  21     text-align: center;
  22     top: -1px;
  23     right: 0;
  24   }
  25 }
  26
  27 // The dropdown menu (ul)
  28 .dropdown-menu {
  29   // Dividers (basically an hr) within the dropdown
  30   .divider {
  31     .nav-divider(@dropdown-divider-bg, @dropdown-divider-margin);
  32   }
  33   // Links within the dropdown menu
  34   > li > a {
  35     border-color: transparent;
  36     border-style: solid;
  37     border-width: 1px 0;
  38     padding: 1px 10px;
  39   }
  40 }
  41
  42 // Hover/Focus state
  43 .dropdown-menu > li > a {
  44   &:hover {
  45     border-color: #b3d3e7;
  46     .reset-filter();
  47   }
  48   &:focus,
  49   &:active {
  50     background-color: @dropdown-link-focus-bg;
  51     border-color: #0076b7;
  52     color: @dropdown-link-focus-color !important;
  53     .reset-filter();
  54   }
  55 }
  56
  57 // Active state
  58 .dropdown-menu > .active > a {
  59   &,
  60   &:hover,
  61   &:focus {
  62     background-color: @dropdown-link-active-bg !important;
  63     border-color: #0076b7 !important;
  64     .reset-filter();
  65   }
  66 }
  67
  68 // Disabled state
  69 .dropdown-menu > .disabled > a {
  70   &,
  71   &:hover,
  72   &:focus {
  73     border-color: transparent;
  74   }
  75 }
  76 // Nuke hover/focus effects
  77 .dropdown-menu > .disabled > a {
  78   &:hover,
  79   &:focus {
  80     border-color: transparent;
  81   }
  82 }
  83
  84 // Dropdown section headers
  85 .dropdown-header {
  86   padding-left: 10px;
  87   padding-right: 10px;
  88   text-transform: uppercase;
  89 }
  90
  91 // Position Menu closer to button
  92 .btn-group, .input-group-btn {
  93   > .dropdown-menu {
  94     margin-top: -1px;
  95   }
  96 }
  97
  98 // Position Menu closer to button (dropup-menu)
  99 .dropup .dropdown-menu {
 100   margin-bottom: -1px;
 101 }
 102
 103 // Add back styles for dropdown-submenu
 104 .dropdown-submenu {
 105   position:relative;
 106   &:hover {
 107     > a {
 108       background-color: @dropdown-link-hover-bg;
 109       border-color: #b3d3e7;
 110     }
 111     > .dropdown-menu {
 112       display: block;
 113     }
 114   }
 115   &.pull-left {
 116     float: none !important;
 117     > .dropdown-menu {
 118       left: auto;
 119       margin-left: 10px;
 120       right: 100%;
 121     }
 122   }
 123   > a {
 124     padding-right: 20px !important;
 125     &:after {
 126       content: @fa-var-angle-right;
 127       font-family: @icon-font-name-fa;
 128       display: block;
 129       position: absolute;
 130       right: 10px;
 131       top: 2px;
 132     }
 133   }
 134   > .dropdown-menu {
 135     left: 100%;
 136     margin-top: 0;
 137     top: -6px;
 138   }
 139   .dropup & > .dropdown-menu {
 140     bottom: -5px;
 141     top: auto;
 142   }
 143   .open &.active > .dropdown-menu {
 144     display: block;
 145   }
 146 }