I would like to style the p-dialog's Close Icon. The default 'x' button is in grey color and I would like to change it to white color with font-size increased. I found that we could use .p-dialog-titlebar-close but haven't been successful. I used it in the following way-
::ng-deep .p-dialog .p-dialog-titlebar-close {
color: #fff;
font-size: 16px;
}
Please let me know how can I change the 'X' to show in white color. ( Since it currently is barely visible). Greatly appreciate any help. Thank you in advance.
Attaching the screenshot for detailed explanation.
I tested with the following and it works as expected:
:host ::ng-deep .p-dialog-header-close-icon {
color: red;
font-size: 2rem;
}
Related
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
I'm having this problem related to click events in angular.
My application is a tic-tac-toe app.
My application uses angular materials.
The problem: when a user clicks a button on the board, the click event seems to be leaking into a nearby button on the board. The following image demonstrates what I'm talking about.
Image of problem. As you can see, the button in col 1 row 2 was activated even though that button was not clicked. Below is a blitz of my application.
https://stackblitz.com/github/flashato9/tic-tac-toe
It would be great if I can get some help on this problem. Thanks!
really nice question =)
So the problem seems to be, that the mat button somehow responds to the change of the text cursor position.
if you change your square.component.html like so:
<div class="grid-button"><span>{{value}}</span></button>
and change the square.component.scss like so:
.grid-button{
width: 100%;
height: 100%;
background-color: rgb(91, 158, 91);
font-size: 10rem;
border-radius: 4px;
text-align: center;
padding: 50px;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
}
.grid-button:hover {
background-color: green;
}
when you now click a "button" you clearly see, that the cursor jumps to the next Field. But a simple div does not seem to react with :hover to that.
You can additionaly to the above CSS add user-select: none; to the .grid-button to not show the cursor or maybe a plain button (not Material) would also work.
Long story short: I would recommend not to use a Material Component if you change most of it's apperance, because there will probably allways be sideeffects.
Problem Solved
Here is the link posted by Vimal Patel in the comments.
in my current project I encountered the problem that I need to change the color of the underline with SCSS, before I did this using the palette in themes.
For now I got a line to display using the following code.
.input {
border-bottom: 1px solid red !important;
}
But this is obvisously only a workarround. has anyone any idea how to disable the underline (the snippets utilizing the input props didn't work for me) or changing the color palette?
Edit:
I found a solution. I just added
div::after{
border-bottom: 2px solid red !important;
}
div::before{
border-bottom: 1px solid grey !important;
}
to the code and now it works :D
Kind regards,
Frodo
I've tried changing the Background-color of tristatecheckbox as shown below. The said codes will work if I directly update the CSS in the web console. But when I applied it in my codes. it won't work.
.fa-check:before {
Background-color: green !important;
}
.fa-close:before {
Background-color: red !important;
}
Can anyone, help me with this?
You need to prepend your CSS with :host >>>:
:host >>> .fa-check::before {
background-color: cyan !important;
}
:host >>> .fa-close::before {
background-color: magenta !important;
}
Note that I've changed the colors since green & red are the defaults.
Plunker example
I am working on md-slider, Here my question is how can we have the color of the slider as own, as default the having two classes md-warn(for red), and md-primary(for white). I want white color slider.
How can I achieve this?
Visores' answer was very useful, however this didn't quite match the functionality of the default slider insofar as the right hand side of the md-thumb ends up the same colour as the rest of the slider. By changing the
.md-track to .md-track-fill, you will match the default functionality. The code will therefore look as follows:
#red-slider .md-thumb:after, #red-slider .md-track-fill{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
CodePen example
you can achieve a custom color by overwriting the css-class of the slider.
codepen example
#red-slider .md-thumb:after, #red-slider .md-track{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
css classes to overwrite:
.md-thumb:after
.md-track
.md-focus-thumb
.md-focus-ring
I didn´t tested all the functionality of the slider. But basically you have to overwrite all the styles from the slider. You can find them at the git repo
Additional, you can custom the color of balloon on the md slider by this code:
#red-slider .md-sign, #red-slider .md-sign {
background-color: blue;
border-top-color: blue;
}
#red-slider .md-sign:after, #red-slider .md-sign {
border-top-color: blue;
}
This can change the color of balloon as you neeeded