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