I have the following css styles defined in my component css file:
::ng-deep .mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
background-color: red !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: white !important;
}
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: white !important;
}
::ng-deep
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
.mat-form-field-outline-thick {
color: red !important;
opacity: 0.8 !important;
}
::ng-deep .mat-input-element {
caret-color: red !important;
}
::ng-deep .mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
caret-color: red !important;
}
::ng-deep .mat-form-field-label {
color: white !important;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: white !important;
}
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: red !important;
}
::ng-deep .mat-select-value-text {
color: white !important;
}
::ng-deep .mat-select-arrow {
color: #fff !important;
}
It works well, but all matinputs (also e.g. matselects) in the component are colored, I would like to only color specific matinputs. Even in other components loaded afterwards, the matinputs also picks up these color changes.
What is the way to control this for specific elements?
I solved it by going from css to scss and put a ".custom-mat" around the css and in the template added a div with the class surrounding the mat fields I wanted the styles to effect.
I'm trying to change the background-color when my Material Angular Tab is active.
I check in html inspect and i finded the class:
.mat-tab-label-active
But my background-color property only work when i use ::ng-deep. I'm trying to avoid it because can be depreciated some day.
is working with ::ng-deep:
::ng-deep .mat-tab-label-active {
background-color: #0b7f66!important;
opacity: 1!important;
color: white;
}
I tried some things:
encapsule my component in a div with a class:
<div class="testing-encapsulation">
<mat-tab-group animationDuration='0' mat-stretch-tabs class="mt-3">
...
And in my component scss:
.testing-encapsulation {
.mat-tab-label-active {
background-color: #0b7f66!important;
opacity: 1!important;
color: white;
}
}
Didn't work too.
There's a way to do this without set ViewEncapsulation.none() and ::ng-deep?
put this in style.css to make all material tabs
.mat-tab-label-active {
background-color: #0b7f66 !important;
opacity: 1!important;
color: white;
}
for spesific tab
<mat-tab-group class="testing-encapsulation" animationDuration='0' mat-stretch-tabs class="mt-3">
in style.css
.testing-encapsulation {
.mat-tab-label-active {
background-color: #0b7f66 !important;
opacity: 1!important;
color: white;
}
}
How i can do this?
// style.scss
$primary-color: #dc4545;
div{
background : $primary-color;
}
Try to do this:
div{
background : var(--primary-color)
}
Is this possible in any way?
You can define global variables on the :root:
:root {
--primary-color: #dc4545;
}
div {
background: var(--primary-color);
}
Edit: Or were you trying to mix and match?
$primary-color: #dc4545;
:root {
--primary-color: #{$primary-color};
}
div {
background: var(--primary-color);
}
First of all :root and html selector basically same thing but :root with higher specificity than html selector
html {
}
/*****exactly :root and html selector are same but with higher specifity(:root)*****/
:root {
--color-primary-light: #FF3366;
--color-primary-dark: #BA265D;
--bakcground-color: #fff;
--default-font-size: 16px;
--color: blue;
}
/****************How to implement***************/
.root-selector {
background-color: var(--background-color);
font-size: var(--default-font-size);
color: var(--color);
}
<div class="root-selector">
Thank you buddy
</div>
Let's say we have the following CSS default rule X, declared in a WordPress child theme:
.btn { background: url("btn.jpg"); }
And this rule Y, declared in commercial parent WordPress theme:
.btn:hover { background: gray; }
Can I somehow tell the browser "ignore Y", so that nothing will happen when hovering the .btn element?
I think your only option is overriding the value of .btn:hover with the same value as .btn:
.btn:hover { background: url("btn.jpg"); }
.btn { background: red; }
.btn:hover { background: blue; }
/* ... */
.btn:hover { background: red; }
<div class="btn">Foo</div>
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}