I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
Related
I'm using css modules and I have a React component with two classes:
one - hashed with css modules
another one - not hashed because it is coming from another function (let's say it is "clear-class").
<div className={`${styles.hashedClass} clear-class`}>
qwerty
</div>
my scss file looks like this and it is not working.
.hashedClass {
...
&.clear-class {
background-color: green;
}
}
when I looked into the source with dev tools I noticed clear-class is getting hashed too.
Is there a way to mark in scss file that I want to apply styling to not hashed class?
Use :global() selector in class you don't want to hash
.hashedClass {
...
& :global(.clear-class) {
background-color: green;
}
}
Does CSS variables work in a Blazor component with CSS islolation files ?
When my component named Test.razor has no CSS isolation file and has the style set:
<h1 class="mh1">Test</h1>
<style>
:root {
--mblue:#0000ff;
}
.mh1{
color:var(--mblue);
}
</style>
Test is indeed blue.
However if I put the styles in a isolation file name Test.razor.css it does not work.
:root {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
The component Test resides in the index page:
#page "/"
<Test></Test>
What am I doing wrong?
The answer is yes, but not so sure that you can use :root in a css isolation file (the class is no longer called :root in a css isolation file -- it gets a random suffix with css isolation).
My approach has been as follows:
Use a wrapper element to provide a context to assign the css variables to.
Then use the variable in the class you assign to the relevant element.
Test.razor
<div class="test-wrapper">
<h1 class="mh1">Text</h1>
</div>
Test.razor.css
.test-wrapper {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
I receive a configuration JSON that has colors and the paths of the images that I must use in my CSS, I correctly set the variables in the html and it would have a result similar to this:
<html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
--c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png;
--c-primary:green;
--c-secondary:purple;">
I can use the color variables correctly, but I don't know how to use the image paths as background.
// Works
.my-html-component {
color: var(--c-primary);
}
// Error
logo {
background: url(var(--c-background-image));
}
When working with Angular and SCSS I understand that I could use some function that allows me to do what I need, but I don't know how to do it.
Instead of defining url in the attribute, define it as a part of the variable. Dont forget to add :root.
:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png);
}
.logo {
background: var(--c-background-image);
width:500px;
height:500px;
}
<div class="logo"></div>
I am using css modules, however a library I use in a component to append tweets with JavaScript adds some elements to my component in the following structure:
<div class='user'></div>
<div class='tweet'></div>
I want to now style these elements in my css module for the component, as follows:
MyComponent.css
.user {
/* styles */
}
.tweet {
/* styles */
}
However of course now my .user class changes to .MyComponent__user___HZWfM due to the hash naming in the webpack loader.
How can I set a global style in my css module?
According to the css modules docs, :global switches to the global scope for the current selector. e.g.
:global(.example-classname)
So this should work:
:global(.tweet) {
text-align: left;
}
:global(.user) {
text-align: left;
}
Or define a global block
:global {
.tweet {
text-align: left;
}
.user {
text-align: left;
}
}
Can use module class with static class with this way.
myStyle.module.css
.moduleClass_g1m59k:global(.StaticClass) {
background-color: orange;
}
Output will generate like this
.moduleClass_g1m59k.StaticClass {
background-color: orange;
}
Many people have struggled with this and there doesn't seem to be any one agreed upon solution. The one I have settled with involves some tweaking of your bundler and specifically addresses the need to import libraries as-is without having to wrap them or edit them manually.
In my webpack config I have set it to scan all files ending css except those within the 'node_modules' and 'src/static' folders. I import my libraries from here and they dont suffer the classname transforms so I am free to use regular classnames for global css and the className={styles.element} convention as usual for modular css (which will compile down to .component_element__1a2b3 or something similar).
Here is an example of a working production webpack config with this solution:
http://pastebin.com/w56FeDQA
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');