Added mobile version for new tab

Resolves brave#7411 Auditors: @cezaraugusto @bsclifton Test Plan: - open new tab - resize window to 560x680 - there shouldn't be x scroll
NejcZdovc · Feb 28, 2017 · f459944 · f459944
1 parent c72ed17
commit f459944
Showing 1 changed file with 51 additions and 11 deletions.
diff --git a/less/about/newtab.less b/less/about/newtab.less
@@ -50,6 +50,7 @@ ul {
   background-size: cover;
   display: flex;
   flex: 1;
+
   > img {
     display: none;
   }
@@ -193,9 +194,10 @@ ul {
     }
 
     .topSitesGrid {
-      width: 510px;
+      max-width: 510px;
       display: inline-block;
       text-align: left;
+      width: 100%;
 
       .topSiteSquareSpace {
         margin-left: 5px;
@@ -267,16 +269,16 @@ ul {
           // to avoid backgrounds with the same color as icon
           // (as seen on issue #5868)
           &:before {
-              content: '';
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              background-color: #fff;
-              opacity: 0.15;
-              z-index: 0;
-              border-radius: 4px;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
+            opacity: 0.15;
+            z-index: 0;
+            border-radius: 4px;
           }
 
           .pinnedTopSite {
@@ -418,3 +420,41 @@ ul {
     }
   }
 }
+
+@media (max-width: 730px) {
+  .dynamicBackground {
+    min-height: 100%;
+    height: initial !important;
+  }
+
+  .content {
+    min-height: 100%;
+
+    main {
+      margin-bottom: 20px;
+    }
+
+    .statsBar {
+      flex-direction: column-reverse;
+      padding-top: 0;
+
+      .statsBlock {
+        margin: 0 0 15px;
+        width: 50%;
+        padding-right: 20px;
+      }
+
+      .clock {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        padding-bottom: 20px;
+      }
+    }
+
+    .topSitesContainer {
+      text-align: center;
+      padding-bottom: 20px;
+    }
+  }
+}