Hi I'm trying to change the background of a mat-pagenator control in an angular project.
However it appears that the pagenator always appears white. Regardless of the background-color I set in the application.
styles.scss
#import '~#angular/material/theming';
#include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$background: map_merge($background, (background: #FF1010));
$theme: map_merge($sample-material-app-theme, (background: $background));
#include angular-material-theme($theme);
#include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }
app.component.html
<mat-form-field>
List length:
<input matInput [(ngModel)]="length">
</mat-form-field>
<mat-form-field>
Page size:
<input matInput [(ngModel)]="pageSize">
</mat-form-field>
<mat-form-field>
Page size options:
<input matInput
[ngModel]="pageSizeOptions"
(ngModelChange)="setPageSizeOptions($event)">
</mat-form-field>
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = $event">
</mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
result:
the desired result is to set a color for the background of this component(and some others)
The way I'm trying to set the background is based on Angular Material2 theming - how to set app background?
It appears that <mat-paginator> inherits its background colour from card not from the background property.
The same seems to be true for <mat-table> so to set the default styles of these the following worked: (note this is an ugly colour just to prove the colour works)
#import '~#angular/material/theming';
#include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$bg-color: #FF1010;
$background: map_merge($background, (background: $bg-color, card: $bg-color, dialog:$bg-color));
$theme: map_merge($sample-material-app-theme, (background: $background));
#include angular-material-theme($theme);
#include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }
Note I also added dialog into this as it was also set to white and its likely that it needs the same background colour.
Related
How do i change mat-form-field apearance outline underline color in Angular Material **Version 15 **
this post stackoverflow were great helpful but i could not change border color with this because we have not $border propertie on mat.define-typography-level( ) material.angular.io
<p>
<mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
<mat-hint>Hint</mat-hint>
</mat-form-field>
</p>
I tried to overide border without success
mat-form-field{
background-color: #f3f6f9; // success
border:2px solid red; // it's add another border so not resolve
}
Is there a way to calculate the two other triadic colors from a single color using the Sass's built-in sass:color module?
For example, if I have #0070f3 as my baseline color, I want to get #f30071 and #8200f3 (as found using Material's color picker tool).
Yes, you can, with adjust-hue passing your base color and a rotation value in degrees.
Triads can vary the rotation, your example gives a second color at 60deg and a third one at 120deg (I guess).
An example here.
HTML code:
<div class="block base"></div>
<div class="block base60"></div>
<div class="block base120"></div>
SASS code:
$base-color: #0070f3
.block
height: 100px
width: 100px
.base
background-color: $base-color
.base60
background-color: adjust-hue($base-color, 60deg)
.base120
background-color: adjust-hue($base-color, 120deg)
I took time learning how to theme bootstrap using SASS. Steps were as follows:
In my project directory at command line ran npm install bootstrap --save
Then I wrote to main.scss file with
$theme-colors: (
"primary": #9b2335,
"secondary": #696969,
"success": #d9596c,
"info": #d02f47,
"warning": #e38291,
"danger":#de6e7e,
"light": #d9d9d9,
"dark": #333333
);
#import "node_modules/bootstrap/scss/bootstrap";
At command line ran sass main.scss main.css
And with that I would expect ALL theme colors to be overwritten. Please note, all of my custom $theme-color variables are a hue in either the red or gray family. Nothing about those color values is blue. However, the border around my navbar toggle button is blue when focused (see pic). Why did it not change to one of my custom theme colors? I did look through _variables.scss but nothing obvious jumped out at me.
The html for my page was copied from the bootstrap album example, but the important part I think is this:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
What Sass am I missing here to override ALL colors?
that's the default bootstrap focus color from ("_reboot.scss"):
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
if you want to set a color from your theme you have to override it. f.e.:
button:focus {
outline: 5px auto map-get($theme-colors, "primary");
}
.test {
#include flex-grid-row();
.eight { #include flex-grid-column(8); }
.four { #include flex-grid-column(4); }
}
<div class="test">
<div class="eight" style="background: red; height: 150px;"></div>
<div class="four" style="background: blue; height: 150px;"></div>
</div>
Given the above code why does the grid stack and not display side by side? if I remove the 4 from flex-grid-column() then is displays as I would expect as the .four takes up all the available space, but why not if I specify how many columns?
The markup looks correct and works great in my flex project.
You can make sure you have the flex-grid setup in app.scss
[]
and
After importing Foundation via npm #import "node_modules/foundation-sites/scss/foundation.scss"; I then needed to #include foundation-everything(true); Passing true switches to flexbox.
I found that out on this page http://foundation.zurb.com/sites/docs/flexbox.html#enabling-flexbox-mode
OK I've searched a lot but I am now out of options and not having a degree in Hogwarth cannot figure it out.
First, I know it's common typographic problem when there are divs with content inside one main wrapper div and they don't want to expand to the height of parent container.
I have minimal example that works here - white and yellow divs extend correctly with the main container (background green).
However...I am working currently on Jekyll 2-column template for my blogging page using Compass with Susy for grids. And things are going complicated.
my html:
<body>
<div id="root" role="mainwrapper" class="container">
<div role="sidecontent" class="sidebar">
nawigacja jakas
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div role="zawartosc" class="main">
cos cos cos cos
</div>
</div>
</body>
and my computed style.css
Susy grid setting as follow:
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
// Podstawowa typografia
$total-columns: 12;
$gutter-width: 1em;
$column-widht: 5em;
$grid-padding: $gutter-width;
$development:true;
$border-box-sizing:true;
$max-width: 1200px;
#import "susy";
[class^="container"] {
#include container;
overflow:hidden;
#include susy-grid-background;
#include box-sizing(border-box);
}
[class^="sidebar"]{
#include span-columns(3,12);
min-height:100%;
#include box-sizing(border-box);
}
[class^="main"]{
#include span-columns(9 omega,12);
min-height:100%;
#include box-sizing(border-box);
}
I know I am definitely missing something here but none of my friends was able to help me :(
Getting 100% height in CSS can be very tricky and unreliable, but I think I tracked down the actual difference between your two examples (it isn't Compass or Susy). The sample that doesn't work is missing height: 100%; settings on the html, body, and container elements. Add that, and it will work.