My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment
Related
I need to change the default icon colour in Time pickers. but I don't know the way. If you can help me with this, It's really mean to me. Changes can see the below picture.
Use the class css-i4bv87-MuiSvgIcon-root:
.css-i4bv87-MuiSvgIcon-root{
color: red;
}
You can check this demo
I would like to change the appearance of the autocomplete component provided by MaterialUi when it is disabled.
They propose, I imagine, borderBottom: dotted. I would like it to look like the select, also disabled, that I show in the following example.
https://codesandbox.io/s/xenodochial-shtern-7icn9?file=/src/playground.js
I don't know how is the correct way to overwrite the property proposed by MaterialUi.
Any ideas will be welcome.
Add in your main css (for overwrite a rule it must be imported after mui):
.MuiInput-underline.Mui-disabled:before {
border-bottom: 0;
}
I have an Antd checkbox that I'm trying to make larger, alter the thickness of the box itself and change the color to black but every style I apply creates a second square that sits over the checkbox and doesn't change the checkbox itself. Does anyone have any ideas on how to do this?
Figured this out by using &&&{border: 2px solid ${({ theme }) => theme.colors.black} the triple ampersand allows you to add more specificity when working with mixed styled components like mine.
Here is my fiddle:
https://jsfiddle.net/jemrfomy/
Once I click on a checkbox, it should change that particular tr's background color using the highlight class below:
.ui-table-highlight {
background-color:#ffefbb;
}
I tried several solutions on stackoverflow but I think it perhaps is a problem in my css?
Yes its a problem with the hierarchy of your highlight CSS class it should be:
.ui-table tr.ui-table-highlight {
background-color:#ffefbb;
}
As ".ui-table tr:nth-child" will override it otherwise
Just add !important after the color in your css as
.ui-table-highlight {
background-color:#ffefbb !important;
}
Updated your fiddle
https://jsfiddle.net/jemrfomy/1/
Best of luck for future :-)
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)