Currently material select form field uses an arrow down which I believe it is done via css.
I would like to replace it with a different type of arrow, and I would like advice on what would be the best way to achieve this.
Here's what I am hoping to switch the original one for:
the original one is a solid triangle as seen in https://material.angular.io/components/select/overview
Thank you for any advice!
You have to understand something: The solid triangle for the mat-select, is not an image, its just pure CSS (or SCSS in this case).
Its just like how you create triangles and circles using CSS. Same procedure.
If you want to change the style, color etc, you can do it in the following way:
:host {
::ng-deep
mat-select.mat-select
> div.mat-select-trigger
> div.mat-select-arrow-wrapper
> div.mat-select-arrow {
color: red !important;
}
}
Here i changed the 'color' property. But you can play around with shapes of triangles too.
Here is the stackblitz: https://stackblitz.com/edit/angular-xkkagv?file=src%2Fapp%2Fselect-overview-example.scss
If you want it without ::ng-deep, you can use ViewEncapuslation.None in your component.ts file and play around too, which, in hindsight, may not be a good solution at the moment.
For example, I have the CSS code where I use the white colour a lot.
:root {
--color-white: #fff;
}
My question is whether it worths to declare colours like 'black' and 'white' as variables or I shall use default white and black CSS colour names? Which way is more efficient?
I doubt if efficiency is the driving force behind the use of CSS variables in the way suggested.
There is no need, and indeed it could cause confusion, to rename existing CSS colors.
CSS variables though make it easier to change things. For example, if you are trying out a theme with text in black on white and if there are several places in your CSS where you need to set color or background-color you could define --col: black and --bg: white and then use var(--col) etc in the relevant places in the style sheet.
If you then want to change them, all you have to do is redefine --col and --bg.
I have a small question that can cause me a problem, I have a project where I set a variable to a color using SASS, here is here is my SASS file __colors.scss :
$wild-watermelon: #f55463;
When I use this color, I do something like this :
.container {
background-color: $wild-watermelon;
}
But I have something with I need to use the color but a little bit transparent, to do so, I have to use rgba(number, number, number, 0.75).
But I don't find this solution a propper one because if I want to change my theme coloring, I have to make changes in multiple files manually, not just one by changing my global variable.
I readed once a proposition, a solution let's say, suggesting that I use var function and I do something like this :
.container {
background-color: rgba(var($wild-watermelon),0.75);
}
It did not work of course, that is why I am here.
Any help would be much appreciated.
Try:
$wild-watermelon: #f55463;
.container {
background-color: rgba($wild-watermelon, 0.75 );
}
If you want to change the color, just change the hex code of the variable.
I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.
In stylus is it possible to change a variable based on the class of the parent?
I'm trying to create a variable which will change the colours from white to black depending on it being inside something with an '.inverted' class. I only want the variable to change though (so I can use it for any colour-based property).
If it were written in jQuery it would look like this:
$lightswitch = ($(this).parents('.inverse')) ? '#000' : '#fff';
I imagine there is a mixin or something I could write for this but I can't quite get my head around how to do it.
Ugh. I don't think that can be done with CSS or stylus. You'll have to use a jQuery solution for that.
Gotta wait for css4's "parent selector!" $E > F
Stay awesome!
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.