Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

editorial brand landing header changes (bug 1131721) #1068

Merged
merged 1 commit into from Mar 12, 2015

Conversation

spasovski
Copy link
Contributor

Not sure I like the approach of messing with the mixin but let me know if you have an alternative suggestion.

Also updates the homepage icons:

@ngokevin
Copy link
Contributor

You should create a different brand-specific mixin. See colors.styl.

excerpt shelves.styl.css

[data-shelf-landing-carrier="deutsche_telekom"][data-brand-landing] .brand-landing-icon {
  background-color: #e20074;
}
[data-shelf-landing-carrier="deutsche_telekom"][data-brand-landing] .feed-curve {
  background-color: rgba(226,0,116,0.75);
}
[data-shelf-landing-carrier="deutsche_telekom"][data-brand-landing] .feed-curve:after {
  background-color: rgba(226,0,116,0.55);
  bottom: -45px;
  content: "";
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
}
[data-shelf-landing-carrier="kddi"] .feed-landing-header {
  background-color: rgba(227,82,5,0.55);
}
[data-shelf-landing-carrier="kddi"] .feed-curve {
  background-color: #e35205;
}
[data-shelf-landing-carrier="kddi"][data-brand-landing] .brand-landing-icon {
  background-color: #e35205;
}
[data-shelf-landing-carrier="kddi"][data-brand-landing] .feed-curve {
  background-color: rgba(227,82,5,0.75);
}
[data-shelf-landing-carrier="kddi"][data-brand-landing] .feed-curve:after {
  background-color: rgba(227,82,5,0.55);
  bottom: -45px;
  content: "";
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
}
[data-shelf-landing-carrier="mtn"] .feed-landing-header {
  background-color: rgba(205,103,35,0.55);
}
[data-shelf-landing-carrier="mtn"] .feed-curve {
  background-color: #cd6723;
}
[data-shelf-landing-carrier="mtn"][data-brand-landing] .brand-landing-icon {
  background-color: #cd6723;
}
[data-shelf-landing-carrier="mtn"][data-brand-landing] .feed-curve {
  background-color: rgba(205,103,35,0.75);
}
[data-shelf-landing-carrier="mtn"][data-brand-landing] .feed-curve:after {
  background-color: rgba(205,103,35,0.55);
  bottom: -45px;
  content: "";
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
}

@spasovski
Copy link
Contributor Author

Updated.

@@ -21,27 +21,59 @@ feed_background_color($color) {
}
[data-feed-landing-color="amber"] {
collection_background_colors($color-collection--amber);

&[data-brand-landing] {
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't need to wrap with data-brand-landing if we prefix the classes, bad for perf

@@ -21,27 +41,35 @@ feed_background_color($color) {
}
[data-feed-landing-color="amber"] {
collection_background_colors($color-collection--amber);
Copy link
Contributor

Choose a reason for hiding this comment

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

abc :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

we use 🍟 for that :)

@ngokevin
Copy link
Contributor

Can we give it a white outline on the landing page as well? The circle is hard to make out.

r+with consideration/comments

@spasovski
Copy link
Contributor Author

I agree with the border on landing also but I'll have to ask the rgba(0,0,0,0.5) wizard

spasovski added a commit that referenced this pull request Mar 12, 2015
editorial brand landing header changes (bug 1131721)
@spasovski spasovski merged commit 135f757 into mozilla:master Mar 12, 2015
@spasovski spasovski deleted the edlanding branch March 12, 2015 18:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants