Material 2 dialog change style - css

I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks

It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();

I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}

can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}

Related

Vaadin customize menu-bar css

i added my theme as jar as described by the documentation.
now i want to add a menu-bar with a single entry for a user-menu.
But i have some trouble to create a custom css.
in the theme i import my base.css
#import url('./base.css');
#import url('lumo-css-framework/all-classes.css');
all styles are loaded, fine :)
then i add the shadow-tree css in my base.css
/* working */
vaadin-menu-bar{
border-radius: 0px;
background: aqua;
}
/* not working */
vaadin-menu-bar-button{
border-radius: 0px;
background: red;
}
/* not working */
vaadin-menu-bar [part="menu-bar-button"]{
background: yellow;
}
https://vaadin.com/docs/v14/flow/styling/styling-components
may be i did understand something wrong. Any help would great :)
so while using a JAR for the theme and the css belongs in
resource/META-INF/resources/themes/mytheme/base.css
i can use
vaadin-menu-bar.usermenu::part(menu-bar-button){
border-radius: var(--lumo-border-radius-m);
}
to set my custom style to the menubar with classname 'usermenu'

How to override materialize css in React

I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}

Styling Angular Component's Element from Main SCSS

I'm struggling with something in my Angular 5.x app, and hope someone can help...
I've got a component that has a mat-raised-button, and currently I've got some styling for it within the component's SCSS file:
button-themed {
background-color: black;
color: white;
border-color: red;
border-style: solid;
border-width: 1px;}
Everything looks fine that way. However, I now want to shift that styling up to some theme SCSS files I'm working on. How can I get the styling to apply when it's in my "red-theme.scss" or "blue-theme.scss" files?
(I'm looking to be able to dynamically swap between themes and want the button to adjust according to the theme)
UPDATE
I kicked the tires some more on custom theming, and am getting nowhere. What am I missing? Below is some quick test stuff I tossed together (I'm simply trying to get the button's border to change color so I can see that the process works).
settings.component.scss:
.test-button {
border-style: solid;
border-width: 1px;
}
settings.theme.scss:
#mixin test-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
.test-button {
background-color: mat-color($primary);
color: mat-color($warn);
border-color: mat-color($warn);
}
}
settings.component.html:
<button mat-raised-button class="test-button">TEST</button>
red-theme.scss:
$test-primary: mat-palette($mat-pink, 800, 300, 900);
$test-accent: mat-palette($mat-pink);
$test-warn: mat-palette($mat-indigo, 600);
$test-theme: mat-light-theme($test-primary, $test-accent, $test-warn);
styles.scss:
#import '~#angular/material/theming';
#import 'themes/color-palettes.scss';
#include mat-core();
#import 'app/pages/settings/settings.theme.scss';
#mixin custom-components-theme($theme) {
#include test-theme($theme);
}
#import 'themes/red-theme.scss';
.red-theme {
#include angular-material-theme($test-theme);
}
It compiles and my button displays, but there's no color change to the button's border (even though other Material components have changed color on the page). Can anyone help nudge me in the right direction?
One of those "argh!" moments, but I thought I'd post this as an answer in case anyone stumbles upon this post... The custom component mixin is the way I'm going at this point in time. I'm hopeful I can figure out all the other items I'll have to custom theme.
The reason my first test (shown in my original post) didn't work is because I forgot to add the line to actually import my custom component theme within styles.scss:
.red-theme {
#include angular-material-theme($test-theme);
#include custom-components-theme($test-theme);
}
How about something like this in your components?
:host-context(.theme-light) p {
background-color: white;
}
:host-context(.theme-dark) p {
background-color: black;
}

Ionic 2 loadingController cssClass not working

I want my loadingController wrapper to be shown with a customized css style but the css's rules doesn't apply to the element (the loadingController wrapper).
I have this in my component:
ionViewDidLoad() {
let loader = this.loadingController.create({
spinner: 'bubbles',
content: 'getting data...',
cssClass: 'loadingwrapper'
});
loader.present().then(() => {
//some stuff
...
loader.dismiss();
});
}
and this in my css file:
.loadingwrapper{
width: 77% !important;
height: 15% !important;
color: black !important;
font-size: 1.25em !important;
background-color: aliceblue !important;
border-radius: 10px !important;
}
In spite of doing this (I've even tried whithout "!important"), the changes (none of them) doesn't apply to the loading wrapper and it shows a bit awful.
Not sure where you are applying the css but if you are applying the css in the page component file you going to have a hard time, because the loading controller sits outside the page selector. So if your page component name is Foobar and you have a .scss file foobar.scss
page-foobar{
.loadingwrapper{
// not going to work
}
}
you can either add it globally to your app/app.scss file or ( i think this will work )
.md,.ios,.wp{
page-foobar{
.loadingwrapper{
// styles!
}
}
}
You have to do it globally inside the variables.scss file.
Android
$loading-md-border-radius:10px;
ios
$loading-ios-border-radius: 10px
Windows
$loading-wp-border-radius: 10px
You can see global variable list here.

GWT css background image

I use GWT 2.1.1
In package resources i have png images and one css file.
In css file i wrote:
.finishedTask {
background: white url("tick64.png") center center;
padding: 0.5em;
border: 0;
}
.unFinishedTask {
background-color: white;
padding: 0.5em;
border: 0;
}
Than i create ClientBundle interface extension. With this CSS and images.
Than in UiBunder view i try to change css style:
textArea.setStyleName(isFinished() ? res.style().finishedTask() :
res.style().unFinishedTask());
When this code executed css layout of textArea are broken but i see that class changed (FireBug). Seems bug in css.
Maybe somebody already tried do the same thing.
Probably you should use addStyleName or addStyleDependentName instead of setStyleName which remove existing styles.

Resources