tools/side_chain_tool/web/node_modules/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 dashed;
  14   border-top:   @caret-width-base solid ~"\9"; // IE8
  15   border-right: @caret-width-base solid transparent;
  16   border-left:  @caret-width-base solid transparent;
  17 }
  18
  19 // The dropdown wrapper (div)
  20 .dropup,
  21 .dropdown {
  22   position: relative;
  23 }
  24
  25 // Prevent the focus on the dropdown toggle when closing dropdowns
  26 .dropdown-toggle:focus {
  27   outline: 0;
  28 }
  29
  30 // The dropdown menu (ul)
  31 .dropdown-menu {
  32   position: absolute;
  33   top: 100%;
  34   left: 0;
  35   z-index: @zindex-dropdown;
  36   display: none; // none by default, but block on "open" of the menu
  37   float: left;
  38   min-width: 160px;
  39   padding: 5px 0;
  40   margin: 2px 0 0; // override default ul
  41   list-style: none;
  42   font-size: @font-size-base;
  43   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  44   background-color: @dropdown-bg;
  45   border: 1px solid @dropdown-fallback-border; // IE8 fallback
  46   border: 1px solid @dropdown-border;
  47   border-radius: @border-radius-base;
  48   .box-shadow(0 6px 12px rgba(0,0,0,.175));
  49   background-clip: padding-box;
  50
  51   // Aligns the dropdown menu to right
  52   //
  53   // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
  54   &.pull-right {
  55     right: 0;
  56     left: auto;
  57   }
  58
  59   // Dividers (basically an hr) within the dropdown
  60   .divider {
  61     .nav-divider(@dropdown-divider-bg);
  62   }
  63
  64   // Links within the dropdown menu
  65   > li > a {
  66     display: block;
  67     padding: 3px 20px;
  68     clear: both;
  69     font-weight: normal;
  70     line-height: @line-height-base;
  71     color: @dropdown-link-color;
  72     white-space: nowrap; // prevent links from randomly breaking onto new lines
  73   }
  74 }
  75
  76 // Hover/Focus state
  77 .dropdown-menu > li > a {
  78   &:hover,
  79   &:focus {
  80     text-decoration: none;
  81     color: @dropdown-link-hover-color;
  82     background-color: @dropdown-link-hover-bg;
  83   }
  84 }
  85
  86 // Active state
  87 .dropdown-menu > .active > a {
  88   &,
  89   &:hover,
  90   &:focus {
  91     color: @dropdown-link-active-color;
  92     text-decoration: none;
  93     outline: 0;
  94     background-color: @dropdown-link-active-bg;
  95   }
  96 }
  97
  98 // Disabled state
  99 //
 100 // Gray out text and ensure the hover/focus state remains gray
 101
 102 .dropdown-menu > .disabled > a {
 103   &,
 104   &:hover,
 105   &:focus {
 106     color: @dropdown-link-disabled-color;
 107   }
 108
 109   // Nuke hover/focus effects
 110   &:hover,
 111   &:focus {
 112     text-decoration: none;
 113     background-color: transparent;
 114     background-image: none; // Remove CSS gradient
 115     .reset-filter();
 116     cursor: @cursor-disabled;
 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 // Menu positioning
 134 //
 135 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
 136 // menu with the parent.
 137 .dropdown-menu-right {
 138   left: auto; // Reset the default from `.dropdown-menu`
 139   right: 0;
 140 }
 141 // With v3, we enabled auto-flipping if you have a dropdown within a right
 142 // aligned nav component. To enable the undoing of that, we provide an override
 143 // to restore the default dropdown menu alignment.
 144 //
 145 // This is only for left-aligning a dropdown menu within a `.navbar-right` or
 146 // `.pull-right` nav component.
 147 .dropdown-menu-left {
 148   left: 0;
 149   right: auto;
 150 }
 151
 152 // Dropdown section headers
 153 .dropdown-header {
 154   display: block;
 155   padding: 3px 20px;
 156   font-size: @font-size-small;
 157   line-height: @line-height-base;
 158   color: @dropdown-header-color;
 159   white-space: nowrap; // as with > li > a
 160 }
 161
 162 // Backdrop to catch body clicks on mobile, etc.
 163 .dropdown-backdrop {
 164   position: fixed;
 165   left: 0;
 166   right: 0;
 167   bottom: 0;
 168   top: 0;
 169   z-index: (@zindex-dropdown - 10);
 170 }
 171
 172 // Right aligned dropdowns
 173 .pull-right > .dropdown-menu {
 174   right: 0;
 175   left: auto;
 176 }
 177
 178 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 179 //
 180 // Just add .dropup after the standard .dropdown class and you're set, bro.
 181 // TODO: abstract this so that the navbar fixed styles are not placed here?
 182
 183 .dropup,
 184 .navbar-fixed-bottom .dropdown {
 185   // Reverse the caret
 186   .caret {
 187     border-top: 0;
 188     border-bottom: @caret-width-base dashed;
 189     border-bottom: @caret-width-base solid ~"\9"; // IE8
 190     content: "";
 191   }
 192   // Different positioning for bottom up menu
 193   .dropdown-menu {
 194     top: auto;
 195     bottom: 100%;
 196     margin-bottom: 2px;
 197   }
 198 }
 199
 200
 201 // Component alignment
 202 //
 203 // Reiterate per navbar.less and the modified component alignment there.
 204
 205 @media (min-width: @grid-float-breakpoint) {
 206   .navbar-right {
 207     .dropdown-menu {
 208       .dropdown-menu-right();
 209     }
 210     // Necessary for overrides of the default right aligned menu.
 211     // Will remove come v4 in all likelihood.
 212     .dropdown-menu-left {
 213       .dropdown-menu-left();
 214     }
 215   }
 216 }