Created
October 5, 2013 08:09
-
-
Save NatalieLukaniuk/6838208 to your computer and use it in GitHub Desktop.
Untitled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
figure img { | |
border: 1px solid #ccc; | |
} | |
.tutorial section { | |
overflow: visible; | |
} | |
.tutorial section iframe { | |
width: 100%; | |
border: none; | |
} | |
article.tutorial .notice.fact { | |
position: relative; | |
padding-left: 25px; | |
} | |
article.tutorial .notice.fact:before { | |
position: absolute; | |
top: -5px; | |
left: -10px; | |
text-transform: uppercase; | |
-webkit-transform: rotateZ(-30deg); | |
-moz-transform: rotateZ(-30deg); | |
-o-transform: rotateZ(-30deg); | |
-ms-transform: rotateZ(-30deg); | |
transform: rotateZ(-30deg); | |
/*color: rgb(80, 139, 136);*/ | |
color: rgb(237, 71, 50); | |
font-weight: bold; | |
content: "Fact"; | |
} | |
.tutorial table td, | |
.tutorial table th { | |
border: 1px solid #ccc; | |
padding: 5px; | |
} | |
.tutorial table th { | |
background: #444; | |
color: white; | |
padding: 10px; | |
font-weight: normal; | |
} | |
.tutorial table em { | |
margin-left: 15px; | |
} | |
.tutorial table tr { | |
background: #fff; | |
} | |
.tutorial table tr:nth-child(odd) { | |
background: #eee; | |
} | |
.disabledemos .demoarea { | |
display: none !important; | |
} | |
.demoarea, .demodevtools { | |
margin-top: 20px; | |
} | |
.demodevtools { | |
display: inline-block; | |
position: relative; | |
vertical-align: top; | |
margin-right: 1em; | |
} | |
.demodevtools:before { | |
content: 'DevTools view:'; | |
position: absolute; | |
top: -20px; | |
left: 0; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
.demoarea { | |
padding: 10px; | |
background: #fff; | |
border: 1px dashed #000; | |
display: inline-block; | |
position: relative; | |
} | |
.demoarea:before { | |
content: 'Live demo:'; | |
position: absolute; | |
top: -20px; | |
left: 0; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
.featuresupported.no { | |
display: none !important; | |
} | |
.talkinghead:before { | |
background-image: url(/static/images/profiles/75/ericbidelman.75.png); | |
background-position: 0px 0px !important; | |
} | |
#example4-log { | |
width: 100%; | |
box-sizing: border-box; | |
} | |
#example4-log:before { | |
content: 'Output:'; | |
} | |
#example4-log textarea { | |
outline:none; | |
border:none; | |
width:100%; | |
height:70px; | |
resize:none; | |
} | |
#inherit-buttons { | |
margin-left: 15px; | |
margin-top: 20px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
#inherit-buttons button { | |
display: block; | |
margin-bottom: 10px; | |
} | |
.small-notice { | |
font-size: 85%; | |
} | |
#example5.demoarea { | |
display: block; | |
margin-top: 30px; | |
} | |
#example5 [data-host]:before { | |
top: 3px; | |
left: 3px; | |
position: absolute; | |
content: '<div data-host>'; | |
color: #888; | |
} | |
#example5 [data-host] { | |
padding: 25px; | |
border: 3px solid black; | |
display: inline-block; | |
background: #eee; | |
text-align: center; | |
position: relative; | |
float: left; | |
} | |
#example5 div { | |
padding: 5px; | |
border-radius: 3px; | |
margin-bottom: 5px; | |
} | |
#example5 .blue { | |
background: steelblue; | |
color: white; | |
display: inline-block; | |
} | |
#example5 .buttons { | |
margin-left: 10px; | |
float: left; | |
} | |
#example5 output { | |
background: #eee; | |
height: 150px; | |
overflow: auto; | |
padding: 10px; | |
display: block; | |
clear: both; | |
} | |
#example5 output span { | |
font-style: italic; | |
font-size: small; | |
display: inline-block; | |
} | |
#example5 button { | |
vertical-align: bottom; | |
margin-bottom: 5px; | |
} | |
#example5.playing { | |
/*cursor: none;*/ | |
} | |
#example5 .cursor { | |
/* Icon by Laurent Patain - http://thenounproject.com/____Lo */ | |
background-image: url(cursor.svg); | |
width: 36px; | |
height: 40px; | |
background-size: contain; | |
background-repeat: no-repeat; | |
opacity: 0; | |
pointer-events: none; | |
position: absolute; | |
} | |
#example5.playing .cursor { | |
} | |
@-webkit-keyframes animation1 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(70px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(70px, 280px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(70px, 280px, 0); | |
} | |
} | |
@-webkit-keyframes animation2 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 280px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(240px, 280px, 0); | |
} | |
} | |
@-webkit-keyframes animation3 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0); | |
} | |
91% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0) rotateX(30deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0); | |
} | |
} | |
@keyframes animation1 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(70px, -40px, 0); | |
transform: translate3d(70px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(70px, 280px, 0); | |
transform: translate3d(70px, 280px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(70px, 280px, 0); | |
transform: translate3d(70px, 280px, 0); | |
} | |
} | |
@keyframes animation2 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, -40px, 0); | |
transform: translate3d(240px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 280px, 0); | |
transform: translate3d(240px, 280px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(240px, 280px, 0); | |
transform: translate3d(240px, 280px, 0); | |
} | |
} | |
@keyframes animation3 { | |
from { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, -40px, 0); | |
transform: translate3d(240px, -40px, 0); | |
} | |
90% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0); | |
transform: translate3d(240px, 128px, 0); | |
} | |
91% { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0) rotateX(30deg); | |
transform: translate3d(240px, 128px, 0) rotateX(30deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(240px, 128px, 0); | |
transform: translate3d(240px, 128px, 0); | |
} | |
} | |
#example5.playing.animation1 .cursor { | |
-webkit-animation: animation1 5s; | |
animation: animation1 5s; | |
} | |
#example5.playing.animation2 .cursor { | |
-webkit-animation: animation2 5s; | |
animation: animation2 5s; | |
} | |
#example5.playing.animation3 .cursor { | |
-webkit-animation: animation3 5s; | |
animation: animation3 5s; | |
-webkit-transform-origin: 50% 100%; | |
-moz-transform-origin: 50% 100%; | |
-ms-transform-origin: 50% 100%; | |
-o-transform-origin: 50% 100%; | |
transform-origin: 50% 100%; | |
} | |
.scopestyleforolderbrowsers * { | |
border: 4px solid #FC0; | |
} | |
.scopestyleforolderbrowsers input { | |
padding: 5px; | |
} | |
.scopestyleforolderbrowsers div { | |
background: #FC0; | |
padding: 5px; | |
border-radius: 3px; | |
margin: 5px 0; | |
} | |
content::-webkit-distributed(*) { | |
border: 4px solid #FC0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="example5" class="demoarea"> | |
<div data-host=""> | |
<div class="blue">I'm a node in the host</div> | |
</div> | |
<template style="display:none;"> <!-- display:none used for older browsers --> | |
<section class="scopestyleforolderbrowsers"> | |
<div>I'm a node in Shadow DOM</div> | |
<div>I'm a node in Shadow DOM</div> | |
<content></content> | |
<input placeholder="I'm in Shadow DOM" type="text"> | |
<div>I'm a node in Shadow DOM</div> | |
<div>I'm a node in Shadow DOM</div> | |
</section> | |
</template> | |
<aside class="cursor"></aside> | |
<div class="buttons"> | |
<button data-action="playAnimation" data-action-idx="1">Play Action 1</button><br> | |
<button data-action="playAnimation" data-action-idx="2">Play Action 2</button><br> | |
<button data-action="playAnimation" data-action-idx="3">Play Action 3</button><br> | |
<button data-action="clearLog">Clear log</button> | |
</div> | |
<output></output> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
function stringify(node) { | |
return node.outerHTML.match(".*?>")[0].replace('<', '<').replace('>', '>'); | |
} | |
var out = document.querySelector('#example5 output'); | |
var host = document.querySelector('#example5 [data-host]'); | |
var wrapper = document.querySelector('#example5'); | |
var root = host.createShadowRoot(); | |
root.innerHTML = document.querySelector('#example5 template').innerHTML; | |
host.addEventListener('mouseout', function(e) { | |
out.innerHTML += [ | |
'<span>[' + e.type + ']</span>', | |
'on:', stringify(e.target) + ',', | |
'from', stringify(e.fromElement), | |
'→', stringify(e.toElement), '<br>'].join(' '); | |
out.scrollTop = out.scrollHeight; | |
}); | |
document.addEventListener('focusin', function(e) { | |
out.innerHTML += [ | |
'<span>[' + e.type + ']</span>', | |
'on:', stringify(e.target), '<br>'].join(' '); | |
out.scrollTop = out.scrollHeight; | |
}); | |
function clearLog() { | |
out.innerHTML = ''; | |
} | |
function cleanUpAnimations(node) { | |
[].forEach.call(node.classList, function(c) { | |
if (c.indexOf('animation') == 0) { | |
node.classList.remove(c); | |
} | |
}); | |
} | |
function playAnimation(idx) { | |
clearLog(); | |
wrapper.classList.add('playing'); | |
wrapper.classList.add('animation' + idx); | |
} | |
wrapper.addEventListener('webkitAnimationEnd', function(e) { | |
this.classList.remove('playing'); | |
cleanUpAnimations(this); | |
}); | |
document.querySelector('#example5 .buttons').addEventListener('click', function(e) { | |
if (e.target.tagName == 'BUTTON') { | |
switch(e.target.dataset.action) { | |
case 'clearLog': | |
clearLog(); | |
break; | |
case 'playAnimation': | |
cleanUpAnimations(wrapper); | |
playAnimation(parseInt(e.target.dataset.actionIdx)); | |
break; | |
default: | |
break; | |
} | |
} | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment