Click here to Skip to main content
15,885,757 members
Search within:


Articles / Web Development / HTML
 

Using jQuery Mobile with MVC and Netduino for Home Automation

Rate me:
Please Sign up or sign in to vote.
4.88/5 (52 votes)
14 Dec 2012CPOL9 min read 351.2K   4.8K   152  
This article is great for anybody learning jQuery Mobile or building mobile applications with MVC3. I built a remote control for my phone to control a squirt gun for my pool, open my garage door, water the garden and control for my gas fireplace using jQuery Mobile with MVC and a Netduino
 
			/*
* jQuery Mobile Framework 1.0.1
* http://jquerymobile.com
*
* Copyright 2011-2012 (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
*/
/* Swatches */

/* A
-----------------------------------------------------------------------------------------------------------*/
.ui-footer-exit .ui-btn
{
	border-color: #7c7c67;
	border-radius: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	box-shadow: 0 0 0;
	color: #d0cdba;
	float: left;
	font-size: 0.75em;
	height: 56px;
	margin: 0;
	moz-border-radius: 0;
	moz-box-shadow: 0 0 0;
	text-shadow: 0px -1px 0px #3d3d32;
	webkit-border-radius: 0;
	webkit-box-shadow: 0 0 0;
	width: 33.3%;
}

.ui-bar-a {
	border: 1px solid #8cc63f /*{a-bar-border}*/;
	background: #488e00 /*{a-bar-background-color}*/;
	color: #ffffff /*{a-bar-color}*/;
	font-weight: bold;
	text-shadow:  0  /*{a-bar-shadow-x}*/  1px  /*{a-bar-shadow-y}*/  1px  /*{a-bar-shadow-radius}*/ #444444 /*{a-bar-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #4F9C00 /*{a-bar-background-start}*/), to( #407F00 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #4F9C00 /*{a-bar-background-start}*/, #407F00 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #4F9C00 /*{a-bar-background-start}*/, #407F00 /*{a-bar-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #4F9C00 /*{a-bar-background-start}*/, #407F00 /*{a-bar-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #4F9C00 /*{a-bar-background-start}*/, #407F00 /*{a-bar-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #4F9C00 /*{a-bar-background-start}*/, #407F00 /*{a-bar-background-end}*/);
}

.ui-bar-a .ui-link-inherit {
	color: #ffffff /*{a-bar-color}*/;
}
.ui-bar-a .ui-link {
	color:  #7cc4e7  /*{a-bar-link-color}*/;
	font-weight: bold;
}

.ui-bar-a .ui-link:hover {
	color:  #2489CE  /*{a-bar-link-hover}*/;
}

.ui-bar-a .ui-link:active {
	color:  #2489CE  /*{a-bar-link-active}*/;
}

.ui-bar-a .ui-link:visited {
    color:  #2489CE  /*{a-bar-link-visited}*/;
}

.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
	    font-family: Helvetica, Arial, sans-serif  /*{global-font-family}*/;
}
.ui-body-a,
.ui-dialog.ui-overlay-a {
	border: 1px solid #820F13 /*{a-body-border}*/;
	color: #000000 /*{a-body-color}*/;
	text-shadow: 0 /*{a-body-shadow-x}*/ 0px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #546d3c /*{a-body-shadow-color}*/;
	background: #ffe2a8 /*{a-body-background-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #FFF8B8 /*{a-body-background-start}*/), to( #E5CB97 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #FFF8B8 /*{a-body-background-start}*/, #E5CB97 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #FFF8B8 /*{a-body-background-start}*/, #E5CB97 /*{a-body-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #FFF8B8 /*{a-body-background-start}*/, #E5CB97 /*{a-body-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #FFF8B8 /*{a-body-background-start}*/, #E5CB97 /*{a-body-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #FFF8B8 /*{a-body-background-start}*/, #E5CB97 /*{a-body-background-end}*/);
}
.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
	    font-family: Helvetica, Arial, sans-serif  /*{global-font-family}*/;
}

.ui-body-a .ui-link-inherit {
	color: #000000 /*{a-body-color}*/;
}

.ui-body-a .ui-link {
	color: #488e00 /*{a-body-link-color}*/;
	font-weight: bold;
}

.ui-body-a .ui-link:hover {
	color:  #2489CE  /*{a-body-link-hover}*/;
}

.ui-body-a .ui-link:active {
	color:  #2489CE  /*{a-body-link-active}*/;
}

.ui-body-a .ui-link:visited {
    color:  #2489CE  /*{a-body-link-visited}*/;
}

.ui-btn-up-a {
	border: 1px solid #488e00 /*{a-bup-border}*/;
	background: #ff9900 /*{a-bup-background-color}*/;
	font-weight: bold;
	color: #000000 /*{a-bup-color}*/;
	text-shadow: 0 /*{a-bup-shadow-x}*/ 0px /*{a-bup-shadow-y}*/ 0px /*{a-bup-shadow-radius}*/ #000000 /*{a-bup-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #FF9900 /*{a-bup-background-start}*/), to( #FF9900 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #FF9900 /*{a-bup-background-start}*/, #FF9900 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #FF9900 /*{a-bup-background-start}*/, #FF9900 /*{a-bup-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #FF9900 /*{a-bup-background-start}*/, #FF9900 /*{a-bup-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #FF9900 /*{a-bup-background-start}*/, #FF9900 /*{a-bup-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #FF9900 /*{a-bup-background-start}*/, #FF9900 /*{a-bup-background-end}*/);
}
.ui-btn-up-a a.ui-link-inherit {
	color: #000000 /*{a-bup-color}*/;
}

.ui-btn-hover-a {
	border: 1px solid #488e00 /*{a-bhover-border}*/;
	background: #8cc63f /*{a-bhover-background-color}*/;
	font-weight: bold;
	color: #000000 /*{a-bhover-color}*/;
	text-shadow:  0  /*{a-bhover-shadow-x}*/  1px  /*{a-bhover-shadow-y}*/  1px  /*{a-bhover-shadow-radius}*/ #eeeeee /*{a-bhover-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #9AD945 /*{a-bhover-background-start}*/), to( #7EB238 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #9AD945 /*{a-bhover-background-start}*/, #7EB238 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #9AD945 /*{a-bhover-background-start}*/, #7EB238 /*{a-bhover-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #9AD945 /*{a-bhover-background-start}*/, #7EB238 /*{a-bhover-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #9AD945 /*{a-bhover-background-start}*/, #7EB238 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #9AD945 /*{a-bhover-background-start}*/, #7EB238 /*{a-bhover-background-end}*/);
}
.ui-btn-hover-a a.ui-link-inherit {
	color: #000000 /*{a-bhover-color}*/;
}
.ui-btn-down-a {
	border: 1px solid #488e00 /*{a-bdown-border}*/;
	background: #ffe2a8 /*{a-bdown-background-color}*/;
	font-weight: bold;
	color: #000000 /*{a-bdown-color}*/;
	text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/  1px  /*{a-bdown-shadow-radius}*/ #eeeeee /*{a-bdown-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #FFE4A9 /*{a-bdown-background-start}*/), to( #FCDFA6 /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #FFE4A9 /*{a-bdown-background-start}*/, #FCDFA6 /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #FFE4A9 /*{a-bdown-background-start}*/, #FCDFA6 /*{a-bdown-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #FFE4A9 /*{a-bdown-background-start}*/, #FCDFA6 /*{a-bdown-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #FFE4A9 /*{a-bdown-background-start}*/, #FCDFA6 /*{a-bdown-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #FFE4A9 /*{a-bdown-background-start}*/, #FCDFA6 /*{a-bdown-background-end}*/);
}
.ui-btn-down-a a.ui-link-inherit {
	color: #000000 /*{a-bdown-color}*/;
}
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a {
	    font-family: Helvetica, Arial, sans-serif  /*{global-font-family}*/;
	text-decoration: none;
}

/* Structure */

/* links within "buttons" 
-----------------------------------------------------------------------------------------------------------*/

a.ui-link-inherit {
	text-decoration: none !important;
}


/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------------------------------------------*/

.ui-btn-active {
	border: 1px solid 00000000 /*{global-active-border}*/;
	background: #ffcc66 /*{global-active-background-color}*/;
	font-weight: bold;
	color:  					#fff  /*{global-active-color}*/;
	cursor: pointer;
	text-shadow:  0  /*{global-active-shadow-x}*/  -1px  /*{global-active-shadow-y}*/  1px  /*{global-active-shadow-radius}*/  #145072  /*{global-active-shadow-color}*/;
	text-decoration: none;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #FFCC66 /*{global-active-background-start}*/), to( #FFCC66 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #FFCC66 /*{global-active-background-start}*/, #FFCC66 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #FFCC66 /*{global-active-background-start}*/, #FFCC66 /*{global-active-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient( #FFCC66 /*{global-active-background-start}*/, #FFCC66 /*{global-active-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient( #FFCC66 /*{global-active-background-start}*/, #FFCC66 /*{global-active-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient( #FFCC66 /*{global-active-background-start}*/, #FFCC66 /*{global-active-background-end}*/);
	    font-family: Helvetica, Arial, sans-serif  /*{global-font-family}*/;
}
.ui-btn-active a.ui-link-inherit {
	color:  					#fff  /*{global-active-color}*/;
}


/* button inner top highlight
-----------------------------------------------------------------------------------------------------------*/

.ui-btn-inner {
	border-top: 1px solid 	#fff;
	border-color: 			rgba(255,255,255,.3);
}


/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/

.ui-corner-tl {
	-moz-border-radius-topleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-tr {
	-moz-border-radius-topright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-bl {
	-moz-border-radius-bottomleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-br {
	-moz-border-radius-bottomright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-top {
	-moz-border-radius-topleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
	-moz-border-radius-topright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-bottom {
	-moz-border-radius-bottomleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
	-moz-border-radius-bottomright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
	}
.ui-corner-right {
	-moz-border-radius-topright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-right-radius:  						.6em  /*{global-radii-blocks}*/;
	-moz-border-radius-bottomright:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-right-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-left {
	-moz-border-radius-topleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-top-left-radius:  						.6em  /*{global-radii-blocks}*/;
	-moz-border-radius-bottomleft:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
	border-bottom-left-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-all {
	-moz-border-radius:  						.6em  /*{global-radii-blocks}*/;
	-webkit-border-radius:  						.6em  /*{global-radii-blocks}*/;
	border-radius:  						.6em  /*{global-radii-blocks}*/;
}
.ui-corner-none {
	-moz-border-radius: 				   0;
	-webkit-border-radius: 				   0;
	border-radius: 						   0;
}

/* Interaction cues
-----------------------------------------------------------------------------------------------------------*/
.ui-disabled {
	opacity: 							.3;
}
.ui-disabled,
.ui-disabled a {
	pointer-events: none;
	cursor: default;
}

/* Icons
-----------------------------------------------------------------------------------------------------------*/

.ui-icon,
.ui-icon-searchfield:after {
	background:  						#666  /*{global-icon-color}*/;
	background:  						rgba(0,0,0,.4)  /*{global-icon-disc}*/;
	background-image:  url(images/icons-18-white.png)  /*{global-icon-set}*/;
	background-repeat: no-repeat;
	-moz-border-radius: 				9px;
	-webkit-border-radius: 				9px;
	border-radius: 						9px;
}


/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/

.ui-icon-alt {
	background: 						#fff;
	background: 						rgba(255,255,255,.3);
	background-image: url(images/icons-18-black.png);
	background-repeat: no-repeat;
}

/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
	
	.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
	.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
	.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
	.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, 
	.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
		background-image: url(images/icons-36-white.png);
		-moz-background-size: 776px 18px;
		-o-background-size: 776px 18px;
		-webkit-background-size: 776px 18px;
		background-size: 776px 18px;
	}
	.ui-icon-alt {
		background-image: url(images/icons-36-black.png);
	}
}

/* plus minus */
.ui-icon-plus {
	background-position: 	-0 50%;
}
.ui-icon-minus {
	background-position: 	-36px 50%;
}

/* delete/close */
.ui-icon-delete {
	background-position: 	-72px 50%;
}

/* arrows */
.ui-icon-arrow-r {
	background-position: 	-108px 50%;
}
.ui-icon-arrow-l {
	background-position: 	-144px 50%;
}
.ui-icon-arrow-u {
	background-position: 	-180px 50%;
}
.ui-icon-arrow-d {
	background-position: 	-216px 50%;
}

/* misc */
.ui-icon-check {
	background-position: 	-252px 50%;
}
.ui-icon-gear {
	background-position: 	-288px 50%;
}
.ui-icon-refresh {
	background-position: 	-324px 50%;
}
.ui-icon-forward {
	background-position: 	-360px 50%;
}
.ui-icon-back {
	background-position: 	-396px 50%;
}
.ui-icon-grid {
	background-position: 	-432px 50%;
}
.ui-icon-star {
	background-position: 	-468px 50%;
}
.ui-icon-alert {
	background-position: 	-504px 50%;
}
.ui-icon-info {
	background-position: 	-540px 50%;
}
.ui-icon-home {
	background-position: 	-576px 50%;
}
.ui-icon-search,
.ui-icon-searchfield:after {
	background-position: 	-612px 50%;
}
.ui-icon-checkbox-off {
	background-position: 	-684px 50%;
}
.ui-icon-checkbox-on {
	background-position: 	-648px 50%;
}
.ui-icon-radio-off {
	background-position: 	-756px 50%;
}
.ui-icon-radio-on {
	background-position: 	-720px 50%;
}


/* checks,radios */
.ui-checkbox .ui-icon {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.ui-icon-checkbox-off,
.ui-icon-radio-off {
	background-color: transparent;	
}
.ui-checkbox-on .ui-icon,
.ui-radio-on .ui-icon {
	background-color: #ffcc66 /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
}

/* loading icon */
.ui-icon-loading {
	background-image: url(images/ajax-loader.png);
	width: 40px;
	height: 40px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-size: 35px 35px;
}


/* Button corner classes
-----------------------------------------------------------------------------------------------------------*/

.ui-btn-corner-tl {
	-moz-border-radius-topleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-tr {
	-moz-border-radius-topright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-bl {
	-moz-border-radius-bottomleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-br {
	-moz-border-radius-bottomright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-top {
	-moz-border-radius-topleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
	-moz-border-radius-topright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-bottom {
	-moz-border-radius-bottomleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
	-moz-border-radius-bottomright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-right {
	 -moz-border-radius-topright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-right-radius:  						1em  /*{global-radii-buttons}*/;
	-moz-border-radius-bottomright:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-right-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-left {
	-moz-border-radius-topleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-top-left-radius:  						1em  /*{global-radii-buttons}*/;
	-moz-border-radius-bottomleft:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
	border-bottom-left-radius:  						1em  /*{global-radii-buttons}*/;
}
.ui-btn-corner-all {
	-moz-border-radius:  						1em  /*{global-radii-buttons}*/;
	-webkit-border-radius:  						1em  /*{global-radii-buttons}*/;
	border-radius:  						1em  /*{global-radii-buttons}*/;
}

/* radius clip workaround for cleaning up corner trapping */
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl, 
.ui-corner-br,
.ui-corner-top,
.ui-corner-bottom, 
.ui-corner-right,
.ui-corner-left,
.ui-corner-all,
.ui-btn-corner-tl,
.ui-btn-corner-tr,
.ui-btn-corner-bl, 
.ui-btn-corner-br,
.ui-btn-corner-top,
.ui-btn-corner-bottom, 
.ui-btn-corner-right,
.ui-btn-corner-left,
.ui-btn-corner-all {
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

/* Overlay / modal
-----------------------------------------------------------------------------------------------------------*/

.ui-overlay {
	background: #666;
	opacity: .5;
	filter: Alpha(Opacity=50);
	position: absolute;
	width: 100%;
	height: 100%;
}
.ui-overlay-shadow {
	-moz-box-shadow: 0px 0px 12px 			rgba(0,0,0,.6);
	-webkit-box-shadow: 0px 0px 12px 		rgba(0,0,0,.6);
	box-shadow: 0px 0px 12px 				rgba(0,0,0,.6);
}
.ui-shadow {
	-moz-box-shadow: 0px 1px  4px  /*{global-box-shadow-size}*/  				rgba(0,0,0,.3)  /*{global-box-shadow-color}*/;
	-webkit-box-shadow: 0px 1px  4px  /*{global-box-shadow-size}*/  				rgba(0,0,0,.3)  /*{global-box-shadow-color}*/;
	box-shadow: 0px 1px  4px  /*{global-box-shadow-size}*/  				rgba(0,0,0,.3)  /*{global-box-shadow-color}*/;
}
.ui-bar-a .ui-shadow,
.ui-bar-b .ui-shadow ,
.ui-bar-c .ui-shadow  {
	-moz-box-shadow: 0px 1px 0 				rgba(255,255,255,.3);
	-webkit-box-shadow: 0px 1px 0 			rgba(255,255,255,.3);
	box-shadow: 0px 1px 0 					rgba(255,255,255,.3);
}
.ui-shadow-inset {
	-moz-box-shadow: inset 0px 1px 4px 		rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0px 1px 4px 	rgba(0,0,0,.2);
	box-shadow: inset 0px 1px 4px 			rgba(0,0,0,.2);
}
.ui-icon-shadow {
	-moz-box-shadow: 0px 1px 0  					rgba(255,255,255,.4)  /*{global-icon-shadow}*/;
	-webkit-box-shadow: 0px 1px 0  					rgba(255,255,255,.4)  /*{global-icon-shadow}*/;
	box-shadow: 0px 1px 0  					rgba(255,255,255,.4)  /*{global-icon-shadow}*/;
}

/* Focus state - set here for specificity
-----------------------------------------------------------------------------------------------------------*/

.ui-focus {
	-moz-box-shadow: 0px 0px 12px #ffcc66 /*{global-active-background-color}*/;
	-webkit-box-shadow: 0px 0px 12px #ffcc66 /*{global-active-background-color}*/;
	box-shadow: 0px 0px 12px #ffcc66 /*{global-active-background-color}*/;
}

/* unset box shadow in browsers that don't do it right
-----------------------------------------------------------------------------------------------------------*/

.ui-mobile-nosupport-boxshadow * {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus {
	outline-width: 2px;
}

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)


Written By
Dan Thyer
Chief Technology Officer Logical Advantage
United States United States
Dan graduated summa cum laude from North Carolina State University with dual degrees in Electrical Engineering and Computer Engineering. Dan attended NC State on full scholarship program with General Motors. After working with GM, Dan served as application development director for the largest Microsoft Business Solutions Partner in the Carolinas. During this time, Dan's team won two Microsoft Pinnacle awards. For the past 10 years, as Co-Founder and Chief Technology Officer of, Logical Advantage (www.logicaladvantage.com), a software consulting business, Dan has successfully architected and delivered web-based and mobile applications for many Fortune 500 companies. Dan focuses his energies on emerging technologies, and ensuring that all projects are architected to meet the client's current and future needs. Dan collaborates with his Chief Solutions Officer and other architects to create technical standards, including coding standards, tools, and platforms. He holds a leadership role in the local Microsoft Enterprise Developer's Guild and has been on the steering committee for over a dozen years.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 12 Mar 2012

Article Copyright 2012 by Dan Thyer
Everything else Copyright © CodeProject, 1999-2024

Web01 2.8:2024-04-02:1