Skip to content

Commit fef493a

Browse files
mlynchmlynch
committed
Merge branch 'master' of https://github.com/driftyco/ionic
Conflicts: dist/css/ionic.css
2 parents 26b0a72 + 87c1f0f commit fef493a

File tree

9 files changed

+126
-43
lines changed

9 files changed

+126
-43
lines changed

‎README.md‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ of great solutions that work well for websites, like [jQuery Mobile](http://jque
2121

2222
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.
2323

24-
===============
25-
2624

2725
## Quick Start
2826

@@ -45,10 +43,34 @@ way is to use Python:
4543
http://localhost:8000/example/
4644

4745
http://localhost:8000/test/
48-
4946

5047

51-
===============
48+
## Community
49+
50+
* Follow [@ionicframework on Twitter](https://twitter.com/ionicframework).
51+
* Subscribe to the [Ionic Newsletter](http://ionicframework.com/subscribe/).
52+
* Have a question that's not a feature request or bug report? [Discuss on the Ionic Forum](http://forum.ionicframework.com/).
53+
* Read our [Blog](http://ionicframework.com/blog/).
54+
* Have a feature request or find a bug? [Submit an issue](https://github.com/driftyco/ionic/issues).
55+
56+
57+
## Authors
58+
59+
**Max Lynch**
60+
61+
+ <https://twitter.com/maxlynch>
62+
+ <https://github.com/mlynch>
63+
64+
**Ben Sperry**
65+
66+
+ <https://twitter.com/helloimben>
67+
+ <https://github.com/bensperry>
68+
69+
**Adam Bradley**
70+
71+
+ <https://twitter.com/adamdbradley>
72+
+ <https://github.com/adamdbradley>
73+
5274

5375
## LICENSE
5476

‎dist/css/themes/ionic-ios7.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@charset "UTF-8";
21
/**
32
* Nav controllers and header bar animations
43
*/

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
"grunt-contrib-concat": "~0.3.0",
1212
"grunt-contrib-uglify": "~0.2.4",
1313
"grunt-contrib-jshint": "~0.6.4",
14-
"grunt-contrib-sass": "~0.5.0"
14+
"grunt-contrib-sass": "~0.5.0",
15+
"karma-jasmine": "~0.1.3",
16+
"karma-chrome-launcher": "~0.1.0"
1517
},
1618
"scripts": {
1719
"test": "./node_modules/.bin/karma start ionic.conf.js --single-run --browsers Firefox"

‎scss/_button.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
padding: 0 6px;
130130
min-width: initial;
131131
background: none;
132-
border: none;
132+
border-color: transparent;
133133
background: none;
134134

135135
&.button:active, &.button.active {
@@ -148,7 +148,7 @@
148148
@include transition(opacity .1s);
149149
padding: 0 $button-clear-padding;
150150
max-height: $button-height;
151-
border: none;
151+
border-color: transparent;
152152
background: none;
153153
box-shadow: none;
154154

‎scss/_items.scss‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
.item {
8-
@include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
8+
@include item-style($item-default-bg, $item-default-border, $item-default-text);
99

1010
position: relative;
1111

@@ -52,45 +52,79 @@
5252
margin-bottom: 0;
5353
}
5454

55-
// Align badges within list items
55+
// Align badges within items
5656
.badge {
5757
float: right;
5858
}
5959
.badge + .badge {
6060
margin-right: 5px;
6161
}
6262

63-
// Different themes for list items
63+
// Different themes for items
6464
&.item-light {
65-
@include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
65+
@include item-style($item-light-bg, $item-light-border, $item-light-text);
6666
}
6767
&.item-stable {
68-
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
68+
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
6969
}
7070
&.item-positive {
71-
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
71+
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
7272
}
7373
&.item-calm {
74-
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
74+
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
7575
}
7676
&.item-assertive {
77-
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
77+
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
7878
}
7979
&.item-balanced {
80-
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
80+
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
8181
}
8282
&.item-energized {
83-
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
83+
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
8484
}
8585
&.item-royal {
86-
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
86+
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
8787
}
8888
&.item-dark {
89-
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
89+
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
9090
}
9191

9292
}
9393

94+
// Link and Button Active States
95+
a.item, button.item {
96+
@include item-active-style($item-default-active-bg, $item-default-active-border);
97+
98+
// Different active themes for <a> and <button> items
99+
&.item-light {
100+
@include item-active-style($item-light-active-bg, $item-light-active-border);
101+
}
102+
&.item-stable {
103+
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
104+
}
105+
&.item-positive {
106+
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
107+
}
108+
&.item-calm {
109+
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
110+
}
111+
&.item-assertive {
112+
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
113+
}
114+
&.item-balanced {
115+
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
116+
}
117+
&.item-energized {
118+
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
119+
}
120+
&.item-royal {
121+
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
122+
}
123+
&.item-dark {
124+
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
125+
}
126+
}
127+
94128
// Handle text overflow
95129
.item,
96130
.item h1,

‎scss/_mixins.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,17 @@
2323
&.button-clear {
2424
color: $color;
2525
background: none;
26+
border-color: transparent;
2627
box-shadow: none;
2728

2829
@if $font-size != "" {
2930
font-size: $font-size;
3031
}
3132
}
33+
&.button-icon {
34+
background: none;
35+
border-color: transparent;
36+
}
3237
}
3338

3439
@mixin button-outline($color, $text-color:"") {
@@ -78,11 +83,13 @@
7883
// Item Mixins
7984
// --------------------------------------------------
8085

81-
@mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
86+
@mixin item-style($bg-color, $border-color, $color) {
8287
color: $color;
8388
background-color: $bg-color;
8489
border-color: $border-color;
90+
}
8591

92+
@mixin item-active-style($active-bg-color, $active-border-color) {
8693
&.active,
8794
.ionic-pseudo &:active {
8895
background-color: $active-bg-color;
@@ -104,7 +111,9 @@
104111
// --------------------------------------------------
105112

106113
@mixin range-style($track-bg-color) {
107-
background-color: $track-bg-color;
114+
&::-webkit-slider-thumb:before {
115+
background: $track-bg-color;
116+
}
108117
}
109118

110119

‎scss/_range.scss‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,20 @@
55
*/
66

77
input[type="range"] {
8-
@include range-style($range-default-track-bg);
98
display: inline-block;
10-
margin-top: 20px;
11-
margin-bottom: 20px;
9+
overflow: hidden;
10+
margin-top: 5px;
11+
margin-bottom: 5px;
12+
padding-right: 2px;
13+
padding-left: 1px;
1214
width: auto;
1315
height: $range-track-height;
16+
height: $range-slider-height + 15;
1417
outline: none;
15-
border-radius: $range-track-height;
18+
background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
19+
background-position: center;
20+
background-size: 96% $range-track-height;
21+
background-repeat: no-repeat;
1622
-webkit-appearance: none !important;
1723

1824
&::-webkit-slider-thumb {
@@ -21,11 +27,22 @@ input[type="range"] {
2127
height: $range-slider-height;
2228
border-radius: $range-slider-border-radius;
2329
background-color: $toggle-handle-off-bg-color;
24-
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
30+
box-shadow: 0 0 2px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,0.25);
2531
cursor: pointer;
2632
-webkit-appearance: none !important;
2733
}
2834

35+
&::-webkit-slider-thumb:before {
36+
/* what creates the colorful line on the left side of the slider */
37+
position: absolute;
38+
top: ($range-slider-height / 2) - ($range-track-height / 2);
39+
left: $range-max-width * -1;
40+
width: $range-max-width;
41+
height: $range-track-height;
42+
background: $dark;
43+
content: ' ';
44+
}
45+
2946
&::-webkit-slider-thumb:after {
3047
/* create a larger (but hidden) hit area */
3148
position: absolute;
@@ -74,16 +91,16 @@ input[type="range"] {
7491
.range .icon {
7592
@include flex(0, 1, $range-icon-size);
7693
display: block;
77-
font-size: $range-icon-size;
7894
min-width: $range-icon-size;
7995
text-align: center;
96+
font-size: $range-icon-size;
8097
}
8198

8299
.range input {
83100
@include flex(0, 1, $range-max-width - ($range-icon-size * 2));
84101
display: block;
85-
margin-left: 10px;
86102
margin-right: 10px;
87-
width: 100%;
103+
margin-left: 10px;
88104
max-width: $range-max-width;
105+
width: 100%;
89106
}

‎test/cards.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<h1 class="title">Cards</h1>
1616
</header>
1717

18-
<main class="content has-header overflow-scroll">
18+
<main class="content has-header overflow-scroll ionic-pseudo">
1919

2020
<div class="card">
2121
<div class="item item-text-wrap">
@@ -115,8 +115,8 @@ <h2>Marty McFly</h2>
115115
consists of a Tab Bar, icons aligned left, within the card-footer.
116116
</p>
117117
<p>
118-
<a href="#" class="subdued‎">1 Like</a>
119-
<a href="#" class="subdued‎">5 Comments</a>
118+
<a href="#" class="subdued">1 Like</a>
119+
<a href="#" class="subdued">5 Comments</a>
120120
</p>
121121
</div>
122122

‎test/input-range.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,54 +22,54 @@ <h1 class="title">Input: Range</h1>
2222

2323
<div class="range">
2424
<i class="icon ion-volume-low"></i>
25-
<input type="range" name="awesomeness" min="0" max="10" value="10">
25+
<input type="range" name="awesomeness" min="0" max="10" value="0">
2626
<i class="icon ion-volume-high"></i>
2727
</div>
2828

2929
<div class="list card">
3030
<div class="item range">
3131
<i class="icon ion-volume-low"></i>
32-
<input type="range" name="awesomeness" min="0" max="10" value="10">
32+
<input type="range" name="awesomeness" min="0" max="10" value="1">
3333
<i class="icon ion-volume-high"></i>
3434
</div>
3535
<div class="item range range-light">
3636
<i class="icon ion-volume-low"></i>
37-
<input type="range" name="awesomeness" min="0" max="10" value="10">
37+
<input type="range" name="awesomeness" min="0" max="10" value="2">
3838
<i class="icon ion-volume-high"></i>
3939
</div>
4040
<div class="item range range-stable">
4141
<i class="icon ion-volume-low"></i>
42-
<input type="range" name="awesomeness" min="0" max="10" value="10">
42+
<input type="range" name="awesomeness" min="0" max="10" value="3">
4343
<i class="icon ion-volume-high"></i>
4444
</div>
4545
<div class="item range range-positive">
4646
<i class="icon ion-volume-low"></i>
47-
<input type="range" name="awesomeness" min="0" max="10" value="10">
47+
<input type="range" name="awesomeness" min="0" max="10" value="4">
4848
<i class="icon ion-volume-high"></i>
4949
</div>
5050
<div class="item range range-calm">
5151
<i class="icon ion-volume-low"></i>
52-
<input type="range" name="awesomeness" min="0" max="10" value="10">
52+
<input type="range" name="awesomeness" min="0" max="10" value="5">
5353
<i class="icon ion-volume-high"></i>
5454
</div>
5555
<div class="item range range-balanced">
5656
<i class="icon ion-volume-low"></i>
57-
<input type="range" name="awesomeness" min="0" max="10" value="10">
57+
<input type="range" name="awesomeness" min="0" max="10" value="6">
5858
<i class="icon ion-volume-high"></i>
5959
</div>
6060
<div class="item range range-assertive">
6161
<i class="icon ion-volume-low"></i>
62-
<input type="range" name="awesomeness" min="0" max="10" value="10">
62+
<input type="range" name="awesomeness" min="0" max="10" value="7">
6363
<i class="icon ion-volume-high"></i>
6464
</div>
6565
<div class="item range range-energized">
6666
<i class="icon ion-volume-low"></i>
67-
<input type="range" name="awesomeness" min="0" max="10" value="10">
67+
<input type="range" name="awesomeness" min="0" max="10" value="8">
6868
<i class="icon ion-volume-high"></i>
6969
</div>
7070
<div class="item range range-royal">
7171
<i class="icon ion-volume-low"></i>
72-
<input type="range" name="awesomeness" min="0" max="10" value="10">
72+
<input type="range" name="awesomeness" min="0" max="10" value="9">
7373
<i class="icon ion-volume-high"></i>
7474
</div>
7575
<div class="item range range-dark">

0 commit comments

Comments
 (0)