You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
469 lines
11 KiB
469 lines
11 KiB
.iphone label { |
|
font-size: 15px; |
|
font-weight: bold; |
|
color: #333; |
|
padding-left: 3px; |
|
text-shadow: rgba(255, 255, 255, 0.25); |
|
} |
|
|
|
.iphone body { |
|
min-height: 200px; |
|
} |
|
|
|
.android label { |
|
overflow-x: hidden; |
|
-webkit-text-size-adjust: none; |
|
background-color: black; |
|
color: white; |
|
font-family: Helvetica; |
|
font-size: 14px; |
|
margin-left: 2px; |
|
} |
|
|
|
.android body { |
|
font-family: Helvetica; |
|
font-size: 17px; |
|
color: white; |
|
} |
|
|
|
input { |
|
width: 60%; |
|
display:inline-block; |
|
|
|
} |
|
|
|
.row { |
|
width: 100%; |
|
margin-bottom: 1px; margin-top: 3px; |
|
display:inline-block; |
|
} |
|
|
|
/* Generate Demo */ |
|
div#view { |
|
display: table; |
|
border: 1px solid #ddd; |
|
border-radius: 10px; |
|
margin: 3px; |
|
padding: 3px; |
|
width: 100%; |
|
background-color: #F7F7F7; |
|
color: #333; |
|
} |
|
|
|
.generate-row { |
|
display:inline-block; |
|
width: 100%; |
|
font-size: 15px; |
|
font-weight: bold; |
|
text-shadow: white 0 1px 1px; |
|
color: #333; |
|
font-weight: bold; |
|
} |
|
|
|
form#testForm div.row, form#repeatTestForm div.row { |
|
width: 100%; |
|
display:inline-block; |
|
|
|
} |
|
|
|
form#testForm, form#repeatTestForm, button#generate1, .generate-textarea-row, button#updateModel, div#view, div#generateModel, div#generateView { |
|
margin-left: 15px; |
|
margin-right: 15px; |
|
} |
|
|
|
.spacer {display: block; margin-bottom:10px; padding-bottom:5px;} |
|
|
|
.generate-heading { font-size:1.0em; font-weight:bold; } |
|
.generate-label-cell { |
|
text-align: left; |
|
width: 20%; |
|
display:inline-block; |
|
} |
|
.generate-dijit-cell { text-align: left; width: 66%; display:inline-block; } |
|
|
|
.generate-textarea-row { text-align: left; width: 90%; display:inline-block; } |
|
.generate-textarea-cell { text-align: left; width: 90%; min-height: 220px; display:inline-block; } |
|
.generate-maincontent { text-align: left; width: 100%;} |
|
|
|
/* CSS for buttons show case */ |
|
button.baseBtn { |
|
-webkit-background-clip: padding-box; |
|
-webkit-box-align: center; |
|
background-clip: padding-box; |
|
border-style: solid; |
|
border-width: 1px; |
|
color: black; |
|
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans'; |
|
font-size: 18px; |
|
font-weight: bold; |
|
vertical-align: middle; |
|
margin: 10px; |
|
height: 34px; |
|
border-bottom-left-radius: 7px; |
|
border-bottom-right-radius: 7px; |
|
border-top-left-radius: 7px; |
|
border-top-right-radius: 7px; |
|
} |
|
|
|
button.roundBtn { |
|
border-bottom-left-radius: 17px; |
|
border-bottom-right-radius: 17px; |
|
border-top-left-radius: 17px; |
|
border-top-right-radius: 17px; |
|
} |
|
|
|
button.backBtn { |
|
border-bottom-left-radius: 0.4em 0.4em; |
|
border-bottom-right-radius: 0.4em 0.4em; |
|
border-top-left-radius: 0.4em 0.4em; |
|
border-top-right-radius: 0.4em 0.4em; |
|
margin-left: 0.893em; |
|
padding-left: 0.4em; |
|
height: 1.8em; |
|
overflow: visible; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
button.backBtn:before, button.backBtn:after { |
|
content: ""; |
|
width: .773em; |
|
height: 1.8em; |
|
top: -0.1em; |
|
left: auto; |
|
position: absolute; |
|
z-index: 2; |
|
-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat; |
|
-webkit-mask-size: .773em 1.8em; |
|
overflow: hidden; |
|
} |
|
|
|
button.backBtn:before { |
|
left: -0.693em; |
|
} |
|
|
|
button.backBtn:after { |
|
left: -0.628em; |
|
} |
|
|
|
button.greyBtn { |
|
text-shadow: rgba(255, 255, 255, 0.246094) 0px 0.08em 0px; |
|
border-color: #999; |
|
border-top-color: #A6A6A6; |
|
background-color: #CCC; |
|
background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), color-stop(0.02, #E6E6E6), to(#BABABA)); |
|
} |
|
|
|
button.greyBtn.backBtn:before { |
|
background: #999; |
|
} |
|
|
|
button.greyBtn.backBtn:after { |
|
background-color: #CCC; |
|
background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), color-stop(0.02, #E6E6E6), to(#BABABA)); |
|
} |
|
|
|
button.greyBtnSelected, button.greyBtnSelected.backBtn:after { |
|
background-color:#bababa; |
|
background-image:-webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#a1a1a1),color-stop(10%,#adadad),color-stop(65%,#bababa),color-stop(100%,#bbb)); |
|
background-image:linear-gradient(top,#a1a1a1 0,#adadad 10%,#bababa 65%,#bbb 100%); |
|
} |
|
|
|
/* CSS for forms show case */ |
|
form#testForm div.fieldset, form#repeatTestForm div.fieldset { |
|
display: table; |
|
border: 1px solid #ddd; |
|
border-radius: 10px; |
|
/* background-color: white; */ |
|
margin: 3px; |
|
padding: 3px; |
|
width: 100%; |
|
} |
|
|
|
form#testForm div.field-row, form#repeatTestForm div.field-row { |
|
display: table-row; |
|
width: 100%; |
|
} |
|
|
|
form#testForm div.field-title, form#repeatTestForm div.field-title { |
|
font-size: 18px; |
|
font-weight: bold; |
|
margin: 1em .7em .3em; |
|
} |
|
|
|
form#testForm span, form#repeatTestForm span { |
|
display: table-cell; |
|
font-size: 15px; |
|
font-weight: bold; |
|
background-color: #F7F7F7; |
|
color: #333; |
|
padding-left: 3px; |
|
text-shadow: rgba(255, 255, 255, 0.25); |
|
vertical-align: middle; |
|
width: 25%; |
|
} |
|
|
|
form#testForm input { |
|
display: table-cell; |
|
width: 75%; |
|
} |
|
|
|
form#testForm input[type="radio"], form#testForm input[type="checkbox"] { |
|
width: 15px; |
|
} |
|
|
|
form#testForm select, form#testForm textarea { |
|
margin-left: 0px; |
|
} |
|
|
|
/* CSS for headings show case */ |
|
ul#headingTabBar { |
|
display:inline; |
|
} |
|
ul#headingTabBar li { |
|
margin: 6px 0 6px 0 !important; |
|
} |
|
|
|
ul#headingTabBar li.mblTabButton { |
|
background-color: #5877A2; |
|
background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); |
|
} |
|
|
|
ul#headingTabBar li.mblTabButtonSelected { |
|
background-color: #394D77; |
|
background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69)); |
|
} |
|
|
|
div#headings button.baseBtn { |
|
display: block; |
|
float: left; |
|
-webkit-background-clip: padding-box; |
|
-webkit-box-align: center; |
|
background-clip: padding-box; |
|
border-style: solid; |
|
border-width: 1px; |
|
margin: 6px 30px; |
|
color: white; |
|
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans'; |
|
font-size: 13px; |
|
font-weight: bold; |
|
-webkit-box-shadow: rgba(255, 255, 255, 0.0976563) 0px 0.1em 0px; |
|
vertical-align: middle; |
|
height: 29px; |
|
border-bottom-left-radius: 7px; |
|
border-bottom-right-radius: 7px; |
|
border-top-left-radius: 7px; |
|
border-top-right-radius: 7px; |
|
} |
|
|
|
div#headings button.backBtn:before, div#headings button.backBtn:after { |
|
content: ""; |
|
width: .773em; |
|
height: 29px; |
|
top: -0.1em; |
|
left: auto; |
|
position: absolute; |
|
z-index: 2; |
|
-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat; |
|
-webkit-mask-size: .773em 29px; |
|
overflow: hidden; |
|
} |
|
|
|
div#headings button.backBtn:before { |
|
left: -0.5em; |
|
} |
|
|
|
div#headings button.backBtn:after { |
|
left: -0.5em; |
|
} |
|
|
|
button.defaultBtn { |
|
text-shadow: rgba(255, 255, 255, 0.246094) 0px 0.08em 0px; |
|
border-color: #9CACC0; |
|
background-color: #5877A2; |
|
background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); |
|
|
|
} |
|
|
|
button.defaultBtn.backBtn:before { |
|
background: #999; |
|
} |
|
|
|
button.defaultBtn.backBtn:after { |
|
background-color: #CCC; |
|
background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999)); |
|
} |
|
|
|
button.defaultBtnSelected, button.defaultBtnSelected.backBtn:after { |
|
background-color: #394D77; |
|
background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69)); |
|
} |
|
|
|
/* CSS for jsonp show case */ |
|
div div.searchResult { |
|
border: 2px solid #999; |
|
border-bottom-left-radius: 15px 15px; |
|
border-bottom-right-radius: 15px 15px; |
|
border-top-left-radius: 15px 15px; |
|
border-top-right-radius: 15px 15px; |
|
color: white; |
|
margin: 1%; |
|
padding: 15px; |
|
text-align: center; |
|
text-shadow: grey 0px 2px 0px; |
|
list-style-type: none; |
|
} |
|
|
|
div div.searchResult .user { |
|
margin: 10px 0; |
|
font-size: 24px; |
|
line-height: 20px; |
|
} |
|
|
|
div div.searchResult .text { |
|
margin: 10px 0 5px; |
|
font-size: 12px; |
|
font-weight: bold; |
|
} |
|
|
|
div.searchResult img { |
|
width:48px; |
|
height:48px; |
|
} |
|
|
|
/* CSS for overall layout */ |
|
.hidden { |
|
display:none; |
|
} |
|
|
|
div .navPane { |
|
width:250px; |
|
border-right:1px solid black; |
|
} |
|
|
|
/* CSS for list show case */ |
|
.list .row { |
|
padding: 10px; |
|
border-bottom: 1px solid #444; |
|
position: relative; |
|
background-color: white; |
|
z-index: 6; /* Must be greater than the .buttons z-index */ |
|
} |
|
.list .row.mblListItem { |
|
padding: 0px; |
|
} |
|
|
|
.list .row.last { |
|
border-bottom: none; |
|
} |
|
|
|
.list .row.hold { |
|
background-color: #ddd; |
|
} |
|
|
|
.list .buttons { |
|
position: absolute; |
|
text-align: center; |
|
padding-top: 10px; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 5; |
|
} |
|
|
|
.list .buttons .mblButton { |
|
} |
|
|
|
.list .buttons .deleteBtn { |
|
background-color: red; |
|
|
|
} |
|
.list .buttons .cancelBtn { |
|
margin-left: 10px; |
|
background-color: blue; |
|
} |
|
|
|
.row.collapsed { |
|
-webkit-animation-name: collapse-vert; |
|
-webkit-animation-duration: 0.5s; |
|
-webkit-animation-timing-function: linear; |
|
} |
|
|
|
div#list .mblRoundRectList, div#list .mblRoundRect { |
|
margin: 10px 10px 10px 10px; |
|
} |
|
|
|
@-webkit-keyframes collapse-vert { |
|
from { |
|
height: 100%; |
|
padding: 10px; |
|
} |
|
to { |
|
height: 0px; |
|
padding: 0px; |
|
} |
|
} |
|
|
|
/* CSS for tabs show case */ |
|
div.tabContent { |
|
width: 100%; |
|
text-align: center; |
|
display: table; |
|
overflow: hidden; |
|
height: 100px; |
|
font-size: 20px; |
|
} |
|
|
|
div.tabContent span { |
|
width: 100%; |
|
vertical-align: middle; |
|
display: table-cell; |
|
} |
|
|
|
div#tabBarContent { |
|
border-top-left-radius: 7px; |
|
border-top-right-radius: 7px; |
|
} |
|
|
|
div.mblTabButton { |
|
height: 61px; |
|
} |
|
|
|
div.mblTabButtonImgDiv { |
|
display: block; |
|
height: 40px; |
|
} |
|
|
|
div.mblTabButtonImgDiv IMG { |
|
margin-top: 8px; |
|
} |
|
|
|
#tabContainer .mblTabPanelHeader { |
|
height: 70px; |
|
} |
|
|
|
ul#demoTabBar img.mblTabBarButtonIcon, ul#demoTabs img.mblTabBarButtonIcon { |
|
height: 30px; |
|
width: 30px; |
|
} |
|
|
|
ul#demoTabBar, ul#demoTabs { |
|
height: 36px; |
|
} |
|
|
|
div#tContainer .mblTabPanelPane, div#tabBarContent { |
|
border-style: solid; |
|
border-width: 1px; |
|
} |
|
|
|
div#tContainer .mblTabPanelPane, ul#demoTabBar, ul#demoTabs { |
|
border-bottom-left-radius: 7px; |
|
border-bottom-right-radius: 7px; |
|
} |
|
|
|
div#tContainer, div#tabPanel { |
|
-moz-box-shadow: 10px 10px 5px #888; |
|
-webkit-box-shadow: 10px 10px 5px #888; |
|
box-shadow: 10px 10px 5px #888; |
|
margin-left: 5px; |
|
margin-right: 5px; |
|
}
|
|
|