In the html I can use ngStyle to write:
<some-element [ngStyle]="objExp">...</some-element>
Where objExp returns
return {
"background": "red"
};
This works, and turns the background of the element to red.
There are times when I want a fallback values. For example, if I was dealing with gradients I would need -webkit-linear-gradient, -o-linear-gradient then linear-gradient.
I can't add multiple values with the same key to a javascript object.
I guessed at
return { "background": ["red", "blue"] }
but that doesn't seem to work. I've also tried { "background: "red, blue" }
I don't want to use the <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> because that loads complexity repetitively into my html. I can't use [style]="expresionThatGivesAString" because it breaks in Safari.
"red" and "blue" are set at runtime, which is why I'm binding them straight to the element. So putting them in classes isn't an option.
How do I set multiple background values using ngStyle?
For complex rules, use ngClass directive instead. Setup classes in your component styles
component.css
.gradient1 {
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
}
.gradient2 {
background: -webkit-linear-gradient(black, white);
background: -o-linear-gradient(black, white);
background: -moz-linear-gradient(black, white);
}
Your component should determine which class is active; the class in turn applies the fallback values as defined in the CSS.
component.ts
// Will determine which class to apply.
getClass(){
return someCondition ? 'gradient1' : 'gradient2';
}
Then in your template, just apply the class by binding to the function result.
component.html
<some-element [ngClass]="getClass()">...</some-element>
Related
I am using d3.js to add and remove classes to a selection of elements on mouseOver() and mouseOut() events. I'd like to make the class "isHovered" and make the values of the attributes I'm changing to be relative to the element's current value. Something like this:
function handleMouseOver(d, i) {
d3.selectAll('.classToSelect')
.classed('isHovered', 'true');
};
function handleMouseOut(d, i) {
d3.selectAll('.classToSelect')
.classed('isHovered', 'false');
};
and make the isHovered class change the elements size/color:
.isHovered {
height:height*1.5;
width:width*1.5;
background-color:yellow;
}
This adds the class, but doesn't actually make any changes to the elements attributes, except its classList. I'm trying to assign and unassigned the "isHovered" class, rather than having to store the pre-hovered size/color, and manually update them, and then manually revert back to them afterwards, which I don't think is possible since these elements are sized dynamically by d3.js scaling data:
So, can I make these newly added class changes actually take effect, and can the effect be relative to an element's properties' current values?
Alternatively:
Is it possible to access the element's width:svgAnimatedWidth and Height:svgAnimatedHeight properties & values directly, so that I can change them and revert them back manually? How?
There are various ways of altering the height/width on hover.
This snippet uses CSS variables to set the initial height and width in a class and then uses them to calculate new values in the isHovered class.
const div = document.querySelector('div');
div.addEventListener('mouseover', function() {
div.classList.add('isHovered');
});
div.addEventListener('mouseout', function() {
div.classList.remove('isHovered');
});
div {
--h: 100;
--w: 200;
height: calc(var(--h) * 1px);
width: calc(var(--w) * 1px);
background-color: blue;
}
.isHovered {
--hhovered: calc(var(--h) * 1.5);
--whovered: calc(var(--w) * 1.5);
height: calc(var(--hhovered) * 1px);
width: calc(var(--whovered) * 1px);
background-color: yellow;
}
<div></div>
It is also possible to alter CSS variables using JS style.setProperty and to read them using style.getPropertyValue.
As a complete alternative if the aim is just to increase the height and width of an element on hover then the CSS transform scale could be used.
div {
height: 100px;
width: 200px;
background-color: blue;
}
div:hover {
transform: scale(1.5);
background-color: yellow;
}
<div></div>
This has the advantage (or disadvantage, depending on what effect is actually required) of not affecting surrounding elements' positioning.
ref: Display helpers
Is there a way to change differrent css style dynamically depend on size of current breakpoint.
Something like when windows are current on xs size/position/color are differ from md and so on....
For vuetify utility classes, you insert the breakpoint in the class name. pa-2 defaults for xs and up, to change it to pa-4 from md breakpoint up, you apply both pa-2 and pa-md-4 to your element. Same goes for all other predefined utility classes for spacing, text, colors, etc.
For applying your own classes in vue without repeating the breakpoint settings in each component (and duplicating/decentralising breakpoint management), you can either:
Set classes dynamically with a computed property that returns a string of classes based on the value of this.$vuetify.breakpoint
<template>
<div :class="userCardClasses" />
</template>
<script>
export default {
...
computed: {
userCardClasses() {
if (this.$vuetify.breakpoint.mdAndUp) return 'userCard userCard--md'
// You can check the value of the helpers (mdAndUp) or write a switch/case for this.$vuetify.breakpoint.name
return 'userCard userCard--xs'
}
}
}
</script>
<style>
.userCard {
padding: 8px;
}
.userCard--xs {
background-color: blue;
}
.userCard--md {
background-color: red;
}
</style>
Import Vuetify breakpoint variables in your component and use them when writing media queries.
<style lang="scss">
#import '~vuetify/src/styles/styles.sass';
.custom-class {
display: block
}
#media #{map-get($display-breakpoints, 'md-and-down')}
.custom-class {
display: none;
}
</style>
In https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (see source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), the links don't have an underline, while in my blog https://yiksanchan.com (see source code https://github.com/YikSanChan/yiksanchan.com), all links come with an underline.
Why? And how can I get rid of the underlines? I have found a related StackOverflow question Links have an additional underline in gatsby but what I try to understand is, how does the using-remark example solve the underline problem without overriding the box-shadow props.
Following Ferran's solution, in my typography.js, I changed
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
}
}
into
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
"a": {
boxShadow: `none`,
},
}
}
to remove the underlink.
Your typography.js file is adding a box-shadow to all <a> elements:
a {
box-shadow: 0 1px 0 0 currentColor;
color: #007acc;
text-decoration: none;
}
If you want to get rid of that styling, just remove the rule of box-shadow property (if it's not a module). If it's a package, just override the styling with another style file (SCSS, CSS, or JS).
Yeah for some reason the default Link styling is a background-image (no idea) and box-shadow (also no idea), set them both to none and you should be right as rain.
Angular Material md-switch Is an awesome directive. As i cannot find something relative in the documentation or generally in the web i was wondering if it is possible to change directive's background when is on a false state.
As you can see in the link above the md-switch can have color when it is on a true/active state. You can simply set this with an class or ng-class statement.
I would like though to have two colors let's say md-primary when my scope is true and md-warn when it's fasle.
For example:
<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch>
But this is not working.
Any ideas if somehow can do this without overriding manually the CSS?
ps: the status is changing there is no problem there ;)
It's quite simple, actually:
/*
* The bar:
*/
md-switch .md-bar {
background-color: #333; /* set not selected bar color */
}
md-switch.md-checked .md-bar {
background-color: pink; /* set selected bar color */
}
md-switch[disabled] .md-bar {
background-color: rgba(51, 51, 51, .15); /* set disabled bar color */
}
/*
* The switch:
*/
md-switch .md-thumb {
color: rgb(158,158,158); /* not selected switch color */
}
md-switch.md-checked .md-thumb {
background-color: rgb(255,255,255); /* selected switch color */
}
md-switch[disabled] .md-thumb {
background-color: rgb(255,255,255); /* disabled switch color */
}
/*
* Ripple effect
*/
md-switch .md-ink-ripple {
color: rgb(255,0,0); /* not selected switch ripple color */
}
md-switch.md-checked .md-ink-ripple {
color: rgb(92,184,92); /* selected switch ripple color */
}
Updated response with the weakest CSS selectors to style md-switch states for Angular Material (checked on latest version: 1.0.0-rc7).
If one wants this to be theme dependent, they would need to add the theme CSS selector on each each of the above (if you set a theme the "angular" way, the class applies itself to each angular material element):
md-switch[disabled].my-custom-theme .md-bar {...}
For standard browsers you can use something like this to change the coloring of selected text:
div.txtArea::selection {
background: transparent;
}
div.txtArea::-moz-selection {
background: transparent;
}
div.txtArea::-webkit-selection {
background: transparent;
}
But I need to do this with JavaScript instead.
My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.
I have tried a few things including:
$('div.txtArea').css({
'selection': 'transparent',
'-moz-selection': 'transparent',
'-webkit-selection': 'transparent'
});
Is there a way to do this with javascript?
There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:
// Get the first stylesheet
var ss = document.styleSheets[0]
// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);
}
You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.
I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.