1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/dropdowns.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,187 @@
1.4 +//
1.5 +// Dropdown menus
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Dropdown arrow/caret
1.10 +.caret {
1.11 + display: inline-block;
1.12 + width: 0;
1.13 + height: 0;
1.14 + margin-left: 2px;
1.15 + vertical-align: middle;
1.16 + border-top: @caret-width-base solid;
1.17 + border-right: @caret-width-base solid transparent;
1.18 + border-left: @caret-width-base solid transparent;
1.19 +}
1.20 +
1.21 +// The dropdown wrapper (div)
1.22 +.dropdown {
1.23 + position: relative;
1.24 +}
1.25 +
1.26 +// Prevent the focus on the dropdown toggle when closing dropdowns
1.27 +.dropdown-toggle:focus {
1.28 + outline: 0;
1.29 +}
1.30 +
1.31 +// The dropdown menu (ul)
1.32 +.dropdown-menu {
1.33 + position: absolute;
1.34 + top: 100%;
1.35 + left: 0;
1.36 + z-index: @zindex-dropdown;
1.37 + display: none; // none by default, but block on "open" of the menu
1.38 + float: left;
1.39 + min-width: 160px;
1.40 + padding: 5px 0;
1.41 + margin: 2px 0 0; // override default ul
1.42 + list-style: none;
1.43 + font-size: @font-size-base;
1.44 + background-color: @dropdown-bg;
1.45 + border: 1px solid @dropdown-fallback-border; // IE8 fallback
1.46 + border: 1px solid @dropdown-border;
1.47 + border-radius: @border-radius-base;
1.48 + .box-shadow(0 6px 12px rgba(0,0,0,.175));
1.49 + background-clip: padding-box;
1.50 +
1.51 + // Aligns the dropdown menu to right
1.52 + &.pull-right {
1.53 + right: 0;
1.54 + left: auto;
1.55 + }
1.56 +
1.57 + // Dividers (basically an hr) within the dropdown
1.58 + .divider {
1.59 + .nav-divider(@dropdown-divider-bg);
1.60 + }
1.61 +
1.62 + // Links within the dropdown menu
1.63 + > li > a {
1.64 + display: block;
1.65 + padding: 3px 20px;
1.66 + clear: both;
1.67 + font-weight: normal;
1.68 + line-height: @line-height-base;
1.69 + color: @dropdown-link-color;
1.70 + white-space: nowrap; // prevent links from randomly breaking onto new lines
1.71 + }
1.72 +}
1.73 +
1.74 +// Hover/Focus state
1.75 +.dropdown-menu > li > a {
1.76 + &:hover,
1.77 + &:focus {
1.78 + text-decoration: none;
1.79 + color: @dropdown-link-hover-color;
1.80 + background-color: @dropdown-link-hover-bg;
1.81 + }
1.82 +}
1.83 +
1.84 +// Active state
1.85 +.dropdown-menu > .active > a {
1.86 + &,
1.87 + &:hover,
1.88 + &:focus {
1.89 + color: @dropdown-link-active-color;
1.90 + text-decoration: none;
1.91 + outline: 0;
1.92 + background-color: @dropdown-link-active-bg;
1.93 + }
1.94 +}
1.95 +
1.96 +// Disabled state
1.97 +//
1.98 +// Gray out text and ensure the hover/focus state remains gray
1.99 +
1.100 +.dropdown-menu > .disabled > a {
1.101 + &,
1.102 + &:hover,
1.103 + &:focus {
1.104 + color: @dropdown-link-disabled-color;
1.105 + }
1.106 +}
1.107 +// Nuke hover/focus effects
1.108 +.dropdown-menu > .disabled > a {
1.109 + &:hover,
1.110 + &:focus {
1.111 + text-decoration: none;
1.112 + background-color: transparent;
1.113 + background-image: none; // Remove CSS gradient
1.114 + .reset-filter();
1.115 + cursor: not-allowed;
1.116 + }
1.117 +}
1.118 +
1.119 +// Open state for the dropdown
1.120 +.open {
1.121 + // Show the menu
1.122 + > .dropdown-menu {
1.123 + display: block;
1.124 + }
1.125 +
1.126 + // Remove the outline when :focus is triggered
1.127 + > a {
1.128 + outline: 0;
1.129 + }
1.130 +}
1.131 +
1.132 +// Dropdown section headers
1.133 +.dropdown-header {
1.134 + display: block;
1.135 + padding: 3px 20px;
1.136 + font-size: @font-size-small;
1.137 + line-height: @line-height-base;
1.138 + color: @dropdown-header-color;
1.139 +}
1.140 +
1.141 +// Backdrop to catch body clicks on mobile, etc.
1.142 +.dropdown-backdrop {
1.143 + position: fixed;
1.144 + left: 0;
1.145 + right: 0;
1.146 + bottom: 0;
1.147 + top: 0;
1.148 + z-index: @zindex-dropdown - 10;
1.149 +}
1.150 +
1.151 +// Right aligned dropdowns
1.152 +.pull-right > .dropdown-menu {
1.153 + right: 0;
1.154 + left: auto;
1.155 +}
1.156 +
1.157 +// Allow for dropdowns to go bottom up (aka, dropup-menu)
1.158 +//
1.159 +// Just add .dropup after the standard .dropdown class and you're set, bro.
1.160 +// TODO: abstract this so that the navbar fixed styles are not placed here?
1.161 +
1.162 +.dropup,
1.163 +.navbar-fixed-bottom .dropdown {
1.164 + // Reverse the caret
1.165 + .caret {
1.166 + border-top: 0;
1.167 + border-bottom: @caret-width-base solid;
1.168 + content: "";
1.169 + }
1.170 + // Different positioning for bottom up menu
1.171 + .dropdown-menu {
1.172 + top: auto;
1.173 + bottom: 100%;
1.174 + margin-bottom: 1px;
1.175 + }
1.176 +}
1.177 +
1.178 +
1.179 +// Component alignment
1.180 +//
1.181 +// Reiterate per navbar.less and the modified component alignment there.
1.182 +
1.183 +@media (min-width: @grid-float-breakpoint) {
1.184 + .navbar-right {
1.185 + .dropdown-menu {
1.186 + .pull-right > .dropdown-menu();
1.187 + }
1.188 + }
1.189 +}
1.190 +