compass-jquery-plugin 0.2.4.5 → 0.2.4.99

data/templates/jqtouch/jqtouch/jqt.sass

@@ -0,0 +1,580 @@
+// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake
+
+body
+  background: #000
+  color: #ddd
+
+  > *
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5e5e65))
+
+
+h1, h2
+  font: bold 18px Helvetica
+  text-shadow: rgba(255,255,255,.2) 0 1px 1px
+  color: #000
+  margin: 10px 20px 5px
+
+
+.toolbar
+  -webkit-box-sizing: border-box
+  border-bottom: 1px solid #000
+  padding: 10px
+  height: 45px
+  background: url("/images/jqtouch/jqt/toolbar.png") #000000 repeat-x
+  position: relative
+
+
+.black-translucent .toolbar
+  margin-top: 20px
+
+
+.toolbar > h1
+  position: absolute
+  overflow: hidden
+  left: 50%
+  top: 10px
+  line-height: 1em
+  margin: 1px 0 0 -75px
+  height: 40px
+  font-size: 20px
+  width: 150px
+  font-weight: bold
+  text-shadow: rgba(0,0,0,1) 0 -1px 1px
+  text-align: center
+  text-overflow: ellipsis
+  white-space: nowrap
+  color: #fff
+
+
+body.landscape .toolbar > h1
+  margin-left: -125px
+  width: 250px
+
+
+.button, .back, .cancel, .add
+  position: absolute
+  overflow: hidden
+  top: 8px
+  right: 10px
+  margin: 0
+  border-width: 0 5px
+  padding: 0 3px
+  width: auto
+  height: 30px
+  line-height: 30px
+  font-family: inherit
+  font-size: 12px
+  font-weight: bold
+  color: #fff
+  text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0
+  text-overflow: ellipsis
+  text-decoration: none
+  white-space: nowrap
+  background: none
+  -webkit-border-image: url("/images/jqtouch/jqt/button.png") 0 5 0 5
+
+
+.blueButton
+  -webkit-border-image: url("/images/jqtouch/jqt/blueButton.png") 0 5 0 5
+  border-width: 0 5px
+
+
+.back
+  left: 6px
+  right: auto
+  padding: 0
+  max-width: 55px
+  border-width: 0 8px 0 14px
+  -webkit-border-image: url("/images/jqtouch/jqt/back_button.png") 0 8 0 14
+
+  &.active
+    -webkit-border-image: url("/images/jqtouch/jqt/back_button_clicked.png") 0 8 0 14
+    color: #aaa
+
+
+.leftButton, .cancel
+  left: 6px
+  right: auto
+
+
+.add
+  font-size: 24px
+  line-height: 24px
+  font-weight: bold
+
+
+.whiteButton, .grayButton
+  display: block
+  border-width: 0 12px
+  padding: 10px
+  text-align: center
+  font-size: 20px
+  font-weight: bold
+  text-decoration: inherit
+  color: inherit
+
+
+.whiteButton
+  -webkit-border-image: url("/images/jqtouch/jqt/whiteButton.png") 0 12 0 12
+  text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0
+
+
+.grayButton
+  -webkit-border-image: url("/images/jqtouch/jqt/grayButton.png") 0 12 0 12
+  color: #FFFFFF
+
+
+h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul
+  margin-top: 0
+
+
+ul
+  color: #aaa
+  border: 1px solid #333333
+  font: bold 18px Helvetica
+  padding: 0
+  margin: 15px 10px 17px 10px
+
+  &.rounded
+    -webkit-border-radius: 8px
+    -webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 3px
+
+    li
+      &:first-child
+        border-top: 0
+        -webkit-border-top-left-radius: 8px
+        -webkit-border-top-right-radius: 8px
+
+        a
+          border-top: 0
+          -webkit-border-top-left-radius: 8px
+          -webkit-border-top-right-radius: 8px
+
+      &:last-child
+        -webkit-border-bottom-left-radius: 8px
+        -webkit-border-bottom-right-radius: 8px
+
+        a
+          -webkit-border-bottom-left-radius: 8px
+          -webkit-border-bottom-right-radius: 8px
+
+  li
+    color: #666
+    border-top: 1px solid #333
+    border-bottom: #555858
+    list-style-type: none
+    padding: 10px 10px 10px 10px
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
+    overflow: hidden
+
+    &.arrow
+      background-image: url("/images/jqtouch/jqt/chevron.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
+      background-position: right center
+      background-repeat: no-repeat
+
+    &.forward
+      background-image: url("/images/jqtouch/jqt/chevron_circle.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
+      background-position: right center
+      background-repeat: no-repeat
+
+    a
+      color: #fff
+      text-decoration: none
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+      display: block
+      padding: 12px 10px 12px 10px
+      margin: -10px
+      -webkit-tap-highlight-color: rgba(0,0,0,0)
+      text-shadow: rgba(0,0,0,.2) 0 1px 1px
+
+
+li.img a + a
+  color: #fff
+  text-decoration: none
+  text-overflow: ellipsis
+  white-space: nowrap
+  overflow: hidden
+  display: block
+  padding: 12px 10px 12px 10px
+  margin: -10px
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  text-shadow: rgba(0,0,0,.2) 0 1px 1px
+
+
+ul
+  li
+    a
+      &.active, &.button
+        background-color: #53b401
+        color: #fff
+
+      &.active.loading
+        background-image: url("/images/jqtouch/jqt/loading.gif)
+        background-position: 95% center
+        background-repeat: no-repeat
+
+    &.arrow a.active
+      background-image: url("/images/jqtouch/jqt/chevron.png")
+      background-position: right center
+      background-repeat: no-repeat
+
+    &.forward a.active
+      background-image: url("/images/jqtouch/jqt/chevron_circle.png")
+      background-position: right center
+      background-repeat: no-repeat
+
+    &.img a +
+      a
+        margin: -10px 10px -20px -5px
+        font-size: 17px
+        font-weight: bold
+
+        + a
+          font-size: 14px
+          font-weight: normal
+          margin-left: -10px
+          margin-bottom: -10px
+          margin-top: 0
+
+      small + a
+        margin-left: -5px
+
+        + a
+          margin-left: -10px
+          margin-top: -20px
+          margin-bottom: -10px
+          font-size: 14px
+          font-weight: normal
+
+          + a
+            margin-left: 0px !important
+            margin-bottom: 0
+
+    a + a
+      color: #000
+      font: 14px Helvetica
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+      display: block
+      margin: 0
+      padding: 0
+
+      + a
+        color: #666
+        font: 13px Helvetica
+        margin: 0
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        display: block
+        padding: 0
+
+    &.img a +
+      a + a + a, small + a + a + a
+        color: #666
+        font: 13px Helvetica
+        margin: 0
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        display: block
+        padding: 0
+
+  &.form li
+    padding: 7px 10px
+
+    &.error
+      border: 2px solid red
+
+      + li.error
+        border-top: 0
+
+  li
+    input
+      &[type="text"], &[type="password"]
+        color: #777
+        background: transparent url(../.png)
+        border: 0
+        font: normal 17px Helvetica
+        padding: 0
+        display: inline-block
+        margin-left: 0px
+        width: 100%
+        -webkit-appearance: textarea
+
+    textarea, select
+      color: #777
+      background: transparent url(../.png)
+      border: 0
+      font: normal 17px Helvetica
+      padding: 0
+      display: inline-block
+      margin-left: 0px
+      width: 100%
+      -webkit-appearance: textarea
+
+    textarea
+      height: 120px
+      padding: 0
+      text-indent: -2px
+
+    select
+      text-indent: 0px
+      background: transparent url("/images/jqtouch/jqt/chevron.png") no-repeat right center
+      -webkit-appearance: textfield
+      margin-left: -6px
+      width: 104%
+
+    input
+      &[type="checkbox"], &[type="radio"]
+        margin: 0
+        padding: 10px 10px
+
+      &[type="checkbox"]:after, &[type="radio"]:after
+        content: attr(title)
+        font: 17px Helvetica
+        display: block
+        width: 246px
+        color: #777
+        margin: -12px 0 0 17px
+
+    small
+      color: #64c114
+      font: 17px Helvetica
+      text-align: right
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+      display: block
+      width: 23%
+      float: right
+      padding: 0
+
+    &.arrow small
+      padding: 0 15px
+
+    small.counter
+      font-size: 17px
+      line-height: 13px
+      font-weight: bold
+      background: rgba(0,0,0,.15)
+      color: #fff
+      -webkit-border-radius: 11px
+      padding: 4px 10px 5px 10px
+      display: block
+      width: auto
+      margin-top: -22px
+      -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0
+
+    &.arrow small.counter
+      margin-right: 15px
+
+  &.individual
+    border: 0
+    background: none
+    clear: both
+    overflow: hidden
+    padding-bottom: 3px
+    -webkit-box-shadow: none
+
+    li
+      background: #4c4d4e
+      border: 1px solid #333
+      font-size: 14px
+      text-align: center
+      -webkit-border-radius: 8px
+      -webkit-box-sizing: border-box
+      width: 48%
+      float: left
+      display: block
+      padding: 11px 10px 14px 10px
+      -webkit-box-shadow: rgba(0,0,0,.2) 1px 1px 3px
+      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))
+
+      + li
+        float: right
+
+      a
+        color: #fff
+        line-height: 16px
+        margin: -11px -10px -14px -10px
+        padding: 11px 10px 14px 10px
+        -webkit-border-radius: 8px
+
+
+.toggle
+  width: 94px
+  position: relative
+  height: 27px
+  display: block
+  overflow: hidden
+  float: right
+
+  input[type="checkbox"]
+    -webkit-appearance: textarea
+    -webkit-border-radius: 5px
+    -webkit-tap-highlight-color: rgba(0,0,0,0)
+    -webkit-transition: left .15s
+    background-color: transparent
+    background: #fff url("/images/jqtouch/jqt/on_off.png") 0 0 no-repeat
+    border: 0
+    height: 27px
+    left: -55px
+    margin: 0
+    overflow: hidden
+    position: absolute
+    top: 0
+    width: 149px
+
+    &:checked
+      left: 0px
+
+
+.info
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#aaa), color-stop(.6,#CCCCCC))
+  font-size: 12px
+  line-height: 16px
+  text-align: center
+  text-shadow: rgba(255,255,255,.8) 0 1px 0
+  color: #444
+  padding: 15px
+  border-top: 1px solid rgba(255,255,255,.2)
+  font-weight: bold
+
+
+ul.edgetoedge
+  border-width: 1px 0
+  margin: 0
+  padding: 0
+
+  li
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729))
+    border-bottom: 2px solid #000
+    border-top: 1px solid #4a4b4d
+    font-size: 20px
+    margin-bottom: -1px
+
+    &.sep
+      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)))
+      border-bottom: 1px solid #111113
+      border-top: 1px solid #666
+      color: #3e9ac3
+      font-size: 16px
+      margin: 1px 0 0 0
+      padding: 2px 10px
+      text-shadow: #000 0 1px 0
+
+    em
+      font-weight: normal
+      font-style: normal
+
+
+#plastic
+  background: #17181a
+
+
+ul
+  &.plastic
+    background: #17181a
+    color: #aaa
+    font: bold 18px Helvetica
+    margin: 0
+    padding: 0
+    border-width: 0 0 1px 0
+
+    li
+      border-width: 1px 0
+      border-style: solid
+      border-top-color: #222
+      border-bottom-color: #000
+      color: #666
+      list-style-type: none
+      overflow: hidden
+      padding: 10px 10px 10px 10px
+
+      a.active.loading
+        background-image: url("/images/jqtouch/jqt/loading.gif)
+        background-position: 95% center
+        background-repeat: no-repeat
+
+      small
+        color: #888
+        font-size: 13px
+        font-weight: bold
+        line-height: 24px
+        text-transform: uppercase
+
+      &:nth-child(odd)
+        background-color: #1c1c1f
+
+      &.arrow
+        background-image: url("/images/jqtouch/jqt/chevron.png")
+        background-position: right center
+        background-repeat: no-repeat
+
+        a.active
+          background-image: url("/images/jqtouch/jqt/chevron.png")
+          background-position: right center
+          background-repeat: no-repeat
+
+      &.forward
+        background-image: url("/images/jqtouch/jqt/chevron_circle.png")
+        background-position: right center
+        background-repeat: no-repeat
+
+        a.active
+          background-image: url("/images/jqtouch/jqt/chevron_circle.png")
+          background-position: right center
+          background-repeat: no-repeat
+
+  &.metal
+    border-bottom: 0
+    border-left: 0
+    border-right: 0
+    border-top: 0
+    margin: 0
+
+    li
+      background-image: none
+      border-top: 1px solid #fff
+      border-bottom: 1px solid #666
+      font-size: 26px
+      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1)))
+
+      a
+        line-height: 26px
+        margin: 0
+        text-shadow: #fff 0 1px 0
+        padding: 13px 0
+
+        em
+          display: block
+          font-size: 14px
+          font-style: normal
+          color: #444
+          width: 50%
+          line-height: 14px
+
+        &.active
+          color: rgb(0,0,0)
+
+      small
+        float: right
+        position: relative
+        margin-top: 10px
+        font-weight: bold
+
+      &.arrow
+        background-image: url("/images/jqtouch/jqt/chevron.png")
+        background-position: right center
+        background-repeat: no-repeat
+        background-image: url("/images/jqtouch/jqt/chevron.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1)))
+        background-repeat: no-repeat
+        background-position: right center
+
+        a small
+          padding-right: 15px
+          line-height: 17px

data/templates/jqtouch/jqtouch/jqtouch.sass

@@ -0,0 +1,75 @@
+// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake
+
+@-webkit-keyframes slideinfromright
+  from
+    -webkit-transform: translateX(100%)
+
+  to
+    -webkit-transform: translateX(0)
+
+
+
+*
+  margin: 0
+  padding: 0
+
+
+a
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+
+
+body
+  overflow-x: hidden
+  -webkit-user-select: none
+  -webkit-text-size-adjust: none
+  font-family: Helvetica
+  -webkit-perspective: 800
+  -webkit-transform-style: preserve-3d
+
+
+.selectable, input, textarea
+  -webkit-user-select: auto
+
+
+body
+  > *
+    -webkit-backface-visibility: hidden
+    -webkit-box-sizing: border-box
+    display: none
+    position: absolute
+    left: 0
+    width: 100%
+    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1)
+    min-height: 420px !important
+
+  &.fullscreen
+    > *
+      min-height: 460px !important
+
+    &.black-translucent > *
+      min-height: 480px !important
+
+  &.landscape > *
+    min-height: 320px
+
+  > .current
+    display: block !important
+
+
+.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