Add variables for the improved flat top panel

Follow-up of #7740 Addresses #7739 - Updated existing variables in global.js - navbarMenubarMargin = tabPagesHeight Auditors: Test Plan: #7740 (comment)
brave · Mar 21, 2017 · 236d5b6 · 236d5b6
1 parent 44d8279
commit 236d5b6
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -97,11 +97,12 @@ const globalStyles = {
     navbarHeight: '36px',
     downloadsBarHeight: '50px',
     tabsToolbarHeight: '28px',
-    tabPagesHeight: '9px',
+    tabPagesHeight: '7px',
     bookmarksToolbarHeight: '24px',
-    bookmarksToolbarWithFaviconsHeight: '28px',
+    bookmarksToolbarWithFaviconsHeight: '24px',
     bookmarksFileIconSize: '13px',
     bookmarksFolderIconSize: '15px',
+    navbarMenubarMargin: '7px',
     navbarButtonSpacing: '4px',
     navbarButtonWidth: '20px',
     navbarBraveButtonWidth: '23px',

diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less
@@ -17,7 +17,7 @@
   box-sizing: border-box;
   display: flex;
   flex: 1;
-  padding: 7px var(--bookmarks-toolbar-padding) 8px;
+  padding: @navbarMenubarMargin var(--bookmarks-toolbar-padding);
 
   &.allowDragging {
     -webkit-app-region: drag;
@@ -27,7 +27,7 @@
   }
 
   &.showOnlyFavicon {
-    padding: 7px 0 7px 10px;
+    padding: @navbarMenubarMargin 0 @tabPagesHeight 10px;
   }
 
   // PR #7740

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -622,7 +622,7 @@
 .navigatorWrapper {
   justify-content: space-between;
   align-items: center;
-  margin-top: 7px;
+  margin-top: @navbarMenubarMargin;
   box-sizing: border-box;
 
   /**

diff --git a/less/tabs.less b/less/tabs.less
@@ -137,12 +137,12 @@
 .tabPages {
   background: none;
   display: flex;
-  height: @tabPagesHeight;
-  padding: 7px 0;
   justify-content: center;
+  height: @tabPagesHeight;
+  padding: @tabPagesHeight 0 @navbarMenubarMargin 0;
   position: relative;
-  text-align: center;
   z-index: @zindexTabs;
+
   &.allowDragging {
     -webkit-app-region: drag;
     >* {

diff --git a/less/variables.less b/less/variables.less
@@ -83,6 +83,7 @@
 @bookmarksFileIconSize: 13px;
 @bookmarksFolderIconSize: 15px;
 
+@navbarMenubarMargin: 7px;
 @navbarButtonSpacing: 4px;
 @navbarButtonWidth: 20px;
 @navbarBraveButtonWidth: 23px;