summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/tether/examples/viewport/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/tether/examples/viewport/index.html')
-rw-r--r--afb-client/bower_components/tether/examples/viewport/index.html70
1 files changed, 70 insertions, 0 deletions
diff --git a/afb-client/bower_components/tether/examples/viewport/index.html b/afb-client/bower_components/tether/examples/viewport/index.html
new file mode 100644
index 0000000..ac0711b
--- /dev/null
+++ b/afb-client/bower_components/tether/examples/viewport/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" href="../resources/css/base.css" />
+ <link rel="stylesheet" href="./colors.css" />
+ <style>
+ * {
+ box-sizing: border-box;
+ }
+
+ .element {
+ background-color: #FFDC00;
+ width: 80%;
+ max-width: 300px;
+ padding: 0 15px;
+ font-size: 20px;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+ }
+
+ @media (max-width: 380px) {
+ .element {
+ font-size: 16px;
+ }
+ }
+
+ .bit {
+ width: 10vw;
+ height: 10vw;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="element">
+ <p>This element is tethered to the middle of the visible part of the body.</p>
+
+ <p>Inspect the element to see how Tether decided
+ to use <code>position: fixed</code>.</p>
+ </div>
+
+ <script src="../../tether.js"></script>
+ <script>
+ new Tether({
+ element: '.element',
+ target: document.body,
+ attachment: 'middle center',
+ targetAttachment: 'middle center',
+ targetModifier: 'visible'
+ });
+ </script>
+
+ <script>
+ // Random colors bit, don't mind this
+ colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime',
+ 'yellow', 'orange', 'red', 'fuchsia', 'purple', 'maroon'];
+
+ curColors = null;
+ for(var i=300; i--;){
+ if (!curColors || !curColors.length)
+ curColors = colors.slice(0);
+
+ var bit = document.createElement('div')
+ var index = (Math.random() * curColors.length)|0;
+ bit.className = 'bit bg-' + curColors[index]
+ curColors.splice(index, 1);
+ document.body.appendChild(bit);
+ }
+ </script>
+ </body>
+</html>