Merge afb-client

[src/app-framework-demo.git] / afb-client / bower_components / tether / docs / welcome / sass / welcome.sass

diff --git a/afb-client/bower_components/tether/docs/welcome/sass/welcome.sass b/afb-client/bower_components/tether/docs/welcome/sass/welcome.sass
new file mode 100644 (file)
index 0000000..7a75238
--- /dev/null
+++ b/afb-client/bower_components/tether/docs/welcome/sass/welcome.sass
@@ -0,0 +1,282 @@
+@import compass/css3
+
+html, body
+    height: 100%
+
+body
+    margin: 0
+    font-family: "proxima-nova", "Helvetica Neue", sans-serif
+
+.button
+    display: inline-block
+    border: 2px solid #333
+    color: #333
+    padding: 1em 1.25em
+    font-weight: 500
+    text-transform: uppercase
+    letter-spacing: 3px
+    text-decoration: none
+    cursor: pointer
+    width: 140px
+    font-size: .8em
+    line-height: 1.3em
+    text-align: center
+
+.tether-element.tether-theme-arrows-dark .tether-content
+    padding: 1em
+    font-size: 1.1em
+
+    .button
+        border-color: #fff
+        color: #fff
+        width: 170px
+        pointer-events: all
+
+.mobile-copy
+    display: none
+
+    @media (max-width: 568px)
+        display: block
+
+.button.dark
+    background: #333
+    color: #fff
+
+.hero-wrap
+    height: 100%
+    overflow: hidden
+
+table.showcase
+    height: 100%
+    width: 100%
+    position: relative
+
+    &:after
+        content: ""
+        display: block
+        position: absolute
+        left: 0
+        right: 0
+        bottom: 20px
+        margin: auto
+        height: 0
+        width: 0
+        border-width: 18px
+        border-style: solid
+        border-color: transparent
+        border-top-color: rgba(0, 0, 0, 0.2)
+
+    &.no-next-arrow:after
+        display: none
+
+    .showcase-inner
+        margin: 40px auto 60px
+        padding: 10px
+
+        h1
+            font-size: 50px
+            text-align: center
+            font-weight: 300
+
+            @media (max-width: 567px)
+                font-size: 40px
+
+        h2
+            font-size: 24px
+            text-align: center
+            font-weight: 300
+            margin: 1em 0 1em
+
+            @media (max-width: 567px)
+                font-size: 14px
+
+        p
+            text-align: center
+
+    &.hero
+        text-align: center
+
+        .tether-target-demo
+            +inline-block
+            border: 2px dotted #000
+            margin: 5rem auto
+            padding: 5rem
+
+            @media (max-width: 567px)
+                padding: 1rem
+
+    &.share
+        background: #f3f3f3
+
+    &.projects-showcase .showcase-inner
+
+        .projects-list
+            width: 80%
+            max-width: 1200px
+            margin: 0 auto
+
+            .project
+                color: inherit
+                text-decoration: none
+                position: relative
+                width: 50%
+                float: left
+                text-align: center
+                margin-bottom: 2rem
+
+            .os-icon
+                width: 8rem
+                height: 8rem
+                margin-bottom: 1rem
+                background-size: 100%
+
+            h1
+                font-size: 2.5rem
+
+            p
+                font-size: 1.3rem
+
+    &.browser-demo
+        +background-image(linear-gradient(top left, #723362 0%, #9d223c 100%))
+        background-color: #9d223c
+        position: absolute
+        top: 100%
+
+        &.fixed
+            position: fixed
+            top: 0
+            bottom: 0
+            left: 0
+            right: 0
+            z-index: 1
+
+            .browser-demo-inner
+                +transition(width 2s ease-in-out, height 2s ease-in-out)
+
+            // Sections
+
+            &[data-section="what"]
+                box-shadow: 0 0 0 0
+
+            &[data-section="why"]
+
+                .browser-demo-inner
+                    width: 70%
+
+            &[data-section="outro"]
+
+                .showcase-inner
+                    pointer-events: all
+
+        .showcase-inner
+            pointer-events: none
+            position: absolute
+            left: 10%
+            right: 40%
+            top: 220px
+            bottom: 120px
+            margin: 0
+            padding: 0
+
+            @media (max-width: 567px)
+                bottom: 90px
+                top: 180px
+
+        .browser-demo-inner
+            height: 100%
+            width: 100%
+
+        .section-copy
+            +transition(opacity .5s ease-in-out, top .5s ease-in-out)
+            +opacity(0)
+            position: absolute
+            top: 0
+            position: absolute
+            height: 200px
+            color: #fff
+            text-align: center
+            width: 100%
+
+            &.active
+                +opacity(1)
+                top: -150px
+
+                @media (max-width: 567px)
+                    top: -130px
+
+            h2
+                font-size: 40px
+                font-weight: bold
+                line-height: 1
+                margin: 25px 0 15px
+
+                @media (max-width: 567px)
+                    font-size: 30px
+
+        .browser-window
+            +border-radius(4px)
+            background: #fff
+            position: relative
+            height: 100%
+            width: 100%
+            max-width: 1200px
+            margin: 0 auto
+
+            .browser-titlebar
+                position: absolute
+                top: 0
+                left: 0
+                right: 0
+                border-bottom: 1px solid #eee
+                height: 55px
+
+                .browser-dots
+                    padding: 16px
+
+                    b
+                        +border-radius(50%)
+                        +inline-block
+                        width: 10px
+                        height: 10px
+                        margin-right: 7px
+                        background: rgba(0, 0, 0, .1)
+
+            .browser-frame
+                position: absolute
+                top: 55px
+                left: 0
+                right: 0
+                bottom: 0
+
+                iframe
+                    +border-radius(0 0 4px 4px)
+                    border: 0
+                    width: 100%
+                    height: 100%
+
+    &.browser-demo-section
+
+        .section-scroll-copy
+            position: relative
+            z-index: 10
+            color: #fff
+            width: 100%
+            font-size: 22px
+
+            .section-scroll-copy-inner
+                position: absolute
+                z-index: 10
+                color: #fff
+                right: 10%
+                width: 23%
+
+                a
+                    color: inherit
+
+                .example-paragraph
+                    +border-radius(4px)
+                    background: #000
+                    padding: 1rem
+
+.browser-content
+    display: none