I want to display a disabled-but-giving-feedback button like in this answer using a block icon from material icons. It works, however, it'd look much better when the icon was bolder.
Can I make an imported icon look bolder? I guess, modifying the pen width in the SVG would do, but don't know how to do it (especially, whether it's possible "from the outside").
You need to set stroke and stroke-width CSS property on SVG element holding that icon.
For example:
stroke: black;
stroke-width: 2;
makes your icon black, and two times the line width.
Related
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.
My CN1 app features a FloatingActionButton. I need to change its background color. My styles are all defined in CSS. So this one is :
FAB {
background-color: #80ccc4;
}
And if I create the FAB like FloatingActionButton.createFAB(FontImage.MATERIAL_POWER_SETTINGS_NEW, "FAB"); it results in a FloatingActionButton with an added "hyphen" on top of it :
On the contrary if I create the FAB without providing a style and then programmatically set the background color like fab.getAllStyles().setBgColor(0x80ccc4); then I get the expected FAB :
So what should I set in the css file to remove this unwanted "hyphen" ?
Any help appreciated!
You are styling FAB and not FloatingActionButton which is the right UIID for that. If you used setUIID that might be problematic on a FAB as the content is set later.
The reason this is happening is a bit of a problem with CSS. We get the background color of the FAB from the RoundBorder but transparency should be 0 for the icon in the center.
Unfortunately in CSS you can't express both a background color and 0 background transparency. I don't think this is solvable in the CSS so I'll add a special case to the FloatingActionButton that should workaround this.
I was having a problem rendering text in a TabNavigator with a transparent TabBar, because I wanted to show the background Image. That image was mostly red, and I wanted pure white text for the labels, but they were coming out pink. The problem was that RN was blending then background colour with the text colour. Essentially, RN was not giving the text view 100% opacity.
To fix this, I added
backgroundColor: '#ffffff00',
opacity:100
to tabStylein tabBarOptions.
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.
I'm creating a responsive site with a gallery composed of fluids images . For this, I must use css img {max-width: 100%;}. I also want a fade effect on hover.
Does anyone have a solution to this?
So far, all the solutions I've tried, does'nt work with css img {max-width: 100%;}
Thank you very much for your help!
Define image width also along with its max-width. And it must be in pixels or em's.
You don't need to keep max-width or min-width in %'s.
Browser renders from its original width or height value. As
This is for example.
img{
width:50%;
height:30%;
max-width:300px;
min-height:100px;
}
And every images'll be flexible with viewport.