Trying to change the checkbox color (due to changing the accent-color) results in a black checkbox.
So I've installed node-sass and was successfully able to change various other stylings, for example, the hover color of a row with $hover-color: cornsilk;
But somehow using:
$accent-color: #fffff1; or $ag-mat-accent: #fffff1;
does only change it from the default of pink to black.
$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-material/icons/";
$accent-color: #fffff1;
$icon-color: #03a9f4;
$hover-color: cornsilk;
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss";
My expected result would be a whitish checkbox when selected. Instead, I'm getting a black one no matter what color I choose.
Add the following CSS to your style.scss file:
.ag-theme-material .ag-checkbox-input-wrapper.ag-checked::after {
color: #fffff1 !important;
}
You could try set the following variables in scss. I hope this will help you!
#import '~ag-grid-community/src/styles/ag-grid';
// set the colors to the ones from the material theme
$ag-mat-accent: #fffff1;
// Import the ag-Grid material-next theme
#import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material';
source of my example can be found here: https://github.com/ag-grid/ag-grid-material/blob/master/angular-material/src/styles.scss#L22-L23
It's very simple, just go to the node_module --->ag-grid-community --->dist --->styles --->
ag-theme-material.css ---> find the style which is like below and change the color whatever you want.
.ag-theme-material .ag-icon-checkbox-checked {
color: #0076c6; }
Related
I need to change the color of the highlighting of possible drop targets in a Vaadin 14 Grid. To illustrate, I am using the drop mode "between", which results in a purple line:
How do I change the color of that purple line?
Vaadin Tutorials are not easy to understand and suggest using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector. But this does not seem to work, maybe I need to replace "v" in the second suggestion with something else?
Due to the purple color I'm assuming that you are using the Material theme. I'll also assume that you have a custom theme set up, as is described here. If not, that page explains how to set up a custom theme.
To customize the color of the grid row drag indicator:
In your project folder, create a file frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
Add the following contents to the CSS file:
[part~='row'][dragover] [part~='cell']::after {
background: green; /* replace with the color you want */
}
I'm to add an angular material spinner, but can't even have the basic one works on Stackblitz. I've added everything the way the documentation suggest, but I'm still getting nowhere.
Thanks for helping
You were missing to define a theme in styles.css. https://stackblitz.com/edit/angular-pbet9b?file=src/styles.css
Or you can also define the stroke color in styles.css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: red;
}
I would suggest to pre-define a theme and then override in styles.css so in case you forget to define maybe a color at least the default color appears.
I have mat-tab-group and two mat-tabs. Now when one of them is not active, it has gray color. I need to do color of text in tab black. But I can not do this because the color still grey when the tab is not active.
I tried ::ng-deep and :host and !important, but tabs still grey.
I don't recommend using ng-deep as it is deprecated:
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Instead, you should style it as the angular material docs:
https://material.angular.io/guide/theming
Since you will probably have a lot of custom styles for your material componentes, its a better aproach, and you can centralize all of the material custom styles in a single scss file if you want.
Example of a implementation (not tested, but it should work):
my-custom-elements.scss
#import '~#angular/material/theming';
#mixin custom-tabs-theme() {
// First tab
.mat-tab-label.nth-child(1) {
background-color: red;
}
// Second tab
.mat-tab-label.nth-child(2) {
background-color: red;
}
// All tabs
.mat-tab-label {
background-color: red;
}
}
global-material-theme.scss
#import '~#angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
#include mat-core();
#import './material/my-custom-elements.scss';
#include custom-tabs-theme();
angular.json
...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...
Note: You can edit any material css class this way.
Note: this will change the style for all tabs in the app, if you want a different approach you need to manipulate by class in your mat-tab-group element, and access the
...
.your-class .mat-tab-header .mat-tab-label-container
.mat-tab-labels .mat-tab-label.nth-child(1)
...
I changed the navbar-background Css Role in common.scss file
but background of navbarpage not changed.
.navbar-background { background: linear-gradient(to top, #5adb43, #51b93f,#748930); }
I add this code to common.scss but it is not worked!
Your approach is correct according to the Zebble documentation: http://zebble.net/docs/navigationbar-class
To change NavBar background color you can change this rule to change the colors. But you have made a mistake in linar-gradiant method parameters.
You add one extra parameter to the method and because of this your code has not worked. I wrote correct one for you.
You can add the following in common.scss
.navbar-background { background: linear-gradient(to bottom, #5adb43, #51b93f); }
I'm trying to override the odd/even colors and give the row a ":hover" background color, but I cannot override:
undefined .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd:not([style-scope]):not(.style-scope) {
background: #fafafa;
}
Here is what I've tried on my Theme html with no results :
:host::content .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd {
/* !important works, but it prevents me from doing a :hover */
background-color: lightskyblue;
background: lightskyblue;
}
Adding ":hover" to this last rule doesn't get trigger when the row is moused over. I'm hoping that this is possible, so when someone hovers on any cell in a row, the entire row changes background color.
in package:bwu_datagrid/datagrid/bwu_datagrid_default_them.* is the default theme style module. It is supposed to be used as a template for your own theme.
Create a style module with the same name (<dom-module id='bwu-datagrid-default-theme'>, copy what you want/need from the shipped default theme to your custom theme.
Then only import your custom theme instead of the one from package:bwu_datagrid/datagrid/ and only the styles from your style module will be applied.
This way you don't have to "fight" the default theme.