I'm using sass image sprites and span tags to create images. I'm now having a problem resizing these images. It appears that using background-size somehow applies to the whole sprite atlas and not just the chosen sprite.
How can I resize the sprite images?
Example code, I setup sprites like this:
#import "compass/utilities/sprites/sprite-img";
#import "icons/*.png";
#include all-icons-sprites;
And then I use them with a class tag, or I create new classes which directly mention them in the scss file:
.more span.right-icon {
#include icons-sprite('item-more');
}
There's no way around it - the image is considered as a whole and the sprites are just logic inner guides.
You could, however, recalculate the image-position according to any changes you apply to the background-size respectively.
Related
I'm trying to load my image which is inside src/images/hero.svg through css using background-image:url('./images/hero.svg') in codesandbox.folder structure.
Works fine when I try to access it inside function component with but with css it's not loadingcode
So you want to add images in the css:
so for adding images in css with the use of the url specified as follows :
code for adding background image in CSS:
background-image: linear-gradient(rgba (4,2,54,0.7),rgba(4,9,30,0.7)),url(url of the image);
I have 2 icons - a filled thumbs-down (reject) and an unfilled thumbs-up (approve). I need to have both a thumbs up and down image which fills in on hover.
I am trying to use FontAwesome's flip CSS to achieve this. The icons themselves are from an iconfont generated using ico-moon and relate to classes .icon-approve and .icon-reject.
.icon-approve-hover-fill {
#extend .icon-approve;
}
.icon-approve-hover-fill:hover {
#extend .icon-reject;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill {
#extend .icon-approve;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill:hover {
#extend .icon-reject;
}
My issue is that for the reject-hover-fill case that the .icon-reject-hover-fill:hover is still flipping due to the .fa-flip-vertical; in the .icon-reject-hover-fill base class.
I need .icon-reject-hover-fill:hover to effectively be it's own class and not inherit the useless extra flip from .icon-reject-hover-fill. I assume there's a way to achieve this without me needing to re-create my font with flipped icons? I need it to work down to IE 8 and can be either basic CSS or SASS (though it needs to work with Sencha's flavour of SASS in ExtJS 6).
The .icon-reject-hover-fill:hover selector is stronger than .icon-reject-hover-fill. If .icon-reject-hover-fill has CSS properties you don't want when the element is hovered, just specify the desired value inside .icon-reject-hover-fill:hover{}, in your custom CSS.
However, instead of adding a class that has properties you want to unset, just create another class, of your own, that contains only the stuff you want from the class you are importing. Trying to unset properties that have been set is the fastest path to CSS mess-up, quickly escalating into code that is almost impossible to maintain.
The usual way to reset an already set property in CSS is {property-name: initial;}. Please note that not all CSS properties can take initial as value.
Is it possible to use CSS to change the color of a SVG path which is within a pseudo element data-URI?
External Site
CSS:
a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); }
a[href^="http://"]:hover:after path { fill: #000; }
Not like that, since the svg contents is in another document. Styles don't apply across documents.
And since the svg will be treated as a dumb image when referenced like this via CSS, putting the path hover style inside the svg won't help either.
I'd recommend putting the svg inline in the document if you want to style some shapes inside of it.
That said, another possibility for changing the color of an image is using filters, since they can be applied from outside. If your image is simple that might work.
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..
I'm having an issue with horizontally centering sprites using Compass Sprites.
I have a bunch of sprites that are of different sizes for icons and I want them to be centered on the container they're in so they're a left hand side icon for instance.
If I do this:
$sprite-position: 50%;
#import "sprite/*.png";
then the images are centered on the generated sprite.png but the CSS is actually something like:
background-position: -9px -223px;
rather than the expected:
background-position: 50% -223px;
What's the point of centering it on the sprite if its going to have the location specifically declared like that? Right now I'm hardcoding it as 50% and the Y-axis which sucks because when I add a new sprite then I have to change them all which completely defeats the purpose.
Am I doing this wrong in Compass, CSS or does it just not work as its supposed to?
The only way I can see this being done is by having it specify the dimensions then contain the icon and center it within there. The 50% left value is there though so you don't need to do this... right?
Just a note... it sucks that Compass doesn't support JPEG sprites as well -.- Got about 6 promotion images on the front page and it would be nice to have them sprited up where you can just replace the images in the folder and its sorted!
Thanks, Dom
Just stubmled upon your question. I get your point and had the same problem. I also tried to find a general solution. But it doesn't seem to be possible atm.
For me the position offset option works, but it's not perfect cause you have to apply it to each sprite:
#import "socialmedia/*.png";
a.twitter {
#include socialmedia-sprite("twitter");
#include socialmedia-sprite-position("twitter", 50%);
}
a.facebook {
#include socialmedia-sprite("facebook");
#include socialmedia-sprite-position("facebook", 50%);
}
This is overwriting the horizontal value but keeps the vertical value.
As I said, not perfect but works if you don't need to adjust a huge amount of spites. You could write a mixin though. But still... would be great if Compass itself would provide such an option.
Just to check if I'm getting you right: You created a sprite for all the icons you want to center. Within the sprite all icons are centered, so you can use x:50% and the according y-value, right?
Since compass set's the wrong background-position you could use other method. At least, thats what I did. If you don't need to support IE6/7 you could use compasses inline-data-feature: http://compass-style.org/reference/compass/helpers/inline-data/
This way you reduce the HTTP-Requests which is the main purpose of a sprite but at the same time you get all the benefits a normal image would give you.
If you build a smart mixin this is very, very handy. And even smarter than sprites.
I had the same issue. I wanted to center a horizontal sprite vertically (e.g. creating icon using :after on an inline element).
Unfortunately Compass converted my 50% to 50px so I created these functions:
#function _sprite-position-nth($map, $sprite, $n) {
$positions: sprite-position($map, $sprite);
#return nth($positions, $n);
}
#function sprite-position-x($map, $sprite) {
#return _sprite-position-nth($map, $sprite, 1);
}
#function sprite-position-y($map, $sprite) {
#return _sprite-position-nth($map, $sprite, 2);
}
Example usage:
$icons: sprite-map("icons/*.png", $layout: horizontal);
a.arrow:after {
background: $icons sprite-position-x($icons, arrow-right) 50%;
//...
}
I hope I could help.