git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/dropdowns.less

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