Merge branch 'master' of https://github.com/driftyco/ionic

Conflicts: dist/css/ionic.css
ionic-team · Nov 21, 2013 · fef493a · fef493a
2 parents 26b0a72 + 87c1f0f
commit fef493a
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -21,8 +21,6 @@ of great solutions that work well for websites, like [jQuery Mobile](http://jque
 
 Ionic is also not a good solution if you need to support older generation devices. Our compatibility *starts* at iOS 6 and Android 4.2. We will never support devices older than this.
 
-===============
-
 
 ## Quick Start
 
@@ -45,10 +43,34 @@ way is to use Python:
     http://localhost:8000/example/
 
     http://localhost:8000/test/
-
 
 
-===============
+## Community
+
+* Follow [@ionicframework on Twitter](https://twitter.com/ionicframework).
+* Subscribe to the [Ionic Newsletter](http://ionicframework.com/subscribe/).
+* Have a question that's not a feature request or bug report? [Discuss on the Ionic Forum](http://forum.ionicframework.com/).
+* Read our [Blog](http://ionicframework.com/blog/).
+* Have a feature request or find a bug? [Submit an issue](https://github.com/driftyco/ionic/issues).
+
+
+## Authors
+
+**Max Lynch**
+
++ <https://twitter.com/maxlynch>
++ <https://github.com/mlynch>
+
+**Ben Sperry**
+
++ <https://twitter.com/helloimben>
++ <https://github.com/bensperry>
+
+**Adam Bradley**
+
++ <https://twitter.com/adamdbradley>
++ <https://github.com/adamdbradley>
+
 
 ## LICENSE
 

diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */

diff --git a/package.json b/package.json
@@ -11,7 +11,9 @@
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-uglify": "~0.2.4",
     "grunt-contrib-jshint": "~0.6.4",
-    "grunt-contrib-sass": "~0.5.0"
+    "grunt-contrib-sass": "~0.5.0",
+    "karma-jasmine": "~0.1.3",
+    "karma-chrome-launcher": "~0.1.0"
   },
   "scripts": {
     "test": "./node_modules/.bin/karma start ionic.conf.js --single-run --browsers Firefox"

diff --git a/scss/_button.scss b/scss/_button.scss
@@ -129,7 +129,7 @@
   padding: 0 6px;
   min-width: initial;
   background: none;
-  border: none;
+  border-color: transparent;
   background: none;
 
   &.button:active, &.button.active {
@@ -148,7 +148,7 @@
   @include transition(opacity .1s);
   padding: 0 $button-clear-padding;
   max-height: $button-height;
-  border: none;
+  border-color: transparent;
   background: none;
   box-shadow: none;
 

diff --git a/scss/_items.scss b/scss/_items.scss
@@ -5,7 +5,7 @@
  */
 
 .item {
-  @include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
+  @include item-style($item-default-bg, $item-default-border, $item-default-text);
 
   position: relative;
 
@@ -52,45 +52,79 @@
     margin-bottom: 0;
   }
 
-  // Align badges within list items
+  // Align badges within items
   .badge {
     float: right;
   }
   .badge + .badge {
     margin-right: 5px;
   }
 
-  // Different themes for list items
+  // Different themes for items
   &.item-light { 
-    @include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
+    @include item-style($item-light-bg, $item-light-border, $item-light-text);
   }
   &.item-stable { 
-    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
+    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
   }
   &.item-positive { 
-    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
+    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
   }
   &.item-calm { 
-    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
+    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
   }
   &.item-assertive { 
-    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
+    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
   }
   &.item-balanced { 
-    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
+    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
   }
   &.item-energized { 
-    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
+    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
   }
   &.item-royal { 
-    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
+    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
   }
   &.item-dark { 
-    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
+    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
   }
 
 }
 
+// Link and Button Active States
+a.item, button.item {
+  @include item-active-style($item-default-active-bg, $item-default-active-border);
+
+  // Different active themes for <a> and <button> items
+  &.item-light { 
+    @include item-active-style($item-light-active-bg, $item-light-active-border);
+  }
+  &.item-stable { 
+    @include item-active-style($item-stable-active-bg, $item-stable-active-border);
+  }
+  &.item-positive { 
+    @include item-active-style($item-positive-active-bg, $item-positive-active-border);
+  }
+  &.item-calm { 
+    @include item-active-style($item-calm-active-bg, $item-calm-active-border);
+  }
+  &.item-assertive { 
+    @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
+  }
+  &.item-balanced { 
+    @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
+  }
+  &.item-energized { 
+    @include item-active-style($item-energized-active-bg, $item-energized-active-border);
+  }
+  &.item-royal { 
+    @include item-active-style($item-royal-active-bg, $item-royal-active-border);
+  }
+  &.item-dark { 
+    @include item-active-style($item-dark-active-bg, $item-dark-active-border);
+  }
+}
+
 // Handle text overflow
 .item,
 .item h1, 

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -23,12 +23,17 @@
   &.button-clear {
     color: $color;
     background: none;
+    border-color: transparent;
     box-shadow: none;
 
     @if $font-size != "" {
       font-size: $font-size;
     }
   }
+  &.button-icon {
+    background: none;
+    border-color: transparent;
+  }
 }
 
 @mixin button-outline($color, $text-color:"") {
@@ -78,11 +83,13 @@
 // Item Mixins
 // --------------------------------------------------
 
-@mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
+@mixin item-style($bg-color, $border-color, $color) {
   color: $color;
   background-color: $bg-color;
   border-color: $border-color;
+}
 
+@mixin item-active-style($active-bg-color, $active-border-color) {
   &.active, 
   .ionic-pseudo &:active {
     background-color: $active-bg-color;
@@ -104,7 +111,9 @@
 // --------------------------------------------------
 
 @mixin range-style($track-bg-color) {
-  background-color: $track-bg-color;
+  &::-webkit-slider-thumb:before {
+    background: $track-bg-color;
+  }
 }
 
 

diff --git a/scss/_range.scss b/scss/_range.scss
@@ -5,14 +5,20 @@
  */
 
 input[type="range"] {
-  @include range-style($range-default-track-bg);
   display: inline-block;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  overflow: hidden;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-right: 2px;
+  padding-left: 1px;
   width: auto;
   height: $range-track-height;
+  height: $range-slider-height + 15;
   outline: none;
-  border-radius: $range-track-height;
+  background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
+  background-position: center;
+  background-size: 96% $range-track-height;
+  background-repeat: no-repeat;
   -webkit-appearance: none !important;
 
   &::-webkit-slider-thumb {
@@ -21,11 +27,22 @@ input[type="range"] {
     height: $range-slider-height;
     border-radius: $range-slider-border-radius;
     background-color: $toggle-handle-off-bg-color;
-    box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
+    box-shadow: 0 0 2px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,0.25);
     cursor: pointer;
     -webkit-appearance: none !important;
   }
 
+  &::-webkit-slider-thumb:before {
+    /* what creates the colorful line on the left side of the slider */
+    position: absolute;
+    top: ($range-slider-height / 2) - ($range-track-height / 2);
+    left: $range-max-width * -1;
+    width: $range-max-width;
+    height: $range-track-height;
+    background: $dark;
+    content: ' ';
+  }
+
   &::-webkit-slider-thumb:after {
     /* create a larger (but hidden) hit area */
     position: absolute;
@@ -74,16 +91,16 @@ input[type="range"] {
 .range .icon {
   @include flex(0, 1, $range-icon-size);
   display: block;
-  font-size: $range-icon-size;
   min-width: $range-icon-size;
   text-align: center;
+  font-size: $range-icon-size;
 }
 
 .range input {
   @include flex(0, 1, $range-max-width - ($range-icon-size * 2));
   display: block;
-  margin-left: 10px;
   margin-right: 10px;
-  width: 100%;
+  margin-left: 10px;
   max-width: $range-max-width;
+  width: 100%;
 }
diff --git a/test/cards.html b/test/cards.html
@@ -15,7 +15,7 @@
         <h1 class="title">Cards</h1>
       </header>
 
-      <main class="content has-header overflow-scroll">
+      <main class="content has-header overflow-scroll ionic-pseudo">
 
         <div class="card">
           <div class="item item-text-wrap">
@@ -115,8 +115,8 @@ <h2>Marty McFly</h2>
               consists of a Tab Bar, icons aligned left, within the card-footer.
             </p>
             <p>
-              <a href="#" class="subdued‎">1 Like</a>
-              <a href="#" class="subdued‎">5 Comments</a>
+              <a href="#" class="subdued">1 Like</a>
+              <a href="#" class="subdued">5 Comments</a>
             </p>
           </div>
 

diff --git a/test/input-range.html b/test/input-range.html
@@ -22,54 +22,54 @@ <h1 class="title">Input: Range</h1>
 
       <div class="range">
         <i class="icon ion-volume-low"></i>
-        <input type="range" name="awesomeness" min="0" max="10" value="10">
+        <input type="range" name="awesomeness" min="0" max="10" value="0">
         <i class="icon ion-volume-high"></i>
       </div>
 
       <div class="list card">
         <div class="item range">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="1">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-light">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="2">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-stable">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="3">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-positive">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="4">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-calm">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="5">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-balanced">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="6">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-assertive">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="7">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-energized">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="8">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-royal">
           <i class="icon ion-volume-low"></i>
-          <input type="range" name="awesomeness" min="0" max="10" value="10">
+          <input type="range" name="awesomeness" min="0" max="10" value="9">
           <i class="icon ion-volume-high"></i>
         </div>
         <div class="item range range-dark">