moparisthebest
/
app-UI
mirror of https://github.com/moparisthebest/app-UI
1
0
Fork 0
Code Issues Releases Wiki Activity

add cross-browser CSS prefixes + cleaning + other cross-platform fixes

This commit is contained in:
Contra 2012-09-19 17:15:36 -07:00
parent ebdf914795
commit 2e7fea8531
12 changed files with 750 additions and 582 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
samples/01 - viewnavigator/02 - movie reviews/index.html
View File

@ -39,9 +39,13 @@
.listSelected { .listSelected {
background-color: #424242; background-color: #424242;
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9)); background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
background-image: -moz-linear-gradient(top, #0069d6, #999da9); background-image: -moz-linear-gradient(top, #0069d6, #999da9);
background-image: -o-linear-gradient(top, #0069d6, #999da9); background-image: -o-linear-gradient(top, #0069d6, #999da9);
color: #FFF; background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
-image color: #FFF;
font-weight: bold; font-weight: bold;
} }
@ -54,24 +58,26 @@
.viewNavigator_content li { .viewNavigator_content li {
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height:40px; line-height:40px; height: 40px;
line-height: 40px;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
} }
#detail li { #detail li {
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
height: auto; height: auto;
} }
</style> </style>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">

1
samples/01 - viewnavigator/03 - multi instance/index.html
View File

@ -33,6 +33,7 @@
border-left: 1px solid red; border-left: 1px solid red;
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script> <script>

16
samples/02 - splitviewnavigator/02 - movie reviews/index.html
View File

@ -47,9 +47,13 @@
.listSelected { .listSelected {
background-color: #424242; background-color: #424242;
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9)); background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
background-image: -moz-linear-gradient(top, #0069d6, #999da9); background-image: -moz-linear-gradient(top, #0069d6, #999da9);
background-image: -o-linear-gradient(top, #0069d6, #999da9); background-image: -o-linear-gradient(top, #0069d6, #999da9);
color: #FFF; background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
-image color: #FFF;
font-weight: bold; font-weight: bold;
} }
@ -62,24 +66,26 @@
.viewNavigator_contentHolder li { .viewNavigator_contentHolder li {
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
height:40px; line-height:40px; height: 40px;
line-height: 40px;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
} }
#detail li { #detail li {
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
height: auto; height: auto;
} }
</style> </style>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">

29
samples/03 - slidingView/03 - swipeview/index.html
View File

@ -19,7 +19,11 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #fff; background: #fff;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
color: #333; color: #333;
font-family: helvetica; font-family: helvetica;
@ -52,15 +56,16 @@
background: rgba(0,0,0,0.75); background: rgba(0,0,0,0.75);
padding: 0; padding: 0;
margin: 0 0 0 -100px; margin: 0 0 0 -100px;
-webkit-border-radius:10px; border-radius: 10px;
} }
#nav li { #nav li {
display: block; display: block;
float: left; float: left;
width: 14px; width: 14px;
height:14px; line-height:14px; height: 14px;
-webkit-border-radius:7px; line-height: 14px;
border-radius: 7px;
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
@ -84,15 +89,28 @@
#swipeview-slider > div { #swipeview-slider > div {
position: relative; position: relative;
display:-webkit-box;
-webkit-box-orient:vertical; -moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center; -webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center; -webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden; overflow: hidden;
} }
#swipeview-slider span { #swipeview-slider span {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block; display: block;
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;
@ -106,6 +124,7 @@
} }
</style> </style>
<script> <script>

29
samples/03 - slidingView/03 - swipeview/style.css
View File

@ -1,9 +1,12 @@
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #fff; background: #fff;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
color: #333; color: #333;
font-family: helvetica; font-family: helvetica;
@ -36,15 +39,16 @@ h1 {
background: rgba(0,0,0,0.75); background: rgba(0,0,0,0.75);
padding: 0; padding: 0;
margin: 0 0 0 -100px; margin: 0 0 0 -100px;
-webkit-border-radius:10px; border-radius: 10px;
} }
#nav li { #nav li {
display: block; display: block;
float: left; float: left;
width: 14px; width: 14px;
height:14px; line-height:14px; height: 14px;
-webkit-border-radius:7px; line-height: 14px;
border-radius: 7px;
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
@ -68,15 +72,28 @@ h1 {
#swipeview-slider > div { #swipeview-slider > div {
position: relative; position: relative;
display:-webkit-box;
-webkit-box-orient:vertical; -moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center; -webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center; -webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden; overflow: hidden;
} }
#swipeview-slider span { #swipeview-slider span {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block; display: block;
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;

1
samples/03 - slidingView/04 - oridomi/index.html
View File

@ -82,6 +82,7 @@
a { a {
color: white; color: white;
} }
</style> </style>
</head> </head>

4
samples/03 - slidingView/05 - oridomi w viewnav/index.html
View File

@ -38,11 +38,11 @@
background: #333; background: #333;
} }
#sidebar .viewNavigator_contentHolder, #sidebar .viewNavigator_contentHolder,#sidebar .viewNavigator_content {
#sidebar .viewNavigator_content {
background: #bbb; background: #bbb;
} }
</style> </style>
<script> <script>

12
samples/04 - browser history/index.html
View File

@ -47,7 +47,6 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.viewNavigator_header { .viewNavigator_header {
background-color: #333; background-color: #333;
background: url("./assets/header_bg_wood.png") repeat; background: url("./assets/header_bg_wood.png") repeat;
@ -72,8 +71,6 @@
-webkit-box-shadow: inset 0px 1px 0px 0px #999; -webkit-box-shadow: inset 0px 1px 0px 0px #999;
box-shadow: inset 0px 1px 0px 0px #999; box-shadow: inset 0px 1px 0px 0px #999;
background-color: rgba(128,128,128,0.65); background-color: rgba(128,128,128,0.65);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #777; border: 1px solid #777;
display: inline-block; display: inline-block;
@ -87,7 +84,9 @@
padding: 6px; padding: 6px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 4px; padding-bottom: 4px;
}.headerButton:active { }
.headerButton:active {
position: relative; position: relative;
top: 1px; top: 1px;
} }
@ -98,7 +97,8 @@
color: white; color: white;
border-bottom: 1px solid #888; border-bottom: 1px solid #888;
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
height:40px; line-height:40px; height: 40px;
line-height: 40px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
text-shadow: 1px 2px #777; text-shadow: 1px 2px #777;
@ -110,7 +110,6 @@
background-color: #333; background-color: #333;
} }
.listSelected { .listSelected {
background: #015FE6; background: #015FE6;
background-color: #015FE6; background-color: #015FE6;
@ -118,6 +117,7 @@
font-weight: bold; font-weight: bold;
} }
</style> </style>
<script> <script>

89
src/libs/css/activityIndicator.css
View File

File diff suppressed because one or more lines are too long

24
src/slidingview/slidingview.css
View File

@ -12,13 +12,20 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* { * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
input, input,textarea {
textarea {
-webkit-touch-callout: auto; -webkit-touch-callout: auto;
-webkit-user-select: auto; -webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
} }
body { body {
@ -40,8 +47,12 @@ body {
left: 0px; left: 0px;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden; overflow: hidden;
} }
@ -50,12 +61,15 @@ body {
left: 0px; left: 0px;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden; overflow: hidden;
} }
.slidingview_wrapper { .slidingview_wrapper {
position: absolute; position: absolute;
top: 0px; top: 0px;

12
src/splitviewnavigator/splitviewnavigator.css
View File

@ -23,8 +23,12 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-right: 1px solid #999; border-right: 1px solid #999;
} }
@ -33,8 +37,12 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
background: white; background: white;
overflow: hidden; overflow: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.content_overlay_visible { .content_overlay_visible {

91
src/viewnavigator/viewnavigator.css
View File

@ -12,15 +12,21 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* { * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
input, input,textarea {
textarea {
-webkit-touch-callout: auto; -webkit-touch-callout: auto;
-webkit-user-select: auto;
}
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body { body {
position: absolute; position: absolute;
@ -31,12 +37,14 @@ body {
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_root { .viewNavigator_root {
@ -52,21 +60,22 @@ body {
height: 46px; height: 46px;
overflow: hide; overflow: hide;
padding: 0px; padding: 0px;
background: rgb(167,207,223); /* Old browsers */ background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */ background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_header_backlink { .viewNavigator_header_backlink {
@ -74,17 +83,16 @@ body {
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 2; z-index: 2;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 30%; max-width: 30%;
} }
.viewNavigator_header_title { .viewNavigator_header_title {
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 0%; left: 0%;
@ -96,20 +104,22 @@ body {
color: #FFFFFF; color: #FFFFFF;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 48%; max-width: 48%;
} }
.viewNavigator_headerContent { .viewNavigator_headerContent {
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
position: absolute; position: absolute;
} }
@ -120,15 +130,16 @@ body {
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
overflow: hidden; overflow: hidden;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
/* ANDROID BUG WORKAROUND */ /* ANDROID BUG WORKAROUND */
.viewNavigator_content select { .viewNavigator_content select {
overflow: auto; overflow: auto;
@ -137,8 +148,6 @@ body {
-webkit-backface-visibility: auto; -webkit-backface-visibility: auto;
} }
.viewNavigator_contentHolder > div:first-child { .viewNavigator_contentHolder > div:first-child {
min-height: 100%; min-height: 100%;
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
@ -146,10 +155,14 @@ body {
} }
.viewNavigator_content div { .viewNavigator_content div {
backface-visibility: visible; backface-visibility: visible;
-webkit-backface-visibility: visible; -webkit-backface-visibility: visible;
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_contentHolder { .viewNavigator_contentHolder {
@ -165,19 +178,21 @@ body {
overflow: hidden; overflow: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
min-width: 100%; min-width: 100%;
min-height:100% min-height: 100% backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_backface { .viewNavigator_backface {
/* backface-visibility: hidden; /* backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
*/ */
} }
@ -187,18 +202,18 @@ body {
top: .6em; top: .6em;
} }
.viewNavigator_backButton .viewNavigator_backButton {
{
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
background-color: #ccc; background-color: #ccc;
border-radius: .2em; border-radius: .2em;
padding: 4px 10px; padding: 4px 10px;
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
} }
.viewNavigator_backButton:active .viewNavigator_backButton:active {
{
background-color: #ddd; background-color: #ddd;
} }