diff options
Diffstat (limited to 'afb-client/bower_components/tether/examples/viewport')
-rw-r--r-- | afb-client/bower_components/tether/examples/viewport/colors.css | 145 | ||||
-rw-r--r-- | afb-client/bower_components/tether/examples/viewport/index.html | 70 |
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> |