Merge branch 'dz-refactor-lists-css' into 'master'

Move group lists css from framework/lists.scss to pages/groups.scss

See merge request gitlab-org/gitlab-ce!19027

app/assets/stylesheets/framework/lists.scss

@@ -285,236 +285,8 @@ ul.indent-list {
   to { transform: rotate(360deg); }
 }
 
-.groups-list-tree-container {
-  .has-no-search-results {
-    text-align: center;
-    padding: $gl-padding;
-    font-style: italic;
-    color: $well-light-text-color;
-  }
-
-  > .group-list-tree > .group-row.has-children:first-child {
-    border-top: 0;
-  }
-}
-
-.group-list-tree {
-  .avatar-container.content-loading {
-    position: relative;
-
-    > a,
-    > a .avatar {
-      height: 100%;
-      border-radius: 50%;
-    }
-
-    > a {
-      padding: 2px;
-
-      .avatar {
-        border: 2px solid $white-normal;
-
-        &.identicon {
-          line-height: 15px;
-        }
-      }
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      background-color: transparent;
-      border: 2px outset $kdb-border;
-      border-radius: 50%;
-      animation: spin-avatar 3s infinite linear;
-    }
-  }
-
-  .folder-toggle-wrap {
-    float: left;
-    line-height: $list-text-height;
-    font-size: 0;
-
-    span {
-      font-size: $gl-font-size;
-    }
-  }
-
-  .folder-caret,
-  .item-type-icon {
-    display: inline-block;
-  }
-
-  .folder-caret {
-    width: 15px;
-
-    svg {
-      margin-bottom: 2px;
-    }
-  }
-
-  .item-type-icon {
-    margin-top: 2px;
-    width: 20px;
-  }
-
-  > .group-row:not(.has-children) {
-    .folder-caret {
-      opacity: 0;
-    }
-  }
-
-  .content-list li:last-child {
-    padding-bottom: 0;
-  }
-
-  .group-list-tree {
-    margin-bottom: 0;
-    margin-left: 30px;
-    position: relative;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 0;
-      position: absolute;
-      top: 5px;
-      bottom: 0;
-      left: -16px;
-      border-left: 2px solid $border-white-normal;
-    }
-
-    .group-row {
-      position: relative;
-
-      &::before {
-        content: "";
-        display: block;
-        width: 10px;
-        height: 0;
-        border-top: 2px solid $border-white-normal;
-        position: absolute;
-        top: 30px;
-        left: -16px;
-      }
-
-      &:last-child::before {
-        background: $white-light;
-        height: auto;
-        top: 30px;
-        bottom: 0;
-      }
-
-      &.being-removed {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .group-row {
-    padding: 0;
-
-    &.has-children {
-      border-top: 0;
-    }
-
-    &:first-child {
-      border-top: 1px solid $white-normal;
-    }
-  }
-
-  .group-row-contents {
-    padding: $gl-padding-top;
-
-    &:hover {
-      border-color: $row-hover-border;
-      background-color: $row-hover;
-      cursor: pointer;
-    }
-
-    .avatar-container > a {
-      width: 100%;
-      text-decoration: none;
-    }
-
-    &.has-more-items {
-      display: block;
-      padding: 20px 10px;
-    }
-
-    .stats {
-      position: relative;
-      line-height: 46px;
-
-      > span {
-        display: inline-flex;
-        align-items: center;
-        height: 16px;
-        min-width: 30px;
-      }
-
-      > span:last-child {
-        margin-right: 0;
-      }
-
-      .stat-value {
-        margin: 2px 0 0 5px;
-      }
-    }
-
-    .controls {
-      margin-left: 5px;
-
-      > .btn {
-        margin-right: $btn-xs-side-margin;
-      }
-    }
-  }
-
-  .project-row-contents .stats {
-    line-height: inherit;
-
-    > span:first-child {
-      margin-left: 25px;
-    }
-
-    .item-visibility {
-      margin-right: 0;
-    }
-
-    .last-updated {
-      position: absolute;
-      right: 12px;
-      min-width: 250px;
-      text-align: right;
-      color: $gl-text-color-secondary;
-    }
-  }
-}
-
 .namespace-title {
   .tooltip-inner {
     max-width: 350px;
   }
 }
-
-ul.group-list-tree {
-  li.group-row {
-    > .group-row-contents .title {
-      line-height: $list-text-height;
-    }
-
-    &.has-description > .group-row-contents .title {
-      line-height: inherit;
-    }
-  }
-}
-
-.js-groups-list-holder {
-  .groups-list-loading {
-    font-size: 34px;
-    text-align: center;
-  }
-}

app/assets/stylesheets/pages/groups.scss

@@ -241,3 +241,231 @@
     overflow-y: unset;
   }
 }
+
+.groups-list-tree-container {
+  .has-no-search-results {
+    text-align: center;
+    padding: $gl-padding;
+    font-style: italic;
+    color: $well-light-text-color;
+  }
+
+  > .group-list-tree > .group-row.has-children:first-child {
+    border-top: 0;
+  }
+}
+
+.group-list-tree {
+  .avatar-container.content-loading {
+    position: relative;
+
+    > a,
+    > a .avatar {
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    > a {
+      padding: 2px;
+
+      .avatar {
+        border: 2px solid $white-normal;
+
+        &.identicon {
+          line-height: 15px;
+        }
+      }
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background-color: transparent;
+      border: 2px outset $kdb-border;
+      border-radius: 50%;
+      animation: spin-avatar 3s infinite linear;
+    }
+  }
+
+  .folder-toggle-wrap {
+    float: left;
+    line-height: $list-text-height;
+    font-size: 0;
+
+    span {
+      font-size: $gl-font-size;
+    }
+  }
+
+  .folder-caret,
+  .item-type-icon {
+    display: inline-block;
+  }
+
+  .folder-caret {
+    width: 15px;
+
+    svg {
+      margin-bottom: 2px;
+    }
+  }
+
+  .item-type-icon {
+    margin-top: 2px;
+    width: 20px;
+  }
+
+  > .group-row:not(.has-children) {
+    .folder-caret {
+      opacity: 0;
+    }
+  }
+
+  .content-list li:last-child {
+    padding-bottom: 0;
+  }
+
+  .group-list-tree {
+    margin-bottom: 0;
+    margin-left: 30px;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 0;
+      position: absolute;
+      top: 5px;
+      bottom: 0;
+      left: -16px;
+      border-left: 2px solid $border-white-normal;
+    }
+
+    .group-row {
+      position: relative;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 10px;
+        height: 0;
+        border-top: 2px solid $border-white-normal;
+        position: absolute;
+        top: 30px;
+        left: -16px;
+      }
+
+      &:last-child::before {
+        background: $white-light;
+        height: auto;
+        top: 30px;
+        bottom: 0;
+      }
+
+      &.being-removed {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .group-row {
+    padding: 0;
+
+    &.has-children {
+      border-top: 0;
+    }
+
+    &:first-child {
+      border-top: 1px solid $white-normal;
+    }
+  }
+
+  .group-row-contents {
+    padding: $gl-padding-top;
+
+    &:hover {
+      border-color: $row-hover-border;
+      background-color: $row-hover;
+      cursor: pointer;
+    }
+
+    .avatar-container > a {
+      width: 100%;
+      text-decoration: none;
+    }
+
+    &.has-more-items {
+      display: block;
+      padding: 20px 10px;
+    }
+
+    .stats {
+      position: relative;
+      line-height: 46px;
+
+      > span {
+        display: inline-flex;
+        align-items: center;
+        height: 16px;
+        min-width: 30px;
+      }
+
+      > span:last-child {
+        margin-right: 0;
+      }
+
+      .stat-value {
+        margin: 2px 0 0 5px;
+      }
+    }
+
+    .controls {
+      margin-left: 5px;
+
+      > .btn {
+        margin-right: $btn-xs-side-margin;
+      }
+    }
+  }
+
+  .project-row-contents .stats {
+    line-height: inherit;
+
+    > span:first-child {
+      margin-left: 25px;
+    }
+
+    .item-visibility {
+      margin-right: 0;
+    }
+
+    .last-updated {
+      position: absolute;
+      right: 12px;
+      min-width: 250px;
+      text-align: right;
+      color: $gl-text-color-secondary;
+    }
+  }
+}
+
+ul.group-list-tree {
+  li.group-row {
+    > .group-row-contents .title {
+      line-height: $list-text-height;
+    }
+
+    &.has-description > .group-row-contents .title {
+      line-height: inherit;
+    }
+  }
+}
+
+.js-groups-list-holder {
+  .groups-list-loading {
+    font-size: 34px;
+    text-align: center;
+  }
+}