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
Merged

editorial brand landing header changes (bug 1131721) #1068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/media/css/feed/brands.styl
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@
position: relative;
right: 10px;
text-align: center;
width: unquote('calc(100% + 20px)');
width: width-calc('100% + 20px');

&:hover {
text-decoration: none;
Expand All @@ -28,13 +28,14 @@
color: $white;
font-size: 20px;
font-weight: 300;
margin-top: 75px;
margin-top: 80px;
margin-bottom: 10px;
}
h3:before {
background-color: rgba($greyscale-light-grey, .8);
left: unquote('calc(50% - 30px)');
border-radius: 50%;
border: 2px solid $white;
height: 60px;
left: width-calc('50% - 30px');
top: 15px;
width: 60px;
}
Expand All @@ -59,7 +60,9 @@
width: 64px;

h3:before {
left: unquote('calc(50% - 32px)');
border-radius: 50%;
border: 2px solid $white;
left: width-calc('50% - 32px');
height: 64px;
width: 64px;
}
Expand Down
28 changes: 28 additions & 0 deletions src/media/css/feed/colors.styl
View file
Open in desktop
Expand Up @@ -12,6 +12,26 @@ feed_background_color($color) {
}
}

brand_background_colors($color) {
.brand-landing-icon {
background-color: $color;
}
.brand-landing-curve {
background-color: rgba($color, 0.75);

// Heavyhanded mask for the curve bottom padding.
&:after {
background-color: rgba($color, 0.55);
bottom: -45px;
content: "";
height: 45px;
left: 0;
position: absolute;
width: 100%;
}
}
}

[data-feed-landing-color],
[data-shelf-landing-carrier] {
h1,
Expand All @@ -20,27 +40,35 @@ feed_background_color($color) {
}
}
[data-feed-landing-color="amber"] {
brand_background_colors($color-collection--amber);
collection_background_colors($color-collection--amber);
}
[data-feed-landing-color="garnet"] {
brand_background_colors($color-collection--garnet);
collection_background_colors($color-collection--garnet);
}
[data-feed-landing-color="topaz"] {
brand_background_colors($color-collection--topaz);
collection_background_colors($color-collection--topaz);
}
[data-feed-landing-color="amethyst"] {
brand_background_colors($color-collection--amethyst);
collection_background_colors($color-collection--amethyst);
}
[data-feed-landing-color="sapphire"] {
brand_background_colors($color-collection--sapphire);
collection_background_colors($color-collection--sapphire);
}
[data-feed-landing-color="emerald"] {
brand_background_colors($color-collection--emerald);
collection_background_colors($color-collection--emerald);
}
[data-feed-landing-color="ruby"] {
brand_background_colors($color-collection--ruby);
collection_background_colors($color-collection--ruby);
}
[data-feed-landing-color="aquamarine"] {
brand_background_colors($color-collection--aquamarine);
collection_background_colors($color-collection--aquamarine);
}

Expand Down
3 changes: 2 additions & 1 deletion src/templates/_macros/feed_item.html
View file
Open in desktop
Expand Up @@ -211,7 +211,8 @@ <h3>{{ coll.name|translate(coll)|safe }}</h3>
{% endfor %}
</ul>
{% endif %}
<div class="feed-curve feed-landing-curve">
<div class="feed-curve feed-landing-curve
{{ 'brand-landing-curve' if feed_item.isBrand }}">
{% if feed_item.isBrand %}
<div class="brand-landing-header">
<div class="brand-landing-icon" data-brand-type="{{ feed_item.type }}">
Expand Down