I'm wondering if it's possible to use media queries with CellLists. For example:
interface MyStyle extends Style {
}
public interface MyResources extends Resources {
#Source({ Style.DEFAULT_CSS, "MyStyle.css" })
MyStyle cellListStyle();
}
And then I have the CellList CSS file "MyStyle.css" :
/* cell flow basic css style */
.cellListWidget {
}
.cellListEvenItem {
}
.cellListOddItem {
}
.cellListEvenItem:hover,.cellListOddItem:hover {
}
.cellListKeyboardSelectedItem,.cellListSelectedItem:hover {
}
.cellListSelectedItem {
}
Is it possible to have something like this
#media ( min-width : 768px) {
.cellListEvenItem {
height: 90px;
}
}
inside MyStyle.css ? I tried and it doesn't seem to recognize it (no errors or warnings, but it doesn't work either).
I used it like this:
new CellList<MyObject>(listCell,
(CellList.Resources) GWT.create(MyResources.class));
If the above is not possible is there any workaround to achieve this?
Thank you.
CSS Resource didn't allow to use CSS3 media queries.
You must use the new stylesheet compiler named GSS in the GWT version 2.7.
You must update your project to the version 2.7.
In your gwt.xml add this line for activate the new GSS :
<set-configuration-property name="CssResource.enableGss" value="true" />
And rename your css file to MyStyle.gss
You may need to change some CSS Resource code :
http://www.gwtproject.org/doc/latest/DevGuideGssVsCss.html
You can learn more in the presentation from last GwtCreate :
https://drive.google.com/file/d/0BwVGJUurq6uVNGgtOWtOdy0wRzQ/view
Related
We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.
The ask is to change those as per client branding. So if ClientA logs in, they should start seeing those colors as #FF0000 and if ClientB logs in, they need to see those colors as #00FF00.
Other than inline styling every html with style="color:{{clientColor}} can you help suggest the best way to do this?
Thank you!
You can try to use :root selector and variables in it, and for body tag just overwrite these root variables, working example here: stackblitz
styles.scss:
:root {
--fontColor: #000;
}
.theme-dark {
--fontColor: red;
}
app.component.ts
export class AppComponent {
theme = 'theme-dark';
toggle(): void {
const body = document.body;
if (body.classList.contains(this.theme)) {
body.classList.remove(this.theme);
} else {
body.classList.add(this.theme);
}
}
}
app.component.html
<p>
Start editing to see some magic happen :)
</p>
<button (click)="toggle()">Toggle color font</button>
app.component.scss
p {
font-family: Lato;
color: var(--fontColor);
}
You can use this:
[style.color]="clientColor"
In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.
For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].
If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.
My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?
Because we can't modify tabs with custom css, so I have to add it to variables.scss...
if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value
consider this example
style.css
:root {
--color : red;
}
* {
color:var(--color)
}
AppComponent
colorList = ['green', 'blue'];
updateColor(color) {
document.documentElement.style.setProperty(`--color`, color);
}
Template
<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>
stackblitz demo 🚀🚀
sass variable are going to compile at build time to there values so they are not reusable at run time
For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().
<div class="progress" [style.height]=currentLevelPercentage>
This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.
For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).
in tabs-page.scss :
:root {
--color1: white;
--color2: white;
--color3: white;
--color4: white;
}
super-tab-button:nth-of-type(1) {
background-color: var(--color1)
}
super-tab-button:nth-of-type(2) {
background-color: var(--color2)
}
super-tab-button:nth-of-type(3) {
background-color: var(--color3)
}
super-tab-button:nth-of-type(4) {
background-color: var(--color4)
}
in tabs-page.html : do nothing particular
in tabs-page.ts :
constructor(public navCtrl: NavController, public navParams: NavParams) {
document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
}
Thank you #malbarmawi !
Just an idea about changing style dynamically. here is what i am using
<span [style.width]=foo></span>
Change the value of ‘foo’ in your .ts file
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding
Simply try this
[ngStyle]="{'background-color': item.color}"
Please help me to fix this issue. I have two files BaseLayout.cshtml and the second one is ExtendedLayout.cshtml file for overriding the base content of HTML CSS.
I need to run the extended section of extendedLayout.cshtml file if same section is present in override otherwise base would work. Same as OOPS override concept.
Base Layout CSS Code
#section HeadCssSection {
#*Base Layout CSS *#
#Styles.Render("~/Content/BaseCSS")
#RenderSection("HeadCssSection")
}
Extended Layout CSS Code
#section HeadCssSection {
#Styles.Render("~/Content/ExtendedCSS")
#RenderSection("HeadCssSection")
}
Please help me to fix this issue
You can use isSectionDefined() like following
#if (!IsSectionDefined("HeadCssSection")) {
RenderSection("HeadCssSection")
}
In Base layout, write the code like this.
#section HeadCssSection {
#if (IsSectionDefined("HeadCssSection"))
{
#RenderSection("HeadCssSection")
}
else
{
#Styles.Render("~/Content/BaseCSS")
}
}
Define this HeadCssSection in extended layout so that it will take extended layout code. And if you want to run the code of base layout, then put the code in else condition.
I have a dynamically Polymer 2.0 application, but it doesn't seem to work with #apply.
I have CSS variables and mixins:
<custom-style>
<style>
html {
--content-background-colour: #fff;
--content-foreground-colour: var(--paper-grey-700);
--content-mixin: {
background-color: var(--content-background-colour);
color: var(--content-foreground-colour);
}
}
.content-one {
background-color: var(--content-background-colour);
color: var(--content-foreground-colour);
}
.content-two {
#apply --content-mixin
}
</style>
</custom-style>
Then I have themes that users can select and apply:
const theme = {
"--content-background-colour": "var(--paper-grey-800)",
"--content-foreground-colour": "var(--paper-grey-100)"
};
Polymer.updateStyles(theme);
The problem is that only the direct variables update, those set with #apply don't. class="content-one" works, class class="content-two" fails.
What am I doing wrong and how do I dynamically change the styles of mixins?
Polymer still seems to be using same polyfill for variables and mixins that they were using in 1.x, which means dynamic style updating should only be limited to variables and should not work for mixins.
One way you can achieve dynamic styling is by adding and removing classes.
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.