While using LinkContainer in react-bootstrap, the "active" <NavDropdown.Item /> gets blue as it's background-color.
for.e.g:
<NavDropdown>
<LinkContainer to="/profile">
<NavDropdown.Item>profile</NavDropdown.Item>
</LinkContainer>
<LinkContainer to="/">
<NavDropdown.Item>
logout
</NavDropdown.Item>
</LinkContainer>
</NavDropdown>
How do I remove it and replace it with my own color ?
I tried doing this :
a .active.dropdown-item {
background-color: white
}
Solution(let's assume that we want to add green as the background):
For the moment you click the link i.e to show the active link:-
a.dropdown-item:active{
background-color: green;
}
For the color to stay on the active NavDropdown.Item:
a.active.dropdown-item {
background-color: green;
}
OR
you could add activeStyle prop in the LinkContainer
<LinkContainer
to="/profile"
activeStyle={{
backgroundColor: "green",
}} />
I have no experience with React-Bootstrap but I guess it's getting the pseudo-class :active.
So you have to do something like:
a:active {
background-color: white
}
https://www.w3schools.com/cssref/sel_active.asp
Related
I would like to change the radio button color in angular material the default value is 'accent' and I would like to set this value #ff9800, I found this solution in SO, Angular 6 Material - Hues and How to change the color of mat radio button , but the .mat-radio-outer-circle its value remained in accent ,my question is how can i change its value (#ff9800) when the radio button is checked.Here is my css and html code.
/* border-color:rgb(66, 134, 244); */
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
color:#ff9800;
border-color: #ff9800;
}
::ng-deep.mat-radio-button.mat-accent .mat-radio-inner-circle{
color:#ff9800;
background-color:#ff9800;
}
::ng-deep.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color:#ff9800;
}
<mat-radio-group aria-label="Select an option" class="actions" [(ngModel)]="action"
[ngModelOptions]="{standalone: true}">
<mat-radio-button value="Compile" checked ="true" color="accent">Compile</mat-radio-button>
<mat-radio-button value="Check Syntax" color="accent">Check Syntax</mat-radio-button>
</mat-radio-group>
You should use the !important rule after the value of the border-color and background-color like the following code:
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #ff9800 !important;
}
//before checked:
::ng-deep .mat-radio-button.mat-accent .mat-radio-outer-circle {
border-color: green !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: green !important;
}
//after checked:
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-outer-circle {
border-color: #ff9800 !important;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-inner-circle {
background-color: #ff9800 !important;
}
Is there a possibility to change the default color of a checked checkbox (mat-pseudo-checkbox-checked):
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
I have tried:
.mat-pseudo-checkbox-checked {
background-color: #00f;
}
but it has no impact.
Just add class="mat-primary" inside <mat-list-option>
<mat-selection-list>
<mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
Output:
I am not sure but you can try using this
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
}
to
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
.mat-option {
color : mat-color($foreground, text);
}
}
for details, you can also check the following link
https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss
.mat-pseudo-checkbox{
background-color: red;
}
this worked for me, just apply background-color property to checkbox class, remove checked class
Checking in with Material v 7.3.6, similar to Sathwik, I had success with
.mat-pseudo-checkbox-checked {
background: #FF0;
}
Adding -checked at the end ensures that the checkbox is only colored in when it is actively checked, otherwise the box is always that color (which may be your goal?). Note that I had to include this style in the highest level styles.css file instead of the individual component style file for it to successfully work.
If you have multiple selection lists, you can apply the styles to the desired lists with classes. Furthermore, you can apply different colors to each checkbox option within a selection list using dynamically generated classes too! Example here: https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts
You can see that the first selection list has the basic styling, whereas the second list (wrapped in unique-selection-list class) has different styling with each option having a unique color (generated by applying unique classes to each option with the *ngFor loop.
// HTML file
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
<p>
Options selected: {{shoes.selectedOptions.selected.length}}
</p>
<br>
<hr>
<mat-selection-list #colors>
<div class="unique-selection-list">
<div *ngFor="let color of colorsList" [class]="color.className">
<mat-list-option
[value]="color.displayName">
{{ color.displayName }}
</mat-list-option>
</div>
</div>
</mat-selection-list>
// component.ts file constants
typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
colorsList = [
{
hexCode: '#00F',
displayName: 'Blue',
className: 'blue-checkbox',
},
{
hexCode: '#F0F',
displayName: 'Fuchsia',
className: 'fuchsia-checkbox',
},
{
hexCode: '#0F0',
displayName: 'Green',
className: 'green-checkbox',
},
];
}
// styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
background: #00F !important;
}
.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
background: #F0F !important;
}
.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
background: #0F0 !important;
}
SRC/STYLES.SCSS
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
If you have other groups you can do this
HTML
<mat-selection-list ...>
<mat-list-option formfiltros-operaciones ...>
{{operacion.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-inmuebles ...>
{{inmueble.nombre}}
</mat-list-option>
</mat-selection-list>
<mat-selection-list ...>
<mat-list-option formfiltros-localidades ...>
{{localidad.nombre}}
</mat-list-option>
</mat-selection-list>
SRC/STYLES.SCSS
Fix padding
.mat-list-option {
.mat-list-item-content {
padding: 2px !important;
.mat-list-text {
padding: 2px !important;
}
}
}
apply pseudo-check color to 'formfiltros-operaciones' group
.mat-list-option[formfiltros-operaciones] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: darkorange;
}
}
}
apply color for pseudo-check in 'formfiltros-inmuebles' group
.mat-list-option[formfiltros-inmuebles] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: green;
}
}
}
apply color for pseudo-check in 'formfiltros-localidades' group
.mat-list-option[formfiltros-localidades] {
.mat-list-item-content {
.mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
background-color: blue;
}
}
}
it looks like this
I am using md-slider of Angular Material version 2.0.0-beta.8
I have selected the indigo-pink theme and imported it in style.css
I am pretty happy with what I have, but I would like to change just the background color of the slider handle and of the thumbnail.
Apparently this is set by the following css code defined in the indigo-pink.css file:
.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}
In fact, if I change indigo-pink.css I obtain what I want, but this is clearly not the right way.
So the question which is the right way to change just slider handle and thumbnail color, and for the sake of generality, how to change only some of the attributes of the classes defined in a theme of Angular Material.
You can use ::ng-deep override any css class from the prebuilt stylesheet.
To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.
css to customize md-slide-toggle:
/* CSS to change Default/'Accent' color */
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: blue; /*replace with your color*/
}
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: skyblue; /*replace with your color*/
}
/* CSS to change 'Primary' color */
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: green;
}
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ff99ff;
}
/* CSS to change 'Warn' color */
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: red;
}
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ffe066;
}
Plunker example
::ng-deep is the way to override theme classes, as stated by Nehal.
It seems though that it does not work if you concatenate more classes. In other words the following code does NOT work
::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
background-color: black;
}
while the following version of the code actually works and overrides effectively the values set in the theme css
::ng-deep .mat-accent .mat-slider-thumb {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-thumb-label {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-track-fill {
background-color: black;
}
Angular material components are using themes https://material.angular.io/guide/theming
Slider's background colors can be changed this way:
#include mat-slider-theme(map_merge(mat-light-theme, (
accent: mat-palette(map_merge($mat-deep-orange, (
500: green,
))),
foreground: (
base: #848484,
slider-min: white,
slider-off: #bebebe,
slider-off-active: #bebebe,
),
)));
If you want to override the slider's color one at a time, i.e. to apply custom styles to each slider:
you will need to add classes to your sliders :
<mat-slider class="average"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="min"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="max"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
Then in your CSS, you can customize each of them as such:
:host ::ng-deep .average .mat-slider-thumb {
background-color: #ff3967;
}
:host ::ng-deep .min .mat-slider-thumb {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-thumb-label {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-track-fill {
background-color: blue;
}
:host ::ng-deep .max .mat-slider-thumb {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-thumb-label {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-track-fill {
background-color: orange;
}
All info about :host and ::ng-deep in the offical Angular documentation for component styles
Here is how I solved in just a few minutes and got it working.
Add this two-line in style.css, not in component CSS.
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: #0056ff;//Your color
}
Change Slider color by setting color
<mat-slide-toggle color="primary" [(ngModel)]="wifiStatus">Wifi</mat-slide-toggle>
Using color="primary" is just to set it to one of it's default themes.
Only way to change the background-color as of now is,
/deep/.mat-accent .mat-slider-thumb,
/deep/.mat-accent .mat-slider-thumb-label,
/deep/.mat-accent .mat-slider-track-fill {
background-color: #128CB0;
}
Does anyone here know how to change the color of the text in the thumb-label though? Adding color: #fffff within the same css does not seem to help, it's still using black as the color.
For anyone working with the Angular 14+, the class names in the mat-slider have apparently changed and the accepted answer might need a few tweaks. Here is the updated CSS that can be added to your components CSS file.
::ng-deep .mat-slider.mat-accent .mat-slider-track-fill {
background-color: #0062AB ;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb{
background-color: #0062AB;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb-label {
background-color: #0062AB;
}
I'm using react-bootstrap and trying to add an icon to the NavBar
<Navbar.Header>
<Navbar.Brand>
<a href="#">☰ React-Bootstrap
<img src={logo} style={{width:100, marginTop: -7}} />
</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
However, the icon is not positioned properly in the navbar
And from the official site, i can't find any example of adding icon to the navbar.
Thanks
I think you will need to add a bit of CSS there.
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-brand>img {
padding: 7px 14px;
}
Check working example on JSFiddle
Depending on your image size you can adjust it for your code
It's a dirty hack, but I had the same problem and added a className, 'nav-logo-' to my image and then did the following CSS:
.nav-logo {
float: left !important;
margin-top: -15px !important;
}
At the moment I have this image:
What I've been asked to do is to give it this effect:
Forget about the background color - notice the reflection of part of the image underneath, still the same color but with an opacity-style effect on it.
I have tried using opacity, and webkit-reflection in CSS3 but have had no luck.
I've now taken that code out as it doesn't work, I'm just left with the original image:
.infrareporting_host_0 {
background: url("../interface/infrareporting/hostLightGreen.png") no-repeat scroll 0 0 transparent;
}
Please remember:
I only want exactly what is shown - a lower section of the image reflecting, NOT the whole image reflecting
How can I fade the opacity of the reflected image ONLY? the normal one I want to stay the same but fade the reflection
A cross-browser solution is best (atm I can only do it in chrome)
Update
So far my code is reflecting properly in chrome only but opacity is not working correctly. I have this:
-webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
you can do as following :
html :
<div class="image-block">
<img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
<div class="reflection">
<img src="http://i.stack.imgur.com/mbf9p.png" alt="" />
<div class="overlay"></div>
</div>
</div>
css :
.image-block { width:78px; margin:0px 10px; float:left; }
.reflection { position:relative; }
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
}
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px;
background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
background-image: -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
check live demo here : demo
You can use CSS 3 for it:
.reflect {
-webkit-box-reflect: below 0
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
Or alternatives like this one:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/
Use this code:
.infrareporting_host_0::before,
.infrareporting_host_0::after
{
content: "";
position: absolute;
top: 100%;
z-index: -1;
width: inherit;
height: inherit;
display: block;
}
.infrareporting_host_0::before
{
background: inherit;
}
For more info, see Crossbrowser CSS3 Reflections.