Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Chris Rebert's avatar
    Kill scss/mixins/_media-queries.scss · cbb3b1ff
    Chris Rebert authored 
    replaced media-xs => media-breakpoint-down(xs)
replaced media-sm => media-breakpoint-up(sm)
replaced media-sm-max => media-breakpoint-only(sm)
replaced media-md => media-breakpoint-up(md)
replaced media-md-max => media-breakpoint-only(md)
replaced media-lg => media-breakpoint-up(lg)
    cbb3b1ff
_dropdown.scss 4.56 KiB
1 
//
2 
// Dropdown menus
3 
// --------------------------------------------------
4
5 
// The dropdown wrapper (div)
6 
.dropdown {
7 
  position: relative;
8 
}
9
10 
.dropdown-toggle {
11 
  // Generate the caret automatically
12 
  &:after {
13 
    display: inline-block;
14 
    width: 0;
15 
    height: 0;
16 
    margin-left: .25rem;
17 
    vertical-align: middle;
18 
    content: "";
19 
    border-top: $caret-width-base solid;
20 
    border-right: $caret-width-base solid transparent;
21 
    border-left: $caret-width-base solid transparent;
22 
  }
23
24 
  // Prevent the focus on the dropdown toggle when closing dropdowns
25 
  &:focus {
26 
    outline: 0;
27 
  }
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 
  font-size: $font-size-base;
42 
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
43 
  list-style: none;
44 
  background-color: $dropdown-bg;
45 
  background-clip: padding-box;
46 
  border: 1px solid $dropdown-border;
47 
  @include border-radius($border-radius-base);
48 
  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
49
50 
  // Dividers (basically an hr) within the dropdown
51 
  .divider {
52 
    @include nav-divider($dropdown-divider-bg);
53 
  }
54
55 
  // Links within the dropdown menu
56 
  > li > a {
57 
    display: block;
58 
    padding: 3px 20px;
59 
    clear: both;
60 
    font-weight: normal;
61 
    line-height: $line-height-base;
62 
    color: $dropdown-link-color;
63 
    white-space: nowrap; // prevent links from randomly breaking onto new lines
64 
  }
65 
}
66
67 
// Hover/Focus state
68 
.dropdown-menu > li > a {
69 
  &:hover,
70 
  &:focus {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
color: $dropdown-link-hover-color; text-decoration: none; background-color: $dropdown-link-hover-bg; } } // Active state .dropdown-menu > .active > a { &, &:hover, &:focus { color: $dropdown-link-active-color; text-decoration: none; background-color: $dropdown-link-active-bg; outline: 0; } } // Disabled state // // Gray out text and ensure the hover/focus state remains gray .dropdown-menu > .disabled > a { &, &:hover, &:focus { color: $dropdown-link-disabled-color; } // Nuke hover/focus effects &:hover, &:focus { text-decoration: none; cursor: $cursor-disabled; background-color: transparent; background-image: none; // Remove CSS gradient @include reset-filter(); } } // Open state for the dropdown .open { // Show the menu > .dropdown-menu { display: block; } // Remove the outline when :focus is triggered > a { outline: 0; } } // Menu positioning // // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { right: 0; left: auto; // Reset the default from `.dropdown-menu` } // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override // to restore the default dropdown menu alignment. // // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { right: auto; left: 0;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} // Dropdown section headers .dropdown-header { display: block; padding: 3px 20px; font-size: $font-size-sm; line-height: $line-height-base; color: $dropdown-header-color; white-space: nowrap; // as with > li > a } // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: ($zindex-dropdown - 10); } // Right aligned dropdowns .pull-right > .dropdown-menu { right: 0; left: auto; } // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO: abstract this so that the navbar fixed styles are not placed here? .dropup, .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { content: ""; border-top: 0; border-bottom: $caret-width-base solid; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; } } // Component alignment // // Reiterate per navbar.less and the modified component alignment there. // // TODO: remove? // @include media-breakpoint-up(sm) { // .navbar-right { // .dropdown-menu { // .dropdown-menu-right(); // } // // Necessary for overrides of the default right aligned menu. // // Will remove come v4 in all likelihood. // .dropdown-menu-left { // .dropdown-menu-left(); // } // } // }