moparisthebest/app-UI
1
0
Fork 0
mirror of https://github.com/moparisthebest/app-UI synced 2025-03-11 06:50:24 -04:00
Code Issues Releases Wiki Activity

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

Browse Source
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 {
background-color: #424242;
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: -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;
}
@ -54,24 +58,26 @@
.viewNavigator_content li {
padding: 0 10px;
border-bottom: 1px solid #ccc;
height:40px; line-height:40px;
height: 40px;
line-height: 40px;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
</style>
<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;
overflow: hidden;
}
</style>
<script>

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

@ -47,9 +47,13 @@
.listSelected {
background-color: #424242;
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: -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;
}
@ -62,24 +66,26 @@
.viewNavigator_contentHolder li {
padding: 0 10px;
border-bottom: 1px solid #ccc;
height:40px; line-height:40px;
height: 40px;
line-height: 40px;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
</style>
<script type="text/javascript" charset="utf-8">

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

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

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

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

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

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

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

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

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

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

12
src/splitviewnavigator/splitviewnavigator.css
View File

@ -23,8 +23,12 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
position: absolute;
overflow: hidden;
-webkit-backface-visibility: hidden;
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;
}
@ -33,8 +37,12 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
background: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
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 {

91
src/viewnavigator/viewnavigator.css
View File

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