I have a change-color.service.ts that has the following:
public defaultStyles = {
firstDesignBackgroundColor: '#a31329',
firstDesignFontColor: '#ffffff',
secondDesignBackgroundColor: '#d1cfcfff',
secondDesignFontColor: '#000000'
};
now I will like to add to my style.scss for the statement
:host ::ng-deep th span#optimize-checkbox-header .mat-checkbox label.mat-checkbox-layout .mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin .mat-checkbox-frame {
border: 2px solid #fff !important;
}
replace the #fff with firstDesignFontColor from the change-service. Do you know how I can create this dependency? Is this possible at all?
There is actually a way to realize it with css variables that I will post here as a second answer.
You can change css variables from JavaScript code, so if you use variables for your class like this simplified example:
:root {
--bg-color: red;
}
.test {
background-color: var(--bg-color);
}
then you can change this from your ChangeColorService
interface Colors {
background: string;
}
#Injectable()
export class ChangeColorService {
colors$ = new BehaviorSubject<Colors>({ background: 'red' });
constructor(#Inject(DOCUMENT) private document: Document) { }
change(colors: Colors) {
const root = this.document.documentElement;
root.style.setProperty('--bg-color', colors.background);
this.colors$.next(colors);
}
}
Full example:
https://stackblitz.com/edit/angular-change-css-variable?file=src/app/app.component.ts
No that's not possible. What is possible, is to use style bindings.
class YourComponent {
styles: any;
constructor(private color: ChangeColor) {}
ngOnInit() { this.styles = this.color.defaultStyles; }
}
<div [style.background-color]="styles.firstDesignBackgroundColor"></div>
Related
I've created a custom css file that applies styles to the global scrollbar! But, I'd like to only show a dark scrollbar to users when $vuetify.theme.dark is set to true.
Is there a way that I can apply scrollbar css globally once that theme variable changes?
Here's my App.vue file
<template>
<v-app
id="inspire"
:style="{ background: $vuetify.theme.themes[theme].background }"
>
<header-bar />
<v-main>
<v-container fluid fill-height>
<keep-alive>
<router-view />
</keep-alive>
</v-container>
</v-main>
</v-app>
</template>
<script>
import HeaderBar from "./components/Navigation/HeaderBar.vue";
import store from "./store";
export default {
name: "App",
components: {
HeaderBar,
},
computed: {
theme() {
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
store: store,
beforeCreate() {
this.$store.commit("initializeStore");
this.$vuetify.theme.dark = this.$store.state.DarkMode;
},
};
</script>
<style>
#import "./DarkScrollbar.css";
html {
overflow: auto !important;
}
.v-btn.theme--light.v-btn--has-bg:not(.primary):not(.success):not(.error) {
background-color: #ffffff;
}
</style>
In the above, I've created a computed variable "theme" to store the theme's name, which I believe I can place a watcher and trigger a function call on change.
Here's the contents of the DarkScrollbar.css file that I'm wanting to dynamically toggle!
/* Dark Scrollbar CSS */
::placeholder {
color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
::-webkit-scrollbar-corner {
background-color: #181a1b;
}
::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
I've actually just fixed this myself. I'll post the answer here so that other folks might be able to use this too! Programatically adding and removing a class on the body element allows you to toggle scrollbar styling.
In my computed property, I just had to add the class based on Vuetify's selected theme.
computed: {
theme() {
const bodyElement = document.getElementsByTagName("body")[0];
if (this.$vuetify.theme.dark == true) {
bodyElement.classList = "darkScrollbar";
} else {
bodyElement.classList = "";
}
return this.$vuetify.theme.dark ? "dark" : "light";
},
},
In my custom CSS file that I import, I added body as well as the custom class to each ::webkit style rule.
body.darkScrollbar::placeholder {
color: #b2aba1;
}
body.darkScrollbar::-webkit-scrollbar {
background-color: #202324;
color: #aba499;
}
body.darkScrollbar::-webkit-scrollbar-thumb {
background-color: #454a4d;
}
body.darkScrollbar::-webkit-scrollbar-thumb:hover {
background-color: #575e62;
}
body.darkScrollbar::-webkit-scrollbar-thumb:active {
background-color: #484e51;
}
body.darkScrollbar::-webkit-scrollbar-corner {
background-color: #181a1b;
}
body.darkScrollbar::selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar::-moz-selection {
background-color: #004daa !important;
color: #e8e6e3 !important;
}
body.darkScrollbar input:-webkit-autofill,
body.darkScrollbar textarea:-webkit-autofill,
body.darkScrollbar select:-webkit-autofill {
background-color: #555b00 !important;
color: #e8e6e3 !important;
}
Try to change styling on focus of the host element. While the following construction works fine in combination with /deep/, it does not work for the host element itself. What's wrong with the CSS code?
:host {
background-color: white;
border: 1px solid lightgray;
padding: 1px 0;
display: inline-block;
}
:host:focus {
border: 2px solid lightskyblue;
}
Thanks for any help.
You could do it programmatically, with a HostListener, Renderer2 and ElementRef:
import { Component, ElementRef, HostListener, Renderer2 } from '#angular/core';
#Component({
selector: 'button[app-button]',
template: '<ng-content></ng-content>',
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
#HostListener('focus', ['$event.target'])
onFocus() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
}
#HostListener('blur', ['$event.target'])
onBlur() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'buttonface');
}
}
Or you could just use the :host pseudo selector and wrap the :focus in brackets in your component's stylesheet:
:host(:focus) {
background-color: red;
}
Here's an example: stackblitz.
Instead of using the renderer, you can just use hostlistener and hostbinding.
#HostBinding('class.focus') public focus: boolean = false;
#HostListener('focus', ['$event.target']) public onFocus(): void {
this.focus = true;
}
#HostListener('blur', ['$event.target']) public onBlur(): void {
this.focus = false;
}
I am making a simple component to test newest Lit-element a checkbox.
Upon testing static get styles only the first element I style is shown, I have seen in the documentation what I am trying should be correct, may I have some help?.
this is my component:
import {LitElement, html, css} from 'lit-element';
class CheckboxMJ extends LitElement {
static get properties(){
return{
check:{type:Boolean},
name:{type:String},
}
}
static get styles() {
return css`
.checkWrapper{
font-family: Roboto;
background-color: red;
font-weight: 500;
font-size:14px;
color:#283D3B;
border:none;
outline:none;
height: 150px;
width: 300px;
border-radius: 3px;
overflow:hidden;
padding:3px;
}
input[checkbox i]{
background-color:red;
}
`;
}
constructor(){
super();
this.check=false;
this.name="";
}
render() {
return html`
<div class="checkWrapper">
<input class="checkbox-mj" type="checkbox" name="${this.name}" value="${this.check}"> ${this.name}
</div>
`
}
}
customElements.define('checkbox-mj', CheckboxMJ);
I have been encountering this issue several times with other components, kept changing order, and names of classes until it worked but I feel so lost about how this should be done right, please somebody enlighten me on how to use this feature correctly.
You have to keep in mind that checkboxes are very difficult to stylize. Many properties simply have no effect on this input. On the other hand you have to use a standard css selector to stylize the checkbox input[type="checkbox"].
If you want the check property to be reflected in your checkbox you must do it this way:
?checked="${this.check}"
Look at this guides for more information https://lit-element.polymer-project.org/guide/templates (Bind properties to templated elements).
import {
LitElement,
html,
css
} from 'lit-element';
class CheckboxMJ extends LitElement {
static get properties() {
return {
check: {
type: Boolean
},
name: {
type: String
},
}
}
static get styles() {
return css `
.checkWrapper{
font-family: Roboto;
background-color: red;
font-weight: 500;
font-size:14px;
color:#283D3B;
border:none;
outline:none;
height: 150px;
width: 300px;
border-radius: 3px;
overflow:hidden;
padding:3px;
}
input[type="checkbox"]{
margin:1rem
}
`;
}
constructor() {
super();
this.check = true;
this.name = "Check";
}
render() {
return html `
<div class="checkWrapper">
<input class="checkbox-mj" type="checkbox" name="${this.name}" ?checked="${this.check}"> ${this.name}
</div>
`
}
}
customElements.define('checkbox-mj', CheckboxMJ);
In Stencil when you have set shadow: true, styling the host element is as follows
:host {
color: red;
}
This works. But now I have the following component
#Component({
tag: 'my-component',
styleUrl: 'my-component.scss',
shadow: true
})
export class MyComponent {
#Element() host: HTMLElement;
render() {
this.host.classList.add('is-test');
return <div>Test</div>;
}
}
in which I add the is-test class to the host element. Now, to apply styling based on that class I added the following
:host {
color: red;
&.is-test {
background-color: green;
}
}
I see is-test class on my-component element, but the background-color: green style is not applied. I must be doing something wrong here, any help would be appreciated!
You can use :host():
:host {
color: red;
}
:host(.is-test) {
background-color: green;
}
By the way: If you want to set the class (or any attribute) on the host element, you can use the <Host> functional component:
import { Host } from '#stencil/core';
// ...
render() {
return <Host class="is-test"><div>Test</div></Host>;
}
Hey how can I align text inside SnackBar to be center?
this is my code and it doesn't work:
import { Injectable } from '#angular/core';
import { MatSnackBar, MatSnackBarConfig } from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class MaterialService {
constructor(public snackBar: MatSnackBar) { }
openSnackBar(message:string){
let config = new MatSnackBarConfig();
config.panelClass = 'text-align:center';
this.snackBar.open(message);
}
}
thanks you :)
Simply add this in your style.css (or any global css, in my case I put it in my app.component.scss)
margin:auto; will center the span tag inside the snackBar
text-align:center; will center the text inside the span
simple-snack-bar span {
margin:auto;
text-align: center;
}
Settings like this will apply to all your SnackBars.
For angular 7 w/material, I use this in global style.css:
.mat-simple-snackbar span {
margin: auto;
text-align: center;
}
The panelClass property of MatSnackBarConfig accepts a CSS class which you can define in your main app's styles.css:
openSnackBar(message: string) {
let config = new MatSnackBarConfig();
config.panelClass = 'center-snackbar';
this.snackBar.open(message);
}
Just make sure you use the !important selector as well!
.center-snackbar {
text-align: center !important;
}
For on demand centred text.
SASS:
snack-bar-container.text-center {
span {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
Then you add "text-center" to your panelClass
let config = new MatSnackBarConfig();
config.panelClass = "text-center";
this.snackBar.open(message);
That way you can have standard appearance if the Snackbar comes with an action.
Try this
import { Injectable } from '#angular/core';
import { MatSnackBar, MatSnackBarConfig } from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class MaterialService {
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
constructor(public snackBar: MatSnackBar) { }
openSnackBar(message:string){
let config = new MatSnackBarConfig();
config.verticalPosition = this.verticalPosition;
config.horizontalPosition = this.horizontalPosition;
this.snackBar.open(message);
}
Ref:https://material.angular.io/components/snack-bar/api
Example:https://stackblitz.com/edit/angular-snackbar
Although this question is quite old, I thought posting my solution might be helpful to someone out there.
After lots of research and some trial and error, the below code is all I needed to get my snackbar working with centered text. (hint: I'm using the most stable Angular version as at today).
// extract from my-notification-service.ts file
// Note that I created the above service file, imported "MatSnackBar"
// & "MatSnackBarConfig" from #angular/material/snack-bar,
// and added a property of type "MatSnackBar" into the constructor.
// After that, I created the below object and function.
// The function will be called by any submit button in the project.
mySnackBarConfig: MatSnackBarConfig = {
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'bottom'
}
displayMessage(msg: string) {
this.mySnackBarConfig['panelClass'] = ['notification','success'];
this.snackBar.open(msg, '', this.mySnackBarConfig);
}
The following code was added to the global styles.css file
// extract from styles.css (global)
snack-bar-container.success {
background-color: rgb(31, 121, 39);
color: rgb(255, 255, 255);
}
snack-bar-container.notification simple-snack-bar {
font-size: 18px !important;
}
// this part is all I did to center the text.
// Take note of the css declaration, not just the style inside.
simple-snack-bar > span {
margin: 0 auto;
text-align:center !important;
}