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, &:focus {
  45     border-color: @dropdown-link-hover-border-color;
  46     .reset-filter();
  47   }
  48   &:active {
  49     background-color: @dropdown-link-focus-bg;
  50     border-color: @dropdown-link-active-border-color;
  51     color: @dropdown-link-focus-color !important;
  52     .reset-filter();
  53   }
  54 }
  55
  56 // Active state
  57 .dropdown-menu > .active > a {
  58   &,
  59   &:hover,
  60   &:focus {
  61     background-color: @dropdown-link-active-bg !important;
  62     border-color: @dropdown-link-active-border-color !important;
  63     .reset-filter();
  64   }
  65 }
  66
  67 // Disabled state
  68 .dropdown-menu > .disabled > a {
  69   &,
  70   &:hover,
  71   &:focus {
  72     border-color: transparent;
  73   }
  74 }
  75 // Nuke hover/focus effects
  76 .dropdown-menu > .disabled > a {
  77   &:hover,
  78   &:focus {
  79     border-color: transparent;
  80   }
  81 }
  82
  83 // Dropdown section headers
  84 .dropdown-header {
  85   padding-left: 10px;
  86   padding-right: 10px;
  87   text-transform: uppercase;
  88 }
  89
  90 // Position Menu closer to button
  91 .btn-group, .input-group-btn {
  92   > .dropdown-menu {
  93     margin-top: -1px;
  94   }
  95 }
  96
  97 // Position Menu closer to button (dropup-menu)
  98 .dropup .dropdown-menu {
  99   margin-bottom: -1px;
 100 }
 101
 102 // Add back styles for dropdown-submenu
 103 .dropdown-submenu {
 104   position:relative;
 105   &:hover {
 106     > a {
 107       background-color: @dropdown-link-hover-bg;
 108       border-color: @dropdown-link-hover-border-color;
 109     }
 110     > .dropdown-menu {
 111       display: block;
 112     }
 113   }
 114   &.pull-left {
 115     float: none !important;
 116     > .dropdown-menu {
 117       left: auto;
 118       margin-left: 10px;
 119       right: 100%;
 120     }
 121   }
 122   > a {
 123     padding-right: 20px !important;
 124     &:after {
 125       content: @fa-var-angle-right;
 126       font-family: @icon-font-name-fa;
 127       display: block;
 128       position: absolute;
 129       right: 10px;
 130       top: 2px;
 131     }
 132   }
 133   > .dropdown-menu {
 134     left: 100%;
 135     margin-top: 0;
 136     top: -6px;
 137   }
 138   .dropup & > .dropdown-menu {
 139     bottom: -5px;
 140     top: auto;
 141   }
 142   .open &.active > .dropdown-menu {
 143     display: block;
 144   }
 145 }