-
Notifications
You must be signed in to change notification settings - Fork 193
Firefox Accounts migration banner (bug 1052864) #657
Changes from 1 commit
7345bc1
9b590cc
5994e98
f46a425
d07359a
320529c
2c436bd
b7e6b87
4e39ea1
0e3ee48
34d425b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,12 @@ | ||
// styles for the global site header only. | ||
@import 'lib'; | ||
|
||
// Add the header's height back as padding. This is overriden when not the | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. typo? "when not the header"? |
||
// header is not `position: fixed`. | ||
body { | ||
padding-top: $header-height; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. r? @ngokevin There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As long as it doesn't cause regressions, I'm good. And after applying + clicking around, I see nothing wrong. |
||
} | ||
|
||
// ***************** Wide Mobile (600+ px) | ||
|
||
// usable on any header | ||
|
@@ -9,8 +15,8 @@ | |
border-top: 1px solid $salt-flat-white; | ||
border-bottom: 1px solid $seavan-salt-white; | ||
display-flex(); | ||
height: 48px; | ||
max-height: 48px; | ||
height: $header-height; | ||
max-height: $header-height; | ||
position: relative; | ||
width: 100%; | ||
|
||
|
@@ -25,7 +31,7 @@ | |
color: $castle-skull-gray; | ||
font-size: 18px; | ||
font-weight: 400; | ||
line-height: 48px; | ||
line-height: $header-height; | ||
z-index: 10; | ||
} | ||
} | ||
|
@@ -45,7 +51,7 @@ | |
display: block; | ||
} | ||
> nav { | ||
height: 48px; | ||
height: $header-height; | ||
display-flex(); | ||
position: relative; | ||
text-align: left; | ||
|
@@ -56,7 +62,7 @@ | |
} | ||
} | ||
.site { | ||
height: 48px; | ||
height: $header-height; | ||
margin: 0 5px; | ||
width: 200px; | ||
|
||
|
@@ -197,10 +203,10 @@ | |
.header-button { | ||
color: $castle-skull-gray; | ||
display: block; | ||
height: 48px; | ||
line-height: 48px; | ||
height: $header-height; | ||
line-height: $header-height; | ||
text-align: center; | ||
width: 48px; | ||
width: $header-height; // $header-height so it's square. | ||
|
||
// header buttons with icons | ||
&.icon { | ||
|
@@ -425,23 +431,15 @@ | |
flex(1); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm glad you're removing this, but check with @ngokevin and @spasovski |
||
} | ||
} | ||
|
||
[data-page-type~=root] { | ||
main { | ||
padding-top: 48px; | ||
} | ||
} | ||
main { | ||
padding-top: 38px; | ||
|
||
&:before { | ||
// This makes a sweet gradient below the header | ||
// (which will appear when scrolling past the category drop-down menu). | ||
content: ''; | ||
display: block; | ||
gradientLinear(unquote('to top, rgba(15,15,15,0) 0%, rgba(15,15,15,.3) 100%')); | ||
height: 2px; | ||
top: 48px; | ||
top: $header-height; | ||
position: fixed; | ||
width: 100%; | ||
z-index: 18; | ||
|
@@ -465,7 +463,7 @@ main { | |
} | ||
} | ||
[data-page-type] main { | ||
padding: 0 0 48px; | ||
padding: 0 0 $header-height; | ||
|
||
&:before { | ||
display: none; | ||
|
@@ -477,6 +475,10 @@ main { | |
|
||
// This probably shouldn't be media query based. | ||
@media $wider-desktop { | ||
body { | ||
padding-top: 0; | ||
} | ||
|
||
.header-button.settings { | ||
right: 0; | ||
top: 0; | ||
|
@@ -514,7 +516,7 @@ main { | |
> nav { | ||
height: 60px; | ||
margin: 0 auto; | ||
max-width: 1024px; | ||
max-width: $max-site-width; | ||
} | ||
.site { | ||
margin: 0; | ||
|
@@ -594,13 +596,12 @@ main { | |
} | ||
|
||
// ***************** Wide Mobile (> 671px) | ||
|
||
@media $at-least-desktop { | ||
.secondary-header { | ||
background: none; | ||
border: 0; | ||
height: 48px; | ||
max-height: 48px; | ||
height: $header-height; | ||
max-height: $header-height; | ||
position: relative; | ||
|
||
&:before { | ||
|
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
@import 'lib'; | ||
|
||
.mkt-banner { | ||
background: $grey-gardens-gray; | ||
color: $cement-gray; | ||
display: block; | ||
overflow: hidden; | ||
position: relative; | ||
|
||
&:before, | ||
&:after { | ||
content: ""; | ||
display: block; | ||
height: 1px; | ||
position: relative; | ||
top: -1px; | ||
width: 100%; | ||
} | ||
|
||
&:after { | ||
bottom: -1px; | ||
top: auto; | ||
} | ||
|
||
.mkt-banner-content { | ||
$content-height = 60px; | ||
$content-padding-verticle = 10px; | ||
background: url("../img/logos/firefox-64.png") no-repeat scroll 0px 50% / 64px 60px transparent; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you can't use just make a separate There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you don't need to include |
||
// Center the text vertically. Only one line, sorry. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we try another approach? |
||
line-height: $content-height - (2 * $content-padding-verticle); | ||
margin: 0 auto; | ||
max-width: $max-site-width; | ||
min-height: $content-height; | ||
padding: $content-padding-verticle 40px $content-padding-verticle 70px; | ||
position: relative; | ||
text-align: left; | ||
} | ||
|
||
.close { | ||
margin-top: -17px; | ||
top: 50%; | ||
} | ||
} | ||
|
||
.mkt-banner.mkt-banner-success { | ||
background: #64be3c; | ||
color: #fff; | ||
font-family: $open-stack; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why do you have to set the font family here? |
||
|
||
.mkt-banner-content { | ||
line-height: 1; | ||
font-size: 15px; | ||
font-weight: 300; | ||
} | ||
|
||
small { | ||
display: block; | ||
font-size: 12px; | ||
padding-top: 10px; | ||
} | ||
|
||
a { | ||
color: #fff; | ||
font-weight: 500; | ||
text-decoration: underline; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remember to remove from Zamboni