I have a lot of color variables on SCSS and HTML. Each color corresponds with an HTML page and I need to color elements and text. Anyone how to do it without creating a lot of classes or styles?
Example:
$color-linea1: rgba(58,167,226); corresponds with elements in metro-linea1.html
$color-linea2: rgba(196,29,39); corresponds with elements in metro-linea2.html
$color-linea3: rgba(250,212,60); corresponds with elements in metro-linea3.html
Your variables should correspond with colors, not with pages. Name your variable after the color value it contains, and then use that variable in your style rules. If you need different pages to have different colors, then create page-specific style rules, not page-specific variables.
Related
I am composing one SVG out of N other SVGs that are given by users by adding all of the SVGs into one container.
The issue is that when the different SVGs have inline <style> elements which define the same class names, the browsers seem to load them like normal CSS where each declaration overrides the previous ones.
For instance if SVG 1 has a class name "st0" and SVG 2 has a class name "st0", both will use the second one.
Due to this, my idea for now is to, for each SVG, iterate over all of the nodes, find <style> nodes, parse the CSS using some library, add some unique identifier to all class names, add the same identifier to all attribute class names in the SVG, and then the rest is normal.
I am mostly wondering if there is some easier way to do this with SVG.js, because I couldn't find anything so far and it's quite hard to see what's even possible because the TS information is missing in a lot of places.
I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.
for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.
I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.
Thanks in advance.
Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.
Check out this SO post: How to use less in Angular component without CLI
Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.
You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.
I try to put two different styles in two distinct p:clock element in the same page.
This way described in the User Guide under "skinning"is to use .ui-clock in css page.
But this will apply the same style on the the two p:clock !
How can I define two different styles?
The problem is that p:clock has no styleclass or class attribute so even if I overide the primesfaces css I won’t be able to define two different style.
I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external style sheet, I'm using .c-headline-1 and in an internal style sheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal style sheets had higher specificity than external style sheets or no?
External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order
The last one declared gets the highest priority
Ultimately the order is the following
Inline style (inside an HTML element)
External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
Browser default
To learn more you can check the Cascading Order section of this page
https://www.w3schools.com/css/css_howto.asp
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.
Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.
Inline styling
Internal stylesheets (style withing head element)
External stylesheets (link href="style.css" etc.)
Please correct me if I'm wrong.
With Polymer (or custom elements in general), I've seen most examples use a separate <link> element in each element to style it, but this clearly doesn't scale. What's the usual way to deal with this? Can you just have 1, or a small number of css files, referencing the same file in multiple element definitions?