+++ /dev/null
-/*
- * Component: Dropdown menus
- * -------------------------
- */
-
-/*Dropdowns in general*/
-.dropdown-menu {
- box-shadow: none;
- border-color: #eee;
- > li > a {
- color: #777;
- }
- > li > a > .glyphicon,
- > li > a > .fa,
- > li > a > .ion {
- margin-right: 10px;
- }
- > li > a:hover {
- background-color: lighten(@gray, 5%);
- color: #333;
- }
- > .divider {
- background-color: #eee;
- }
-}
-
-//Navbar custom dropdown menu
-.navbar-nav > .notifications-menu,
-.navbar-nav > .messages-menu,
-.navbar-nav > .tasks-menu {
- //fix width and padding
- > .dropdown-menu {
- > li {
- position: relative;
- }
- width: 280px;
- //Remove padding and margins
- padding: 0 0 0 0;
- margin: 0;
- top: 100%;
- }
- //Define header class
- > .dropdown-menu > li.header {
- .border-radius(4px; 4px; 0; 0);
- background-color: #ffffff;
- padding: 7px 10px;
- border-bottom: 1px solid #f4f4f4;
- color: #444444;
- font-size: 14px;
- }
-
- //Define footer class
- > .dropdown-menu > li.footer > a {
- .border-radius(0; 0; 4px; 4px);
- font-size: 12px;
- background-color: #fff;
- padding: 7px 10px;
- border-bottom: 1px solid #eeeeee;
- color: #444 !important;
- @media (max-width: @screen-sm-max) {
- background: #fff !important;
- color: #444 !important;
- }
- text-align: center;
- //Hover state
- &:hover {
- text-decoration: none;
- font-weight: normal;
- }
- }
-
- //Clear inner menu padding and margins
- > .dropdown-menu > li .menu {
- max-height: 200px;
- margin: 0;
- padding: 0;
- list-style: none;
- overflow-x: hidden;
- > li > a {
- display: block;
- white-space: nowrap; /* Prevent text from breaking */
- border-bottom: 1px solid #f4f4f4;
- // Hove state
- &:hover {
- background: #f4f4f4;
- text-decoration: none;
- }
- }
- }
-}
-
-//Notifications menu
-.navbar-nav > .notifications-menu {
- > .dropdown-menu > li .menu {
- // Links inside the menu
- > li > a {
- color: #444444;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 10px;
- // Icons inside the menu
- > .glyphicon,
- > .fa,
- > .ion {
- width: 20px;
- }
- }
-
- }
-}
-
-//Messages menu
-.navbar-nav > .messages-menu {
- //Inner menu
- > .dropdown-menu > li .menu {
- // Messages menu item
- > li > a {
- margin: 0;
- //line-height: 20px;
- padding: 10px 10px;
- // User image
- > div > img {
- margin: auto 10px auto auto;
- width: 40px;
- height: 40px;
- }
- // Message heading
- > h4 {
- padding: 0;
- margin: 0 0 0 45px;
- color: #444444;
- font-size: 15px;
- position: relative;
- // Small for message time display
- > small {
- color: #999999;
- font-size: 10px;
- position: absolute;
- top: 0;
- right: 0;
- }
- }
-
- > p {
- margin: 0 0 0 45px;
- font-size: 12px;
- color: #888888;
- }
-
- .clearfix();
-
- }
-
- }
-}
-
-//Tasks menu
-.navbar-nav > .tasks-menu {
- > .dropdown-menu > li .menu {
- > li > a {
- padding: 10px;
-
- > h3 {
- font-size: 14px;
- padding: 0;
- margin: 0 0 10px 0;
- color: #666666;
- }
-
- > .progress {
- padding: 0;
- margin: 0;
- }
- }
- }
-}
-
-//User menu
-.navbar-nav > .user-menu {
- > .dropdown-menu {
- .border-top-radius(0);
- padding: 1px 0 0 0;
- border-top-width: 0;
- width: 280px;
-
- &,
- > .user-body {
- .border-bottom-radius(4px);
- }
- // Header menu
- > li.user-header {
- height: 175px;
- padding: 10px;
- text-align: center;
- // User image
- > img {
- z-index: 5;
- height: 90px;
- width: 90px;
- border: 3px solid;
- border-color: transparent;
- border-color: rgba(255, 255, 255, 0.2);
- }
- > p {
- z-index: 5;
- color: #fff;
- color: rgba(255, 255, 255, 0.8);
- font-size: 17px;
- //text-shadow: 2px 2px 3px #333333;
- margin-top: 10px;
- > small {
- display: block;
- font-size: 12px;
- }
- }
- }
-
- // Menu Body
- > .user-body {
- padding: 15px;
- border-bottom: 1px solid #f4f4f4;
- border-top: 1px solid #dddddd;
- .clearfix();
- a {
- color: #444 !important;
- @media (max-width: @screen-sm-max) {
- background: #fff !important;
- color: #444 !important;
- }
- }
- }
-
- // Menu Footer
- > .user-footer {
- background-color: #f9f9f9;
- padding: 10px;
- .clearfix();
- .btn-default {
- color: #666666;
- &:hover {
- @media (max-width: @screen-sm-max) {
- background-color: #f9f9f9;
- }
- }
- }
- }
- }
- .user-image {
- float: left;
- width: 25px;
- height: 25px;
- border-radius: 50%;
- margin-right: 10px;
- margin-top: -2px;
- @media (max-width: @screen-xs-max) {
- float: none;
- margin-right: 0;
- margin-top: -8px;
- line-height: 10px;
- }
- }
-}
-
-/* Add fade animation to dropdown menus by appending
- the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
-.open:not(.dropup) > .animated-dropdown-menu {
- backface-visibility: visible !important;
- .animation(flipInX .7s both);
-
-}
-
-@keyframes flipInX {
- 0% {
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- transition-timing-function: ease-in;
- opacity: 0;
- }
-
- 40% {
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- transition-timing-function: ease-in;
- }
-
- 60% {
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
- opacity: 1;
- }
-
- 80% {
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
- }
-
- 100% {
- transform: perspective(400px);
- }
-}
-
-@-webkit-keyframes flipInX {
- 0% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- -webkit-transition-timing-function: ease-in;
- opacity: 0;
- }
-
- 40% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- -webkit-transition-timing-function: ease-in;
- }
-
- 60% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
- opacity: 1;
- }
-
- 80% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
- }
-
- 100% {
- -webkit-transform: perspective(400px);
- }
-}
-
-/* Fix dropdown menu in navbars */
-.navbar-custom-menu > .navbar-nav {
- > li {
- position: relative;
- > .dropdown-menu {
- position: absolute;
- right: 0;
- left: auto;
- }
- }
-}
-
-@media (max-width: @screen-sm-max) {
- .navbar-custom-menu > .navbar-nav {
- float: right;
- > li {
- position: static;
- > .dropdown-menu {
- position: absolute;
- right: 5%;
- left: auto;
- border: 1px solid #ddd;
- background: #fff;
- }
- }
- }
-}
Code Review / stor4nfv.git / blobdiff