compass-jquery-mobile-plugin 0.1

data/stylesheets/_navbar.scss

@@ -0,0 +1,103 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.ui-navbar {
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    display: block;
+    border: 0; } }
+
+.ui-navbar-expanded ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  display: block;
+  border: 0; }
+
+.ui-navbar-collapsed {
+  ul {
+    float: left;
+    width: 75%;
+    margin-right: -2px; }
+  .ui-navbar-toggle {
+    float: left;
+    width: 25%; } }
+
+.ui-navbar {
+  li {
+    &.ui-navbar-truncate {
+      position: absolute;
+      left: -99999px;
+      top: -99999px; }
+    .ui-btn {
+      display: block;
+      font-size: 12px;
+      text-align: center;
+      margin: 0;
+      outline: none;
+      border-right-width: 0; } }
+  .ui-navbar-toggle .ui-btn {
+    display: block;
+    font-size: 12px;
+    text-align: center;
+    margin: 0;
+    outline: none;
+    border-right-width: 0; }
+  li .ui-btn {
+    margin-right: -1px;
+    &:last-child {
+      margin-right: 0; } } }
+
+.ui-header .ui-navbar {
+  li .ui-btn, .ui-navbar-toggle .ui-btn {
+    border-top-width: 0;
+    border-bottom-width: 0; } }
+
+.ui-footer .ui-navbar {
+  li .ui-btn, .ui-navbar-toggle .ui-btn {
+    border-top-width: 0;
+    border-bottom-width: 0; } }
+
+.ui-navbar .ui-btn-inner {
+  padding-left: 2px;
+  padding-right: 2px; }
+
+.ui-navbar-noicons {
+  li .ui-btn .ui-btn-inner, .ui-navbar-toggle .ui-btn-inner {
+    padding-top: .8em;
+    padding-bottom: .9em; } }
+
+/*expanded page styles*/
+
+.ui-navbar-expanded {
+  .ui-btn {
+    margin: 0;
+    font-size: 14px; }
+  .ui-btn-inner {
+    padding-left: 5px;
+    padding-right: 5px; }
+  .ui-btn-icon-top {
+    .ui-btn-inner {
+      padding: 45px 5px 15px;
+      text-align: center; }
+    .ui-icon {
+      top: 15px; } }
+  .ui-btn-icon-bottom {
+    .ui-btn-inner {
+      padding: 15px 5px 45px;
+      text-align: center; }
+    .ui-icon {
+      bottom: 15px; } }
+  li .ui-btn .ui-btn-inner {
+    min-height: 2.5em; }
+  .ui-navbar-noicons .ui-btn .ui-btn-inner {
+    padding-top: 1.8em;
+    padding-bottom: 1.9em; } }

data/stylesheets/_theme.scss

@@ -0,0 +1,128 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+* Note: Code is in draft form and is subject to change 
+*/
+
+/* links within "buttons" */
+a.ui-link-inherit { text-decoration: none !important; }
+
+/* Active class used as the "on" state across all themes */
+.ui-btn-active { @include linear-gradient(color-stops(#5393c5, #85bae4)); border: 1px solid #155678; background: #4596ce; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #145072; text-decoration: none;  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; }
+.ui-btn-active a.ui-link-inherit {  color: #fff; }
+
+/* button inner top highlight */
+.ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3);  }
+
+
+/* Container Corner radius */
+.ui-corner-tl { @include border-top-left-radius(.6em); }
+.ui-corner-tr { @include border-top-right-radius(.6em); }
+.ui-corner-bl { @include border-bottom-left-radius(.6em); }
+.ui-corner-br { @include border-bottom-right-radius(.6em); }
+.ui-corner-top { @include border-top-radius(.6em); }
+.ui-corner-bottom { @include border-bottom-radius(.6em); }
+.ui-corner-right { @include border-right-radius(.6em); }
+.ui-corner-left { @include border-left-radius(.6em); }
+.ui-corner-all { @include border-radius(.6em); }
+
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; opacity: .3; }
+
+/* Icons
+----------------------------------*/
+/* .ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4); @include border-radius(9px); } */
+
+.ui-icon { background-image: image-url("jquery-mobile/icons-18-white.png"); background-repeat: no-repeat; background-color: #666; background-color: rgba(0,0,0,.4); @include border-radius(9px); }
+.ui-icon-disc { background-color: #666; background-color: rgba(0,0,0,.3); @include border-radius(9px); }
+
+/* alt color */
+.ui-icon-black { background-image: image-url("jquery-mobile/icons-18-black.png"); }
+.ui-icon-black-disc { background-color: #fff; background-color: rgba(255,255,255,.3); @include border-radius(9px); }
+
+/* retina */
+@media  screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
+	.ui-icon { background-image: image-url("jquery-mobile/icons-36-white.png"); background-size: 558px 18px; }
+	.ui-icon-black { background-image: image-url("jquery-mobile/icons-36-black.png"); }
+}
+
+/*plus minus*/
+.ui-icon-plus { background-position: -0 0; }
+.ui-icon-minus { background-position: -36px 0; }
+
+/* delete/close */
+.ui-icon-delete { background-position: -72px 0; }
+
+/*arrows*/
+.ui-icon-arrow-r { background-position: -108px 0; }
+.ui-icon-arrow-l { background-position: -144px 0; }
+.ui-icon-arrow-u { background-position: -180px 0; }
+.ui-icon-arrow-d { background-position: -216px 0; }
+
+.ui-icon-check { background-position: -252px 0; }
+.ui-icon-gear { background-position: -288px 0; }
+.ui-icon-refresh { background-position: -324px 0; }
+.ui-icon-forward { background-position: -360px 0; }
+.ui-icon-back { background-position: -396px 0; }
+
+.ui-icon-grid { background-position: -432px 0; }
+.ui-icon-star { background-position: -468px 0; }
+.ui-icon-alert { background-position: -504px 0; }
+.ui-icon-info { background-position: -540px 0; }
+
+/*checks,radios*/
+.ui-icon-checkbox-off,
+.ui-icon-checkbox-on,
+.ui-icon-radio-off,
+.ui-icon-radio-on { background-color: transparent; @include border-radius(0); }
+
+.ui-icon-checkbox-off { background-image: image-url("jquery-mobile/form-check-off.png"); }
+.ui-icon-checkbox-on { background-image: image-url("jquery-mobile/form-check-on.png"); }
+.ui-icon-radio-off { background-image: image-url("jquery-mobile/form-radio-off.png"); }
+.ui-icon-radio-on { background-image: image-url("jquery-mobile/form-radio-on.png"); }
+
+.ui-icon-search { background-image: image-url("jquery-mobile/icon-search-black.png"); }
+
+/* loading icon */
+.ui-icon-loading { background-image: image-url("jquery-mobile/ajax-loader.png"); width: 40px; height: 40px; @include border-radius(20px); }
+
+/* btn Corner radius */
+.ui-btn-corner-tl { @include border-top-left-radius(1em); }
+.ui-btn-corner-tr { @include border-top-right-radius(1em); }
+.ui-btn-corner-bl { @include border-bottom-left-radius(1em); }
+.ui-btn-corner-br { @include border-bottom-right-radius(1em); }
+.ui-btn-corner-top { @include border-top-radius(1em); }
+.ui-btn-corner-bottom { @include border-bottom-radius(1em); }
+.ui-btn-corner-right { @include border-right-radius(1em); }
+.ui-btn-corner-left { @include border-left-radius(1em); }
+.ui-btn-corner-all { @include border-radius(1em); }
+
+/* radius clip */
+.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 {
+	@include background-clip(padding-box);
+}
+
+/* Overlays */
+.ui-overlay { background: #666; opacity: .5; filter:Alpha(Opacity=50); position: absolute;  width: 100%; height: 100%; }
+.ui-overlay-shadow { @include box-shadow(rgba(0,0,0,.6), 0, 0, 12px); }
+
+.ui-shadow { @include box-shadow(rgba(0,0,0,.3), 0, 1px, 4px); }
+.ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow  { @include box-shadow(rgba(255,255,255,.3), 0, 1px, 0); }
+.ui-shadow-inset { @include box-shadow(rgba(0,0,0,.2), 0, 1px, 4px, 0, true); }
+.ui-icon-shadow { @include box-shadow(rgba(255,255,255,.4), 0, 1px, 0); }
+
+/* set focus state last */
+.ui-focus { outline-width: 0; @include box-shadow(#387bbe, 0, 0, 12px); }
+
+/* unset box shadow in browsers that don't do it right */
+.ui-mobile-nosupport-boxshadow * { @include box-shadow(none!important, 0, 0, 0); }
+.ui-mobile-nosupport-boxshadow .ui-focus { outline-width: 2px; }

data/stylesheets/_transitions.scss

@@ -0,0 +1,217 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.spin {
+  -webkit-animation-name: spin;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite; }
+
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(360deg); } }
+
+
+/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
+Built by David Kaneda and maintained by Jonathan Stark.
+*/
+
+.in, .out {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 350ms; }
+
+.slide {
+  &.in {
+    -webkit-animation-name: slideinfromright; }
+  &.out {
+    -webkit-animation-name: slideouttoleft; }
+  &.in.reverse {
+    -webkit-animation-name: slideinfromleft; }
+  &.out.reverse {
+    -webkit-animation-name: slideouttoright; } }
+
+.slideup {
+  &.in {
+    -webkit-animation-name: slideinfrombottom;
+    z-index: 10; }
+  &.out {
+    -webkit-animation-name: dontmove;
+    z-index: 0;
+    &.reverse {
+      z-index: 10;
+      -webkit-animation-name: slideouttobottom; } }
+  &.in.reverse {
+    z-index: 0;
+    -webkit-animation-name: dontmove; } }
+
+.slidedown {
+  &.in {
+    -webkit-animation-name: slideinfromtop;
+    z-index: 10; }
+  &.out {
+    -webkit-animation-name: dontmove;
+    z-index: 0;
+    &.reverse {
+      z-index: 10;
+      -webkit-animation-name: slideouttotop; } }
+  &.in.reverse {
+    z-index: 0;
+    -webkit-animation-name: dontmove; } }
+
+@-webkit-keyframes slideinfromright {
+  from {
+    -webkit-transform: translateX(100%); }
+  to {
+    -webkit-transform: translateX(0); } }
+
+
+@-webkit-keyframes slideinfromleft {
+  from {
+    -webkit-transform: translateX(-100%); }
+  to {
+    -webkit-transform: translateX(0); } }
+
+
+@-webkit-keyframes slideouttoleft {
+  from {
+    -webkit-transform: translateX(0); }
+  to {
+    -webkit-transform: translateX(-100%); } }
+
+
+@-webkit-keyframes slideouttoright {
+  from {
+    -webkit-transform: translateX(0); }
+  to {
+    -webkit-transform: translateX(100%); } }
+
+
+@-webkit-keyframes slideinfromtop {
+  from {
+    -webkit-transform: translateY(-100%); }
+  to {
+    -webkit-transform: translateY(0); } }
+
+
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%); }
+  to {
+    -webkit-transform: translateY(0); } }
+
+
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0); }
+  to {
+    -webkit-transform: translateY(100%); } }
+
+
+@-webkit-keyframes slideouttotop {
+  from {
+    -webkit-transform: translateY(0); }
+  to {
+    -webkit-transform: translateY(-100%); } }
+
+
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0; } }
+
+
+.fade {
+  &.in {
+    z-index: 10;
+    -webkit-animation-name: fadein; }
+  &.out {
+    z-index: 0; } }
+
+.flip {
+  -webkit-animation-duration: .65s;
+  &.in {
+    -webkit-animation-name: flipinfromleft; }
+  &.out {
+    -webkit-animation-name: flipouttoleft; }
+  &.in.reverse {
+    -webkit-animation-name: flipinfromright; }
+  &.out.reverse {
+    -webkit-animation-name: flipouttoright; } }
+
+/* Shake it all about */
+
+@-webkit-keyframes flipinfromright {
+  from {
+    -webkit-transform: rotateY(-180deg) scale(0.8); }
+  to {
+    -webkit-transform: rotateY(0) scale(1); } }
+
+
+@-webkit-keyframes flipinfromleft {
+  from {
+    -webkit-transform: rotateY(180deg) scale(0.8); }
+  to {
+    -webkit-transform: rotateY(0) scale(1); } }
+
+
+@-webkit-keyframes flipouttoleft {
+  from {
+    -webkit-transform: rotateY(0) scale(1); }
+  to {
+    -webkit-transform: rotateY(-180deg) scale(0.8); } }
+
+
+@-webkit-keyframes flipouttoright {
+  from {
+    -webkit-transform: rotateY(0) scale(1); }
+  to {
+    -webkit-transform: rotateY(180deg) scale(0.8); } }
+
+
+/* Hackish, but reliable. */
+
+@-webkit-keyframes dontmove {
+  from, to {
+    opacity: 1; } }
+
+
+.pop {
+  -webkit-transform-origin: 50% 50%;
+  &.in {
+    -webkit-animation-name: popin;
+    z-index: 10; }
+  &.out.reverse {
+    -webkit-animation-name: popout;
+    z-index: 10; }
+  &.in.reverse {
+    z-index: 0;
+    -webkit-animation-name: dontmove; } }
+
+@-webkit-keyframes popin {
+  from {
+    -webkit-transform: scale(0.2);
+    opacity: 0; }
+  to {
+    -webkit-transform: scale(1);
+    opacity: 1; } }
+
+
+@-webkit-keyframes popout {
+  from {
+    -webkit-transform: scale(1);
+    opacity: 1; }
+  to {
+    -webkit-transform: scale(0.2);
+    opacity: 0; } }