Merge branch 'group-empty-state' into 'master'

Better empty state for Groups view.

Implemented @hazelyang's [awesome design](https://gitlab.com/gitlab-org/gitlab-ce/uploads/9141470ed121f137a4074ae4e12c449c/groups-empty.png) for empty group views.

Fixes #20829 


### Design
![https://gitlab.com/gitlab-org/gitlab-ce/uploads/9141470ed121f137a4074ae4e12c449c/groups-empty.png](https://gitlab.com/gitlab-org/gitlab-ce/uploads/9141470ed121f137a4074ae4e12c449c/groups-empty.png)


### Screenshots
![Screen_Shot_2016-09-28_at_13.43.35](/uploads/e2ab668a412596205deb67c97af78a1d/Screen_Shot_2016-09-28_at_13.43.35.png)

![Screen_Shot_2016-09-28_at_13.44.54](/uploads/c4301166f353f0ee198aecdc46cdfe66/Screen_Shot_2016-09-28_at_13.44.54.png)

![Screen_Shot_2016-09-28_at_13.46.10](/uploads/92024e866871969ec7a28db4b8e87220/Screen_Shot_2016-09-28_at_13.46.10.png)

![Screen_Shot_2016-09-28_at_13.46.20](/uploads/f1b515c7aa09d06e80a419d98ff76fd6/Screen_Shot_2016-09-28_at_13.46.20.png)

![Screen_Shot_2016-09-28_at_13.46.34](/uploads/76cdd5f0e9d3c59d017df26172f7dd4d/Screen_Shot_2016-09-28_at_13.46.34.png)

See merge request !6566

1 files changed, 35 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 732dc645c66..185ce970e71 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -57,7 +57,6 @@
 }
 
 .groups-header {
-
   @media (min-width: $screen-sm-min) {
     .nav-links {
       width: 35%;
@@ -68,3 +67,38 @@
     }
   }
 }
+
+.groups-empty-state {
+  padding: 50px 100px;
+  overflow: hidden;
+
+  @media (max-width: $screen-md-min) {
+    padding: 50px 0;
+  }
+
+  svg {
+    float: right;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      display: block;
+      width: 250px;
+      position: relative;
+      left: 50%;
+      margin-left: -125px;
+    }
+  }
+
+  .text-content {
+    float: left;
+    width: 460px;
+    margin-top: 120px;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      margin-top: 60px;
+      width: auto;
+      text-align: center;
+    }
+  }
+}