I would like to change the color of the icon from
to this :
I know that it's not .Mui-active nor .Mui-completed , I tested .Mui-disabled but it doesn't work
here is the link to the sandbox :
https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-u2yt0e?fontsize=14&hidenavigation=1&theme=dark
Any help ?
This one was a bit tricky, I had to add quite a few styles to achieve that.
First I've given every icon a round and visible border. The second style object ensures that the icon color is white and it excludes checked icons since we want them to look like usual.
".MuiSvgIcon-root": {
borderRadius: "50%",
border: "1px solid #1976d2"
},
".MuiSvgIcon-root:not(.Mui-completed)": {
color: "white"
}
Next the text is being filled with the same color as the border and I made it more bold to be more readable.
".MuiStepIcon-text": {
fill: "#1976d2",
fontWeight: 500
}
Last but not least the active icon should still remain the same so I've reduced the margin from -4px to -3px since the border adds 1px in every direction. The check icon should remain white so thats styled with fill: "white".
".MuiSvgIcon-root.Mui-active": {
color: "#1976d2",
padding: "3px",
borderRadius: "50%",
border: "1px solid #1976d2",
marginY: "-3px"
},
".Mui-active .MuiStepIcon-text": {
fill: "white"
}
And this is the result:
Live Demo
Related
I'm creating an application for a paint shop. They have a lot of colors (> 4000)
To show the color, I create a badge with the color as background color.
.custom_badge {
background-color: var(--bg);
border-radius: 10px;
height: 25px;
padding: 0px 10px;
color: white;
font-weight: 500;
}
If the background color is as example yellow, I like to show the text in black. If the background color is dark, i like to show the text color white.
I searched for inherit.
Is there a way with inherit?
Or is there an onther solution?
I don't think there is a way in CSS to do this, but it can be done with Javascript :
let RGB = window.getComputedStyle( document.body ,null).getPropertyValue('background-color');
RGB = RGB.replace(/[rgb \(\)]/gim, '');
RGB = RGB.split(',');
let textColor = (RGB[0]+RGB[1]+RGB[2]<300) ? '#fff' : '#000';
console.log(textColor);
I'm doing some shapes in react with CSS, in particular, a ring with a big border and I found a annoying issue in it: a default borderline the circle I made. I tried with "outline: none" or "border: none", but I need a border. I don't know if is a browser issue o what.
This is my React component:
export default function Ring(props) {
return <div className={`ring ${props.size} ${props.color}`}></div>;
}
And here my styles for it:
.ring {
border-radius: 50%;
z-index: -1;
&.medium {
height: 500px;
width: 500px;
border-width: 80px;
}
&.main {
border-color: $main-color;
}
&.gray {
border-color: $soft-gray;
}
}
How can I remove this?
The border you are seeing is driven by the default focus that is being highlighted by the browser by the outline styling.
You can add a CSS rule of outline:none; to remove this focus behavior, your border will still maintain but you wouldn't have the blue outline and the element would no longer trap focus with the blue border.
I would like to hide the indeterminate state icon (minus icon) and use background color instead.
At the moment, I can change the background color during the indeterminate state using the css code below. However, the minus icon is still visible. I know I can do display: none; but that will not let the background color show.
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background: blue; }
You can use the following CSS to hide the minus icon:
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark {
display: none;
}
This means you'll get a solid background colour on the checkbox when it's in the indeterminate state, and this will change to a tick when all child checkboxes are checked:
Please see this StackBlitz for a demo.
I have the following problem. I have a flex 4.1 project with a css file that contain following components:
global {
color: #FFFFFF;
font-family: Verdana;
font-anti-alias-type: advanced;
modal-transparency-color:000000;
focusColor: #b3001e;
errorColor: #b3001e; }
and then I have the specific style for a text input:
s|TextInput, s|NumericStepper, astra|IPv4AddressInput {
color: #000000;
disabledColor: #555;
contentBackgroundColor: #e5e5e8;
borderColor: #000000; }
but sometimes it happens that the s:textInput has a problem. the color of the characters you enter have sometimes the color of the Global style.
so you expected a black colored font but you see a white color font.
does anyone have a idea how to solve this or explain why this is happening?
You can force it to override using:
color: #000000 !important;
I have a problem in one of my GridView headers in my ASP.net website. I want to show white text on green background color in my header cells. I also want to keep my border color on those cells black.
Here is the CSS I'm using for the headers:
.myHeaders
{
color: White;
font-size: 7pt;
background-color: Green;
border-color: Black
}
I'm referencing it in the Gridview with the HeaderStyle property:
<HeaderStyle CssClass="myHeaders" />
This works fine in Chrome and IE, but in firefox the border-color gets set to the same value as the forecolor! How can I get this to work?
Thanks!
Firefox does not support border-color on table elements. Just use the border shorthand property (border: 1px solid black). That should also work in other browsers.
Why don't you just right-click your GridView and choose "AutoFormat" so that you can customize colors for your GridView. ?
Using border-color by itself apparently does not work. You should use at least border-style to set the border first.
.myHeaders
{
color: White;
font-size: 7pt;
background-color: Green;
border-style: Solid;
border-color: Black
}
You're settings the color of a row or tr-tag. This means that any child element inside the row inherits this color. Firefox follows the CSS-rules, which dictate that all four borders should have a color defined, if they don't, the default color will be used, i.e. color: red.
.myHeaders {
color: Red;
}
This is why every border turns red (or white, in your case).
You should set the border color of any sibling to inherit. This will force Firefox to ignore the color and find the closest border-color definition in it's inherited tree.
tr.myHeaders > td, tr.myHeaders > th {
border-color: inherit;
}
I ended up adding:
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color: Black";
}
In the RowDataBound event of my GridView. This worked.
I got the idea from:
http://www.codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx
I'm unhappy that I had to use a code-behind solution, but don't feel like spending more time on it right now! Thanks for all your posts!