I would like to change the radio button color in angular material the default value is 'accent' and I would like to set this value #ff9800, I found this solution in SO, Angular 6 Material - Hues and How to change the color of mat radio button , but the .mat-radio-outer-circle its value remained in accent ,my question is how can i change its value (#ff9800) when the radio button is checked.Here is my css and html code.
/* border-color:rgb(66, 134, 244); */
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
color:#ff9800;
border-color: #ff9800;
}
::ng-deep.mat-radio-button.mat-accent .mat-radio-inner-circle{
color:#ff9800;
background-color:#ff9800;
}
::ng-deep.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color:#ff9800;
}
<mat-radio-group aria-label="Select an option" class="actions" [(ngModel)]="action"
[ngModelOptions]="{standalone: true}">
<mat-radio-button value="Compile" checked ="true" color="accent">Compile</mat-radio-button>
<mat-radio-button value="Check Syntax" color="accent">Check Syntax</mat-radio-button>
</mat-radio-group>
You should use the !important rule after the value of the border-color and background-color like the following code:
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #ff9800 !important;
}
//before checked:
::ng-deep .mat-radio-button.mat-accent .mat-radio-outer-circle {
border-color: green !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: green !important;
}
//after checked:
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-outer-circle {
border-color: #ff9800 !important;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-inner-circle {
background-color: #ff9800 !important;
}
Related
I want to change the p-calendar border when touched and invalid. As an example when the user clicks on the calendar and didn't input any value then the calendar border should change to the red color. I'm doing this because there is an error with the border right side.
I have already created a code for the border and border color. Please help me to change the calendar border color when the calendar is touched and invalid.
SCSS
:host ::ng-deep .overtime-log-form {
.col-12 {
padding: 0;
}
&-working-hours {
display: flex;
.field {
&:first-child {
margin-right: 2.0625rem;
}
.p-calendar {
max-width: 81px;
border:solid #e7e7e7 1px;
border-radius: 5px;
}
//red border when touched and invalid value
p-calendar.ng-touched.ng-invalid{
max-width: 81px;
border:solid #ac2525 1px;
border-radius: 5px;
}
}
}
#reason {
min-height: 7.6rem;
max-height: 7.6rem;
overflow-y: auto!important;
}
}
hi damith i cant very understand your question but understand you like to hover mouse on border border change color to red i think you can use the border:hover to style your tag but i don no the code is run or bug can you read the document to solve the problem ok have nice day bye
Maybe I'm missing something obvious, but I can't figure out the proper way to change the text color in a v-btn. This works, but having to use !important doesn't seem ideal:
.v-btn
color: red !important
The color prop is only for the background color, as far as I'm aware. And I guess I could change the theme primary/secondary when calling Vue.use(Vuetify, { theme: {...}} ), but what if I want to override a single component?
There are css classes for coloring text anywhere in vuetify, just append --text to a color.
So for example
<v-btn class="red--text">
It should work with colors defined in your theme as well e.g. primary--text and similar.
Note that this is not specific to a v-btn, class should work anywhere.
If you are using vuetify you may seems like to apply this as a standard color:
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: "#14C6FF",
secondary: "#424242",
accent: "#82B1FF",
error: "#FF5252",
info: "#2196F3",
success: "#4CAF50",
warning: "#FFC107",
lightblue: "#14c6FF",
yellow: "#FFCF00",
pink: "#FF1976",
orange: "#FF8657",
magenta: "#C33AFC",
darkblue: "#1E2D56",
gray: "#909090",
neutralgray: "#9BA6C1",
green: "#2ED47A",
red: "#FF5c4E",
darkblueshade: "#308DC2",
lightgray: "#BDBDBD",
lightpink: "#FFCFE3",
white: "#FFFFFF"
}
}
}
});
and can be easily access using color="lightpink" prop or whatever you like.
You can change the color of the text entered in the span existing in the button. In this way:
v-btn {
border-radius: 8px !important;
border-color: red !important;
color: red !important;
background-color: red !important;
text-decoration: none !important;
max-width: auto;
font-size-adjust: auto;
margin: 1px;
&:hover {
background-color: blue !important;
color: blue !important;
text-decoration-color: blue !important;
border-color: blue !important;
margin: 1px;
span {
color: white !important;
}
}
}
I am using md-slider of Angular Material version 2.0.0-beta.8
I have selected the indigo-pink theme and imported it in style.css
I am pretty happy with what I have, but I would like to change just the background color of the slider handle and of the thumbnail.
Apparently this is set by the following css code defined in the indigo-pink.css file:
.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}
In fact, if I change indigo-pink.css I obtain what I want, but this is clearly not the right way.
So the question which is the right way to change just slider handle and thumbnail color, and for the sake of generality, how to change only some of the attributes of the classes defined in a theme of Angular Material.
You can use ::ng-deep override any css class from the prebuilt stylesheet.
To apply the custom change for whole app, add the custom class to root component's stylesheet, usually styles.css.
css to customize md-slide-toggle:
/* CSS to change Default/'Accent' color */
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: blue; /*replace with your color*/
}
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: skyblue; /*replace with your color*/
}
/* CSS to change 'Primary' color */
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: green;
}
::ng-deep .mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ff99ff;
}
/* CSS to change 'Warn' color */
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: red;
}
::ng-deep .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #ffe066;
}
Plunker example
::ng-deep is the way to override theme classes, as stated by Nehal.
It seems though that it does not work if you concatenate more classes. In other words the following code does NOT work
::ng-deep .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
background-color: black;
}
while the following version of the code actually works and overrides effectively the values set in the theme css
::ng-deep .mat-accent .mat-slider-thumb {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-thumb-label {
background-color: black;
}
::ng-deep .mat-accent .mat-slider-track-fill {
background-color: black;
}
Angular material components are using themes https://material.angular.io/guide/theming
Slider's background colors can be changed this way:
#include mat-slider-theme(map_merge(mat-light-theme, (
accent: mat-palette(map_merge($mat-deep-orange, (
500: green,
))),
foreground: (
base: #848484,
slider-min: white,
slider-off: #bebebe,
slider-off-active: #bebebe,
),
)));
If you want to override the slider's color one at a time, i.e. to apply custom styles to each slider:
you will need to add classes to your sliders :
<mat-slider class="average"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="min"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
<mat-slider class="max"
thumbLabel
[displayWith]="formatLabel"
tickInterval="1000"
min="1000"
max="5000"
(change)="updateValue($event)"
></mat-slider>
Then in your CSS, you can customize each of them as such:
:host ::ng-deep .average .mat-slider-thumb {
background-color: #ff3967;
}
:host ::ng-deep .min .mat-slider-thumb {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-thumb-label {
background-color: blue;
}
:host ::ng-deep .min .mat-slider-track-fill {
background-color: blue;
}
:host ::ng-deep .max .mat-slider-thumb {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-thumb-label {
background-color: orange;
}
:host ::ng-deep .max .mat-slider-track-fill {
background-color: orange;
}
All info about :host and ::ng-deep in the offical Angular documentation for component styles
Here is how I solved in just a few minutes and got it working.
Add this two-line in style.css, not in component CSS.
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color:#0056ff;//Your color
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: #0056ff;//Your color
}
Change Slider color by setting color
<mat-slide-toggle color="primary" [(ngModel)]="wifiStatus">Wifi</mat-slide-toggle>
Using color="primary" is just to set it to one of it's default themes.
Only way to change the background-color as of now is,
/deep/.mat-accent .mat-slider-thumb,
/deep/.mat-accent .mat-slider-thumb-label,
/deep/.mat-accent .mat-slider-track-fill {
background-color: #128CB0;
}
Does anyone here know how to change the color of the text in the thumb-label though? Adding color: #fffff within the same css does not seem to help, it's still using black as the color.
For anyone working with the Angular 14+, the class names in the mat-slider have apparently changed and the accepted answer might need a few tweaks. Here is the updated CSS that can be added to your components CSS file.
::ng-deep .mat-slider.mat-accent .mat-slider-track-fill {
background-color: #0062AB ;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb{
background-color: #0062AB;
}
::ng-deep .mat-slider.mat-accent .mat-slider-thumb-label {
background-color: #0062AB;
}
I am trying to find some userChrome.css to cause Firefox HTML5 video tags to always display the control bar:
Looking at the source code I see that the video controls are defined in videocontrols.xml, and it seems like the CSS file is videocontrols.css
So I've added variations on the following to my userChrome.css but I am not seeing any effect on the controlBar display.
.controlsContainer [hidden="true"],
.controlBar[hidden] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar[size="hidden"] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar:not([immediate]) {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.controlBar[fadeout] {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
Any suggestions for why this doesn't seem to be applying to the interface?
This question isn't about an addon to firefox, but a built in feature. I tried moving the styles to userContent.css and that had no effect either after restarting Firefox. Any other suggestions?
I've tried adding the red style to userChrome.css, and the blue one to userContent.css and there was no sign of either when viewing an HTML5 video tag:
/* userChrome.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
color: red !important;
background-color: red !important;
border: 1px solid red !important;
outline: 1px solid red !important;
}
/* userContent.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
color: blue !important;
background-color: blue !important;
border: 1px solid blue !important;
outline: 1px solid blue !important;
}
As this thread demonstrates, utilization of:
// ==UserScript==
// #name HTML5 video controls
// #namespace http://tampermonkey.net/
// #version 0.1
// #include http://*
// #include https://*
// #grant none
// ==/UserScript==
(function() {
'use strict';
function addVideoControls(videoNode) {
videoNode.setAttribute("controls", "");
console.log("*** Enabled HTML 5 video controls for", videoNode);
}
for (let el of document.getElementsByTagName("video")) {
addVideoControls(el);
}
const observer = new MutationObserver(mutations => {
for (let i = 0, mLen = mutations.length; i < mLen; ++i) {
let mutation = mutations[i];
if (mutation.type === "childList") {
for (let j = 0, aLen = mutation.addedNodes.length; j < aLen; ++j) {
let addedNode = mutation.addedNodes[j];
if (addedNode.nodeType === 1 && addedNode.tagName === "VIDEO") {
addVideoControls(addedNode);
}
}
}
}
});
observer.observe(document.body, {childList: true, subtree: true});
})();
...via Greasemonkey should be adequate (or via Tampermonkey, because as "http://stackoverflow.com/questions/47317983" demonstrates, the scripts should be interchangeable).
I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.