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