I need to customize the color of the label for the Input field ( ant design ). but i couldn't change the color of it.
Inside the yellow box is the CSS I have added to the code but when I run and inspect the code (inside the red box) there is two .ant-form-item-label > label is there, the issue is the one I have added (inside the yellow box) is not working, other one (i think its the default one) is overwriting the one which I have written. how to overcome this
Hard to judge as no one will know how the project is set up. The correct way to overcome this is by checking the order of your scss imports, if your default login scss styles are located below your LoginStyles.scss then they will overwrite any of your sass styles. Simply move, shift your imports so that LoginStyles.scss is below defaults.scss i.e
#import 'default.scss';
#import 'LoginStyles.scss';
A dirty way to fix the issue is by assigning !important on your color but I would try getting your import order correct first as this stops messy conflicts
You can add !important rule. And there is no definition of that color in the files? The default label appearance can also be changed.
Related
I'm trying to implement a dark and light theme using bulma. The approach I was thinking of is to assign classes to elements dynamically using vue (e.g .dark-theme or .light-theme) and then use different colours depending on those themes. However, customising the bulma variables based on class selectors in main.scss doesn't seem to be working, for example:
.dark-theme {
$primary: /* some colour; */
}
.light-theme {
$primary: /* some other colour; */
}
#import "~bulma/bulma"
The closest question I could find was this one but the solution does not work for me as I need to modify the actual $ variables based on class selectors.
If my approach is stupid and there is a better one please let me know. Note that my bulma setup appears to be working correctly, and changing the variable outside of selectors works as expected.
You could compile two css files from the bulma scss files, one for dark mode & one for light mode. Then if dark mode is enabled just reload the page with the dark css file or use the method in the first comment to change theme without reloading.
Here it suggests swapping the $scheme-main & $scheme-invert values to generate a dark mode.
I do not have experience with Vue but I know that it would be possible to implement this in JavaScript.
I want to use its value as background in SCSS but it is not working. I tried color highlighter plugin and also checked settings for it but it is only working with hex code, rgb, rgba and name of color but not working with SCSS variable in WebStorm 2020.2
Sorry for my bad English.
What I see right now:
What I want to have:
For variables it is available as color boxes in the gutter area only for the moment.
https://youtrack.jetbrains.com/issue/WEB-14338 -- watch this ticket (star/vote/comment) to get notified with any progress.
just point out to the SCSS variables file where your color variable definitions lay at.
For instance:
#import "../abstracts/variables";
Once you include this reference at the head of each SCSS file you create, your color highlight extension installed in vScode would paint them just as in your variables folder.
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.
What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
I am making a form using bootstrap and I would like to make some of the text a "brand color" like you see in the buttons. I know about the text colors available using text-primary etc.
However, I would like to use the button colors for the text.
I tried this
<style>
em {
background-color: #brand-danger;
}
</style>
Also I found the default values for bootstrap colors here http://getbootstrap.com/css/#less but i just want to use their variable or class without manually using the hex value.
What is the way to use their color?
You'll need to create your own LESS/SASS source, tie it in with bootstrap, create your custom styles, then run it through the compiler. The variables, such as #brand-primary/$brand-primary, are only meaningful in the LESS/SASS languages.
And, since BS4 is going SASS, I suggest (if you're going down that path) you do as well.
Example (I'll use LESS since it's more common):
Download the Bootstrap LESS source
Create a new LESS stylesheet for your project and place it along side the others (such as bootstrap.less, mixins.less, etc.)
Add a reference to your new stylesheet within bootstrap.less (this can be done using the #import directive, but make sure to place it towards the bottom).
Compile your new styles.