compass-jquery-mobile-plugin 0.1

data/README.markdown

@@ -0,0 +1,48 @@
+jQuery Mobile for Compass
+=========================
+A port of the existing jQuery Mobile CSS file into SASS.  
+
+This is currently for the Alpha release of jQuery Mobile.  It will be updated as and when the jQuery team release more versions.
+
+Where possible the theme elements have been kept inline with the jQuery Mobile rules, so that maintenance of rules in the future will be simple and also makes users new to this project find the cross over easy.
+
+Install
+=======
+From the command line:
+
+    gem install compass-jquery-mobile-plugin
+    cd my_compass_project
+
+Add the following to your compass configuration:
+
+    require 'compass-jquery-mobile-plugin'
+
+The run from the command line:
+
+    compass install jquery-mobile
+
+To one of your sass stylesheets to import the jquery-mobile styles add:
+
+    @import 'jquery-mobile'
+
+Information
+===========
+
+CURRENT RELEASE
+---------------
+jQuery Mobile 1.0a2 (Alpha 2)
+
+WORK DONE SO FAR
+----------------
+* The themes have been separated out into partials
+* Themes have been tidied a bit with mixins, whilst keeping the basic jQuery Mobile rules in place
+* Compass has been brought in to remove as much maintenance of vendor specific css
+
+TODO
+----
+* More tidying of non-theme related rules.  e.g. better use of mixins and variables
+* Add more customisation of theme options. So far only done what is required for own projects 
+
+NOTE
+----
+Using git-flow to have a consistent usage of git

data/lib/compass-jquery-mobile-plugin.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("jquery-mobile", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_button.scss

@@ -0,0 +1,118 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.ui-btn {
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  margin: .5em 5px;
+  padding: 0;
+  &:focus, a:focus {
+    outline: none; } }
+
+.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn {
+  display: inline-block;
+  font-size: 13px;
+  margin: 0; }
+
+.ui-btn-inline {
+  display: inline-block; }
+
+.ui-btn-inner {
+  padding: .6em 25px;
+  display: block;
+  height: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative; }
+
+.ui-btn-text {}
+
+.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner {
+  padding: .4em 8px .5em; }
+
+.ui-btn-icon-notext {
+  display: block;
+  width: 20px;
+  height: 20px;
+  padding: 1px 0px 1px 2px;
+  text-indent: -9999px;
+  .ui-btn-inner {
+    padding: 0; }
+  .ui-btn-text {
+    position: absolute;
+    left: -999px; } }
+
+.ui-btn-icon-left .ui-btn-inner {
+  padding-left: 33px; }
+
+.ui-header .ui-btn-icon-left .ui-btn-inner, .ui-footer .ui-btn-icon-left .ui-btn-inner, .ui-bar .ui-btn-icon-left .ui-btn-inner {
+  padding-left: 27px; }
+
+.ui-btn-icon-right .ui-btn-inner {
+  padding-right: 33px; }
+
+.ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner.ui-bar .ui-btn-icon-right .ui-btn-inner {
+  padding-right: 27px; }
+
+.ui-btn-icon-top .ui-btn-inner {
+  padding-top: 33px; }
+
+.ui-header .ui-btn-icon-top .ui-btn-inner.ui-footer .ui-btn-icon-top .ui-btn-inner, .ui-bar .ui-btn-icon-top .ui-btn-inner {
+  padding-top: 27px; }
+
+.ui-btn-icon-bottom .ui-btn-inner {
+  padding-bottom: 33px; }
+
+.ui-header .ui-btn-icon-bottom .ui-btn-inner, .ui-footer .ui-btn-icon-bottom .ui-btn-inner, .ui-bar .ui-btn-icon-bottom .ui-btn-inner {
+  padding-bottom: 27px; }
+
+/*btn icon positioning*/
+
+.ui-btn-icon-notext .ui-icon {
+  display: block; }
+
+.ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -9px; }
+
+.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon {
+  position: absolute;
+  left: 50%;
+  margin-left: -9px; }
+
+.ui-btn-icon-left .ui-icon {
+  left: 10px; }
+
+.ui-btn-icon-right .ui-icon {
+  right: 10px; }
+
+.ui-header .ui-btn-icon-left .ui-icon, .ui-footer .ui-btn-icon-left .ui-icon, .ui-bar .ui-btn-icon-left .ui-icon {
+  left: 4px; }
+
+.ui-header .ui-btn-icon-right .ui-icon, .ui-footer .ui-btn-icon-right .ui-icon, .ui-bar .ui-btn-icon-right .ui-icon {
+  right: 4px; }
+
+.ui-header .ui-btn-icon-top .ui-icon, .ui-footer .ui-btn-icon-top .ui-icon, .ui-bar .ui-btn-icon-top .ui-icon {
+  top: 4px; }
+
+.ui-header .ui-btn-icon-bottom .ui-icon, .ui-footer .ui-btn-icon-bottom .ui-icon, .ui-bar .ui-btn-icon-bottom .ui-icon {
+  bottom: 4px; }
+
+.ui-btn-icon-top .ui-icon {
+  top: 5px; }
+
+.ui-btn-icon-bottom .ui-icon {
+  bottom: 5px; }
+
+/*hiding native button,inputs */
+
+.ui-btn-hidden {
+  position: absolute;
+  left: -9999px; }

data/stylesheets/_collapsible.scss

@@ -0,0 +1,45 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.ui-collapsible-contain {
+  margin: .5em 0; }
+
+.ui-collapsible-heading {
+  font-size: 16px;
+  display: block;
+  margin: 0 -8px;
+  padding: 0;
+  border-width: 0 0 1px 0;
+  position: relative;
+  a {
+    text-align: left;
+    margin: 0;
+    .ui-btn-inner {
+      padding-left: 40px; }
+    span.ui-btn {
+      position: absolute;
+      left: 6px;
+      top: 50%;
+      margin: -12px 0 0 0;
+      width: 20px;
+      height: 20px;
+      padding: 1px 0px 1px 2px;
+      text-indent: -9999px;
+      .ui-btn-inner {
+        padding: 0; }
+      .ui-icon {
+        left: 2px; } } } }
+
+.ui-collapsible-heading-status {
+  position: absolute;
+  left: -99999px; }
+
+.ui-collapsible-content {
+  display: block;
+  padding: 10px 0 10px 8px; }
+
+.ui-collapsible-content-collapsed {
+  display: none; }

data/stylesheets/_controlgroup.scss

@@ -0,0 +1,69 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.ui-controlgroup, fieldset.ui-controlgroup {
+  padding: 0;
+  margin: .5em 0 1em; }
+
+.ui-bar .ui-controlgroup {
+  margin: 0 .3em; }
+
+.ui-controlgroup-label {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: normal;
+  margin: 0 0 .3em; }
+
+.ui-controlgroup-controls {
+  display: block;
+  width: 95%; }
+
+.ui-controlgroup li {
+  list-style: none; }
+
+.ui-controlgroup-vertical {
+  .ui-btn {
+    margin: 0;
+    border-bottom-width: 0; }
+  div {
+    &.ui-checkbox, &.ui-radio {
+      margin: 0;
+      border-bottom-width: 0; } }
+  .ui-controlgroup-last {
+    border-bottom-width: 1px; } }
+
+.ui-controlgroup-horizontal {
+  padding: 0;
+  .ui-btn {
+    margin: 0 -5px 0 0;
+    display: inline-block; }
+  div {
+    &.ui-checkbox, &.ui-radio {
+      margin: 0 -5px 0 0;
+      display: inline-block; }
+    &.ui-checkbox .ui-btn, &.ui-radio .ui-btn, &.ui-checkbox:last-child, &.ui-radio:last-child {
+      margin-right: 0; } }
+  .ui-controlgroup-last {
+    margin-right: 0; } }
+
+.ui-controlgroup {
+  .ui-checkbox label, .ui-radio label {
+    font-size: 16px; } }
+
+/* conflicts with listview..
+.ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; }
+.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner {  padding: 5px 6px 5px 5px; }
+*/
+
+@media screen and (min-width: 480px) {
+  .ui-controlgroup-label {
+    vertical-align: top;
+    display: inline-block;
+    width: 20%;
+    margin: 0 2% 0 0; }
+  .ui-controlgroup-controls {
+    width: 60%;
+    display: inline-block; } }

data/stylesheets/_core.scss

@@ -0,0 +1,158 @@
+/*
+* 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 
+*/
+
+/* some unsets - more probably needed */
+
+.ui-mobile fieldset, .ui-page {
+  padding: 0;
+  margin: 0; }
+
+.ui-mobile {
+  a img, fieldset {
+    border: 0; }
+  body {
+    margin: 0;
+    overflow-x: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-text-size-adjust: none;
+    min-height: 100%; } }
+
+/* responsive page widths */
+
+/*orientations from js are available */
+
+.portrait, .landscape {}
+
+/* "page" containers - full-screen views, one should always be in view post-pageload */
+
+.ui-page {
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  position: absolute;
+  display: none;
+  -webkit-backface-visibility: hidden;
+  border: 0; }
+
+.ui-page-active {
+  display: block;
+  overflow: visible; }
+
+/* loading screen */
+
+.ui-loading {
+  overflow: hidden !important;
+  body {
+    overflow: hidden !important; }
+  .ui-loader {
+    display: block; }
+  .ui-page {
+    overflow: hidden; } }
+
+.ui-loader {
+  display: none;
+  position: absolute;
+  opacity: .85;
+  z-index: 10;
+  top: 75px;
+  left: 50%;
+  width: 200px;
+  margin-left: -130px;
+  padding: 20px 30px;
+  h1 {
+    font-size: 15px;
+    text-align: center; }
+  .ui-icon {
+    position: static;
+    display: block;
+    opacity: .9;
+    margin: 0 auto;
+    width: 35px;
+    height: 35px;
+    background-color: transparent; } }
+
+/*headers, content panels*/
+
+.ui-bar, .ui-body {
+  position: relative;
+  padding: .4em 15px;
+  overflow: hidden;
+  display: block;
+  clear: both; }
+
+.ui-bar {
+  font-size: 16px;
+  margin: 0;
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    display: inline-block; } }
+
+.ui-page {
+  .ui-header, .ui-footer {
+    position: relative; } }
+
+.ui-header {
+  .ui-btn-left {
+    position: absolute;
+    left: 10px;
+    top: .4em; }
+  .ui-title {
+    text-align: center;
+    font-size: 16px;
+    display: block;
+    margin: .6em 90px .8em;
+    padding: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    outline: 0 !important; } }
+
+.ui-footer .ui-title {
+  text-align: center;
+  font-size: 16px;
+  display: block;
+  margin: .6em 90px .8em;
+  padding: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  outline: 0 !important; }
+
+.ui-header .ui-btn-right {
+  position: absolute;
+  right: 10px;
+  top: .4em; }
+
+/*content area*/
+
+.ui-content {
+  border-width: 0;
+  overflow: visible;
+  padding: 15px; }
+
+.ui-page-fullscreen .ui-content {
+  padding: 0; }
+
+/* icons sizing */
+
+.ui-icon {
+  width: 18px;
+  height: 18px; }
+
+/* fullscreen class on ui-content div */
+
+.ui-fullscreen img {
+  max-width: 100%; }
+
+/* non-js content hiding */
+
+.ui-nojs {
+  position: absolute;
+  left: -9999px; }

data/stylesheets/_dialog.scss

@@ -0,0 +1,15 @@
+/*
+* jQuery Mobile Framework
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
+*/
+
+.ui-dialog {
+  .ui-header, .ui-content, .ui-footer {
+    margin: 15px;
+    position: relative; }
+  .ui-header, .ui-footer {
+    z-index: 10;
+    width: auto; }
+  .ui-content, .ui-footer {
+    margin-top: -15px; } }