How to override default Polymer CSS
Tags: css,polymer,web-component,shadow-dom
Problem :
Right now core-toolbar has an indent class that indents the title to the right by 60px, while material design dictates that the margin should actually be 80px (as a matter of fact the number 60 never shows throughout the documentation).
So I could easily go and edit it in bower_components/core-toolbar/core-toolbar.css but the problem is that, once I move the project somewhere else, I'd have to make the same edit once I've done my bower installs etc..
Mind you that if I was to extend core-toolbar say, I'd have a problem with core-header-panel etc.. because it would be looking for either <core-toolbar> or something with the class "core-header" which is a bit of an annoyance, but it's something I can live with.
What's the best way to do something like this?
Solution :
One approach might be to globally override core-toolbar's style using something like http://jsbin.com/soveyo/12/edit Note that I've only got native shadow dom support there.
Or you could do that in a particular instance if you'd prefer & remove the html /deep/ bit.
Or you might add your own class to the element you're giving as content to the toolbar & give it the indentation you want.
CSS Howto..
div,input{ display:inline-block; vertical-align:top; } <form> <div>$</div> <input type="text" > </form> give display:inline-block to both input and div, in case it has alignment issue add vertical-align:top;...
Add this: li { white-space: nowrap; } display:inline; on your li element is causing the 3rd one to flow to the next line. ...
To fix the horizontal pushing: Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the...
Despite your question title, what you are requesting is called a "sticky footer" because it sticks to the bottom of the page (unless there is enough data to push it...
Set the top property as 100 - height. Example: <div class="meter red"> <span style="height: 20%; top: 80%;"></span> </div> <div class="meter red"> <span style="height: 60%; top: 40%;"></span> </div> EDIT: I hope...
Guys I found the solution myself. You should have a file called portal-ext.properties file in $TOMCAT_DIR/webapps/ROOT/WEB-INFO/classes Or more specifically for my win setup in C:\liferay\webapps\ROOT\WEB-INF\classes The file would hold the...
Try using the CSS Is Less extension for VS2010: http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923 Forces .LESS files to open in the CSS editor, without having to change settings or adding HTML tags to your...
Facebook seems to accomplish this by setting the CSS attribute "overflow: hidden" on the document body when a picture is displayed. I just tested it myself by adding the following...
This is native behaviour of the browser. It's displaying the URL because it is the href of the active link. The link remains active after being clicked because it has...
Instead of min-width and min-height, use max-width and max-height in .full-screen img. min-width means the size won't shrink below that width (and the same for height, of course)....
After putting everything in place, you need to use jQuery animate() function: $(document).ready(function(){ $("#mycontainerID").animate({"background-position": "-300px"}, 2000,'linear'); }); Supposing that your background is located in 0,0 and you want the animation...
You can use vertical align to align the content of the table cells. Available options are top middle bottom or baseline td {vertical-align: top;} <table> <tr> <td><img src="http://lorempixel.com/image_output/nightlife-h-g-291-326-2.jpg"></td> <td>Lorem Ipsum</td>...
You're looking for padding, not margin try adding to #contenido p padding-top:10px; For more information look into CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model...
You can define a CSS class for your inputs and just use them. For inputs with class example: input.example { border: none; font-size: 16px; } Use it like this: <input...
If you define your markup/styles as this: <table class="showSmallCars showMediumCars"> <tr class="smallCar">...<tr> <tr class="mediumCar">...<tr> </table> CSS: table tr { display:none; } table.showSmallCars tr.smallCar { display:table-row; } table.showMediumCars tr.mediumCar {...
You need to set preserve 3d #outer { padding: 20px; background-color: blue; -webkit-transform: perspective(400px) rotateX(45deg); -webkit-transform-style: preserve-3d; } #inner { height: 150px; width: 150px; background-color: tomato; background-image: url(http://www.w3schools.com/html/smiley.gif); background-size: 100%;...
For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from. If you set the...
Your table is re-sizing because you are using proportional widths. There are many ways you can control this. For example, by setting your or height in pixels: CSS: table td...
Technically you can't trigger an effect on a parent element. However, you don't actually need to do that given the problem you've stated. When you move to the child links...
After going through thousands of thousands of lines of CSS code, I found this: .ui-page{-webkit-backface-visibility: hidden !important} This was active for all pages and caused the problem. Removing that line...
Given IE9 and later, this is possible entirely through the :target pseudo-class: #subsection:target { … } ...
You are calling the wrong variable in your second foreach. Also since you run the same code it would better to merge the two arrays and only use one loop....
The vanilla javascript solution, Set the first item as active Assign a mouseover event listener to each item On mouseover of each item set the current active to inactive Set...
It doesn't sound to hard... What I'd do is to have the four blocks inside a div limited by a width, and give the percent width for each of that...
HTML: <div class="located"> <div class="userimage"> <?php echo $userSkin3D;?> </div> </div> CSS: .located { background: url(images/located.jpg); background-repeat: no-repeat; background-position: 50% 25%; width: 100%; height: 80%; z-index: -1; position: fixed; } .userimage...
This pretty much does what you're looking for I think. Could probably be refined: http://jsfiddle.net/gsTNS/5/ Basically I've added a class of "has-dropdown" to each LI that has a dropdown and...
From the same page you're refering to: If you do not care about sharing or re-using your module then you can just use the standard HTML link rel stuff in...
Using diff If you are on OS X or LInux, type: diff file1.css file2.css > cssdiff.patch touch diff.css patch diff.css cssdiff.patch ...
Try this code: DEMO JS: $('input').change(function(){ $(this).attr('title',($(this).val())); }); ...
Most browsers set default margins, you can override them including body { margin:0; } in your CSS. UPDATE: you've got h1 there, it also has its own margins, so add...