summaryrefslogtreecommitdiffstats
path: root/afb-client/bower_components/tether/examples/viewport
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/bower_components/tether/examples/viewport')
-rw-r--r--afb-client/bower_components/tether/examples/viewport/colors.css145
-rw-r--r--afb-client/bower_components/tether/examples/viewport/index.html70
2 files changed, 215 insertions, 0 deletions
diff --git a/afb-client/bower_components/tether/examples/viewport/colors.css b/afb-client/bower_components/tether/examples/viewport/colors.css
new file mode 100644
index 0000000..64f8c1c
--- /dev/null
+++ b/afb-client/bower_components/tether/examples/viewport/colors.css
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+/****
+
+ colors.css v1.0 For a friendlier looking web
+ MIT License • http://clrs.cc • http://github.com/mrmrs/colors
+
+ Author: mrmrs
+ http://mrmrs.cc
+ @mrmrs_
+
+****/
+/*
+
+ SKINS
+ • Backgrounds
+ • Colors
+
+*/
+/* Backgrounds */
+.bg-navy {
+ background-color: #001f3f; }
+
+.bg-blue {
+ background-color: #0074d9; }
+
+.bg-aqua {
+ background-color: #7fdbff; }
+
+.bg-teal {
+ background-color: #39cccc; }
+
+.bg-olive {
+ background-color: #3d9970; }
+
+.bg-green {
+ background-color: #2ecc40; }
+
+.bg-lime {
+ background-color: #01ff70; }
+
+.bg-yellow {
+ background-color: #ffdc00; }
+
+.bg-orange {
+ background-color: #ff851b; }
+
+.bg-red {
+ background-color: #ff4136; }
+
+.bg-fuchsia {
+ background-color: #f012be; }
+
+.bg-purple {
+ background-color: #b10dc9; }
+
+.bg-maroon {
+ background-color: #85144b; }
+
+.bg-white {
+ background-color: white; }
+
+.bg-gray {
+ background-color: #aaaaaa; }
+
+.bg-silver {
+ background-color: #dddddd; }
+
+.bg-black {
+ background-color: #111111; }
+
+/* Colors */
+.navy {
+ color: #001f3f; }
+
+.blue {
+ color: #0074d9; }
+
+.aqua {
+ color: #7fdbff; }
+
+.teal {
+ color: #39cccc; }
+
+.olive {
+ color: #3d9970; }
+
+.green {
+ color: #2ecc40; }
+
+.lime {
+ color: #01ff70; }
+
+.yellow {
+ color: #ffdc00; }
+
+.orange {
+ color: #ff851b; }
+
+.red {
+ color: #ff4136; }
+
+.fuchsia {
+ color: #f012be; }
+
+.purple {
+ color: #b10dc9; }
+
+.maroon {
+ color: #85144b; }
+
+.white {
+ color: white; }
+
+.silver {
+ color: #dddddd; }
+
+.gray {
+ color: #aaaaaa; }
+
+.black {
+ color: #111111; }
+
+/* PRETTIER LINKS */
+a {
+ text-decoration: none;
+ -webkit-transition: color .3s ease-in-out;
+ transition: color .3s ease-in-out; }
+
+a:link {
+ color: #0074d9;
+ -webkit-transition: color .3s ease-in-out;
+ transition: color .3s ease-in-out; }
+
+a:visited {
+ color: #b10dc9; }
+
+a:hover {
+ color: #7fdbff;
+ -webkit-transition: color .3s ease-in-out;
+ transition: color .3s ease-in-out; }
+
+a:active {
+ color: #ff851b;
+ -webkit-transition: color .3s ease-in-out;
+ transition: color .3s ease-in-out; }
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>