git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/bootstrap-3.0.0/dropdowns.less

   1 //
   2 // Dropdown menus
   3 // --------------------------------------------------
   4
   5
   6 // Dropdown arrow/caret
   7 .caret {
   8   display: inline-block;
   9   width: 0;
  10   height: 0;
  11   margin-left: 2px;
  12   vertical-align: middle;
  13   border-top:   @caret-width-base solid @dropdown-caret-color;
  14   border-right: @caret-width-base solid transparent;
  15   border-left:  @caret-width-base solid transparent;
  16   // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
  17   // we can just straight up remove this.
  18   border-bottom: 0 dotted;
  19   content: "";
  20 }
  21
  22 // The dropdown wrapper (div)
  23 .dropdown {
  24   position: relative;
  25 }
  26
  27 // Prevent the focus on the dropdown toggle when closing dropdowns
  28 .dropdown-toggle:focus {
  29   outline: 0;
  30 }
  31
  32 // The dropdown menu (ul)
  33 .dropdown-menu {
  34   position: absolute;
  35   top: 100%;
  36   left: 0;
  37   z-index: @zindex-dropdown;
  38   display: none; // none by default, but block on "open" of the menu
  39   float: left;
  40   min-width: 160px;
  41   padding: 5px 0;
  42   margin: 2px 0 0; // override default ul
  43   list-style: none;
  44   font-size: @font-size-base;
  45   background-color: @dropdown-bg;
  46   border: 1px solid @dropdown-fallback-border; // IE8 fallback
  47   border: 1px solid @dropdown-border;
  48   border-radius: @border-radius-base;
  49   .box-shadow(0 6px 12px rgba(0,0,0,.175));
  50   background-clip: padding-box;
  51
  52   // Aligns the dropdown menu to right
  53   &.pull-right {
  54     right: 0;
  55     left: auto;
  56   }
  57
  58   // Dividers (basically an hr) within the dropdown
  59   .divider {
  60     .nav-divider(@dropdown-divider-bg);
  61   }
  62
  63   // Links within the dropdown menu
  64   > li > a {
  65     display: block;
  66     padding: 3px 20px;
  67     clear: both;
  68     font-weight: normal;
  69     line-height: @line-height-base;
  70     color: @dropdown-link-color;
  71     white-space: nowrap; // prevent links from randomly breaking onto new lines
  72   }
  73 }
  74
  75 // Hover/Focus state
  76 .dropdown-menu > li > a {
  77   &:hover,
  78   &:focus {
  79     text-decoration: none;
  80     color: @dropdown-link-hover-color;
  81     background-color: @dropdown-link-hover-bg;
  82   }
  83 }
  84
  85 // Active state
  86 .dropdown-menu > .active > a {
  87   &,
  88   &:hover,
  89   &:focus {
  90     color: @dropdown-link-active-color;
  91     text-decoration: none;
  92     outline: 0;
  93     background-color: @dropdown-link-active-bg;
  94   }
  95 }
  96
  97 // Disabled state
  98 //
  99 // Gray out text and ensure the hover/focus state remains gray
 100
 101 .dropdown-menu > .disabled > a {
 102   &,
 103   &:hover,
 104   &:focus {
 105     color: @dropdown-link-disabled-color;
 106   }
 107 }
 108 // Nuke hover/focus effects
 109 .dropdown-menu > .disabled > a {
 110   &:hover,
 111   &:focus {
 112     text-decoration: none;
 113     background-color: transparent;
 114     background-image: none; // Remove CSS gradient
 115     .reset-filter();
 116     cursor: not-allowed;
 117   }
 118 }
 119
 120 // Open state for the dropdown
 121 .open {
 122   // Show the menu
 123   > .dropdown-menu {
 124     display: block;
 125   }
 126
 127   // Remove the outline when :focus is triggered
 128   > a {
 129     outline: 0;
 130   }
 131 }
 132
 133 // Dropdown section headers
 134 .dropdown-header {
 135   display: block;
 136   padding: 3px 20px;
 137   font-size: @font-size-small;
 138   line-height: @line-height-base;
 139   color: @dropdown-header-color;
 140 }
 141
 142 // Backdrop to catch body clicks on mobile, etc.
 143 .dropdown-backdrop {
 144   position: fixed;
 145   left: 0;
 146   right: 0;
 147   bottom: 0;
 148   top: 0;
 149   z-index: @zindex-dropdown - 10;
 150 }
 151
 152 // Right aligned dropdowns
 153 .pull-right > .dropdown-menu {
 154   right: 0;
 155   left: auto;
 156 }
 157
 158 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 159 //
 160 // Just add .dropup after the standard .dropdown class and you're set, bro.
 161 // TODO: abstract this so that the navbar fixed styles are not placed here?
 162
 163 .dropup,
 164 .navbar-fixed-bottom .dropdown {
 165   // Reverse the caret
 166   .caret {
 167     // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
 168     // gets fixed, restore `border-top: 0;`.
 169     border-top: 0 dotted;
 170     border-bottom: 4px solid @dropdown-caret-color;
 171     content: "";
 172   }
 173   // Different positioning for bottom up menu
 174   .dropdown-menu {
 175     top: auto;
 176     bottom: 100%;
 177     margin-bottom: 1px;
 178   }
 179 }
 180
 181
 182 // Component alignment
 183 //
 184 // Reiterate per navbar.less and the modified component alignment there.
 185
 186 @media (min-width: @grid-float-breakpoint) {
 187   .navbar-right {
 188     .dropdown-menu {
 189       .pull-right > .dropdown-menu();
 190     }
 191   }
 192 }
 193