diff options
Diffstat (limited to 'afm-client/bower_components/tether/docs/sass')
| -rw-r--r-- | afm-client/bower_components/tether/docs/sass/intro.sass | 228 |
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 |