Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Android and iOS Mobile Device Development with Azure Mobile Services using HTML5 and JavaScript

, 10 May 2013
Tutorial showing how to build an iOS or Android app using Azure Mobile Services with HTML5 and JavaScript in Visual Studio.
/* Reset and define common styles */
* { box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica; background-color: #e0e0e0; }
button { border: 1px solid #999; color: #555; background-color: #F4F4FA; padding: 0 10px; }
button:hover { background-color: white; }
input[type=text], input:not([type]) { padding: 0 10px; text-overflow: ellipsis; }

/* Main page structure and masthead style */
#wrapper { max-width: 800px; margin: auto; padding: 20px; }
article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
header { background-color: #71BCFA; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 28px; }
header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 20px; }
#summary { text-align: center; padding: 8px 0; }

/* "Add new" form */
#add-item { height: 40px; margin: 17px 0 5px 0; font-size: 1.1em }
#add-item div { overflow: hidden; }
#add-item button { float: right; margin-left: 10px; padding: 0 10px; height: 100%; border-radius: 4px; }
#new-item-text { width: 100%; height: 40px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }

/* List of items */
#todo-items li { list-style-type: none; height: 36px; padding: 0px 5px; border-bottom: 1px solid #dadada;  }
.item-complete { float: left; margin: 0 8px 0 15px; height: 100%; }
.item-delete { float: right; margin: 5px; margin-right: 15px; height: 26px; }

/* Textboxes in list of items */
#todo-items li div { overflow: hidden; padding: 5px 2px; }
.item-text { width: 100%; height: 26px; line-height: 24px; border: 1px solid transparent; background-color: transparent; }
.item-text:focus, .item-text:hover { border-color: #aaa; background-color: #FFC; }

/* Footer */
footer { text-align: center; font-size: 0.8em; margin-top: 20px; }
footer a { color: #666; }

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bart Read
Team Leader Red Gate Software
United Kingdom United Kingdom
No Biography provided
Follow on   Twitter

| Advertise | Privacy | Mobile
Web01 | 2.8.140902.1 | Last Updated 10 May 2013
Article Copyright 2013 by Bart Read
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid