afb-client/bower_components/tether/docs/css/intro.css

   1 @charset "UTF-8";
   2 *, *:after, *:before {
   3   -webkit-box-sizing: border-box;
   4   -moz-box-sizing: border-box;
   5   box-sizing: border-box; }
   6
   7 body {
   8   position: relative; }
   9
  10 .yellow-box {
  11   width: 100px;
  12   height: 100px;
  13   background-color: #ffee88;
  14   pointer-events: none; }
  15
  16 .green-box {
  17   margin-top: 65px;
  18   margin-left: 100px;
  19   width: 200px;
  20   height: 50px;
  21   background-color: #44ee99; }
  22   .no-green .green-box {
  23     display: none; }
  24
  25 .scroll-box {
  26   height: 150px;
  27   border: 10px solid #eeeeee;
  28   background: #fbfbfb;
  29   overflow: auto;
  30   position: relative; }
  31
  32 .scroll-content {
  33   height: 2000px;
  34   width: 2000px;
  35   padding: 910px 809px; }
  36
  37 pre.pre-with-output {
  38   margin: 0;
  39   width: 50%;
  40   float: left; }
  41   pre.pre-with-output code mark {
  42     background: #b8daff;
  43     color: black; }
  44
  45 p, h2, h3 {
  46   clear: both; }
  47
  48 output {
  49   display: block;
  50   position: relative;
  51   width: 50%;
  52   float: right;
  53   margin-bottom: 15px; }
  54   output.scroll-page .scroll-box {
  55     overflow: hidden; }
  56   output.scroll-page:after {
  57     content: "↕ scroll the page ↕"; }
  58   output:after {
  59     content: "↕ scroll this area ↕";
  60     position: absolute;
  61     bottom: 25px;
  62     width: 100%;
  63     text-align: center;
  64     font-size: 16px;
  65     font-variant: small-caps;
  66     color: #777777;
  67     opacity: 1;
  68     transition: opacity 0.2s; }
  69   output.scrolled:after {
  70     opacity: 0; }
  71   output[deactivated], output[activated] {
  72     cursor: pointer; }
  73     output[deactivated] .scroll-box, output[activated] .scroll-box {
  74       pointer-events: none; }
  75     output[deactivated]:after, output[activated]:after {
  76       position: absolute;
  77       top: 0;
  78       left: 0;
  79       right: 0;
  80       bottom: 0;
  81       opacity: 1;
  82       content: "Click To Show";
  83       background-color: #aaaaaa;
  84       border-left: 10px solid #eeeeee;
  85       color: white;
  86       font-size: 24px;
  87       font-variant: normal;
  88       padding-top: 80px; }
  89   output[activated]:after {
  90     content: "Click To Hide"; }
  91   output[activated].visible-enabled:after {
  92     height: 35px;
  93     padding-top: 5px; }
  94
  95 .attachment-mark, .tether-marker-dot {
  96   position: relative; }
  97   .attachment-mark:after, .tether-marker-dot:after {
  98     content: "A";
  99     width: 10px;
 100     height: 10px;
 101     background-color: red;
 102     display: inline-block;
 103     line-height: 10px;
 104     font-size: 9px;
 105     color: white;
 106     text-align: center;
 107     position: absolute; }
 108
 109 span.attachment-mark:after, span.tether-marker-dot:after {
 110   position: relative;
 111   top: -1px;
 112   margin-right: 1px; }
 113
 114 .tether-marker-dot {
 115   position: absolute; }
 116   .tether-marker-dot:after {
 117     top: -5px;
 118     left: -5px; }
 119
 120 .tether-target-marker {
 121   position: absolute; }
 122   div.tether-target-attached-left .tether-target-marker {
 123     left: 0; }
 124   div.tether-target-attached-top .tether-target-marker {
 125     top: 0; }
 126   div.tether-target-attached-bottom .tether-target-marker {
 127     bottom: 0; }
 128   div.tether-target-attached-right .tether-target-marker {
 129     right: 0; }
 130   div.tether-target-attached-center .tether-target-marker {
 131     left: 50%; }
 132
 133 .tether-element-marker {
 134   position: absolute; }
 135   div.tether-element-attached-left .tether-element-marker {
 136     left: 0; }
 137   div.tether-element-attached-top .tether-element-marker {
 138     top: 0; }
 139   div.tether-element-attached-bottom .tether-element-marker {
 140     bottom: 0; }
 141   div.tether-element-attached-right .tether-element-marker {
 142     right: 0; }
 143   div.tether-element-attached-center .tether-element-marker {
 144     left: 50%; }
 145
 146 .tether-element-attached-middle .tether-element-marker {
 147   top: 50px; }
 148
 149 .tether-target-attached-middle .tether-target-marker {
 150   top: 25px; }
 151
 152 .tether-element {
 153   position: relative; }
 154   .tether-element.tether-pinned-left {
 155     box-shadow: inset 2px 0 0 0 red; }
 156   .tether-element.tether-pinned-right {
 157     box-shadow: inset -2px 0 0 0 red; }
 158   .tether-element.tether-pinned-top {
 159     box-shadow: inset 0 2px 0 0 red; }
 160   .tether-element.tether-pinned-bottom {
 161     box-shadow: inset 0 -2px 0 0 red; }
 162
 163 .tether-target {
 164   position: relative; }
 165
 166 .tether-element.tether-out-of-bounds[data-example="hide"] {
 167   display: none; }
 168
 169 [data-example^="optimizer"].lang-javascript {
 170   /* This should just be a `code` selector, but sass doesn't allow that with & */
 171   min-height: 220px; }
 172 [data-example^="optimizer"].tether-element:before {
 173   margin-top: 26px;
 174   display: block;
 175   text-align: center;
 176   content: "I'm in the body";
 177   line-height: 1.2;
 178   font-size: 15px;
 179   padding: 4px;
 180   color: #666666; }
 181 [data-example^="optimizer"] .scroll-box .tether-element:before {
 182   content: "I'm in my scroll parent!"; }
 183
 184 .tether-element[data-example="scroll-visible"] {
 185   height: 30px; }
 186   .tether-element[data-example="scroll-visible"] .tether-marker-dot {
 187     display: none; }
 188
 189 .hs-doc-content h2.projects-header {
 190   text-align: center;
 191   font-weight: 300; }
 192
 193 .projects-paragraph {
 194   text-align: center; }
 195   .projects-paragraph a {
 196     display: -moz-inline-stack;
 197     display: inline-block;
 198     vertical-align: middle;
 199     *vertical-align: auto;
 200     zoom: 1;
 201     *display: inline;
 202     text-align: center;
 203     margin-right: 30px;
 204     color: inherit; }
 205     .projects-paragraph a span {
 206       display: -moz-inline-stack;
 207       display: inline-block;
 208       vertical-align: middle;
 209       *vertical-align: auto;
 210       zoom: 1;
 211       *display: inline;
 212       margin-bottom: 20px;
 213       font-size: 20px;
 214       color: inherit;
 215       font-weight: 300; }
 216     .projects-paragraph a img {
 217       display: block;
 218       max-width: 100%;
 219       width: 100px; }