dropdown.less 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /*
  2. * Component: Dropdown menus
  3. * -------------------------
  4. */
  5. /*Dropdowns in general*/
  6. .dropdown-menu {
  7. box-shadow: @box-boxshadow;
  8. border-color: #eee;
  9. > li > a {
  10. color: #777;
  11. }
  12. > li > a > .glyphicon,
  13. > li > a > .fa,
  14. > li > a > .ion{
  15. margin-right: 10px;
  16. }
  17. > li > a:hover {
  18. background-color: lighten(@gray, 5%);
  19. color: #333;
  20. }
  21. > .divider {
  22. background-color: #eee;
  23. }
  24. }
  25. //Navbar custom dropdown menu
  26. .navbar-nav .dropdown-menu {
  27. .box-shadow(none)!important;
  28. }
  29. .navbar-nav > .notifications-menu,
  30. .navbar-nav > .messages-menu,
  31. .navbar-nav > .tasks-menu {
  32. position: relative;
  33. //fix width and padding
  34. > .dropdown-menu {
  35. > li {
  36. position: relative;
  37. }
  38. width: 280px;
  39. //Remove padding and margins
  40. padding: 0 0 0 0!important;
  41. margin: 0!important;
  42. top: 100%;
  43. }
  44. //Define header class
  45. > .dropdown-menu > li.header {
  46. .border-radius(4px; 4px; 0; 0);
  47. background-color: #ffffff;
  48. padding: 7px 10px;
  49. border-bottom: 1px solid #f4f4f4;
  50. color: #444444;
  51. font-size: 14px;
  52. }
  53. //Define footer class
  54. > .dropdown-menu > li.footer > a {
  55. .border-radius(0px; 0px; 4px; 4px);
  56. font-size: 12px;
  57. background-color: #fff;
  58. padding: 7px 10px;
  59. border-bottom: 1px solid #eeeeee;
  60. color: #444!important;
  61. @media (max-width: @screen-sm-max) {
  62. background: #fff!important;
  63. color: #444!important;
  64. }
  65. text-align: center;
  66. //Hover state
  67. &:hover {
  68. text-decoration: none;
  69. font-weight: normal;
  70. }
  71. }
  72. //Clear inner menu padding and margins
  73. > .dropdown-menu > li .menu {
  74. max-height: 200px;
  75. margin: 0;
  76. padding: 0;
  77. list-style: none;
  78. overflow-x: hidden;
  79. > li > a {
  80. display: block;
  81. white-space: nowrap; /* Prevent text from breaking */
  82. border-bottom: 1px solid #f4f4f4;
  83. // Hove state
  84. &:hover {
  85. background: #f4f4f4;
  86. text-decoration: none;
  87. }
  88. }
  89. }
  90. }
  91. //Notifications menu
  92. .navbar-nav > .notifications-menu {
  93. > .dropdown-menu > li .menu {
  94. // Links inside the menu
  95. > li > a {
  96. color: #444444;
  97. overflow: hidden;
  98. text-overflow: ellipsis;
  99. white-space: nowrap;
  100. padding: 10px;
  101. // Icons inside the menu
  102. > .glyphicon,
  103. > .fa,
  104. > .ion {
  105. width: 20px;
  106. }
  107. }
  108. }
  109. }
  110. //Messages menu
  111. .navbar-nav > .messages-menu {
  112. //Inner menu
  113. > .dropdown-menu > li .menu {
  114. // Messages menu item
  115. > li > a {
  116. margin: 0px;
  117. //line-height: 20px;
  118. padding: 10px 10px;
  119. // User image
  120. > div > img {
  121. margin: auto 10px auto auto;
  122. width: 40px;
  123. height: 40px;
  124. }
  125. // Message heading
  126. > h4 {
  127. padding: 0;
  128. margin: 0 0 0 45px;
  129. color: #444444;
  130. font-size: 15px;
  131. position: relative;
  132. // Small for message time display
  133. > small {
  134. color: #999999;
  135. font-size: 10px;
  136. position: absolute;
  137. top: 0px;
  138. right: 0px;
  139. }
  140. }
  141. > p {
  142. margin: 0 0 0 45px;
  143. font-size: 12px;
  144. color: #888888;
  145. }
  146. .clearfix();
  147. }
  148. }
  149. }
  150. //Tasks menu
  151. .navbar-nav > .tasks-menu {
  152. > .dropdown-menu > li .menu {
  153. > li > a {
  154. padding: 10px;
  155. > h3 {
  156. font-size: 14px;
  157. padding: 0;
  158. margin: 0 0 10px 0;
  159. color: #666666;
  160. }
  161. > .progress {
  162. padding: 0;
  163. margin: 0;
  164. }
  165. }
  166. }
  167. }
  168. //User menu
  169. .navbar-nav > .user-menu {
  170. > .dropdown-menu {
  171. .border-top-radius(0);
  172. padding: 1px 0 0 0;
  173. border-top-width: 0;
  174. width: 280px;
  175. &,
  176. > .user-body {
  177. .border-bottom-radius(4px);
  178. }
  179. // Header menu
  180. > li.user-header {
  181. height: 175px;
  182. padding: 10px;
  183. text-align: center;
  184. // User image
  185. > img {
  186. z-index: 5;
  187. height: 90px;
  188. width: 90px;
  189. border: 3px solid;
  190. border-color: transparent;
  191. border-color: rgba(255, 255, 255, 0.2);
  192. }
  193. > p {
  194. z-index: 5;
  195. color: #fff;
  196. color: rgba(255, 255, 255, 0.8);
  197. font-size: 17px;
  198. //text-shadow: 2px 2px 3px #333333;
  199. margin-top: 10px;
  200. > small {
  201. display: block;
  202. font-size: 12px;
  203. }
  204. }
  205. }
  206. // Menu Body
  207. > .user-body {
  208. padding: 15px;
  209. border-bottom: 1px solid #f4f4f4;
  210. border-top: 1px solid #dddddd;
  211. .clearfix();
  212. a {
  213. color: #444 !important;
  214. @media (max-width: @screen-sm-max) {
  215. background: #fff !important;
  216. color: #444 !important;
  217. }
  218. }
  219. }
  220. // Menu Footer
  221. > .user-footer {
  222. background-color: #f9f9f9;
  223. padding: 10px;
  224. .clearfix();
  225. .btn-default {
  226. color: #666666;
  227. }
  228. }
  229. }
  230. .user-image {
  231. float: left;
  232. width: 25px;
  233. height: 25px;
  234. border-radius: 50%;
  235. margin-right: 10px;
  236. margin-top: -2px;
  237. @media (max-width: @screen-xs-max) {
  238. float: none;
  239. margin-right: 0;
  240. margin-top: -8px;
  241. line-height: 10px;
  242. }
  243. }
  244. }
  245. /* Add fade animation to dropdown menus by appending
  246. the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
  247. .open:not(.dropup) > .animated-dropdown-menu {
  248. backface-visibility: visible !important;
  249. .animation(flipInX .7s both);
  250. }
  251. @keyframes flipInX {
  252. 0% {
  253. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  254. transition-timing-function: ease-in;
  255. opacity: 0;
  256. }
  257. 40% {
  258. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  259. transition-timing-function: ease-in;
  260. }
  261. 60% {
  262. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  263. opacity: 1;
  264. }
  265. 80% {
  266. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  267. }
  268. 100% {
  269. transform: perspective(400px);
  270. }
  271. }
  272. @-webkit-keyframes flipInX {
  273. 0% {
  274. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  275. transition-timing-function: ease-in;
  276. opacity: 0;
  277. }
  278. 40% {
  279. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  280. transition-timing-function: ease-in;
  281. }
  282. 60% {
  283. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  284. opacity: 1;
  285. }
  286. 80% {
  287. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  288. }
  289. 100% {
  290. transform: perspective(400px);
  291. }
  292. }
  293. /* Fix dropdown menu in navbars */
  294. .navbar-custom-menu > .navbar-nav {
  295. > li {
  296. position: relative;
  297. > .dropdown-menu {
  298. position: absolute;
  299. right: 0;
  300. left: auto;
  301. }
  302. }
  303. }
  304. @media (max-width: @screen-sm-max) {
  305. .navbar-custom-menu > .navbar-nav {
  306. float: right;
  307. > li {
  308. position: static;
  309. > .dropdown-menu {
  310. position: absolute;
  311. right: 5%;
  312. left: auto;
  313. border: 1px solid #ddd;
  314. background: #fff;
  315. }
  316. }
  317. }
  318. }