Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new test and minor fixes #1426

Merged
merged 1 commit into from
Oct 27, 2023
Merged

new test and minor fixes #1426

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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions fastn-js/js/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1269,7 +1269,7 @@ class Node2 {
const maskDarkImageString = maskDarkImageValues.join(", ");

if(maskLightImageString === maskDarkImageString) {
this.attachCss(propertyWithPrefix, maskLightImageString, false);
this.attachCss(propertyWithPrefix, maskLightImageString, true);
} else {
let lightClass = this.attachCss(propertyWithPrefix, maskLightImageString, true);
this.attachCss(propertyWithPrefix, maskDarkImageString, true, `body.dark .${lightClass}`);
Expand Down Expand Up @@ -1306,19 +1306,19 @@ class Node2 {
this.attachMaskSizeCss(value, vendorPrefix);
const maskRepeatValue = fastn_utils.getStaticValue(value.get("repeat"));
if(fastn_utils.isNull(maskRepeatValue)) {
this.attachCss("mask-repeat", maskRepeatValue);
this.attachCss("-webkit-mask-repeat", maskRepeatValue);
this.attachCss("mask-repeat", maskRepeatValue, true);
this.attachCss("-webkit-mask-repeat", maskRepeatValue, true);
} else {
this.attachCss("mask-repeat", maskRepeatValue);
this.attachCss("-webkit-mask-repeat", maskRepeatValue);
this.attachCss("mask-repeat", maskRepeatValue, true);
this.attachCss("-webkit-mask-repeat", maskRepeatValue, true);
}
const maskPositionValue = fastn_utils.getStaticValue(value.get("position"));
if(fastn_utils.isNull(maskPositionValue)) {
this.attachCss("mask-position", maskPositionValue);
this.attachCss("-webkit-mask-position", maskPositionValue);
this.attachCss("mask-position", maskPositionValue, true);
this.attachCss("-webkit-mask-position", maskPositionValue, true);
} else {
this.attachCss("mask-position", maskPositionValue);
this.attachCss("-webkit-mask-position", maskPositionValue);
this.attachCss("mask-position", maskPositionValue, true);
this.attachCss("-webkit-mask-position", maskPositionValue, true);
}
}
attachExternalCss(css) {
Expand Down
53 changes: 21 additions & 32 deletions ftd/t/js/68-mask.ftd
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,28 @@
-- ftd.container:
background.solid: red
mask.image: https://mdn.github.io/css-examples/masking/star.svg
width.fixed.px: 300
height.fixed.px: 300

-- ftd.color red-orange:
light: red
dark: orange

-- ftd.color yellow-blue:
light: yellow
dark: blue

-- ftd.linear-gradient lg:
direction: bottom-left
colors: $color-values
-- ftd.mask-multi mi:
image: https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg
repeat: no-repeat
position: center
size: cover

-- ftd.linear-gradient-color list color-values:
-- component icon:
caption ftd.color color:

-- ftd.linear-gradient-color: $red-orange
stop-position.percent: 40
-- ftd.container:
background.solid: $icon.color
mask.multi: $mi
width.fixed.px: 48
height.fixed.px: 48

-- ftd.linear-gradient-color: $yellow-blue
-- end: icon

-- end: color-values
-- ftd.color list colors: red, orange, yellow, green, blue, indigo, violet, cyan, magenta, lime, olive, maroon, purple, white, #e5e5e5, #ccc, #b2b2b2, #999, #7f7f7f, #666, #4c4c4c, #333, #191919, black

-- ftd.row:
width: fill-container
align-content: center
wrap: true

-- ftd.mask-multi mi:
image: https://mdn.github.io/css-examples/masking/star.svg
size.fixed.rem: 2
repeat: no-repeat
position: center
-- icon: $color
for: $color in $colors

-- ftd.container:
background.solid: red
mask.multi: $mi
width.fixed.px: 300
height.fixed.px: 300
-- end: ftd.row
Loading
Loading