Modular Theme: Mosaic Section - Adding another text overlay color

cnelson
New Member
17 0 0

Hi, I am trying to add an additional color option for the text overlay for the Mosaic section in Modular. Currently, it only offers black or white. I have added an additional data set with the color code that I want, but it is not populating in the front end editor. See the relevant set of code below - I have added the gold option to the data set. But, as you can see from the screenshot - the front editor is still only displaying black or white as options.

 Screen Shot 2020-10-07 at 9.31.23 AM.png

 

.mosaic__blocks {
@media screen and (min-width: $med) {
display: flex;
flex-wrap: wrap;
float: left;
width: calc(100% + #{$gutter});
margin: -$gutter/2;
 
.mosaic__blocks--one & { height: calc(50% + #{$gutter}); }
.mosaic__blocks--two & { height: calc(40% + #{$gutter}); }
.mosaic__blocks--three & { height: calc(40% + #{$gutter}); }
.mosaic__blocks--four & { height: calc(60% + #{$gutter}); }
.mosaic__blocks--five & { height: calc(100% + #{$gutter}); }
.block--no-text & { height: calc(100% + #{$gutter}); }
}
 
button.slick-arrow { color: inherit; }
[data-text-color="black"] & { color: #000; }
[data-text-color="white"] & { color: #fff; }
[data-text-color="gold"] & { color: #963; }
}
 
.mosaic__block {
position: relative;
height: calc(100% - #{$gutter});
 
@media screen and (max-width: ($med - 1)) {
height: 0;
padding-top: calc(100% - #{$gutter});
display: block !important;
 
.block--default-height & { padding-top: calc(75% - #{$gutter}); }
}
 
@media screen and (min-width: $med) {
margin: $gutter/2;
 
.mosaic__blocks--one & { width: calc(100% - #{$gutter}); }
.mosaic__blocks--two & { width: calc(50% - #{$gutter}); }
.mosaic__blocks--three & { width: calc(33.33% - #{$gutter}); }
.mosaic__blocks--four & {
width: calc(50% - #{$gutter});
height: calc(50% - #{$gutter});
}
 
.mosaic__blocks--four .mosaic__blocks--split & {
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
width: calc(50% - #{$gutter});
}
}
 
.mosaic__blocks--five .mosaic__blocks--split & {
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
width: calc(50% - #{$gutter});
}
}
}
}
 
.mosaic__block--collection,
.mosaic__block--product {
.svg-placeholder svg { min-height: 200px; }
}
 
.mosaic__block-link--video {
z-index: 5;
color: inherit;
.icon-play {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 50px;
height: 50px;
min-height: 50px;
padding: 4px;
text-align: center;
opacity: 1;
@include transform(unquote('translate(-50%, -50%)'));
}
}
 
.mosaic__block-image {
position: relative;
height: 100%;
display: block;
 
@media screen and (max-width: ($med - 1)) {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
 
.mosaic__block-bg,
.mosaic__image-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
 
.mosaic__image-bg--no-image,
.mosaic__block-bg--no-image {
.svg-placeholder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
 
svg { max-width: 200%; }
}
}
 
.mosaic__block-text,
.mosaic__image-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 16px;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: flex-start;
font-size: $font_bodytext_size * 1.285;
@include bodyFont;
 
@media screen and (max-width: ($med - 1)) {
font-size: $font_bodytext_size * 1.3;
}
 
[data-text-color="black"] & { color: #000; }
[data-text-color="white"] & { color: #fff; }
  [data-text-color="gold"] & { color: #963; }
 
p {
margin: 0;
font-size: inherit;
line-height: inherit;
}
}
0 Likes