cronapp-framework-mobile-js 2.8.9

package/lib/ionic/scss/_toggle.scss

@@ -0,0 +1,198 @@
+
+/**
+ * Toggle
+ * --------------------------------------------------
+ */
+
+.item-toggle {
+  pointer-events: none;
+}
+
+.toggle {
+  // set the color defaults
+  @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
+
+  position: relative;
+  display: inline-block;
+  pointer-events: auto;
+  margin: -$toggle-hit-area-expansion;
+  padding: $toggle-hit-area-expansion;
+
+  &.dragging {
+    .handle {
+      background-color: $toggle-handle-dragging-bg-color !important;
+    }
+  }
+
+}
+
+.toggle {
+  &.toggle-light  {
+    @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
+  }
+  &.toggle-stable  {
+    @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
+  }
+  &.toggle-positive  {
+    @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
+  }
+  &.toggle-calm  {
+    @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
+  }
+  &.toggle-assertive  {
+    @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
+  }
+  &.toggle-balanced  {
+    @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
+  }
+  &.toggle-energized  {
+    @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
+  }
+  &.toggle-royal  {
+    @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
+  }
+  &.toggle-dark  {
+    @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
+  }
+}
+
+.toggle input {
+  // hide the actual input checkbox
+  display: none;
+}
+
+/* the track appearance when the toggle is "off" */
+.toggle .track {
+  @include transition-timing-function(ease-in-out);
+  @include transition-duration($toggle-transition-duration);
+  @include transition-property((background-color, border));
+
+  display: inline-block;
+  box-sizing: border-box;
+  width: $toggle-width;
+  height: $toggle-height;
+  border: solid $toggle-border-width $toggle-off-border-color;
+  border-radius: $toggle-border-radius;
+  background-color: $toggle-off-bg-color;
+  content: ' ';
+  cursor: pointer;
+  pointer-events: none;
+}
+
+/* Fix to avoid background color bleeding */
+/* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
+.platform-android4_2 .toggle .track {
+  -webkit-background-clip: padding-box;
+}
+
+/* the handle (circle) thats inside the toggle's track area */
+/* also the handle's appearance when it is "off" */
+.toggle .handle {
+  @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
+  @include transition-property((background-color, transform));
+  position: absolute;
+  display: block;
+  width: $toggle-handle-width;
+  height: $toggle-handle-height;
+  border-radius: $toggle-handle-radius;
+  background-color: $toggle-handle-off-bg-color;
+  top: $toggle-border-width + $toggle-hit-area-expansion;
+  left: $toggle-border-width + $toggle-hit-area-expansion;
+  box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
+
+  &:before {
+    // used to create a larger (but hidden) hit area to slide the handle
+    position: absolute;
+    top: -4px;
+    left: ( ($toggle-handle-width / 2) * -1) - 8;
+    padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
+    content: " ";
+  }
+}
+
+.toggle input:checked + .track .handle {
+  // the handle when the toggle is "on"
+  @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
+  background-color: $toggle-handle-on-bg-color;
+}
+
+.item-toggle.active {
+  box-shadow: none;
+}
+
+.item-toggle,
+.item-toggle.item-complex .item-content {
+  // make sure list item content have enough padding on right to fit the toggle
+  padding-right: ($item-padding * 3) + $toggle-width;
+}
+
+.item-toggle.item-complex {
+  padding-right: 0;
+}
+
+.item-toggle .toggle {
+  // position the toggle to the right within a list item
+  position: absolute;
+  top: ($item-padding / 2) + 2;
+  right: $item-padding;
+  z-index: $z-index-item-toggle;
+}
+
+.toggle input:disabled + .track {
+  opacity: .6;
+}
+
+.toggle-small {
+
+  .track {
+    border: 0;
+    width: 34px;
+    height: 15px;
+    background: #9e9e9e;
+  }
+  input:checked + .track {
+    background: rgba(0,150,137,.5);
+  }
+  .handle {
+    top: 2px;
+    left: 4px;
+    width: 21px;
+    height: 21px;
+    box-shadow: 0 2px 5px rgba(0,0,0,.25);
+  }
+  input:checked + .track .handle {
+    @include translate3d(16px, 0, 0);
+    background: rgb(0,150,137);
+  }
+  &.item-toggle .toggle {
+    top: 19px;
+  }
+
+  .toggle-light  {
+    @include toggle-small-style($toggle-on-light-bg);
+  }
+  .toggle-stable  {
+    @include toggle-small-style($toggle-on-stable-bg);
+  }
+  .toggle-positive  {
+    @include toggle-small-style($toggle-on-positive-bg);
+  }
+  .toggle-calm  {
+    @include toggle-small-style($toggle-on-calm-bg);
+  }
+  .toggle-assertive  {
+    @include toggle-small-style($toggle-on-assertive-bg);
+  }
+  .toggle-balanced  {
+    @include toggle-small-style($toggle-on-balanced-bg);
+  }
+  .toggle-energized  {
+    @include toggle-small-style($toggle-on-energized-bg);
+  }
+  .toggle-royal  {
+    @include toggle-small-style($toggle-on-royal-bg);
+  }
+  .toggle-dark  {
+    @include toggle-small-style($toggle-on-dark-bg);
+  }
+}

package/lib/ionic/scss/_transitions.scss

@@ -0,0 +1,188 @@
+
+// iOS View Transitions
+// -------------------------------
+
+$ios-transition-duration:              500ms !default;
+$ios-transition-timing-function:       cubic-bezier(.36, .66, .04, 1) !default;
+$ios-transition-container-bg-color:    #000 !default;
+
+
+[nav-view-transition="ios"] {
+
+  [nav-view="entering"],
+  [nav-view="leaving"] {
+    @include transition-duration( $ios-transition-duration );
+    @include transition-timing-function( $ios-transition-timing-function );
+    -webkit-transition-property: opacity, -webkit-transform, box-shadow;
+            transition-property: opacity, transform, box-shadow;
+  }
+
+  &[nav-view-direction="forward"],
+  &[nav-view-direction="back"] {
+    background-color: $ios-transition-container-bg-color;
+  }
+
+  [nav-view="active"],
+  &[nav-view-direction="forward"] [nav-view="entering"],
+  &[nav-view-direction="back"] [nav-view="leaving"] {
+    z-index: $z-index-view-above;
+  }
+
+  &[nav-view-direction="back"] [nav-view="entering"],
+  &[nav-view-direction="forward"] [nav-view="leaving"] {
+    z-index: $z-index-view-below;
+  }
+
+}
+
+
+
+// iOS Nav Bar Transitions
+// -------------------------------
+
+[nav-bar-transition="ios"] {
+
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration( $ios-transition-duration );
+    @include transition-timing-function( $ios-transition-timing-function );
+    -webkit-transition-property: opacity, -webkit-transform;
+            transition-property: opacity, transform;
+  }
+
+  [nav-bar="active"],
+  [nav-bar="entering"] {
+    z-index: $z-index-bar-above;
+
+   .bar {
+      background: transparent;
+    }
+  }
+
+  [nav-bar="cached"] {
+    display: block;
+
+    .header-item {
+      display: none;
+    }
+  }
+
+}
+
+
+
+// Android View Transitions
+// -------------------------------
+
+$android-transition-duration:             200ms !default;
+$android-transition-timing-function:      cubic-bezier(0.4, 0.6, 0.2, 1) !default;
+
+
+[nav-view-transition="android"] {
+
+  [nav-view="entering"],
+  [nav-view="leaving"] {
+    @include transition-duration( $android-transition-duration );
+    @include transition-timing-function( $android-transition-timing-function );
+    -webkit-transition-property: -webkit-transform;
+            transition-property: transform;
+  }
+
+  [nav-view="active"],
+  &[nav-view-direction="forward"] [nav-view="entering"],
+  &[nav-view-direction="back"] [nav-view="leaving"] {
+    z-index: $z-index-view-above;
+  }
+
+  &[nav-view-direction="back"] [nav-view="entering"],
+  &[nav-view-direction="forward"] [nav-view="leaving"] {
+    z-index: $z-index-view-below;
+  }
+
+}
+
+
+
+// Android Nav Bar Transitions
+// -------------------------------
+
+[nav-bar-transition="android"] {
+
+  .title,
+  .buttons {
+    @include transition-duration( $android-transition-duration );
+    @include transition-timing-function( $android-transition-timing-function );
+    -webkit-transition-property: opacity;
+            transition-property: opacity;
+  }
+
+  [nav-bar="active"],
+  [nav-bar="entering"] {
+    z-index: $z-index-bar-above;
+
+   .bar {
+      background: transparent;
+    }
+  }
+
+  [nav-bar="cached"] {
+    display: block;
+
+    .header-item {
+      display: none;
+    }
+  }
+
+}
+
+
+
+// Nav Swipe
+// -------------------------------
+
+[nav-swipe="fast"] {
+  [nav-view],
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration(50ms);
+    @include transition-timing-function(linear);
+  }
+}
+
+[nav-swipe="slow"] {
+  [nav-view],
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration(160ms);
+    @include transition-timing-function(linear);
+  }
+}
+
+
+
+// Transition Settings
+// -------------------------------
+
+[nav-view="cached"],
+[nav-bar="cached"] {
+  display: none;
+}
+
+[nav-view="stage"] {
+  opacity: 0;
+  @include transition-duration( 0 );
+}
+
+[nav-bar="stage"] {
+  .title,
+  .buttons,
+  .back-text {
+    position: absolute;
+    opacity: 0;
+    @include transition-duration(0s);
+  }
+}
+

package/lib/ionic/scss/_type.scss

@@ -0,0 +1,166 @@
+
+/**
+ * Typography
+ * --------------------------------------------------
+ */
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 ($line-height-computed / 2);
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+small   { font-size: 85%; }
+cite    { font-style: normal; }
+
+
+// Alignment
+// -------------------------
+
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  color: $base-color;
+  font-weight: $headings-font-weight;
+  font-family: $headings-font-family;
+  line-height: $headings-line-height;
+
+  small {
+    font-weight: normal;
+    line-height: 1;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  + h1, + .h1,
+  + h2, + .h2,
+  + h3, + .h3 {
+    margin-top: ($line-height-computed / 2);
+  }
+}
+
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+}
+
+h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px
+h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px
+h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
+h5, .h5 { font-size:  $font-size-base; }
+h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
+
+h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
+h4 small, .h4 small { font-size: $font-size-base; }
+
+
+// Description Lists
+// -------------------------
+
+dl {
+  margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+  line-height: $line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+
+
+// Blockquotes
+// -------------------------
+
+blockquote {
+  margin: 0 0 $line-height-computed;
+  padding: ($line-height-computed / 2) $line-height-computed;
+  border-left: 5px solid gray;
+
+  p {
+    font-weight: 300;
+    font-size: ($font-size-base * 1.25);
+    line-height: 1.25;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  small {
+    display: block;
+    line-height: $line-height-base;
+    &:before {
+      content: '\2014 \00A0';// EM DASH, NBSP;
+    }
+  }
+}
+
+
+// Quotes
+// -------------------------
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+
+// Addresses
+// -------------------------
+
+address {
+  display: block;
+  margin-bottom: $line-height-computed;
+  font-style: normal;
+  line-height: $line-height-base;
+}
+
+
+// Links
+// -------------------------
+a {
+  color: $link-color;
+}
+
+a.subdued {
+  padding-right: 10px;
+  color: #888;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+  &:last-child {
+    padding-right: 0;
+  }
+}