I am aware that I can change the color of the clear-icon and the search-icon as follows:
$searchbar-md-input-clear-icon-color: white;
$searchbar-md-input-search-icon-color: white;
For the cancel-icon, however, this method does not seem to work.
$searchbar-md-input-cancel-icon-color: white;
The code above has no visible effect on the cancel-icon. Instead, the color of the cancel-icon always falls back to the defined primary color.
$colors: (
primary: blue
);
How can I change the color of the cancel-icon?
Yes searchbar-md-input-cancel-icon-color is not a property of SearchBar component.
You need to sets style by a specific css selector like this :
.searchbar-ios-danger .searchbar-ios-cancel {
color: white;
}
Related
I am using ag-theme-material. I migrated to Angular 9, and I had to migrate ag-grid to v.23.0.0. However, some of the styles got changed and I am not able to change them back. The biggest issue I have is the grid's header row used to be transparent (I was on version 20.2.0 before the upgrade):
.ag-header {
background-color: transparent;
}
This doesn't work anymore. It sets my header row background to white, and I can't see the headers because the text is white. If I change it to a specific color, it works, but it doesn't accept transparent. I've tried setting opacity to 0, using an image, nothing works!
So I added a variable in my SCSS file to override this theme parameter, as specified in their migration guideline - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/.
$ag-theme-override-params: (
header-background-color: transparent
);
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";
But that doesn't work either. Now, I know this variable is doing its job because I am able to override the checkbox-checked-color using it...
Am I naming it wrong? What am I missing???
FYI for anyone facing the same problem, I tracked it down. In version 23, ag-grid has specified a background color (in a variable) in .ag-theme-material .ag-root-wrapper (it's part of _ag-theme-base-mixin.scss), and it overrides the CSS for ag-header class. So you have to set the background-color CSS property to transparent both in .ag-header and in ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.
ag-grid-angular {
width: 100%;
height: 100%;
.ag-root-wrapper.ag-layout-normal.ag-ltr {
background-color: transparent;
}
}
.ag-theme-material .ag-header {
background-color: transparent;
}
In ag-Grid when I change the row background color, it is working fine, but when I select the row, the color doesn't change to the blue color so I can recognize that the row is selected.
I'm using gridOptions.getRowStyle to change the row background color:
gridOptions.getRowStyle = function(params) {
return { background: "#3a3a3a" }
}
The way I would approach it, would be to use the rowClass option in ag-grid.
rowClass: 'my-row'
And then in your css you can define:
.ag-root .my-row:not(.ag-row-selected) {
background-color: #3a3a3a;
}
https://embed.plnkr.co/fTENsl/
Another option, if you want a custom selected color, would be to use this:
.ag-root .my-row {
background-color: #3a3a3a;
}
.ag-root .my-row.ag-row-selected {
background-color: blue;
}
if you want to change style of selected row use class in css
.ag-row-selected {
background-color: black;
color: white ;
border-color: gray;
}
I am starting off with Ionic 4 and have soem trouble with the colors.
https://ionicframework.com/docs/theming/basics
So I can do
<span color="primary">TEXT</span>
and the text will be blue. But in the documentation there are two other types of primary. Shade and Tint. How can I make my text primary tint?
If you wish to set specific variation of a color, such as tint, do not set the color property in the ion-text element and define a custom class.
your.page.html
<ion-text class="my-class">
<h1>text</h1>
</ion-text>
your.page.scss
.my-class {
color: var(--ion-color-primary-tint);
}
Ionic 4 theme color can be found in theme > variables.scss
The Ionic CSS variables are placed inside the :root.
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 218,93,88;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
...
}
USAGE
On an element with takes the color tag.
<div color="primary"></div>
<div color="primary-shade"></div>
<div color="primary-tint"></div>
On a given class using the Ionic custom color properties.
.class{
color: var(--ion-color-primary);
}
.class{
color: var(--ion-color-primary-shade);
}
.class{
color: var(--ion-color-tint);
}
In my variables.scss file I have my primary color as brown. I have 2 theme file:
theme.green.scss
theme.yellow.scss
If i want to make green and yellow as primary colors for my themes, how can I do that ? Thanks in advance for your help
this deppends on what version of ionic you are using if version 3 and 4 navigate to src/theme/variables.scss their you can change the color.
You can change or add new color using this code :
First go to src/global.scss
:root {
--ion-color-gold: #ffd700;
--ion-color-gold-rgb: 255, 215, 0;
--ion-color-gold-contrast: #000000;
--ion-color-gold-contrast-rgb: 0, 0, 0;
--ion-color-gold-shade: #e0bd00;
--ion-color-gold-tint: #ffdb1a;
}
.ion-color-gold {
--ion-color-base: var(--ion-color-gold) !important;
--ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
--ion-color-contrast: var(--ion-color-gold-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-gold-shade) !important;
--ion-color-tint: var(--ion-color-gold-tint) !important;
}
So right now you have a new color called gold when you can use it like that :
<ion-button color="gold">We now have a gold button :)</ion-button>
if you want to change primary color just change gold in
--ion-color-gold: #ffd700; each line to primary in this way you can
change it .
Reference
My first question ever - so apologies if I am not specific enough.
How do I change the color and width of material drawer component in angular-dart in css? I have tried it several ways in the CSS, including as below:
::ng-deep material-drawer {
color: #9437FF;
width: 200px;
}
.material-drawer {
color: #9437FF;
width: 200px;
}
FYI, the following worked with the material-header, which is inside a header tag:
::ng-deep header.material-header.material-header {
background-color: white;
color: #9437FF;
}
My material-drawer is not in a div or anything, just directly an HTML element on its own.
Any pointers are appreciated!
Setting the width of the drawer is a bit complicated. It involves setting a good amount of values as such it is best to use the mixin. You can see an example here
As for the color that is a little bit harder. What color are you trying to change? The background color?
For the background color you can set the background-color on the drawer. The problem is going to be that the content itself is going to override that color. In this case the material-list has it's own white color associated with it. Removing that color you could have problems with the divider colors.