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%2Fcss%2Fwelcome.css;fp=afb-client%2Fbower_components%2Ftether%2Fdocs%2Fwelcome%2Fcss%2Fwelcome.css;h=7db9b3b5d6e0730b772d5a4c94a9653df5557429;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0 diff --git a/afb-client/bower_components/tether/docs/welcome/css/welcome.css b/afb-client/bower_components/tether/docs/welcome/css/welcome.css new file mode 100644 index 0000000..7db9b3b --- /dev/null +++ b/afb-client/bower_components/tether/docs/welcome/css/welcome.css @@ -0,0 +1,272 @@ +html, body { + height: 100%; } + +body { + margin: 0; + font-family: "proxima-nova", "Helvetica Neue", sans-serif; } + +.button { + display: inline-block; + border: 2px solid #333333; + color: #333333; + padding: 1em 1.25em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 3px; + text-decoration: none; + cursor: pointer; + width: 140px; + font-size: 0.8em; + line-height: 1.3em; + text-align: center; } + +.tether-element.tether-theme-arrows-dark .tether-content { + padding: 1em; + font-size: 1.1em; } + .tether-element.tether-theme-arrows-dark .tether-content .button { + border-color: white; + color: white; + width: 170px; + pointer-events: all; } + +.mobile-copy { + display: none; } + @media (max-width: 568px) { + .mobile-copy { + display: block; } } + +.button.dark { + background: #333333; + color: white; } + +.hero-wrap { + height: 100%; + overflow: hidden; } + +table.showcase { + height: 100%; + width: 100%; + position: relative; } + table.showcase: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); } + table.showcase.no-next-arrow:after { + display: none; } + table.showcase .showcase-inner { + margin: 40px auto 60px; + padding: 10px; } + table.showcase .showcase-inner h1 { + font-size: 50px; + text-align: center; + font-weight: 300; } + @media (max-width: 567px) { + table.showcase .showcase-inner h1 { + font-size: 40px; } } + table.showcase .showcase-inner h2 { + font-size: 24px; + text-align: center; + font-weight: 300; + margin: 1em 0 1em; } + @media (max-width: 567px) { + table.showcase .showcase-inner h2 { + font-size: 14px; } } + table.showcase .showcase-inner p { + text-align: center; } + table.showcase.hero { + text-align: center; } + table.showcase.hero .tether-target-demo { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + border: 2px dotted black; + margin: 5rem auto; + padding: 5rem; } + @media (max-width: 567px) { + table.showcase.hero .tether-target-demo { + padding: 1rem; } } + table.showcase.share { + background: #f3f3f3; } + table.showcase.projects-showcase .showcase-inner .projects-list { + width: 80%; + max-width: 1200px; + margin: 0 auto; } + table.showcase.projects-showcase .showcase-inner .projects-list .project { + color: inherit; + text-decoration: none; + position: relative; + width: 50%; + float: left; + text-align: center; + margin-bottom: 2rem; } + table.showcase.projects-showcase .showcase-inner .projects-list .os-icon { + width: 8rem; + height: 8rem; + margin-bottom: 1rem; + background-size: 100%; } + table.showcase.projects-showcase .showcase-inner .projects-list h1 { + font-size: 2.5rem; } + table.showcase.projects-showcase .showcase-inner .projects-list p { + font-size: 1.3rem; } + table.showcase.browser-demo { + background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c)); + background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%); + background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%); + background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%); + background-image: linear-gradient(top left, #723362 0%, #9d223c 100%); + background-color: #9d223c; + position: absolute; + top: 100%; } + table.showcase.browser-demo.fixed { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; } + table.showcase.browser-demo.fixed .browser-demo-inner { + -webkit-transition: width 2s ease-in-out, height 2s ease-in-out; + -moz-transition: width 2s ease-in-out, height 2s ease-in-out; + -o-transition: width 2s ease-in-out, height 2s ease-in-out; + transition: width 2s ease-in-out, height 2s ease-in-out; } + table.showcase.browser-demo.fixed[data-section="what"] { + box-shadow: 0 0 0 0; } + table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner { + width: 70%; } + table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner { + pointer-events: all; } + table.showcase.browser-demo .showcase-inner { + pointer-events: none; + position: absolute; + left: 10%; + right: 40%; + top: 220px; + bottom: 120px; + margin: 0; + padding: 0; } + @media (max-width: 567px) { + table.showcase.browser-demo .showcase-inner { + bottom: 90px; + top: 180px; } } + table.showcase.browser-demo .browser-demo-inner { + height: 100%; + width: 100%; } + table.showcase.browser-demo .section-copy { + -webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out; + -moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out; + -o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out; + transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + position: absolute; + top: 0; + position: absolute; + height: 200px; + color: white; + text-align: center; + width: 100%; } + table.showcase.browser-demo .section-copy.active { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; + top: -150px; } + @media (max-width: 567px) { + table.showcase.browser-demo .section-copy.active { + top: -130px; } } + table.showcase.browser-demo .section-copy h2 { + font-size: 40px; + font-weight: bold; + line-height: 1; + margin: 25px 0 15px; } + @media (max-width: 567px) { + table.showcase.browser-demo .section-copy h2 { + font-size: 30px; } } + table.showcase.browser-demo .browser-window { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + background: white; + position: relative; + height: 100%; + width: 100%; + max-width: 1200px; + margin: 0 auto; } + table.showcase.browser-demo .browser-window .browser-titlebar { + position: absolute; + top: 0; + left: 0; + right: 0; + border-bottom: 1px solid #eeeeee; + height: 55px; } + table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots { + padding: 16px; } + table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + border-radius: 50%; + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + width: 10px; + height: 10px; + margin-right: 7px; + background: rgba(0, 0, 0, 0.1); } + table.showcase.browser-demo .browser-window .browser-frame { + position: absolute; + top: 55px; + left: 0; + right: 0; + bottom: 0; } + table.showcase.browser-demo .browser-window .browser-frame iframe { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + -ms-border-radius: 0 0 4px 4px; + -o-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + border: 0; + width: 100%; + height: 100%; } + table.showcase.browser-demo-section .section-scroll-copy { + position: relative; + z-index: 10; + color: white; + width: 100%; + font-size: 22px; } + table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner { + position: absolute; + z-index: 10; + color: white; + right: 10%; + width: 23%; } + table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a { + color: inherit; } + table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + background: black; + padding: 1rem; } + +.browser-content { + display: none; }