I came across this strange phenomena while toying on codepen.
I set my various font sizes as vw values, but it created some strange behavior:
The font size will only display correctly while my elements are on hovered state, and will render as 0px if they are not.
Here's my SCSS :
$title:2vw;
$subtitle:1.5vw;
$text:1vw;
and
p {
color:$red;
font-size:$text;
}
h1 {
color:$black;
font-size:$title;
}
h2 {
color: lighten($black, 20%);
font-size:$subtitle;
}
Those elements have no set class in my html, except being children of divs which are styled as such:
#mixin div {
border:$border;
border-radius:$border-radius;
background-color:$green;
color:$black;
padding:$padding;
margin:$margin;
&:hover {
background-color:$black;
color:$green;
h1 {
color:$green;
}
p {
color:$green;
}
}
}
And here is the link to the pen page: http://codepen.io/rlacorne/pen/tgrbn
Anyone knows what's happening? It's bugging me.
Thanks in advance!
Related
I have a <mat-tree> component where styling for dependant <mat-tree-node>'s introduces a special background color for mouse hovering:
mat-tree-node {
// ...
&:hover {
background: $hoverColor;
}
}
In the tree, some elements may be selected by the user. In order to highlight them visually, a special class is applied to <mat-tree-node> as [class.highlight]="isHighlighted(node)" and the class is defined as follows:
highlight {
background-color: $selectColor;
}
My problem arises when a node is selected and hovered at the same time. I want the selectedColor to take priority but the node gets hoverColor background when hovered. I changed the definition to this:
mat-tree-node.highlight {
background-color: $selectColor;
&:hover {
background-color: $selectColor;
}
}
Google Chrome developer console started to show the class higher in the stack as now it has +1 point of selectivity, but when hovering, the hoverColor is still being applied to the background, and even !important does not help.
Why does not it obey the new definition and how to fix it?
Try this:
mat-tree-node.highlight {
background-color: $selectColor;
}
may-tree-node:not(.highlight):hover {
background-color: $hoverColor;
}
I utilised the BEM method and my <div> is showing the css from the Block and Modifier, but not the Element
i.e. the css for c-banner(block) and --warning(modifier) is appearing but not __icon(element).
I know that the color of the modifier is appearing because I tried changing it to another color and it appears on the UI.
Eg:
Currently:
&--warning {
color: #D9822B
}
Edited:
&--warning {
color: black
}
Once changed, the icon of --warning will show up with a black color on the UI.
However, the padding-right of __icon doesn't ever get applied.
c-banner {
/* Block CSS Properties */
&__icon {
padding-right: 12px;
&--warning { /* Used for warning purposes */
color: #D9822B;
}
&--primary { /* Used for general information */
color: #137CBD;
}
&--success { /* Used for verified access */
color: #0F9960;
}
&--danger { /* Used as a hard stop */
color: #DB3737;
}
}
}
I'm genuinely perplexed as to why the padding-right of __icon does not get applied but the color of --warning is
All you are missing is:
.c-banner ..... the dot before the classname
Also, for padding to work they have to be inside --warning because you are chaining to form the full selector and there is no selector that ends with __icon
You can style material-icons if you want to affect multiple:
.c-banner {
.material-icons { padding-right: 12px; }
/* can also do [class*="__icon"] but may be less predictable */
&__icon {
/* rest of the scss */
}
}
I would like to add a background color to my page but leave the table background (the table appears on submit) and the inside of the box to the left of it (which has a class of .inputs) white.
I tried adding the following to my CSS, but it doesn't do anything:
body:not(.inputs) {
background-color: #c3d6de;
}
body:not(table) {
background-color: #c3d6de;
}
Please view my current code for reference: CodePen
There is a problem with your CSS. When you do body:not(table), you are specifying these styles to be applied to any body that is not a table. This doesn't make sense since a body element cannot also be a table element. The same thing applies for body:not(.inputs). Since you want to target all descendant elements of body that are not table or .inputs, you would need to put a space between body and :not like this:
body :not(.inputs) {
background-color: #c3d6de;
}
body :not(table) {
background-color: #c3d6de;
}
This would target all elements that are not table or .inputs, and that are descendants of body.
However, you might run into problems with your approach because if the table is inside another element, the background element of the containing element will show through the table since default background of tables is transparent. I would suggest explicitly giving your table a white background, like this:
body {
background-color: #c3d6de;
}
table {
background-color:white;
}
You can add background color to Body and tabel as well. Like this.
body {
text-align: center;
font-family: Arial;
background-color : #c3d6de;
}
.pixel-canvas {
background-color : white;
}
I have several combo boxes all over the page. And there is one combo box that I want to be responsive.
Let's assume I have layout containing it, just like this:
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
and I have CSS like this:
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
But when I do this, only combo-box-caption colors get changed. But I also want to change the color of the popup window.
According to combo box CSS style rules (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) i add v-filterselect-suggestpopup and nested styles outside MyUI style:
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
After that, i have a combo box with caption colors that responsively get changed. But popup window color remains same (always yellow).
I think it's because popup window is rendered outside my responsive UI. Responsive.makeResponsive(displayBoxFilter) didn't work. How do I make this window responsive?
Any suggestions would be helpful!
Thanks in advance
UPD based on Jouni's answer (worked for me):
I have added #media outside #mixin in mytheme.scss like this:
#mixin mytheme {
#include theme;
...
}
#media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}
This is a limitation in the Responsive extension, that it doesn’t apply to any overlay elements (except the Window component).
You’re best workaround is to use regular CSS media queries.
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}