I'm using polymer and I'm thinking this is a but but I'm not entirely sure.
In my main document I have this:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border: 10px solid #f30;
};
}
</style>
<parent-element>
<child-element></child-element>
</parent-element>
The inside my child element I have this style block
<style>
:host {
background-color: var(--child-element-bg, --some-other-default);
#apply(--child-element-mixin);
}
</style>
Everything works great. However inside my parent-element I have:
<style>
:host {
--child-element-bg: #f30;
--child-element-mixin: {
border: 5px solid #000;
};
}
</style>
My child-element gets the 5px solid #000, But Not the #f30 background-color.
am I doing something wrong? Is this a known bug?
This is not a bug. This is how Polymer has implemented their css variables.
Related
I'm trying (and have succeeded) in selecting a div, it's child, and it's pseudo before/after elements, using the following syntax, but I want to know if there is a simplified way of doing it?
After some research I found the following scss works for the html/scss (link to JSFiddle is below also):
HTML
Want to add a class all-borders-hidden to reveal-div element, which will then make the div itself, it's child/children, and both pseudo elements update to have no border:
<div class="reveal-div">
Parent Div
<div class="main-image-div">
Main Cild Div
</div>
</div>
scss
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
}
&.all-borders-hidden *{
border: none;
}
&.all-borders-hidden::after{
border: none;
}
&.all-borders-hidden::before{
border: none;
}
}
I have the exmaple running in jsfiddle
You can use & again:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
* {
border: none;
}
&::after{
border: none;
}
&::before{
border: none;
}
}
}
and if they are sharing the border:none you can do this:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
&,
*,
&::before,
&::after{
border: none;
}
}
}
I have an Angular 2 component with an accordion, which I added using ng-bootstrap. Everything works fine functionally, however the styles that I try to load using the .card, .card-header, .card-block classes that the compiled accordion elements have, those styles do not get applied to the elements at all.
These classes are set by ng-bootstrap directly, when transforming the accordion into div's.
I apply my own css via a styles.scss file that I link to the components TypeScript file. When everything is rendered, my styles appear in the <style></style> tags in the header of the html output.
It looks like this.
<style>
[_nghost-xfh-23] .card[_ngcontent-xfh-23] {
border: none; }
[_nghost-xfh-23] .card-header[_ngcontent-xfh-23] {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125); }
[_nghost-xfh-23] .card-block[_ngcontent-xfh-23] {
text-align: left; }
</style>
The styles.scss looks like this:
:host .card {
border: none;
}
:host .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
:host .card-block {
text-align: left;
}
My guess is that Angular 2 is trying to apply the styles (during compilation), but creates the div's with the said classes afterwards, making it impossible to apply the styles to the elements.
Im restrained to edit the bootstrap.css directly or create an other global css file. I'm hoping there is a way to reapply the css styles after the component is loaded or some other means to style ng-bootstrap accordions.
Hope my problem makes sense,
regards
Sy
As #ChristopherMoore said in his comment, it was a problem due to Shadow DOM. Adding /deep/ fixed it. Here the updated functional code.
/deep/ .card {
border: none;
}
/deep/ .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
/deep/ .card-block {
text-align: left
can some one explain why the following happens:
Test
<style type="text/css">
.test {
border: thin solid blue;
color: red;
}
</style>
This only creates the border but doesn't turn the text red when using a class.
However, this works in turning the text red when using an id instead:
Test
<style type="text/css">
#test {
border: thin solid blue;
color: red;
}
</style>
Why does the class not change the text color, while using id does work?
Thanks!
use this
demo here
Test
<style type="text/css">
a.test {
border: thin solid blue;
color: red;
}
</style>
See this example: http://jsfiddle.net/mD5us/4/
<div>
Test
</div>
CSS
​body div a.test{
color:yellow;
}
body div .test{
color:brown;
}
body a.test{
color:purple;
}
body .test{
color: orange;
}
a.test{
color:green;
}
.test {
border: thin solid blue;
color: red;
}
You might think that the link will be red, but it will actually be yellow since that is the most specific declaration.
try changing the style tag into this:
<style type="text/css">
a.test{
border: thin solid blue;
color: red;
}
</style>
I am trying to add a border to an image on rollover. The border is not showing when I roll over the image. Here is my code:
<script>
$(document).ready(function() {
$("#imgBorder").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder">link...
Why isn't the border appearing on hover?
Also, is there any way to do this so that it does not re-size the image when adding the border?
You do not need to use javascript to add hover on image rollover. Just add it to the css class instead.
<style language="text/css">
.rollOver : hover
{
border: 1px solid #000;
}
</style>
<div class="rollOver" id="imgBorder">Test</div>
First, to affect the image, your jQuery should be:
$("#imgBorder img").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
And your CSS should be:
.Hover { /* note the period preceding the 'Hover' class-name */
border: 1px solid #000;
}
JS Fiddle demo.
Note that:
.string selects element(s) by their class-name of string: <div class="string"></div>
#string selects an element by its id, which is equal to string <div id="string"></div>
string selects an element of string: <string></string>
But you don't need JavaScript, just use:
#imgBorder:hover img,
#imgBorder img:hover {
border: 1px solid #000;
}
JS Fiddle demo.
Something like this will work in CSS, link below
.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg);
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}
I will direct you to the following link
http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/
In your selector below, you're targeting an element with the tagname "Hover". This does not exist.
Hover { border: 1px solid #000; }
What you wanted instead was:
.Hover { border: 1px solid #000 }
As others here have already pointed out, you don't need JavaScript for this as you can use the :hover pseudo-class:
img { border: 1px solid #FFF }
img:hover { border-color: #000; }
For further reading, see http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}