Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
these edits ad 2 px to our tab height
Browse files Browse the repository at this point in the history
- this adds some needed space above and below the text string
- increases tab text to 12 on mac (already 12 on windows)
- tabs buttons adjusted to align properly

auditors: @bbondy @bsclifton
  • Loading branch information
bradleyrichter committed Dec 3, 2016
1 parent 7c38d20 commit 615a6ec
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 14 deletions.
6 changes: 3 additions & 3 deletions less/button.less
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ span.buttonSeparator {
background-color: @buttonColor;
display: inline-block;
width: 20px;
height: 12px;
margin: 8px 4px 0 0;
height: 13px;
margin: 9px 4px 0 0;
cursor: default;
-webkit-mask-image: url('../img/toolbar/menu_btn.svg');
-webkit-mask-repeat: no-repeat;
Expand Down Expand Up @@ -68,7 +68,7 @@ span.buttonSeparator {
line-height: 18px;
width: 18px;
height: 18px;
font-size: 12px;
font-size: 24px;

This comment has been minimized.

Copy link
@luixxiul

luixxiul Feb 10, 2017

Contributor

@bradleyrichter would you please let me know what this change was needed for? This seems to be breaking .smallbutton on about:styles

This comment has been minimized.

Copy link
@bradleyrichter

bradleyrichter Feb 11, 2017

Author Contributor

@luixxiul hmmm....sorry. I don't recall exactly. 200% change seems drastic though.

Does the tab siZE increase work fine without this change?

This comment has been minimized.

Copy link
@luixxiul

luixxiul Feb 11, 2017

Contributor

@bsclifton do you remember? (I'm pinging you because you have left comments below)

This comment has been minimized.

Copy link
@bsclifton

bsclifton Feb 12, 2017

Member

@luixxiul no, I definitely do not remember. My best guess would be that the text was too hard to read on Windows?

This comment has been minimized.

Copy link
@luixxiul

luixxiul Feb 12, 2017

Contributor

Maybe for the caret down and up on the findbar? I cannot find anything which is specified with the class other than those under js/

#9234

}

&.primaryButton,
Expand Down
4 changes: 2 additions & 2 deletions less/navigationBar.less
Original file line number Diff line number Diff line change
Expand Up @@ -886,8 +886,8 @@

&.fa-lock,
&.fa-unlock {
margin-top: 1px;
font-size: 16px;
margin-top: 2px;
font-size: 15px;
min-height: 10px;
min-width: 16px;
}
Expand Down
13 changes: 6 additions & 7 deletions less/tabs.less
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@

.newFrameButton {
background: @buttonColor;
width: 14px;
height: 24px;
width: 15px;
height: 26px;
line-height: 24px;
-webkit-mask-image: url('../img/toolbar/newtab_btn.svg');
-webkit-mask-repeat: no-repeat;
Expand All @@ -69,14 +69,13 @@
}

.tab {
// background: rgba(222, 222, 222, 0.6);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
border-radius: @borderRadiusTabs @borderRadiusTabs 0px 0px;
border-width: 1px 1px 0;
box-sizing: border-box;
color: #3B3B3B;
display: flex;
height: 22px;
height: 23px;
margin-top: 2px;
transition: transform 200ms ease;
left: 0;
Expand All @@ -92,7 +91,7 @@
-webkit-user-select: none;
box-sizing: border-box;
display: inline-block;
font-size: 11.5px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 16px;
Expand Down Expand Up @@ -142,7 +141,7 @@

&.active {
background: linear-gradient(to bottom, white, @chromePrimary, );
height: 24px;
height: 25px;
margin-top: 1px;
box-shadow: inset 1px 1px 2px 0px white;
box-shadow: 0px -1px 4px 0px rgba(51, 51, 51, 0.12);
Expand Down Expand Up @@ -347,7 +346,7 @@
line-height: 19px !important;
text-align: center;
vertical-align: top;
margin-top: 2px;
margin-top: 4px;
margin-left: -5px;
margin-right: -5px;
width: 30px;
Expand Down
4 changes: 2 additions & 2 deletions less/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
@contextMenuFontSize: 14px;
@audioColor: @highlightBlue;
@focusUrlbarOutline: @highlightBlue;
@siteSecureColor: @highlightBlue;
@siteSecureColor: @buttonColor;
@siteInsecureColor: #C63626;
@siteEVColor: green;
@loadTimeColor: @highlightBlue;
Expand Down Expand Up @@ -69,7 +69,7 @@

@navbarHeight: 36px;
@downloadsBarHeight: 50px;
@tabsToolbarHeight: 26px;
@tabsToolbarHeight: 28px;
@tabPagesHeight: 9px;
@bookmarksToolbarHeight: 24px;
@bookmarksToolbarWithFaviconsHeight: 28px;
Expand Down

4 comments on commit 615a6ec

@bsclifton
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++

@bsclifton
Copy link
Member

@bsclifton bsclifton commented on 615a6ec Dec 5, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screencap showing it (looks + feels MUCH better!)
screen shot 2016-12-05 at 3 54 11 pm

versus

screen shot 2016-12-05 at 3 55 38 pm

@bradleyrichter
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

funny how 2px can make such a difference.

@bsclifton
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks extra good on Windows 😄

Please sign in to comment.