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>
ger */ .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ .highlight .sa { color: #e6db74 } /* Literal.String.Affix */ .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ .highlight .sc { color: #e6db74 } /* Literal.String.Char */ .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ .highlight .se { color: #ae81ff } /* Literal.String.Escape */ .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ .highlight .sx { color: #e6db74 } /* Literal.String.Other */ .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ } @media (prefers-color-scheme: light) { .highlight .hll { background-color: #ffffcc } .highlight .c { color: #888888 } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { color: #008800; font-weight: bold } /* Keyword */ .highlight .ch { color: #888888 } /* Comment.Hashbang */ .highlight .cm { color: #888888 } /* Comment.Multiline */ .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ .highlight .cpf { color: #888888 } /* Comment.PreprocFile */ .highlight .c1 { color: #888888 } /* Comment.Single */ .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #333333 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666666 } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ }
/*
  GLOBAL
  ------

  Global styles and settings for Foundation for Apps are stored here. This file must always
  be imported, no matter what.

  Includes:
   -
*/

/// @Foundation.settings
// Global Styles
// This sets 1rem to be 16px
$rem-base: 16px;

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 1.5 !default;

// Text selector helpers
$headers: "h1,h2,h3,h4,h5,h6";

// We use these to define default font weights
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

// We use these to control various global styles
$body-background: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: $font-weight-normal !default;
$body-font-style: normal !default;
$body-antialiased: true;

// Application Colors
$primary-color: #00558b !default;
$secondary-color: #f1f1f1 !default;
$alert-color: #F04124 !default;
$info-color: #A0D3E8 !default;
$success-color: #43AC6A !default;
$warning-color: #F08A24 !default;
$dark-color: #232323 !default;
$gray: #dfdfdf !default;
$gray-dark: darken($gray, 8) !default;
$gray-light: lighten($gray, 8) !default;

// We use these to make sure border radius matches unless we want it different.
$global-radius: 4px !default;
$global-rounded: 1000px !default;

// We use this for default spacing
$global-padding: 1rem !default;
$global-spacing: rem-calc(15) !default;
///

// For internal use: a color map
$foundation-colors: (
  primary: $primary-color,
  success: $success-color,
  warning: $warning-color,
  alert: $alert-color,
  dark: $dark-color,
);

@include exports(global) {
  // Make extra sure we're using the whole window
  html, body {
    height: 100%;
    font-size: $base-font-size;
  }
  // Set box-sizing globally to handle padding and border widths
  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  // Default body styles
  body {
    background: $body-background;
    color: $body-font-color;
    padding: 0;
    margin: 0;
    font-family: $body-font-family;
    font-weight: $body-font-weight;
    font-style: $body-font-style;
    line-height: 1;
    position: relative;

    @if $body-antialiased {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  img {
    // Grid Defaults to get images and embeds to work properly
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;

    // Get rid of gap under images by making them display: inline-block; by default
    display: inline-block;
    vertical-align: middle;
  }

  // Give all anchors and interactive directives the hover cusor
  a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
    cursor: pointer;
  }

  #map_canvas,
  .map_canvas {
    img,
    embed,
    object { max-width: none !important; }
  }

  .padding {
    padding: $global-padding;
  }
}