flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject [FlexJS] Support for CSS calc() function
Date Fri, 30 Dec 2016 08:04:06 GMT
I'm trying to use the calc() function [1] in my CSS like this:

.demo-card-wide.mdl-card {
    width: calc((100% - 50px)/3);
}

I'm using the calc() function to create 3 columns of equal width regardless
of browser size.

With FlexJS, I'm seeing a compile error:

C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(1):
col: 1 CSSTree.g: node from line 0:0 mismatched tree node: <mismatched
token: [@251,1846:1860='((100%  - 50px)',<5>,59:13], resync={
  width: calc((100%  - 50px)/3;
}> expecting I_DECL

<?xml version="1.0" encoding="utf-8"?>
^

C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(60):
col: 14
C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml
line 59:13 mismatched input '((100%  - 50px)' expecting BLOCK_END


C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml(60):
col: 31
C:\p\flexroot\git\flex-asjs\examples\flexjs\FlexTeamPage_MDL\src\main\flex\App.mxml
line 59:30 no viable alternative at character ')'

Can support for calc() be added to FlexJS?  Even though it is termed an
experimental feature, this has become quite common in the recent times [2]

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/calc
[2] http://caniuse.com/#feat=calc

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message