Community Tip - Have a PTC product question you need answered fast? Chances are someone has asked it before. Learn about the community search. X
Hello friends,
is it possible to configure the Vuforia Studio to support native variables in css?
Something like this:
:root { .bg-red{ |
In present time must write unnecessarily complicated code because:
thank you for every post.
Tomas
Solved! Go to Solution.
Finally I found a solution for changing CSS values.
Functinon in .JS:
$scope.setCssPropertyFromJavascript= function(a, b) {
elm.style.setProperty('--CI-LEFT', a +'px');
elm.style.setProperty('--CI-TOP', b +'px');
}
In CSS first of all is required to put into the code /*csslint ignore*/.
Then we can start working with native variables:
/*csslint ignore*/
/// Defining variables in root:
:root {
--CI-TOP: 0;
--CI-LEFT: 0;
}
/// Using variables in class:
.cpopup {
position: fixed;
top: var(--CI-TOP);
right: var(--CI-RIGHT);
}
GL&HF with Studio
Tomas
Tomas,
I'm not sure CSS Custom Properties (native variables) can be used in Studio, however you can include SASS syntax in the Application STYLES file: the file will be built to a css file using a SASS processor.
So, you can do something like this:
$color: rgb(240, 240, 240); .bg-red { background-color: $color; opacity: 0.5; }
The CSS Custom Properties syntax is flagged by the parser as incorrect: I can't say whether that's just a parser issue or the processor itself doesn't support it.
SASS provides features such as:
HTH,
Alessio
Finally I found a solution for changing CSS values.
Functinon in .JS:
$scope.setCssPropertyFromJavascript= function(a, b) {
elm.style.setProperty('--CI-LEFT', a +'px');
elm.style.setProperty('--CI-TOP', b +'px');
}
In CSS first of all is required to put into the code /*csslint ignore*/.
Then we can start working with native variables:
/*csslint ignore*/
/// Defining variables in root:
:root {
--CI-TOP: 0;
--CI-LEFT: 0;
}
/// Using variables in class:
.cpopup {
position: fixed;
top: var(--CI-TOP);
right: var(--CI-RIGHT);
}
GL&HF with Studio
Tomas