In the Material Design spec the depth of the paper items goes from z=0 (dp) to z=24 (dp), but Polymer Elements only use 5 different depths, in pixels.
Is there a way to use the official depth values from the Material Design spec, and do some kind of transformation from the polymer element definition?
One way would be to do again all the CSS for the shadows, but I was hoping for a cleaner solution.
There are just 5 predefined styles which are selected by the z attribute (https://github.com/Polymer/paper-shadow/blob/master/paper-shadow.css)
This is the example for z=5
html /deep/ .paper-shadow-top-z-5 {
box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
html /deep/ .paper-shadow-bottom-z-5 {
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3);
}
add a similar style to your page and with a custom suffix instead of 1-5 and then use this suffix as depth. (not tested myself though)
Related
In FireFox browser alone , i get the border size as 0.6667 when i set the border width as 1px to the div or input element or any HTML element. Please find the below screenshot.
I have given the border in css inline style and also via separate class but i get the same result. i have not provided any box model to the element.
If i given the border size 2px then its working fine. i get problem on providing odd number.
if i give 1px => 0.6667
if i give 3px => 2.6667
Due to above problem, my calculation get breaks in css level. So can you please provide solution to resolve this issue?
Whether its browser issue? or else provide any work around solution on this?
Thanks,
Gobalakrishnan
Until Mozilla gets their shit together you can use inset box-shadows instead:
box-shadow: inset 0 0 0 1px rgba(#f00, 1);
In that case, remember to add padding to compensate accordingly.
I'm finding in several places the use of a single class for a single css attribute. The result is something like this:
<header>
<h1 class="secondary-text-colour heading-large">#Messages("xxx")</h1>
<span class="secondary-text-colour heading-small">#Messages("xxx")</span>
</header>
We can see how heading-large is only used for setting the font size or primary-text-colour is used to set the colour of the font.
My idea of good design would be something like:
<header>
<h1 class="header-main">#Messages("xxx")</h1>
<span class="header-subtitle">#Messages("xxx")</span>
</header>
In this second scenario you define a class for your element and you define the style with the css.
I sincerely think that this is how css and classes should be used but I need formal explanation to defend it in front of other team members. Can anyone give me any feedback on this?
This is exactly how classes should be used. They provide a semantic layer of abstraction to the reader of the HTML. I would encourage you to read this book about SMACSS it provides a great understanding of CSS architecture in general.
EDIT
Your idea is less modular than the original approach, see the SMACSS book for more information on this topic. Maybe you would like to change the color of this new headline, but still have the same font as in all other headlines. If you have one selector for each you would have to change both places if the font changes later. This gets even harder if you have large stylesheets and searching each position in the styles which would be needed is much harder than writing two classes in fist place.
As an example... You have a very big project whith a design that requires many boxes with a box-shadow.
If You have to copy and paste:
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
for every container class that is going to have the shadow you are adding hundreds of unnecesary lines to your css sheet. But if you just add a single class like:
.shadow {
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}
You just need to add the class to whatever container needs the shadow in the html.
Faster, cleaner, easier.
First of all I know questions regarding the Chrome yellow input background problem has been asked several times and there are lots of ways provided to override it.
But I am unable to make it work for me, as I am having form with transparent inputs.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
The above code works perfectly for making the color of input white but when I give the following code it gives yellow as background.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset;
}
Is there any possible way of fixing this. Also autocomplete="off" on form dosenot solve my problem.
Adding a hidden input before the input field without name attribute removes the yellow but when I type a username the input background changes back to yellow.
the auto-completed input in chrome always have a yellow background.
By using -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset; you are putting a black background with 10% visibility on top of the yellow background, wich will result in a litle bit darker yellow background.
And by using -webkit-box-shadow: 0 0 0px 1000px transparent inset; you are putting a transparent background on top of the yellow background, wich will change absolutely nothing.
You can either accept these results or use a 100% visible color like black, rgb(255, 255, 255), rgba(255, 255, 255, 1) or #000000
I think that the yellow background cannot be removed, you can only put another one on top of it, it's a bug I think, I never found a solution for it.
I might be utterly wrong, but a workaround might be changing the input "name" attribute each time (adding a random string to it) so that the browser won't recognize it as the username field and won't trigger the autocorrection
Then you could simply either use a substr() to cut away the random part or pass the random string as a form field and compose the POST array names with that
I Want to apply multiple values to css property. I need to apply like this as i mentioned below.
.class{align-content: flex-start;
align-content: space-around;
}
Both of them Css Values i want to apply at a same time. So I Need like this.
No, you can't do that. The second rule will just override the first rule.
What you can do is wrap an element in a container and set up different rules to the container element.
One exception to this that I can think of, is the background property - where multiple value are acceptable in CSS3.
Here's a mozilla article about that
In this particular case, the answer is no. Not all CSS properties accept multiple values. However few properties do. E.g- box-shadow
.my-element{
box-shadow:0 0 10px 0 #000, 1px 1px 10px 0 #666;
}
Here, multiple values are separated by comma (,)
align-content is not one of those properties. So no!
I'm building a UI where I have to display 2 tiles on a single row. What I'm trying to achieve is to have the color of tiles on odd numbered rows be changed.
This is what I'm doing:
div.tile:nth-child(odd),button.btn-odd:nth-child(n)
{
background: rgba(26, 188, 156,1.0);
border-color: rgba(26, 188, 156,1.0);
}
div.tile:nth-child(odd):hover,button.btn-odd:nth-child(n):hover,div.tile:nth-child(odd):hover .btn-odd
{
background: rgba(22, 160, 133,1.0);
border-color: rgba(22, 160, 133,1.0)
}
button.btn-odd:nth-child(n):focus
{
background: rgba(22, 160, 133,1.0);
border-color: rgba(22, 160, 133,1.0)
}
button.btn-odd:nth-child(n):active
{
background: rgba(22, 160, 133,1.0);
border-color: rgba(22, 160, 133,1.0)
}
For more information, check out this fiddle: http://jsfiddle.net/ZC43W/ [stretch it out to see 2 tiles on a row]
Now the problem is that the tiles on the first row are giving me the required effect. However, tiles on the 2nd row (even row) are also exhibiting the same effect (green color although they should be blue). Can anyone tell me why this is happening? It seems that the nth-child selector is selecting all the rows instead of only odd numbered rows.
You should actually use these as selector...
div.row:nth-child(odd) div.tile
div.row:nth-child(odd) div.tile .btn-odd
div.row:nth-child(odd) div.tile:hover
div.row:nth-child(odd) div.tile:hover .btn-odd
... and so on, as you want the effect to kick in based on the row's (and that's div.row) index.
As it stands now, the selector covers all the elements - as each div.tile is actually a single child of div.col-md-6 element. And 1 is an odd number, right. )
Demo.
As a sidenote, using :nth-child(n) is plain redundant (it'll be applied to any element covered by the preceding selector). Unless you really need to upper the specificity of the selector - but then again, there are better ways to achieve this.