chrosey/dienstplan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

save me

Browse Source
This commit is contained in:
chrosey
2017-09-13 07:52:34 +02:00
parent a1f16c37f4
commit 2340b0226b
24621 changed files with 2912161 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
node_modules/tether/docs/welcome/browser-demo.html
Generated Vendored
+76
View File
@@ -0,0 +1,76 @@
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drop – Browser Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/ghy0wve.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Drop themes -->
<link rel="stylesheet" href="//github.hubspot.com/tether/dist/css/tether-theme-arrows-dark.css" />
<!-- Browser demo styles -->
<link rel="stylesheet" href="//github.hubspot.com/tether/docs/welcome/css/browser-demo.css" />
</head>
<body>
<div class="browser-demo">
<div class="top"><div class="title"></div></div>
<div class="bottom">
<div class="left">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="right">
<div class="title"></div>
<p>
<div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div>
</p>
<p>
<div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div><div class="word"></div>
</p>
</div>
</div>
</div>
<!-- Tether javascript -->
<script src="//github.hubspot.com/tether/dist/js/tether.min.js"></script>
<!-- Welcome docs javascript -->
<script src="//github.hubspot.com/tether/docs/welcome/js/log.js"></script>
<script src="//github.hubspot.com/tether/docs/welcome/js/jquery.js"></script>
<script src="//github.hubspot.com/tether/docs/welcome/js/drop.js"></script>
</body>
</html>
node_modules/tether/docs/welcome/coffee/welcome.coffee
Generated Vendored
+212
View File
@@ -0,0 +1,212 @@
_Drop = Drop.createContext classPrefix: 'tether'
isMobile = $(window).width() < 567
init = ->
setupHero()
setupBrowserDemo()
setupHero = ->
$target = $('.tether-target-demo')
positions = [
'top left'
'left top'
'left middle'
'left bottom'
'bottom left'
'bottom center'
'bottom right'
'right bottom'
'right middle'
'right top'
'top right'
'top center'
]
if isMobile
positions = [
'top left'
'bottom left'
'bottom right'
'top right'
]
window.drops = {}
for position in positions
drops[position] = new _Drop
target: $target[0]
classes: 'tether-theme-arrows-dark'
position: position
constrainToWindow: false
openOn: ''
content: '<div style="height: 50px; width: 50px"></div>'
openIndex = 0
frames = 0
frameLengthMS = 10
openAllDrops = ->
for position, drop of drops
drop.open()
openNextDrop = ->
for position, drop of drops
drop.close()
drops[positions[openIndex]].open()
drops[positions[(openIndex + 6) % positions.length]].open()
openIndex = (openIndex + 1) % positions.length
if frames > 5
finalDropState()
return
frames += 1
setTimeout openNextDrop, frameLengthMS * frames
finalDropState = ->
$(drops['top left'].dropContent).html('Marrying DOM elements for life.')
$(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>')
drops['top left'].open()
drops['bottom right'].open()
if true or isMobile
drops['top left'].open()
drops['top left'].tether.position()
drops['bottom right'].open()
drops['bottom right'].tether.position()
finalDropState()
else
openNextDrop()
setupBrowserDemo = ->
$browserDemo = $('.browser-demo.showcase')
$startPoint = $('.browser-demo-start-point')
$stopPoint = $('.browser-demo-stop-point')
$iframe = $('.browser-window iframe')
$browserContents = $('.browser-content .browser-demo-inner')
$sections = $('.browser-demo-section')
$('body').append """
<style>
table.showcase.browser-demo.fixed-bottom {
top: #{ $sections.length }00%
}
</style>
"""
$(window).scroll ->
scrollTop = $(window).scrollTop()
if $startPoint.position().top < scrollTop and scrollTop + window.innerHeight < $stopPoint.position().top
$browserDemo.removeClass('fixed-bottom')
$browserDemo.addClass('fixed')
$sections.each ->
$section = $ @
if $section.position().top < scrollTop < $section.position().top + $section.outerHeight()
setSection $section.data('section')
return true
else
$browserDemo.removeAttr('data-section')
$browserDemo.removeClass('fixed')
if scrollTop + window.innerHeight > $stopPoint.position().top
$browserDemo.addClass('fixed-bottom')
else
$browserDemo.removeClass('fixed-bottom')
$iframe.load ->
iframeWindow = $iframe[0].contentWindow
$items = $iframe.contents().find('.item')
$items.each (i) ->
$item = $(@)
_iframeWindowDrop = iframeWindow.Drop.createContext classPrefix: 'tether'
drop = new _iframeWindowDrop
target: $item[0]
classes: 'tether-theme-arrows-dark'
position: 'right top'
constrainToWindow: true
openOn: 'click'
content: '''
<ul>
<li>Action&nbsp;1</li>
<li>Action&nbsp;2</li>
<li>Action&nbsp;3</li>
</ul>
'''
$item.data('drop', drop)
scrollInterval = undefined
scrollTop = 0
scrollTopDirection = 1
setSection = (section) ->
$browserDemo.attr('data-section', section)
$('.section-copy').removeClass('active')
$(""".section-copy[data-section="#{ section }"]""").addClass('active')
openExampleItem = ->
if isMobile
$iframe.contents().find('.item:first').data().drop.open()
else
$iframe.contents().find('.item:eq(2)').data().drop.open()
closeAllItems = ->
$iframe.contents().find('.item').each -> $(@).data().drop.close() or true
scrollLeftSection = ->
scrollInterval = setInterval ->
$iframe.contents().find('.left').scrollTop scrollTop
scrollTop += scrollTopDirection
if scrollTop > 50
scrollTopDirection = -1
if scrollTop < 0
scrollTopDirection = 1
, 30
stopScrollingLeftSection = ->
clearInterval scrollInterval
switch section
when 'what'
closeAllItems()
openExampleItem()
stopScrollingLeftSection()
when 'how'
closeAllItems()
openExampleItem()
stopScrollingLeftSection()
scrollLeftSection()
when 'why'
closeAllItems()
openExampleItem()
stopScrollingLeftSection()
scrollLeftSection()
when 'outro'
closeAllItems()
openExampleItem()
stopScrollingLeftSection()
init()
node_modules/tether/docs/welcome/css/browser-demo.css
Generated Vendored
+86
View File
@@ -0,0 +1,86 @@
html, body {
height: 100%;
overflow: hidden;
font-family: "proxima-nova", sans-serif; }
.tether.tether-theme-arrows-dark .tether-content {
-webkit-filter: none;
filter: none;
background: #000; }
.tether.tether-theme-arrows-dark .tether-content ul {
color: #fff;
list-style: none;
padding: 0;
margin: 0; }
.tether.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
border-right-color: #000; }
.browser-demo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.browser-demo *, .browser-demo *:after, .browser-demo *:before {
box-sizing: border-box; }
.browser-demo .top {
position: absolute;
height: 60px;
padding: 20px;
line-height: 40px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.browser-demo .bottom {
position: absolute;
top: 60px;
bottom: 0;
width: 100%; }
.browser-demo .bottom .left {
border-right: 1px solid rgba(0, 0, 0, 0.1);
position: absolute;
width: 30%;
height: 100%;
overflow: auto; }
.browser-demo .bottom .left .item {
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer; }
.browser-demo .bottom .left .item:hover, .browser-demo .bottom .left .item.tether-open {
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid transparent; }
.browser-demo .bottom .left .item:last-child {
border-bottom: 0; }
.browser-demo .bottom .right {
position: absolute;
width: 70%;
right: 0;
height: 100%;
padding: 20px; }
.browser-demo .title {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
background: rgba(0, 0, 0, 0.1);
width: 150px;
height: 15px;
margin-bottom: 20px; }
.browser-demo .word {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
background: rgba(0, 0, 0, 0.1);
width: 50px;
height: 8px;
margin-right: 5px;
margin-bottom: 5px; }
.browser-demo .word:nth-last-child(4n+1) {
width: 73px; }
.browser-demo .word:nth-last-child(10n+1) {
width: 14px; }
.browser-demo .word:nth-last-child(9n+1) {
width: 80px; }
node_modules/tether/docs/welcome/css/prism.css
Generated Vendored
+2
View File
@@ -0,0 +1,2 @@
/* Prism.js */
code[class*="language-"], pre[class*="language-"] {color: black; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: 14px; } :not(pre) > code[class*="language-"], pre[class*="language-"] {background: rgba(0, 0, 0, .05); } /* Inline code */ :not(pre) > code[class*="language-"] {padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata {color: slategray; } .token.punctuation {color: #999; } .namespace {opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin {color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {color: #a67f59; } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; }
node_modules/tether/docs/welcome/css/welcome.css
Generated Vendored
+247
View File
@@ -0,0 +1,247 @@
html, body {
height: 100%; }
body {
margin: 0;
font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
.button {
display: inline-block;
border: 2px solid #333;
color: #333;
padding: 1em 1.25em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
text-decoration: none;
cursor: pointer;
width: 140px;
font-size: .8em;
line-height: 1.3em;
text-align: center; }
.tether-element.tether-theme-arrows-dark .tether-content {
padding: 1em;
font-size: 1.1em; }
.tether-element.tether-theme-arrows-dark .tether-content .button {
border-color: #fff;
color: #fff;
width: 170px;
pointer-events: all; }
.mobile-copy {
display: none; }
@media (max-width: 568px) {
.mobile-copy {
display: block; } }
.button.dark {
background: #333;
color: #fff; }
.hero-wrap {
height: 100%;
overflow: hidden; }
table.showcase {
height: 100%;
width: 100%;
position: relative; }
table.showcase:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
margin: auto;
height: 0;
width: 0;
border-width: 18px;
border-style: solid;
border-color: transparent;
border-top-color: rgba(0, 0, 0, 0.2); }
table.showcase.no-next-arrow:after {
display: none; }
table.showcase .showcase-inner {
margin: 40px auto 60px;
padding: 10px; }
table.showcase .showcase-inner h1 {
font-size: 50px;
text-align: center;
font-weight: 300; }
@media (max-width: 567px) {
table.showcase .showcase-inner h1 {
font-size: 40px; } }
table.showcase .showcase-inner h2 {
font-size: 24px;
text-align: center;
font-weight: 300;
margin: 1em 0 1em; }
@media (max-width: 567px) {
table.showcase .showcase-inner h2 {
font-size: 14px; } }
table.showcase .showcase-inner p {
text-align: center; }
table.showcase.hero {
text-align: center; }
table.showcase.hero .tether-target-demo {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
border: 2px dotted #000;
margin: 5rem auto;
padding: 5rem; }
@media (max-width: 567px) {
table.showcase.hero .tether-target-demo {
padding: 1rem; } }
table.showcase.share {
background: #f3f3f3; }
table.showcase.projects-showcase .showcase-inner .projects-list {
width: 80%;
max-width: 1200px;
margin: 0 auto; }
table.showcase.projects-showcase .showcase-inner .projects-list .project {
color: inherit;
text-decoration: none;
position: relative;
width: 50%;
float: left;
text-align: center;
margin-bottom: 2rem; }
table.showcase.projects-showcase .showcase-inner .projects-list .project:nth-child(odd) {
clear: left; }
table.showcase.projects-showcase .showcase-inner .projects-list .os-icon {
width: 8rem;
height: 8rem;
margin-bottom: 1rem;
background-size: 100%; }
table.showcase.projects-showcase .showcase-inner .projects-list h1 {
font-size: 2.5rem; }
table.showcase.projects-showcase .showcase-inner .projects-list p {
font-size: 1.3rem; }
table.showcase.browser-demo {
background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
background-color: #9d223c;
position: absolute;
top: 100%; }
table.showcase.browser-demo.fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1; }
table.showcase.browser-demo.fixed .browser-demo-inner {
-webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
transition: width 2s ease-in-out, height 2s ease-in-out; }
table.showcase.browser-demo.fixed[data-section="what"] {
box-shadow: 0 0 0 0; }
table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner {
width: 70%; }
table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner {
pointer-events: all; }
table.showcase.browser-demo .showcase-inner {
pointer-events: none;
position: absolute;
left: 10%;
right: 40%;
top: 220px;
bottom: 120px;
margin: 0;
padding: 0; }
@media (max-width: 567px) {
table.showcase.browser-demo .showcase-inner {
bottom: 90px;
top: 180px; } }
table.showcase.browser-demo .browser-demo-inner {
height: 100%;
width: 100%; }
table.showcase.browser-demo .section-copy {
-webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
position: absolute;
height: 200px;
color: #fff;
text-align: center;
width: 100%; }
table.showcase.browser-demo .section-copy.active {
opacity: 1;
top: -150px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy.active {
top: -130px; } }
table.showcase.browser-demo .section-copy h2 {
font-size: 40px;
font-weight: bold;
line-height: 1;
margin: 25px 0 15px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy h2 {
font-size: 30px; } }
table.showcase.browser-demo .browser-window {
border-radius: 4px;
background: #fff;
position: relative;
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto; }
table.showcase.browser-demo .browser-window .browser-titlebar {
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #eee;
height: 55px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
padding: 16px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
border-radius: 50%;
width: 10px;
height: 10px;
margin-right: 7px;
background: rgba(0, 0, 0, 0.1); }
table.showcase.browser-demo .browser-window .browser-frame {
position: absolute;
top: 55px;
left: 0;
right: 0;
bottom: 0; }
table.showcase.browser-demo .browser-window .browser-frame iframe {
border-radius: 0 0 4px 4px;
border: 0;
width: 100%;
height: 100%; }
table.showcase.browser-demo-section .section-scroll-copy {
position: relative;
z-index: 10;
color: #fff;
width: 100%;
font-size: 22px; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner {
position: absolute;
z-index: 10;
color: #fff;
right: 10%;
width: 23%; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a {
color: inherit; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph {
border-radius: 4px;
background: #000;
padding: 1rem; }
.browser-content {
display: none; }
node_modules/tether/docs/welcome/index.html
Generated Vendored
+226
View File
@@ -0,0 +1,226 @@
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tether – Marrying elements for life</title>
<meta name="description" content="Tether is a JavaScript and CSS library. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/ghy0wve.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Tether themes -->
<link rel="stylesheet" href="//github.hubspot.com/tether/dist/css/tether-theme-arrows-dark.css" />
<!-- Welcome docs styles -->
<link rel="stylesheet" href="//github.hubspot.com/tether/docs/welcome/css/prism.css" />
<link rel="stylesheet" href="//github.hubspot.com/tether/docs/welcome/css/welcome.css" />
<!-- OS icons -->
<link rel="stylesheet" href="http://github.hubspot.com/os-icons/os-icons.css" />
</head>
<body>
<div class="hero-wrap">
<table class="showcase hero"><tr><td>
<div class="showcase-inner">
<div class="tether-target-demo">
<h1>Tether</h1>
<div class="mobile-copy">
<h2>Marrying elements for life</h2>
<p>
<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>
</p>
</div>
</div>
</div>
</td></tr></table>
</div>
<div class="browser-demo-start-point"></div>
<table class="showcase browser-demo"><tr><td>
<div class="showcase-inner">
<div class="section-copy" data-section="what">
<h2>What is Tether?</h2>
</div>
<div class="section-copy" data-section="how">
<h2>How Tether works.</h2>
</div>
<div class="section-copy" data-section="why">
<h2>Tether is powerful.</h2>
</div>
<div class="section-copy" data-section="outro">
<h2>Play with Tether</h2>
</div>
<div class="browser-demo-inner">
<div class="browser-window">
<div class="browser-titlebar">
<div class="browser-dots"><b></b><b></b><b></b></div>
</div>
<div class="browser-frame">
<iframe src="browser-demo.html"></iframe>
</div>
</div>
</div>
</div>
</td></tr></table>
<table class="showcase browser-demo-section no-next-arrow" data-section="what"><tr><td>
<div class="section-scroll-copy">
<div class="section-scroll-copy-inner">
<p>Tether is a low-level UI library that can be used to position any element on a page <i>next to any other element</i>.</p>
<p>It can be used for dropdown menus, tooltips, popovers, tours, help information, scroll guides, autocompletes, etc. The possibilities are endless.</p>
<p class="example-paragraph">In this example we're showing an action menu <em>tethered</em> to a list item.</p>
</div>
</div>
</td></tr></table>
<table class="showcase browser-demo-section no-next-arrow" data-section="how"><tr><td>
<div class="section-scroll-copy">
<div class="section-scroll-copy-inner">
<p>Tether works by creating an absolutely positioned element and meticulously tracking the movements of a <i>target</i> which you specify.</p>
<p>The <i>target</i> and <i>element</i> can be tethered together in a variety of different ways.</p>
<p class="example-paragraph">Notice how the <i>tethered element</i> stays tethered to its <i>target</i> list item even as the left pane is scrolled up and down.</p>
</div>
</div>
</td></tr></table>
<table class="showcase browser-demo-section no-next-arrow" data-section="why"><tr><td>
<div class="section-scroll-copy">
<div class="section-scroll-copy-inner">
<p>Tether can keep your element positioned properly even in some tough situations.</p>
<p>Tether handles all of the common pain points:</p>
<ul>
<li>Automatically detect collisions with the edge of the page or edge of the scrollParent</li>
<li>Automatically reposition on browser resize, scroll, and other events,</li>
<li>Constrain the position to any bounding box,</li>
</ul>
<p>...and a lot more.</p>
</div>
</div>
</td></tr></table>
<table class="showcase browser-demo-section no-next-arrow" data-section="outro"><tr><td>
<div class="section-scroll-copy">
<div class="section-scroll-copy-inner">
<p class="example-paragraph">Interact with this demo.</p>
<p>&nbsp;</p>
<p>To learn more, check out our <a href="/">documentation</a>.</p>
</div>
</div>
</td></tr></table>
<table class="showcase browser-demo-section no-next-arrow" data-section="__empty"><tr><td></td></tr></table>
<div class="browser-demo-stop-point"></div>
<table class="showcase projects-showcase no-next-arrow"><tr><td>
<div class="showcase-inner">
<h1>Tether Family</h1>
<h2>These projects are all powered by Tether's positioning engine.</h2>
<div class="projects-list">
<a href="//github.hubspot.com/drop/docs/welcome" class="project">
<h1>Drop</h1>
<span class="os-icon drop-icon"></span>
<p>Create dropdowns, popovers, and more.</p>
</a>
<a href="//github.hubspot.com/tooltip/docs/welcome" class="project">
<h1>Tooltip</h1>
<span class="os-icon tooltip-icon"></span>
<p>Stylable tooltips built on Tether.</p>
</a>
<a href="//github.hubspot.com/select/docs/welcome" class="project">
<h1>Select</h1>
<span class="os-icon select-icon"></span>
<p>Stylable select elements built on Tether.</p>
</a>
<a href="//github.hubspot.com/shepherd/docs/welcome" class="project">
<h1>Shepherd</h1>
<span class="os-icon shepherd-icon"></span>
<p>Guide your users through a tour of your app.</p>
</a>
</div>
</div>
</td></tr></table>
<table class="showcase last-showcase no-next-arrow share"><tr><td>
<div class="showcase-inner">
<h1>Share</h1>
<h2>Help us spread the word.</h2>
<!-- Share -->
<style>
.share-buttons {
margin: 4em auto;
text-align: center;
}
.share-button {
display: inline-block;
}
.retweet-button {
width: 100px;
margin-left: 20px;
}
.github-stars {
width: 100px;
}
</style>
<div class="share-buttons">
<div class="share-button retweet-button">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/tether/docs/welcome" data-text="Tether.js - A positioning engine for JavaScript" data-count="horizontal" data-via="HubSpotDev">Tweet</a>
<script>
(function(){
var recommends, button;
if (Math.random() >= 0.5) {
recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
} else {
recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
}
button = document.querySelector('.twitter-share-button');
if (button) {
button.setAttribute('data-related', recommends.join(','));
}
})();
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="share-button github-stars-button">
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&amp;repo=tether&amp;type=watch&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</div>
</p>
</div>
</td></tr></table>
<!-- Tether javascript -->
<script src="//github.hubspot.com/tether/dist/js/tether.min.js"></script>
<!-- Welcome docs javascript -->
<script src="//github.hubspot.com/tether/docs/welcome/js/log.js"></script>
<script src="//github.hubspot.com/tether/docs/welcome/js/jquery.js"></script>
<script src="//github.hubspot.com/tether/docs/welcome/js/drop.js"></script>
<script src="//github.hubspot.com/tether/docs/welcome/js/welcome.js"></script>
<!-- HubSpot analytics -->
<script type="text/javascript">
(function(d,s,i,r) {
if (d.getElementById(i)){return;}
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
e.parentNode.insertBefore(n, e);
})(document,"script","hs-analytics",300000);
</script>
<!-- Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45159009-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
node_modules/tether/docs/welcome/js/drop.js
Generated Vendored
+239
View File
@@ -0,0 +1,239 @@
(function() {
var Evented, MIRROR_ATTACH, addClass, allDrops, clickEvent, createContext, extend, hasClass, removeClass, sortAttach, touchDevice, _ref,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
_ref = Tether.Utils, extend = _ref.extend, addClass = _ref.addClass, removeClass = _ref.removeClass, hasClass = _ref.hasClass, Evented = _ref.Evented;
touchDevice = 'ontouchstart' in document.documentElement;
clickEvent = touchDevice ? 'touchstart' : 'click';
sortAttach = function(str) {
var first, second, _ref1, _ref2;
_ref1 = str.split(' '), first = _ref1[0], second = _ref1[1];
if (first === 'left' || first === 'right') {
_ref2 = [second, first], first = _ref2[0], second = _ref2[1];
}
return [first, second].join(' ');
};
MIRROR_ATTACH = {
left: 'right',
right: 'left',
top: 'bottom',
bottom: 'top',
middle: 'middle',
center: 'center'
};
allDrops = {};
createContext = function(options) {
var DropInstance, defaultOptions, drop, _name;
if (options == null) {
options = {};
}
drop = function() {
return (function(func, args, ctor) {
ctor.prototype = func.prototype;
var child = new ctor, result = func.apply(child, args);
return Object(result) === result ? result : child;
})(DropInstance, arguments, function(){});
};
extend(drop, {
createContext: createContext,
drops: [],
defaults: {}
});
defaultOptions = {
classPrefix: 'drop',
defaults: {
attach: 'bottom left',
openOn: 'click',
constrainToScrollParent: true,
constrainToWindow: true,
classes: '',
tetherOptions: {}
}
};
extend(drop, defaultOptions, options);
extend(drop.defaults, defaultOptions.defaults, options.defaults);
if (allDrops[_name = drop.classPrefix] == null) {
allDrops[_name] = [];
}
drop.updateBodyClasses = function() {
var anyOpen, _drop, _i, _len, _ref1;
anyOpen = false;
_ref1 = allDrops[drop.classPrefix];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
_drop = _ref1[_i];
if (!(_drop.isOpened())) {
continue;
}
anyOpen = true;
break;
}
if (anyOpen) {
return addClass(document.body, "" + drop.classPrefix + "-open");
} else {
return removeClass(document.body, "" + drop.classPrefix + "-open");
}
};
DropInstance = (function(_super) {
__extends(DropInstance, _super);
function DropInstance(options) {
this.options = options;
this.options = extend({}, drop.defaults, this.options);
this.target = this.options.target;
if (this.target == null) {
throw new Error('Drop Error: You must provide a target.');
}
drop.drops.push(this);
allDrops[drop.classPrefix].push(this);
this.setupElements();
this.setupEvents();
this.setupTether();
}
DropInstance.prototype.setupElements = function() {
this.drop = document.createElement('div');
addClass(this.drop, drop.classPrefix);
if (this.options.classes) {
addClass(this.drop, this.options.classes);
}
this.dropContent = document.createElement('div');
addClass(this.dropContent, "" + drop.classPrefix + "-content");
if (typeof this.options.content === 'object') {
this.dropContent.appendChild(this.options.content);
} else {
this.dropContent.innerHTML = this.options.content;
}
return this.drop.appendChild(this.dropContent);
};
DropInstance.prototype.setupTether = function() {
var constraints, dropAttach;
dropAttach = this.options.position.split(' ');
dropAttach[0] = MIRROR_ATTACH[dropAttach[0]];
dropAttach = dropAttach.join(' ');
constraints = [];
if (this.options.constrainToScrollParent) {
constraints.push({
to: 'scrollParent',
pin: 'top, bottom',
attachment: 'together none'
});
}
if (this.options.constrainToWindow !== false) {
constraints.push({
to: 'window',
pin: true,
attachment: 'together'
});
}
constraints.push({
to: 'scrollParent'
});
options = {
element: this.drop,
target: this.target,
attachment: sortAttach(dropAttach),
targetAttachment: sortAttach(this.options.position),
classPrefix: drop.classPrefix,
offset: '0 0',
targetOffset: '0 0',
enabled: false,
constraints: constraints
};
if (this.options.tether !== false) {
return this.tether = new Tether(extend({}, options, this.options.tether));
}
};
DropInstance.prototype.setupEvents = function() {
var events,
_this = this;
if (!this.options.openOn) {
return;
}
events = this.options.openOn.split(' ');
if (__indexOf.call(events, 'click') >= 0) {
this.target.addEventListener(clickEvent, function() {
return _this.toggle();
});
document.addEventListener(clickEvent, function(event) {
if (!_this.isOpened()) {
return;
}
if (event.target === _this.drop || _this.drop.contains(event.target)) {
return;
}
if (event.target === _this.target || _this.target.contains(event.target)) {
return;
}
return _this.close();
});
}
if (__indexOf.call(events, 'hover') >= 0) {
this.target.addEventListener('mouseover', function() {
return _this.open();
});
return this.target.addEventListener('mouseout', function() {
return _this.close();
});
}
};
DropInstance.prototype.isOpened = function() {
return hasClass(this.drop, "" + drop.classPrefix + "-open");
};
DropInstance.prototype.toggle = function() {
if (this.isOpened()) {
return this.close();
} else {
return this.open();
}
};
DropInstance.prototype.open = function() {
var _ref1;
if (!this.drop.parentNode) {
document.body.appendChild(this.drop);
}
addClass(this.target, "" + drop.classPrefix + "-open");
addClass(this.drop, "" + drop.classPrefix + "-open");
if ((_ref1 = this.tether) != null) {
_ref1.enable();
}
this.trigger('open');
return drop.updateBodyClasses();
};
DropInstance.prototype.close = function() {
var _ref1;
removeClass(this.target, "" + drop.classPrefix + "-open");
removeClass(this.drop, "" + drop.classPrefix + "-open");
this.trigger('close');
if ((_ref1 = this.tether) != null) {
_ref1.disable();
}
return drop.updateBodyClasses();
};
return DropInstance;
})(Evented);
return drop;
};
window.Drop = createContext();
document.addEventListener('DOMContentLoaded', function() {
return Drop.updateBodyClasses();
});
}).call(this);
node_modules/tether/docs/welcome/js/jquery.js
Generated Vendored
+9597
View File
File diff suppressed because it is too large Load Diff
node_modules/tether/docs/welcome/js/log.js
Generated Vendored
+134
View File
@@ -0,0 +1,134 @@
(function() {
var ffSupport, formats, getOrderedMatches, hasMatches, isFF, isIE, isOpera, isSafari, log, makeArray, operaSupport, safariSupport, stringToArgs, _log;
if (!(window.console && window.console.log)) {
return;
}
log = function() {
var args;
args = [];
makeArray(arguments).forEach(function(arg) {
if (typeof arg === 'string') {
return args = args.concat(stringToArgs(arg));
} else {
return args.push(arg);
}
});
return _log.apply(window, args);
};
_log = function() {
return console.log.apply(console, makeArray(arguments));
};
makeArray = function(arrayLikeThing) {
return Array.prototype.slice.call(arrayLikeThing);
};
formats = [
{
regex: /\*([^\*]+)\*/,
replacer: function(m, p1) {
return "%c" + p1 + "%c";
},
styles: function() {
return ['font-style: italic', ''];
}
}, {
regex: /\_([^\_]+)\_/,
replacer: function(m, p1) {
return "%c" + p1 + "%c";
},
styles: function() {
return ['font-weight: bold', ''];
}
}, {
regex: /\`([^\`]+)\`/,
replacer: function(m, p1) {
return "%c" + p1 + "%c";
},
styles: function() {
return ['background: rgb(255, 255, 219); padding: 1px 5px; border: 1px solid rgba(0, 0, 0, 0.1)', ''];
}
}, {
regex: /\[c\=(?:\"|\')?((?:(?!(?:\"|\')\]).)*)(?:\"|\')?\]((?:(?!\[c\]).)*)\[c\]/,
replacer: function(m, p1, p2) {
return "%c" + p2 + "%c";
},
styles: function(match) {
return [match[1], ''];
}
}
];
hasMatches = function(str) {
var _hasMatches;
_hasMatches = false;
formats.forEach(function(format) {
if (format.regex.test(str)) {
return _hasMatches = true;
}
});
return _hasMatches;
};
getOrderedMatches = function(str) {
var matches;
matches = [];
formats.forEach(function(format) {
var match;
match = str.match(format.regex);
if (match) {
return matches.push({
format: format,
match: match
});
}
});
return matches.sort(function(a, b) {
return a.match.index - b.match.index;
});
};
stringToArgs = function(str) {
var firstMatch, matches, styles;
styles = [];
while (hasMatches(str)) {
matches = getOrderedMatches(str);
firstMatch = matches[0];
str = str.replace(firstMatch.format.regex, firstMatch.format.replacer);
styles = styles.concat(firstMatch.format.styles(firstMatch.match));
}
return [str].concat(styles);
};
isSafari = function() {
return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
};
isOpera = function() {
return /OPR/.test(navigator.userAgent) && /Opera/.test(navigator.vendor);
};
isFF = function() {
return /Firefox/.test(navigator.userAgent);
};
isIE = function() {
return /MSIE/.test(navigator.userAgent);
};
safariSupport = function() {
var m;
m = navigator.userAgent.match(/AppleWebKit\/(\d+)\.(\d+)(\.|\+|\s)/);
if (!m) {
return false;
}
return 537.38 <= parseInt(m[1], 10) + (parseInt(m[2], 10) / 100);
};
operaSupport = function() {
var m;
m = navigator.userAgent.match(/OPR\/(\d+)\./);
if (!m) {
return false;
}
return 15 <= parseInt(m[1], 10);
};
ffSupport = function() {
return window.console.firebug || window.console.exception;
};
if (isIE() || (isFF() && !ffSupport()) || (isOpera() && !operaSupport()) || (isSafari() && !safariSupport())) {
window.log = _log;
} else {
window.log = log;
}
window.log.l = _log;
}).call(this);
node_modules/tether/docs/welcome/js/tether-v0.1.3.js
Generated Vendored
+2
View File
File diff suppressed because one or more lines are too long
node_modules/tether/docs/welcome/js/welcome.js
Generated Vendored
+193
View File
@@ -0,0 +1,193 @@
(function() {
var init, isMobile, setupBrowserDemo, setupHero, _Drop;
_Drop = Drop.createContext({
classPrefix: 'tether'
});
isMobile = $(window).width() < 567;
init = function() {
setupHero();
return setupBrowserDemo();
};
setupHero = function() {
var $target, finalDropState, frameLengthMS, frames, openAllDrops, openIndex, openNextDrop, position, positions, _i, _len;
$target = $('.tether-target-demo');
positions = ['top left', 'left top', 'left middle', 'left bottom', 'bottom left', 'bottom center', 'bottom right', 'right bottom', 'right middle', 'right top', 'top right', 'top center'];
if (isMobile) {
positions = ['top left', 'bottom left', 'bottom right', 'top right'];
}
window.drops = {};
for (_i = 0, _len = positions.length; _i < _len; _i++) {
position = positions[_i];
drops[position] = new _Drop({
target: $target[0],
classes: 'tether-theme-arrows-dark',
position: position,
constrainToWindow: false,
openOn: '',
content: '<div style="height: 50px; width: 50px"></div>'
});
}
openIndex = 0;
frames = 0;
frameLengthMS = 10;
openAllDrops = function() {
var drop, _results;
_results = [];
for (position in drops) {
drop = drops[position];
_results.push(drop.open());
}
return _results;
};
openNextDrop = function() {
var drop;
for (position in drops) {
drop = drops[position];
drop.close();
}
drops[positions[openIndex]].open();
drops[positions[(openIndex + 6) % positions.length]].open();
openIndex = (openIndex + 1) % positions.length;
if (frames > 5) {
finalDropState();
return;
}
frames += 1;
return setTimeout(openNextDrop, frameLengthMS * frames);
};
finalDropState = function() {
$(drops['top left'].dropContent).html('Marrying DOM elements for life.');
$(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>');
drops['top left'].open();
return drops['bottom right'].open();
};
if (true || isMobile) {
drops['top left'].open();
drops['top left'].tether.position();
drops['bottom right'].open();
drops['bottom right'].tether.position();
return finalDropState();
} else {
return openNextDrop();
}
};
setupBrowserDemo = function() {
var $browserContents, $browserDemo, $iframe, $sections, $startPoint, $stopPoint, scrollInterval, scrollTop, scrollTopDirection, setSection;
$browserDemo = $('.browser-demo.showcase');
$startPoint = $('.browser-demo-start-point');
$stopPoint = $('.browser-demo-stop-point');
$iframe = $('.browser-window iframe');
$browserContents = $('.browser-content .browser-demo-inner');
$sections = $('.browser-demo-section');
$('body').append("<style>\n table.showcase.browser-demo.fixed-bottom {\n top: " + $sections.length + "00%\n }\n</style>");
$(window).scroll(function() {
var scrollTop;
scrollTop = $(window).scrollTop();
if ($startPoint.position().top < scrollTop && scrollTop + window.innerHeight < $stopPoint.position().top) {
$browserDemo.removeClass('fixed-bottom');
$browserDemo.addClass('fixed');
return $sections.each(function() {
var $section;
$section = $(this);
if (($section.position().top < scrollTop && scrollTop < $section.position().top + $section.outerHeight())) {
setSection($section.data('section'));
}
return true;
});
} else {
$browserDemo.removeAttr('data-section');
$browserDemo.removeClass('fixed');
if (scrollTop + window.innerHeight > $stopPoint.position().top) {
return $browserDemo.addClass('fixed-bottom');
} else {
return $browserDemo.removeClass('fixed-bottom');
}
}
});
$iframe.load(function() {
var $items, iframeWindow;
iframeWindow = $iframe[0].contentWindow;
$items = $iframe.contents().find('.item');
return $items.each(function(i) {
var $item, drop, _iframeWindowDrop;
$item = $(this);
_iframeWindowDrop = iframeWindow.Drop.createContext({
classPrefix: 'tether'
});
drop = new _iframeWindowDrop({
target: $item[0],
classes: 'tether-theme-arrows-dark',
position: 'right top',
constrainToWindow: true,
openOn: 'click',
content: '<ul>\n <li>Action&nbsp;1</li>\n <li>Action&nbsp;2</li>\n <li>Action&nbsp;3</li>\n</ul>'
});
return $item.data('drop', drop);
});
});
scrollInterval = void 0;
scrollTop = 0;
scrollTopDirection = 1;
return setSection = function(section) {
var closeAllItems, openExampleItem, scrollLeftSection, stopScrollingLeftSection;
$browserDemo.attr('data-section', section);
$('.section-copy').removeClass('active');
$(".section-copy[data-section=\"" + section + "\"]").addClass('active');
openExampleItem = function() {
if (isMobile) {
return $iframe.contents().find('.item:first').data().drop.open();
} else {
return $iframe.contents().find('.item:eq(2)').data().drop.open();
}
};
closeAllItems = function() {
return $iframe.contents().find('.item').each(function() {
return $(this).data().drop.close() || true;
});
};
scrollLeftSection = function() {
return scrollInterval = setInterval(function() {
$iframe.contents().find('.left').scrollTop(scrollTop);
scrollTop += scrollTopDirection;
if (scrollTop > 50) {
scrollTopDirection = -1;
}
if (scrollTop < 0) {
return scrollTopDirection = 1;
}
}, 30);
};
stopScrollingLeftSection = function() {
return clearInterval(scrollInterval);
};
switch (section) {
case 'what':
closeAllItems();
openExampleItem();
return stopScrollingLeftSection();
case 'how':
closeAllItems();
openExampleItem();
stopScrollingLeftSection();
return scrollLeftSection();
case 'why':
closeAllItems();
openExampleItem();
stopScrollingLeftSection();
return scrollLeftSection();
case 'outro':
closeAllItems();
openExampleItem();
return stopScrollingLeftSection();
}
};
};
init();
}).call(this);
node_modules/tether/docs/welcome/sass/_inline-block.sass
Generated Vendored
+6
View File
@@ -0,0 +1,6 @@
@mixin inline-block
display: inline-block
vertical-align: middle
*vertical-align: auto
*zoom: 1
*display: inline
node_modules/tether/docs/welcome/sass/browser-demo.sass
Generated Vendored
+93
View File
@@ -0,0 +1,93 @@
@import inline-block
html, body
height: 100%
overflow: hidden
font-family: "proxima-nova", sans-serif
.tether.tether-theme-arrows-dark .tether-content
filter: none
background: #000
ul
color: #fff
list-style: none
padding: 0
margin: 0
.tether.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before
border-right-color: #000
.browser-demo
position: absolute
top: 0
left: 0
bottom: 0
right: 0
*, *:after, *:before
box-sizing: border-box
.top
position: absolute
height: 60px
padding: 20px
line-height: 40px
width: 100%
border-bottom: 1px solid rgba(0, 0, 0, .1)
.bottom
position: absolute
top: 60px
bottom: 0
width: 100%
.left
border-right: 1px solid rgba(0, 0, 0, .1)
position: absolute
width: 30%
height: 100%
overflow: auto
.item
height: 64px
border-bottom: 1px solid rgba(0, 0, 0, .1)
cursor: pointer
&:hover, &.tether-open
background: rgba(0, 0, 0, .1)
border-bottom: 1px solid rgba(0, 0, 0, 0)
&:last-child
border-bottom: 0
.right
position: absolute
width: 70%
right: 0
height: 100%
padding: 20px
.title
+inline-block
background: rgba(0, 0, 0, .1)
width: 150px
height: 15px
margin-bottom: 20px
.word
+inline-block
background: rgba(0, 0, 0, .1)
width: 50px
height: 8px
margin-right: 5px
margin-bottom: 5px
&:nth-last-child(4n+1)
width: 73px
&:nth-last-child(10n+1)
width: 14px
&:nth-last-child(9n+1)
width: 80px
node_modules/tether/docs/welcome/sass/welcome.sass
Generated Vendored
+285
View File
@@ -0,0 +1,285 @@
@import inline-block
html, body
height: 100%
body
margin: 0
font-family: "proxima-nova", "Helvetica Neue", sans-serif
.button
display: inline-block
border: 2px solid #333
color: #333
padding: 1em 1.25em
font-weight: 500
text-transform: uppercase
letter-spacing: 3px
text-decoration: none
cursor: pointer
width: 140px
font-size: .8em
line-height: 1.3em
text-align: center
.tether-element.tether-theme-arrows-dark .tether-content
padding: 1em
font-size: 1.1em
.button
border-color: #fff
color: #fff
width: 170px
pointer-events: all
.mobile-copy
display: none
@media (max-width: 568px)
display: block
.button.dark
background: #333
color: #fff
.hero-wrap
height: 100%
overflow: hidden
table.showcase
height: 100%
width: 100%
position: relative
&:after
content: ""
display: block
position: absolute
left: 0
right: 0
bottom: 20px
margin: auto
height: 0
width: 0
border-width: 18px
border-style: solid
border-color: transparent
border-top-color: rgba(0, 0, 0, 0.2)
&.no-next-arrow:after
display: none
.showcase-inner
margin: 40px auto 60px
padding: 10px
h1
font-size: 50px
text-align: center
font-weight: 300
@media (max-width: 567px)
font-size: 40px
h2
font-size: 24px
text-align: center
font-weight: 300
margin: 1em 0 1em
@media (max-width: 567px)
font-size: 14px
p
text-align: center
&.hero
text-align: center
.tether-target-demo
+inline-block
border: 2px dotted #000
margin: 5rem auto
padding: 5rem
@media (max-width: 567px)
padding: 1rem
&.share
background: #f3f3f3
&.projects-showcase .showcase-inner
.projects-list
width: 80%
max-width: 1200px
margin: 0 auto
.project
color: inherit
text-decoration: none
position: relative
width: 50%
float: left
text-align: center
margin-bottom: 2rem
&:nth-child(odd)
clear: left
.os-icon
width: 8rem
height: 8rem
margin-bottom: 1rem
background-size: 100%
h1
font-size: 2.5rem
p
font-size: 1.3rem
&.browser-demo
background-image: linear-gradient(top left, #723362 0%, #9d223c 100%)
background-color: #9d223c
position: absolute
top: 100%
&.fixed
position: fixed
top: 0
bottom: 0
left: 0
right: 0
z-index: 1
.browser-demo-inner
transition: width 2s ease-in-out, height 2s ease-in-out
// Sections
&[data-section="what"]
box-shadow: 0 0 0 0
&[data-section="why"]
.browser-demo-inner
width: 70%
&[data-section="outro"]
.showcase-inner
pointer-events: all
.showcase-inner
pointer-events: none
position: absolute
left: 10%
right: 40%
top: 220px
bottom: 120px
margin: 0
padding: 0
@media (max-width: 567px)
bottom: 90px
top: 180px
.browser-demo-inner
height: 100%
width: 100%
.section-copy
transition: opacity .5s ease-in-out, top .5s ease-in-out
opacity: 0
position: absolute
top: 0
position: absolute
height: 200px
color: #fff
text-align: center
width: 100%
&.active
opacity: 1
top: -150px
@media (max-width: 567px)
top: -130px
h2
font-size: 40px
font-weight: bold
line-height: 1
margin: 25px 0 15px
@media (max-width: 567px)
font-size: 30px
.browser-window
border-radius: 4px
background: #fff
position: relative
height: 100%
width: 100%
max-width: 1200px
margin: 0 auto
.browser-titlebar
position: absolute
top: 0
left: 0
right: 0
border-bottom: 1px solid #eee
height: 55px
.browser-dots
padding: 16px
b
+inline-block
border-radius: 50%
width: 10px
height: 10px
margin-right: 7px
background: rgba(0, 0, 0, .1)
.browser-frame
position: absolute
top: 55px
left: 0
right: 0
bottom: 0
iframe
border-radius: 0 0 4px 4px
border: 0
width: 100%
height: 100%
&.browser-demo-section
.section-scroll-copy
position: relative
z-index: 10
color: #fff
width: 100%
font-size: 22px
.section-scroll-copy-inner
position: absolute
z-index: 10
color: #fff
right: 10%
width: 23%
a
color: inherit
.example-paragraph
border-radius: 4px
background: #000
padding: 1rem
.browser-content
display: none