I am trying to change the css on a paper-header-panel. According to the docs on Polymers website I can simple change the shadow with:
paper-header-panel {
--paper-header-panel-shadow: {
height: 6px;
bottom: -6px;
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
};
}
sadly I can't get it to work... I also tried to change the color on the paper-toolbar, it also does not work.
Here is my code:
<!doctype html>
<html>
<head>
<!-- Polymer -->
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-header-panel/paper-header-panel.html'>
<link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'>
<link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'>
<meta charset='utf-8'>
<title>Test</title>
<style>
paper-header-panel {
--paper-header-panel-shadow: {
height: 6px;
bottom: -6px;
box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
};
}
paper-toolbar {
--paper-toolbar-background: green;
--paper-toolbar-color: white;
}
</style>
</head>
<body class='fullbleed layout vertical'>
<paper-header-panel class='flex'>
<paper-toolbar>
<div>Title</div>
</paper-toolbar>
</paper-header-panel>
</body>
</html>
Where do things go wrong?
I found the reason. I had to set my style as is='custom-style'.
<style is='custom-style'>
paper-header-panel {
--paper-header-panel-shadow: {
height: 6px;
bottom: -6px;
box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
};
}
paper-toolbar {
--paper-toolbar-background: green;
--paper-toolbar-color: white;
}
</style>
Related
I am trying to implement HTML5 drag and drop for polymer2.0 components similar to the drag and drop option as in http://jsfiddle.net/U55rc/
HTML:
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/">
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout-classes.html">
<dom-module id="demo-element">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.card {
margin: 24px;
padding: 16px;
color: #757575;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
</style>
<div draggable="true" ondragstart="{{drag(event)}}" >
Input:
<input type="text"/>
</div>
<div class="card" id="div1" ondrop="{{drop(event)}}" ondragover="{{allowDrop(event)}}"></div>
</template>
<script>
Polymer({
is: 'demo-element',
allowDrop:function(ev){
ev.preventDefault();
},
drag: function(ev){
ev.dataTransfer.setData("text",ev.target.id);
},
drop:function(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
console.log(ev)
ev.target.appendChild(document.getElementById(data));
}
});
</script>
<script>Polymer({is: "demo-element"});</script>
</dom-module>
<demo-element></demo-element>
JSFiddle for reference:
https://jsfiddle.net/Nagasai_Aytha/b62to481/
The key here is to use the on-<event> notation for the native HTML5 drag and drop events. Also, you don't need data binding notation for the events.
Here is your corrected markup.
HTML:
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/">
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout-classes.html">
<dom-module id="demo-element">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.card {
margin: 24px;
padding: 16px;
color: #757575;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
</style>
<div id="draggedDiv" draggable="true" on-dragstart="drag" >
Input:
<input type="text"/>
</div>
<div class="card" id="div1" on-drop="drop" on-dragover="allowDrop"></div>
</template>
<script>
Polymer({
is: 'demo-element',
allowDrop:function(ev){
ev.preventDefault();
},
drag: function(ev){
ev.dataTransfer.setData("text",ev.target.id);
},
drop:function(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
console.log(ev)
ev.target.appendChild(this.shadowRoot.querySelector('#' + data));
}
});
</script>
<script>Polymer({is: "demo-element"});</script>
</dom-module>
<demo-element></demo-element>
For Polymer 2.0 change this.$$ to this.shadowRoot.querySelector:
drop (ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(this.shadowRoot.querySelector('#' + data));
}
I'm working on a photo blog, and I'm working on a slightly different idea but and I've got this neat spotlight to work, however trying to duplicate it to make more than one neat little spotlight won't seem to work.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<ul>
<li><div class="tjena"><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></div></li>
<li><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></li>
</ul>
</div>
<div id="overlag 1">
<div id="spotlight" class="spotlight"></div>
</div>
<div id="overlag 2">
<div id="spotlight" class="spotlight"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/okfocus/okshadow/master/src/okshadow.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
display: table;
background-image: url("http://www.wildtextures.com/wp-content/uploads/wildtextures_white-brick-wall.jpg");
background-repeat: repeat;
background-size: 30%;
}
.main {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .title {
font-size: 5rem;
margin-bottom: 50px;
}
.main .sub-title {
font-size: 2rem;
}
.main ul {
display: flex;
}
.main ul li {
margin: 0 120px;
}
.spotlight {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
background-image: -webkit-radial-gradient(center, circle cover, transparent -7%, rgba(0, 0, 0, 0.6) 13%);
}
.bild {
height: 300px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
What I want is to apply the link rules to this button, like of a:link, a:hover, etc but I do not want to use a tag as it will change all of my links on the page. Can anyone help me please?
Here is my HTML:
<html>
<head>
<title>Button</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<button>Button</button>
</body>
</html>
and here is my CSS
button {
color: #003739;
background-color: #00bb89;
padding: 6px 18px;
border-radius: 100px;
border: 2px solid #007e5c;
background: linear-gradient(#00dda1, #00956d);
box-shadow: inset 0 0 2px white;
text-shadow: 0px 1px 1px white;
box-shadow: 0px 2px 5px #d0d0d0;
cursor: pointer;
}
For starters, it isn't valid for an a element to be contained within a button element.
What you can do is instead give your a element a button role attribute and style on that:
a[role="button"]:link {
...
}
a[role="button"]:hover {
...
}
...
My page renders incorrectly (not how I want) on the first load, then when refreshed is correct. It's has to do with the "display:inline-block" I think. I've done a lot of research but I can't seem to figure this one out. And yes.... I've cleared my cache before loading it, I get the same result.
first load:
after refresh:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="ribbon-start"></div>
<div id="ribbon-shade"></div>
<div id="banner">
<div id="titles">
<div id="name">The Person</div>
<div id="profession">Their Profession</div>
</div>
<div class="tip"></div>
<div class="nav-butts">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div> <!-- header -->
<div style="height:900px; width:1px"></div><!-- SCROLL TEST -->
<div id="footer">
<div id="toTop">^</div>
</div> <!-- footer -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryeasing.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<script type="text/javascript" src="js/behaviour.js"></script>
</body>
</html>
and the CSS
body{
background-color:#00FFFF;
}
#ribbon-start{
z-index:-2;
position:absolute;
top:10px;
left:0px;
width:49px;
height:100px;
background-color:#181818 ;
}
#ribbon-shade{
z-index:-1;
position:absolute;
top:10px;
left:25px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 10px solid transparent;
border-right:24px solid #909090 ;
}
#banner{
margin:21px 0 0 17px;
width:90%;
height:100px;
background-color:black ;
-webkit-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
}
#titles{
display:inline-block;
}
#name{
margin: 0 0 0 80px;
font-size:84px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#profession{
margin: 0 0 0 10px;
font-size:34px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#banner .tip{
display:inline-block;
margin: 0 -49px 0 0;
float:right;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}
.nav{
margin:0 0 0 17px;
width:90%;
height:100px;
}
.nav-butts{
display:inline-block;
padding:8px 8px 8px 8px;
background-color:black;
border-radius:38px;
margin:8px 0 0 0;
float:right;
}
.circle{
margin:5px 8px 0 8px;
display:inline-block;
height:60px;
width:60px;
background-color:white;
border-radius:30px;
}
.sticky {
margin-top:10px;
position: fixed;
left:-8px;
top:-8px;
z-index: 100;
border-top: 0;
}
.sticky .nav-butts{
-webkit-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
}
#toTop{
position:fixed;
text-align:center;
left:10%;
bottom:-15px;
height:60px;
width:70px;
font-size:64px;
background-color:black;
font-family: 'RalewayThin', sans-serif;
color: white;
border-radius:20px;
cursor:pointer;
}
#font-face
{
font-family: RalewayBold;
src: url('fonts/Raleway-Bold.otf');
}
#font-face
{
font-family: RalewayLight;
src: url('fonts/Raleway-light.otf');
}
It worked fine for me on the first load. I have worked with php in the past and found that an error appears underneath at the first load but disappears at the second load. Try different browsers. One may just be acting up.
I've included this line
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
This clears the problem but isn't really the answer to this question. This code makes the browser call for the styles instead of using cached ones for every load, I believe.
Stumped to find out the layout for this page is wrong in both IE and Firefox, with completely (as far I know) neutral code.
In IE the box containing this next is far too huge for it.
In Mozilla it is too small.
Mozilla shows box shadows when I use the property:
box-shadow
Which is very strange, I thought it used -moz-box-shadow
Here's what's going on: http://i.imgur.com/SvPAP.png (that line on the Mozilla box is from photoshop).
Here's all associated code:
HTML:
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
<link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />
<head>
<body>
<div class="divCentre">
<div class="divTitleCon">
<p class="titleText">What Is This?</p>
</div>
<div class="divContentCon">
<p class="contentText">
TEXT
<br /><br />
TEXT
<br /><br />
TEXT
<br /><br />
<span class="footerText">
TEXT
</span>
</p>
</div>
</div>
</body>
</html>
CSS PAGE:
html, body
{
margin: 0;
padding: 0;
}
body
{
background-color: rgb(241, 250, 253);
}
.divCentre
{
position:absolute;
top: -25%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 380px;
height: 230px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(200, 200, 200, 1); /* BORDER */
background-color: rgba(255, 255, 255, 1); /* BACKGROUND */
color: rgb(100, 100, 100);
-moz-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
-webkit-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
}
.divTitleCon
{
position: relative;
width: 100%;
height: 15%;
}
.divContentCon
{
position: relative;
margin-top: 20px;
width: 100%;
height: auto;
max-height: 80%;
word-wrap: break-word;
overflow: hidden;
}
CSS TEXT:
p
{
margin: 0;
padding: 0;
}
.titleText
{
font: 32px Arvo;
text-shadow: 0px 1px rgb(255,255,255);
}
.contentText
{
font: 14px PT Sans;
color: rgb(150, 150, 150);
text-shadow: 0px 1px rgb(255,255,255);
}
.footerText
{
color: rgb(200, 200, 200);
}
It appears that Mozzila and Chrome render text completely differently (the text in question here is from Google's font API, maybe a more local version wouldn't have this issue. I'll experiment).
Anyway, specifying the line-height and using a common font is important.
Specifying just line-height will fix the gap between lines, spaced by <br /><br />, however, the amount of text on that line will vary.
Firefox tended to squash it together more, while Google rendered it 'correctly', which is understandable. The fonts from Google's API are probably optimised for -webkit-, or their fork of it.
Either way this is annoying but a required workaround.
TL;DR:
Fixed by changing:
font: 14px PT Sans;
to
font: 14px Arial, Sans-Serif;
line-height: 14px;