data-tables: fix div move when loading of new chunks in datatable.

rhodecode/public/css/navigation.less

@@ -1,825 +1,826 b''
 // navigation.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 // TOP MAIN DARK NAVIGATION
 
 .header .main_nav.horizontal-list {
     float: right;
     color: @grey4;
         > li {
             a {
                 color: @grey4;
                 }
             }
 }
 
 // HEADER NAVIGATION
 
 .horizontal-list {
     display: block;
     margin: 0;
     padding: 0;
     -webkit-padding-start: 0;
     text-align: left;
     font-size: @navigation-fontsize;
     color: @grey6;
     z-index:10;
 
     li {
         line-height: 1em;
         list-style-type: none;
         margin: 0 20px 0 0;
 
         a {
             padding: 0 .5em;
 
             &.menu_link_notifications {
                 .pill(7px,@rcblue);
                 display: inline;
                 margin: 0 7px 0 .7em;
                 font-size: @basefontsize;
                 color: white;
 
                 &.empty {
                     background-color: @grey4;
                 }
 
                 &:hover {
                     background-color: @rcdarkblue;
                 }
             }
         }
         .pill_container {
             margin: 1.25em 0px 0px 0px;
             float: right;
         }
 
         &#quick_login_li {
             &:hover {
                 color: @grey5;
             }
 
             a.menu_link_notifications {
                 color: white;
             }
 
             .user {
                 padding-bottom: 10px;
             }
         }
 
         &:before { content: none; }
 
         &:last-child {
             .menulabel {
                 padding-right: 0;
                 border-right: none;
 
                 .show_more {
                     padding-right: 0;
                 }
             }
 
             &> a {
                 border-bottom: none;
             }
         }
 
         &.open {
 
             a {
                 color: white;
             }
         }
 
         &:focus {
             outline: none;
         }
 
         ul li  {
             display: block;
 
             &:last-child> a {
                 border-bottom: none;
             }
 
             ul li:last-child a {
                 /* we don't expect more then 3 levels of submenu and the third
                 level can have different html structure */
                 border-bottom: none;
             }
         }
     }
 
     > li {
         float: left;
         display: block;
         padding: 0;
 
         > a,
         &.has_select2 a {
             display: block;
             padding: 10px 0;
         }
 
         .menulabel {
             line-height: 1em;
             // for this specifically we do not use a variable
         }
 
         .menulink-counter {
             border: 1px solid @grey2;
             border-radius: @border-radius;
             background: @grey7;
             display: inline-block;
             padding: 0px 4px;
             text-align: center;
             font-size: 12px;
         }
 
         .pr_notifications {
             padding-left: .5em;
         }
 
         .pr_notifications + .menulabel {
             display:inline;
             padding-left: 0;
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @rcblue;
             }
         }
     }
 
     pre {
         margin: 0;
         padding: 0;
     }
 
     .select2-container,
     .menulink.childs {
         position: relative;
     }
 
     .menulink {
         &.disabled {
         color: @grey3;
         cursor: default;
         opacity: 0.5;
         }
     }
 
     #quick_login {
 
         li a {
             padding: .5em 0;
             border-bottom: none;
             color: @grey2;
 
             &:hover { color: @rcblue; }
         }
     }
 
     #quick_login_link {
         display: inline-block;
 
         .gravatar {
             border: 1px solid @grey5;
         }
 
         .gravatar-login {
             height: 20px;
             width: 20px;
             margin: -8px 0;
             padding: 0;
         }
 
         &:hover .user {
             color: @grey6;
         }
     }
 }
 .header .horizontal-list {
 
     li {
 
         &#quick_login_li {
             padding-left: .5em;
             margin-right: 0px;
 
             &:hover #quick_login_link {
                 color: inherit;
             }
 
             .menu_link_user {
                 padding: 0 2px;
             }
         }
         list-style-type: none;
     }
 
     > li {
 
         a {
             padding: 18px 0 12px 0;
             color: @nav-grey;
 
             &.menu_link_notifications {
                 padding: 1px 8px;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             .pill_container a {
                 // don't select text for the pill container, it has it' own
                 // hover behaviour
                 color: @nav-grey;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @grey6;
             }
         }
 
         .select2-dropdown-open a {
             color: @grey6;
         }
 
         .repo-switcher {
             padding-left: 0;
 
             .menulabel {
                 padding-left: 0;
             }
         }
     }
 
     li ul li  {
         background-color:@grey2;
 
         a {
             padding: .5em 0;
             border-bottom: @border-thickness solid @border-default-color;
             color: @grey6;
         }
 
          &:last-child a, &.last a{
             border-bottom: none;
         }
 
         &:hover {
             background-color: @grey3;
         }
     }
 
     .submenu {
         margin-top: 5px;
     }
 }
 
 // SUBMENUS
 .navigation .submenu {
     display: none;
 }
 
 .navigation li.open {
     .submenu {
         display: block;
     }
 }
 
 .navigation li:last-child .submenu {
     right: auto;
     left: 0;
     border: 1px solid @grey5;
     background: @white;
     box-shadow: @dropdown-shadow;
 }
 
 .submenu {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 180px;
     margin: 2px 0 0;
     padding: 0;
     text-align: left;
     font-family: @text-light;
     border-radius: @border-radius;
     z-index: 20;
 
     li {
         display: block;
         margin: 0;
         padding: 0 .5em;
         line-height: 1em;
         color: @grey3;
         background-color: @white;
         list-style-type: none;
 
         a {
             display: block;
             width: 100%;
             padding: .5em 0;
             border-right: none;
             border-bottom: @border-thickness solid white;
             color: @grey3;
         }
 
         ul {
             display: none;
             position: absolute;
             top: 0;
             right: 100%;
             padding: 0;
             z-index: 30;
         }
         &:hover {
             background-color: @grey7;
             -webkit-transition: background .3s;
                -moz-transition: background .3s;
                  -o-transition: background .3s;
                     transition: background .3s;
 
             ul {
                 display: block;
             }
         }
     }
 
 }
 
 
 
 
 // repo dropdown
 .quick_repo_menu {
     width: 15px;
     text-align: center;
     position: relative;
     cursor: pointer;
 
     div {
         overflow: visible !important;
     }
 
     &.sorting {
         cursor: auto;
     }
 
     &:hover {
         .menu_items_container {
             position: absolute;
             display: block;
         }
         .menu_items {
             display: block;
         }
     }
 
     i {
         margin: 0;
         color: @grey4;
     }
 
     .menu_items_container {
         position: absolute;
         top: 0;
         left: 100%;
         margin: 0;
         padding: 0;
         list-style: none;
         background-color: @grey6;
         z-index: 999;
         text-align: left;
 
         a {
             color: @grey2;
         }
 
         ul.menu_items {
             margin: 0;
             padding: 0;
         }
 
         li {
             margin: 0;
             padding: 0;
             line-height: 1em;
             list-style-type: none;
 
             a {
                 display: block;
                 height: 16px;
                 padding: 8px; //must add up to td height (28px)
                 width: 120px; // set width
 
                 &:hover {
                     background-color: @grey5;
                     -webkit-transition: background .3s;
                        -moz-transition: background .3s;
                          -o-transition: background .3s;
                             transition: background .3s;
                 }
             }
         }
     }
 }
 
 
 // new objects main action
 .action-menu {
     left: auto;
     right: 0;
     padding: 12px;
     z-index: 999;
     overflow: hidden;
     background-color: #fff;
     border: 1px solid @grey5;
     color: @grey2;
     box-shadow: @dropdown-shadow;
 
     .submenu-title {
         font-weight: bold;
     }
 
     .submenu-title:not(:first-of-type) {
         padding-top: 10px;
     }
 
     &.submenu {
         min-width: 200px;
 
         ol {
             padding:0;
         }
 
         li {
             display: block;
             margin: 0;
             padding: .2em .5em;
             line-height: 1em;
 
             background-color: #fff;
             list-style-type: none;
 
             a {
                 padding: 4px;
                 color: @grey4 !important;
                 border-bottom: none;
             }
         }
         li:not(.submenu-title) a:hover{
             color: @grey2 !important;
         }
     }
 }
 
 
 // Header Repository Switcher
 // Select2 Dropdown
 #select2-drop.select2-drop.repo-switcher-dropdown  {
     width: auto !important;
     margin-top: 5px;
     padding: 1em 0;
     text-align: left;
     .border-radius-bottom(@border-radius);
     border-color: transparent;
     color: @grey6;
     background-color: @grey2;
 
     input {
         min-width: 90%;
     }
 
     ul.select2-result-sub {
 
         li {
             line-height: 1em;
 
             &:hover,
             &.select2-highlighted {
                 background-color: @grey3;
             }
         }
 
         &:before { content: none; }
     }
 
     ul.select2-results {
         min-width: 200px;
         margin: 0;
         padding: 0;
         list-style-type: none;
         overflow-x: visible;
         overflow-y: scroll;
 
         li {
             padding: 0 8px;
             line-height: 1em;
             color: @grey6;
 
             &>.select2-result-label {
                 padding: 8px 0;
                 border-bottom: @border-thickness solid @grey3;
                 white-space: nowrap;
                 color: @grey5;
                 cursor: pointer;
             }
 
             &.select2-result-with-children {
                 margin: 0;
                 padding: 0;
             }
 
             &.select2-result-unselectable > .select2-result-label {
                 margin: 0 8px;
             }
 
         }
     }
 
     ul.select2-result-sub {
         margin: 0;
         padding: 0;
 
         li {
             display: block;
             margin: 0;
             border-right: none;
             line-height: 1em;
             font-family: @text-light;
             color: @grey2;
             list-style-type: none;
 
             &:hover {
                 background-color: @grey3;
             }
         }
     }
 }
 
 
 #context-bar {
     display: block;
     margin: 0 auto 20px 0;
     padding: 0 @header-padding;
     background-color: @grey7;
     border-bottom: 1px solid @grey5;
 
     .clear {
         clear: both;
     }
 }
 
 ul#context-pages {
     li {
         list-style-type: none;
 
         a {
             color: @grey2;
 
             &:hover {
                 color: @grey1;
             }
         }
 
         &.active {
             // special case, non-variable color
             border-bottom: 2px solid @rcblue;
 
             a {
                 color: @rcblue;
             }
         }
     }
 }
 
 // PAGINATION
 
 .pagination {
     border: @border-thickness solid @grey5;
     color: @grey2;
     box-shadow: @button-shadow;
 
     .current {
         color: @grey4;
     }
 }
 
 .dataTables_processing {
     text-align: center;
     font-size: 1.1em;
     position: relative;
     top: 95px;
+    height: 0;
 }
 
 .dataTables_paginate,
 .pagination-wh {
     text-align: center;
     display: inline-block;
     border-left: 1px solid @grey5;
     float: none;
     overflow: hidden;
     box-shadow: @button-shadow;
 
     .paginate_button, .pager_curpage,
     .pager_link, .pg-previous, .pg-next, .pager_dotdot {
         display: inline-block;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @grey5;
         margin-left: -1px;
         color: @grey2;
         cursor: pointer;
         float: left;
         font-weight: 600;
         white-space: nowrap;
         vertical-align: middle;
         user-select: none;
         min-width: 15px;
 
         &:hover {
             color: @rcdarkblue;
         }
     }
 
     .paginate_button.disabled,
     .disabled {
         color: @grey3;
         cursor: default;
         opacity: 0.5;
     }
 
     .paginate_button.current, .pager_curpage {
         background: @rcblue;
         border-color: @rcblue;
         color: @white;
     }
 
     .ellipsis {
         display: inline-block;
         text-align: left;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @grey5;
         border-left: 0;
         float: left;
     }
 }
 
 // SIDEBAR
 
 .sidebar {
     .block-left;
     clear: left;
     max-width: @sidebar-width;
     margin-right: @sidebarpadding;
     padding-right: @sidebarpadding;
     font-family: @text-regular;
     color: @grey1;
 
     .nav-pills {
         margin: 0;
     }
 
     .nav {
         list-style: none;
         padding: 0;
 
         li {
             padding-bottom: @menupadding;
             line-height: 1em;
             color: @grey4;
             list-style-type: none;
 
             &.active a {
                 color: @grey2;
             }
 
             a {
                 color: @grey4;
             }
         }
 
     }
 }
 
 .main_filter_help_box {
     padding: 7px 7px;
     display: inline-block;
     vertical-align: top;
     background: inherit;
     position: absolute;
     right: 0;
     top: 9px;
 }
 
 .main_filter_input_box {
     display: inline-block;
 
     .searchItems {
         display:flex;
         background: @black;
         padding: 0px;
         border-radius: 3px;
         border: 1px solid @black;
 
         a {
             border: none !important;
         }
     }
 
     .searchTag {
         line-height: 28px;
         padding: 0 5px;
 
         .tag {
             color: @grey5;
             border-color: @grey2;
             background: @grey1;
         }
     }
 
     .searchTagFilter {
         background-color: @black !important;
         margin-right: 0;
     }
     .searchTagIcon {
         margin: 0;
         background: @black !important;
     }
     .searchTagHelp {
         background-color: @grey1 !important;
         margin: 0;
     }
     .searchTagHelp:hover {
         background-color: @grey1 !important;
     }
     .searchTagInput {
         background-color: @grey1 !important;
         margin-right: 0;
     }
 }
 
 .main_filter_box {
     margin: 9px 0 0 0;
 }
 
 #main_filter_help {
     background: @grey1;
     border: 1px solid black;
     position: absolute;
     white-space: pre;
     z-index: 9999;
     color: @nav-grey;
     padding: 0 10px;
 }
 
 input {
 
     &.main_filter_input {
         padding: 5px 10px;
         min-width: 340px;
         color: @grey7;
         background: @black;
         min-height: 18px;
         border: 0;
 
         &:active {
           color: @grey2 !important;
           background: white !important;
         }
         &:focus {
           color: @grey2 !important;
           background: white !important;
         }
     }
 }
 
 
 
 .main_filter_input::placeholder {
     color: @nav-grey;
     opacity: 1;
 }
 
 .notice-box {
     display:block !important;
     padding: 9px 0 !important;
 }
 
 .menulabel-notice {
     border: 1px solid @color5;
     padding:7px 10px;
     color: @color5;
 }