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

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