X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ftether%2Fdocs%2Fwelcome%2Fsass%2Fwelcome.sass;fp=afb-client%2Fbower_components%2Ftether%2Fdocs%2Fwelcome%2Fsass%2Fwelcome.sass;h=7a7523865dd408e24641d37f635e834fe2aac8d2;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0 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 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