diff --git a/labs/architecture-examples/sapui5/css/base.css b/labs/architecture-examples/sapui5/css/base.css index c3a55a6702..64ee36768d 100644 --- a/labs/architecture-examples/sapui5/css/base.css +++ b/labs/architecture-examples/sapui5/css/base.css @@ -406,3 +406,148 @@ body { #info a { color: inherit; } + +.hidden{ + display:none; +} + +hr { + margin: 20px 0; + border: 0; + border-top: 1px dashed #C5C5C5; + border-bottom: 1px dashed #F7F7F7; +} + +.learn a { + font-weight: normal; + text-decoration: none; + color: #b83f45; +} + +.learn a:hover { + text-decoration: underline; + color: #787e7e; +} + +.learn h3, +.learn h4, +.learn h5 { + margin: 10px 0; + font-weight: 500; + line-height: 1.2; + color: #000; +} + +.learn h3 { + font-size: 24px; +} + +.learn h4 { + font-size: 18px; +} + +.learn h5 { + margin-bottom: 0; + font-size: 14px; +} + +.learn ul { + padding: 0; + margin: 0 0 30px 25px; +} + +.learn li { + line-height: 20px; +} + +.learn p { + font-size: 15px; + font-weight: 300; + line-height: 1.3; + margin-top: 0; + margin-bottom: 0; +} + +.quote { + border: none; + margin: 20px 0 60px 0; +} + +.quote p { + font-style: italic; +} + +.quote p:before { + content: '“'; + font-size: 50px; + opacity: .15; + position: absolute; + top: -20px; + left: 3px; +} + +.quote p:after { + content: '”'; + font-size: 50px; + opacity: .15; + position: absolute; + bottom: -42px; + right: 3px; +} + +.quote footer { + position: absolute; + bottom: -40px; + right: 0; +} + +.quote footer img { + border-radius: 3px; +} + +.quote footer a { + margin-left: 5px; + vertical-align: middle; +} + +.speech-bubble { + position: relative; + padding: 10px; + background: rgba(0, 0, 0, .04); + border-radius: 5px; +} + +.speech-bubble:after { + content: ''; + position: absolute; + top: 100%; + right: 30px; + border: 13px solid transparent; + border-top-color: rgba(0, 0, 0, .04); +} + +/**body*/.learn-bar > .learn { + position: absolute; + width: 272px; + top: 8px; + left: -300px; + padding: 10px; + border-radius: 5px; + background-color: rgba(255, 255, 255, .6); + transition-property: left; + transition-duration: 500ms; +} + +@media (min-width: 899px) { + /**body*/.learn-bar { + width: auto; + margin: 0 0 0 300px; + } + /**body*/.learn-bar > .learn { + left: 8px; + } + /**body*/.learn-bar #todoapp { + width: 550px; + margin: 130px auto 40px auto; + } +} diff --git a/labs/architecture-examples/sapui5/index.html b/labs/architecture-examples/sapui5/index.html index 8d20591e6c..fa57dc93dc 100644 --- a/labs/architecture-examples/sapui5/index.html +++ b/labs/architecture-examples/sapui5/index.html @@ -4,6 +4,12 @@ SAPUI5 • TodoMVC + @@ -18,12 +24,6 @@

todos

Written by Harald Schubert

Part of TodoMVC

- diff --git a/learn.json b/learn.json index a76bce198d..d5cafcec35 100644 --- a/learn.json +++ b/learn.json @@ -1560,6 +1560,22 @@ }] }] }, + "sapui5": { + "name": "SAPUI5", + "description": "SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.", + "homepage": "scn.sap.com/community/developer-center/front-end", + "examples": [{ + "name": "Architecture Example", + "url": "labs/architecture-examples/sapui5" + }], + "link_groups": [{ + "heading": "Official Resources", + "links": [{ + "name": "Introduction", + "url": "http://scn.sap.com/community/developer-center/front-end/blog/2013/03/19/how-to-build-testable-sapui5-applications" + }] + }] + }, "serenadejs": { "name": "Serenade.js", "description": "Serenade.js is a client side framework built on the MVC pattern. It makes it simple to create rich client side applications by freeing you from having to keep the DOM up to date with your data through powerful data bindings.",