I have been strying to override the default border color of outlined v-text-field. Basically I want a specific color all the times (unfocused, focused, hover) playing with the codepen below:
https://codepen.io/hoiratnhieu/pen/GRpjEeb
<v-text-field
label="Outlined"
outlined
dense
></v-text-field>
Can someone provide some much needed help here?
Thank you.
You could try using the following CSS:
.v-text-field--outlined fieldset {
color: red !important;
}
If you are using SASS variables, customize the light theme like this:
// Your custom main.scss
$material-light: (
'text-fields': (
'outlined': rgba(0,0,0, 0.19),
'outlined-hover': rgba(0,0,0, 0.38),
),
);
The focus color is simply the primary color. You can overwrite all variables in #vuetify/src/styles/settings/_light.scss like that.
Related
For buttons Bootstrap v5.2 dynamically generates the colour of the text based on the button colour.
At the moment I’m setting bootstrap variables override file to override the primary color of for my custom theme
$green: #369d6d !default;
$primary: $green !default;
When I’m using buttons btn-primary class I'm seeing a black text
The CSS that is generated is:
btn-primary {
--bs-btn-color: #000;
--bs-btn-bg: #369d6d;
--bs-btn-border-color: #369d6d;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #54ac83;
--bs-btn-hover-border-color: #4aa77c;
--bs-btn-focus-shadow-rgb: 46,133,93;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #5eb18a;
--bs-btn-active-border-color: #4aa77c;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #369d6d;
--bs-btn-disabled-border-color: #369d6d;
}
The bootstrap 5 button mix-in (bootstrap/scss/mixins/_buttons.scss) is dynamically setting the text color using a color-contrast function the documentation about color-contrast is here: https://getbootstrap.com/docs/5.2/helpers/color-background/
So bootstrap is now 'automatically determine a contrasting color for a particular background-color.'. So bootstrap is now automatically creating the button text color based on the buttons background. I guess this is for accessibility contrast reasons.
My question here is what is the best method to override this behavour. At the moment I'm overriding the text color using for the created buttons like so:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
color: white !important;
}
Is there a better method using variables? Or something else to override this the bootstrap way.
the Bootstrap recommended way is to use the color-contrast function on a custom-class.
https://getbootstrap.com/docs/5.2/customize/sass/#color-contrast
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
I am trying to change background color of entire header in antdesign. I am not sure but file with defaults should be this https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
I found out that color of header is used here so i changed it to red
Global.less
#import "./vars.less";
#layout-header-background: red;
But its override with another class
Now my question is what is best practice to achieve change of header color.
The background color of the <Header /> can be simply change using JSS or put a class on it:
<Header style={{backgroundColor: "red"}}>...</Header>
or
<Header className="red-header">...</Header>
and in css
.red-header{
background-color: red;
}
maybe what are you seeing is the color of the <Menu/> component. You can also modify the color of it using JSS or put a class on it:
<Menu style={{backgroundColor: "red"}} mode="horizontal">...</Menu>
see sample here
I'm new to Angular and I'm trying to to change mat chip default colors using global CSS file but some reason it won't let me change the default chip color and inside text color.
Homepage.component HTML
<mat-chip-list>
<mat-chip>Tag1</mat-chip>
</mat-chip-list>
Global CSS
.mat-chip{
background-color:mat-color($accent);
color: mat-contrast($positive,50);
}
This is what it look like inside mat-card
You can use !important operator, as below :
.mat-chip{
background-color: mat-color($accent) !important;
color: mat-contrast($positive,50) !important;
}
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
It's a "simple" request but I'm not able to achieve this result...
In my app I have these two components:
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="ios-arrow-down-outline"
pullingText="Scorri per aggiornare"
refreshingSpinner="circles"
refreshingText="Aggiornamento...">>
</ion-refresher-content>
</ion-refresher>
and
<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Caricando più post ...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
And they works fine with a white background. Now I need to change the background color to black but now the text of the two components it's not visible anymore because it's black by default.
How can I change che color of the two components?
I tried with a CSS class but the color it's not applied.
How is it possible to customize these components?
Thank you
As docs suggest (at least for version 1 of ionic):
The ionSpinner icon to display after user lets go of the refresher.
The SVG ionSpinner is now the default, replacing rotating font icons.
Set to none to disable both the spinner and the icon.
Closes thing in SVG to color is fill property. so you may use it instead of color.
Hope this helps
HTML Code
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content class="loadingspinner"
loadingSpinner="crescent"
loadingText="Loading...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
Respective CSS
.loadingspinner{
--color : #adadad;
}
.spinner-crescent{
color: #adadad;
}
If this helps someone. You have to add a class to the infinite scroll content or just use the tag selector.
<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
class="infinite-scroll-color"
loadingSpinner="bubbles"
loadingText="Caricando più post ...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
And then change the stroke property of the tag line, to change the spinner svg color.
.infinite-scroll-color {
line {
stroke: #YOURCOLOR;
}
//If you want to change the text color too, just add this css
.infinite-loading-text {
color: #YOURCOLOR;
}
}
Cheers!