summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/tether/docs/sass
diff options
context:
space:
mode:
Diffstat (limited to 'afm-client/bower_components/tether/docs/sass')
-rw-r--r--afm-client/bower_components/tether/docs/sass/intro.sass228
1 files changed, 228 insertions, 0 deletions
diff --git a/afm-client/bower_components/tether/docs/sass/intro.sass b/afm-client/bower_components/tether/docs/sass/intro.sass
new file mode 100644
index 0000000..6088a41
--- /dev/null
+++ b/afm-client/bower_components/tether/docs/sass/intro.sass
@@ -0,0 +1,228 @@
+@import compass/css3
+
+$scrollableArea: 2000px
+$exampleWidth: 400px
+$exampleHeight: 180px
+
+*, *:after, *:before
+ +box-sizing(border-box)
+
+body
+ position: relative
+
+.yellow-box
+ width: 100px
+ height: 100px
+ background-color: #fe8
+ pointer-events: none
+
+.green-box
+ margin-top: ($exampleHeight - 50px) / 2
+ margin-left: ($exampleWidth - 200px) / 2
+ width: 200px
+ height: 50px
+ background-color: #4e9
+
+ .no-green &
+ display: none
+
+.scroll-box
+ height: 150px
+ border: 10px solid #eee
+ background: #fbfbfb
+ overflow: auto
+ position: relative
+
+.scroll-content
+ height: $scrollableArea
+ width: $scrollableArea
+ padding: ($scrollableArea - $exampleHeight)/2 ($scrollableArea - $exampleWidth)/2 + 9
+
+pre.pre-with-output
+ margin: 0
+ width: 50%
+ float: left
+
+ code mark
+ background: #b8daff
+ color: #000
+
+p, h2, h3
+ clear: both
+
+output
+ display: block
+ position: relative
+ width: 50%
+ float: right
+ margin-bottom: 15px
+
+ &.scroll-page
+ .scroll-box
+ overflow: hidden
+
+ &:after
+ content: "↕ scroll the page ↕"
+
+ &:after
+ content: "↕ scroll this area ↕"
+ position: absolute
+ bottom: 25px
+ width: 100%
+ text-align: center
+ font-size: 16px
+ font-variant: small-caps
+ color: #777
+ opacity: 1
+ transition: opacity 0.2s
+
+ &.scrolled:after
+ opacity: 0
+
+ &[deactivated], &[activated]
+ .scroll-box
+ pointer-events: none
+
+ cursor: pointer
+
+ &:after
+ position: absolute
+ top: 0
+ left: 0
+ right: 0
+ bottom: 0
+ opacity: 1
+ content: "Click To Show"
+ background-color: #AAA
+ border-left: 10px solid #EEE
+ color: white
+ font-size: 24px
+ font-variant: normal
+ padding-top: 80px
+
+ &[activated]
+ &:after
+ content: "Click To Hide"
+
+ &.visible-enabled
+ &:after
+ height: 35px
+ padding-top: 5px
+
+.attachment-mark
+ position: relative
+
+ &:after
+ content: "A"
+ width: 10px
+ height: 10px
+ background-color: red
+ display: inline-block
+
+ line-height: 10px
+ font-size: 9px
+ color: white
+ text-align: center
+
+ position: absolute
+
+span.attachment-mark
+ &:after
+ position: relative
+ top: -1px
+ margin-right: 1px
+
+.tether-marker-dot
+ @extend .attachment-mark
+
+ position: absolute
+
+ &:after
+ top: -5px
+ left: -5px
+
+@each $type in target, element
+ .tether-#{ $type }-marker
+ position: absolute
+
+ @each $side in left, top, bottom, right
+ div.tether-#{ $type }-attached-#{ $side } &
+ #{ $side }: 0
+
+ div.tether-#{ $type }-attached-center &
+ left: 50%
+
+.tether-element-attached-middle .tether-element-marker
+ top: 50px
+
+.tether-target-attached-middle .tether-target-marker
+ top: 25px
+
+.tether-element
+ position: relative
+
+ &.tether-pinned-left
+ box-shadow: inset 2px 0 0 0 red
+ &.tether-pinned-right
+ box-shadow: inset -2px 0 0 0 red
+ &.tether-pinned-top
+ box-shadow: inset 0 2px 0 0 red
+ &.tether-pinned-bottom
+ box-shadow: inset 0 -2px 0 0 red
+
+.tether-target
+ position: relative
+
+.tether-element.tether-out-of-bounds[data-example="hide"]
+ display: none
+
+[data-example^="optimizer"]
+ &.lang-javascript
+ /* This should just be a `code` selector, but sass doesn't allow that with & */
+ min-height: 220px
+
+ &.tether-element
+
+ &:before
+ margin-top: 26px
+ display: block
+ text-align: center
+ content: "I'm in the body"
+ line-height: 1.2
+ font-size: 15px
+ padding: 4px
+ color: #666
+
+ .scroll-box .tether-element:before
+ content: "I'm in my scroll parent!"
+
+.tether-element[data-example="scroll-visible"]
+ height: 30px
+
+ .tether-marker-dot
+ display: none
+
+.hs-doc-content h2.projects-header
+ text-align: center
+ font-weight: 300
+
+.projects-paragraph
+ text-align: center
+
+ a
+ +inline-block
+ text-align: center
+ margin-right: 30px
+ color: inherit
+
+ span
+ +inline-block
+ margin-bottom: 20px
+ font-size: 20px
+ color: inherit
+ font-weight: 300
+
+ img
+ display: block
+ max-width: 100%
+ width: 100px \ No newline at end of file