I'm trying to override the default color of Vuetify icons with no luck.
.theme--light.v-icon {
color: rgba(16, 24, 40, 0.54);
}
I've tried here
$material-light: (
'icons': (
'active': 'red',
'inactive': 'red',
),
'active-icon-percent': 0.80,
);
but it doesn't seem to work.
I've looked for ".54" value in Vuetify repository and those are the sole places where I've found it, I'm confused.
Any idea to set this color without brutally override it in css ?
Related
Hello everyone I'm trying to make a complex animation And I'm new to the framer motion so I need help if it's possible.
I'm trying to do this animation
all the animation will be revealed when scrolling but I don't Know How?
I tried this example but I think it will not take me any where example
So, Any clue please?
Thanks in advance.
i think useAnimationControls will help, but i think there is another better solution or another way, but any way i wish this help you here is the documentation, it says that it returns a promise (and also can be used in async function with await).
like the following code:
import { useAnimationControls, motion } from "framer-motion"
export default function App() {
let controls = useAnimationControls()
controls
.start({
opacity: 1,
backgroundColor: "red",
color: "white",
})
.then(() =>
controls.start({
color: "black",
backgroundColor: "lightgreen",
x: -100,
})
)
.then(() => {
controls.start({
opacity: 0,
x: 100,
})
})
return (
<>
<motion.div initial={{ opacity: 0 }} animate={controls}>
hi there
</motion.div>
</>
)
}
the above code will do these things below respectively:
will increase the opacity to 1 and change the color & bg color
then it will change color & bg color again and change the x position
then will decrease the opacity to 0 and x position too
here is another animation library that is simple and also may be useful to use named animejs, and also they have a friend and non-boaring documentation you can check it here
I have Nuxt / Vuetify app with following configuration (nuxt.config.js)
vuetify: {
customVariables: ['~/assets/sass/vuetify.sass'],
theme: {
themes: {
light: {
primary: '#e85730',
}
}
}
}
So I can change primary color (applied eg. to button background). I am also able to change Vuetify variables in ~/assets/sass/vuetify.sass, eg.
$body-font-family: 'Poppins', sans-serif
But I am unable to change theme text color there. For light theme color is compiled to
.theme--light.v-application with default value rgba(0, 0, 0, 0.87)
I can override it with CSS rule and same selector, but I don't like it much. I would rather keep theme changes at one place together (ideally in Nuxt config file or at least as sass variable). Is it even possible.
This can be changed via the sass variables $material-light and $material-dark (https://vuetifyjs.com/en/api/vuetify/#sass-variables). But for the following button colors it will use always dark; primary, secondary, accent, success, error, warning and info.
$material-light: (
'text': (
'primary': 'yellow'
)
);
$material-dark: (
'text': (
'primary': 'blue'
)
);
I have a scss file with themes
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
),
taxi: (
backgroundColor:yellow,
textColor:black,
),
);
I want to switch between them on click of some conditions which I check in my typescript file. How to do it?
You can not access .scss variables in your typescript file but you can access class names.
So, I would suggest you to change these scss variables into classes and you can switch between them using [ngClass] attribute depending on whatever condition you want.
Link for reference:
https://angular.io/api/common/NgClass
I have been working on a web app for the past few weeks and we wanted to make some updates. We updated the project and all of its node modules and when I got everything working again the select drop down's options were transparent and the mat-cards lost their drop shadow.
Did something change in the material update that made the styles act like this?
I updated angular material to 7.2.0 and I noticed the transparent mat-select-panel. Adding some css to my global styles/theme.scss fixed the issue.
You can add this css to your global root css file or add it to the component css file.
I keep all my angular material css in styles/theme.scss file then import it to the component.
Update: I added the prebuilt theme import to my styles/theme.scss file and that pulled in the missing mat-select-panel styles.
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
.mat-select-panel {
background: #fff;
}
.mat-select-panel:not([class*=mat-elevation-z]) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
The problem is caused by using the css files of Material 5/6 with Material 7.
In my case the css files are imported in index.html from somewhere in /wwwroot/assets/. So upgrading through the cli or package.json was not enough.
In my case the solution was to get the css files of Material 7 from /node_modules/#angular/material/... and overwrite those existing in /wwwroot/assests/.. (these were the old Material 5 css files)
I had the same problem. In my case I had a custom SASS file that imported from #angular/material/theming, the application depended on a CSS generated file from this one.
So after upgrading I had to re-generate the CSS file with node-sass and mat-option-panel wasn't transparent anymore.
For me, the issue was with me COPY/PASTING/MODIFYING some of the code from the github website in order to begin my approach to styling.
/**
* The below is what's available in _theming.scss and what I based my code off of.
* My issue (and I've highlighted the 2 lines, below) was that I had screwed w/ their
* comment and slammed the 2 lines together, screwing w/ the mixins in _theming.scss
*/
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200),
);
I had modified:
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
To:
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UXcard: white,
The result was that the mat-select-panel was not set correctly (nor, I would imagine, was anything else which relied on "card")
How do i programatically set the background color of a view using xamarin from the hex value
For example
view.BackgroundColor = Color.FromHex("#00162E");
I believe you're looking for the ParseColor method that takes in a string and returns the integer color.
view.BackgroundColor = Android.Graphics.Color.ParseColor("#FF6A00");
Supported formats are:
#RRGGBB
#AARRGGBB
'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta', 'yellow', 'lightgray', 'darkgray'
From their example.. I think you just need to drop the #.
view.BackgroundColor = Color.FromHex("FF6A00")
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/colors/
Depending on your target, you may want to try the parseColor method on the color class instead.
How to get a Color from hexadecimal Color String
public static int parseColor (String colorString)
It claims to take hex values :
... formats are: #RRGGBB #AARRGGBB 'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta', 'yellow', 'lightgray', 'darkgray'
To change the color programatically of some text in the .xaml file you can do this, in for instance a switch loop:
FindViewById<TextView>(Resource.Id.->insert the id/name from the .xaml file <-).SetBackgroundColor(Color.Red);
break;
I hope it helps
Worked for me this:
BackgroundColor = Color.FromHex("#fcf2e4");
My Xamarin.Forms Version: 5.0.0.2012.
I found Code Here