editorial brand landing header changes (bug 1131721) #1068
Conversation
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%;
} |
Updated. |
@@ -21,27 +21,59 @@ feed_background_color($color) { | |||
} | |||
[data-feed-landing-color="amber"] { | |||
collection_background_colors($color-collection--amber); | |||
|
|||
&[data-brand-landing] { |
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.
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); |
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.
abc :)
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.
we use 🍟 for that :)
Can we give it a white outline on the landing page as well? The circle is hard to make out. r+with consideration/comments |
I agree with the border on landing also but I'll have to ask the |
editorial brand landing header changes (bug 1131721)
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: