- adjust range style on Safari

- update getting-started doc
- update amazeui-touch path in examples

docs/_utils/Prism/Prism.js

@@ -604,11 +604,11 @@ Prism.amtHighlight = function(options) {
   }
 
   var grammar = Prism.languages[language];
-  var highlightedCode = text.replace("} from '../UI';", "} from 'amazeui-touch';");
   var langClassName = `language-${grammar ? language : 'unknown'}`;
+  var highlightedCode;
 
   if (grammar) {
-    highlightedCode = Prism.highlight(highlightedCode, grammar);
+    highlightedCode = Prism.highlight(text, grammar);
   }
 
   if (ln) {

docs/getting-started/getting-started.md

@@ -35,6 +35,9 @@
 - [Flexbox](http://caniuse.com/#feat=flexbox)
 
   Amaze UI Touch 完全基于 flexbox 布局。由于[旧版规范](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)中没有 `flex-shrink`、`flex-basis` 对应的属性，导致只支持旧版规范的浏览器无法正常渲染布局，暂时[没有找到解决方法（望赐教）](https://github.com/amazeui/amazeui-touch/issues/12) :( 。
+
+  - **致各[浏览器毒瘤](http://www.zhihu.com/question/37361845)：**没有金刚钻，别揽瓷器活。乃们美其名曰自主研发，不如说是从不同体位搞残开源内核，浪费社会资源，阻碍行业发展。搞些狗皮膏功能用得着修改内核么？拜托乃们行行好，不要给前端开发者制造麻烦了！
+  - **致从业者：**请推荐周围的人使用 Safari、Chrome、Firefox 等现代浏览器，抵制膏药浏览器，保障数据安全，节约社会资源，关爱你身边的前端开发者。
 - [CSS3 Transitions](http://caniuse.com/#feat=css-transitions)
 - [CSS Animation](http://caniuse.com/#feat=css-animation)
 

gulpfile.babel.js

@@ -162,6 +162,9 @@ let bsf = (options) => {
     entries: options.entries,
     debug: !isProduction,
     transform: transform,
+    // path map for fake `amazeui-touch` in `./kitchen-sink/`
+    // @see https://github.com/vigetlabs/gulp-starter/issues/17
+    paths: ['./kitchen-sink/'],
   }));
 };
 

kitchen-sink/pages/About.js

@@ -5,7 +5,7 @@ import {
   Container,
   NavBar,
   Group,
-} from '../UI';
+} from 'amazeui-touch';
 
 const About = React.createClass({
   render() {

kitchen-sink/pages/AccordionExample.js

@@ -3,7 +3,7 @@ import {
   Container,
   Accordion,
   Card,
-} from '../UI';
+} from 'amazeui-touch';
 
 const albums = [
   {

kitchen-sink/pages/BadgeExample.js

@@ -3,7 +3,7 @@ import {
   Container,
   Badge,
   Group,
-} from '../UI';
+} from 'amazeui-touch';
 
 const styles = [
   null,

kitchen-sink/pages/ButtonExample.js

@@ -6,7 +6,7 @@ import {
   ButtonGroup,
   Icon,
   Badge,
-} from '../UI';
+} from 'amazeui-touch';
 
 const ButtonExample = React.createClass({
   render() {

kitchen-sink/pages/CardExample.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Container,
   Card,
-} from '../UI';
+} from 'amazeui-touch';
 
 const header = (
   <Card.Child cover="http://lorempixel.com/1000/625/people/">

kitchen-sink/pages/FormExample.js

@@ -9,7 +9,7 @@ import {
   Field,
   Button,
   Switch,
-} from '../UI';
+} from 'amazeui-touch';
 
 let fields = [
   {

kitchen-sink/pages/GridExample.js

@@ -4,7 +4,7 @@ import {
   Group,
   Grid,
   Col
-} from '../UI';
+} from 'amazeui-touch';
 
 const GridExample = React.createClass({
   render() {

kitchen-sink/pages/IconExample.js

@@ -4,7 +4,7 @@ import {
   Grid,
   Col,
   Icon,
-} from '../UI';
+} from 'amazeui-touch';
 
 const icons = ['back', 'bars', 'caret', 'check', 'close', 'code', 'compose', 'download', 'edit', 'forward', 'gear', 'home', 'info', 'list', 'more-vertical', 'more', 'pages', 'pause', 'person', 'play', 'plus', 'refresh', 'search', 'share', 'sound', 'sound2', 'sound3', 'sound4', 'star-filled', 'star', 'stop', 'trash', 'up-nav', 'up', 'right-nav', 'right', 'down-nav', 'down', 'left-nav', 'left'];
 

kitchen-sink/pages/ListExample.js

@@ -6,7 +6,7 @@ import {
   Badge,
   Card,
   Switch,
-} from '../UI';
+} from 'amazeui-touch';
 
 const img = <img width="32" src="http://lorempixel.com/128/128/people/" />;
 const img80 = <img width="80" src="http://lorempixel.com/160/160/people/" />;

kitchen-sink/pages/LoaderExample.js

@@ -4,7 +4,7 @@ import {
   Group,
   Loader,
   Field,
-} from '../UI';
+} from 'amazeui-touch';
 
 const LoaderExample = React.createClass({
   getInitialState() {

kitchen-sink/pages/ModalExample.js

@@ -6,7 +6,7 @@ import {
   Modal,
   Field,
   List,
-} from '../UI';
+} from 'amazeui-touch';
 
 const ModalExample = React.createClass({
   open() {

kitchen-sink/pages/NavBarExample.js

@@ -4,7 +4,7 @@ import {
   Group,
   NavBar,
   amStyles,
-} from '../UI';
+} from 'amazeui-touch';
 
 const clickHandler = (item, e) => {
   e.preventDefault();

kitchen-sink/pages/NotificationExample.js

@@ -5,7 +5,7 @@ import {
   Notification,
   Button,
   Field,
-} from '../UI';
+} from 'amazeui-touch';
 
 const NotificationExample = React.createClass({
   getInitialState() {

kitchen-sink/pages/OffCanvasExample.js

@@ -6,9 +6,9 @@ import {
   OffCanvas,
   OffCanvasTrigger,
   List,
-} from '../UI';
+} from 'amazeui-touch';
 
-const OffcanvasExample = React.createClass({
+const OffCanvasExample = React.createClass({
   render() {
     return (
       <Container {...this.props}>
@@ -66,4 +66,4 @@ const OffcanvasExample = React.createClass({
   }
 });
 
-export default OffcanvasExample;
+export default OffCanvasExample;

kitchen-sink/pages/PopoverExample.js

@@ -7,7 +7,7 @@ import {
   PopoverTrigger,
   Field,
   List,
-} from '../UI';
+} from 'amazeui-touch';
 
 const PopoverExample = React.createClass({
   render() {

kitchen-sink/pages/SliderExample.js

@@ -4,7 +4,7 @@ import {
   Group,
   Button,
   Slider,
-} from '../UI';
+} from 'amazeui-touch';
 
 const onSelect = function(index, direction) {
   console.log('激活的幻灯片编号：', index, '，滚动方向：', direction);

kitchen-sink/pages/TabBarExample.js

@@ -6,7 +6,7 @@ import {
   Icon,
   Badge,
   amStyles,
-} from '../UI';
+} from 'amazeui-touch';
 
 const TabBarDemo = React.createClass({
   getInitialState() {

kitchen-sink/pages/TabsExample.js

@@ -3,7 +3,7 @@ import {
   Container,
   Tabs,
   Card,
-} from '../UI';
+} from 'amazeui-touch';
 
 const albums = [
   {

kitchen-sink/pages/TypographyExample.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {
   Container,
   Group,
-} from '../UI'
+} from 'amazeui-touch'
 
 const TypographyExample = React.createClass({
   render() {

package.json

@@ -6,7 +6,7 @@
   "main": "lib/index.js",
   "scripts": {
     "start": "gulp",
-    "build": "gulp build",
+    "build": "env NODE_ENV=production gulp build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "eslint": "./node_modules/.bin/eslint ./src/js/"
   },

src/scss/components/_container.scss

@@ -104,7 +104,15 @@
 
   // Fixes: https://github.com/amazeui/amazeui-touch/issues/8
   // @see http://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
-  // -webkit-overflow-scrolling: touch;
+  // @see http://www.quirksmode.org/css/css2/overflowscrolling.html
+  // - 如果声明的值为 `touch`，在结合 Container 使用时，Modal 的遮罩层在 safari 中会被截取遮挡
+  //   原因是 Safari 真的用了原生控件来实现，对于有 -webkit-overflow-scrolling的网页
+  //   会创建一个UIScrollView，提供子layer给渲染模块使用
+  //   http://blog.csdn.net/hursing/article/details/9186199
+  // - 可以尝试使用绝对定位的方式定位 kitchen-sink 中的 navbar 和 tabbar，以避免这一问题，
+  //   提高交互体验，具体可参考 Framework7 的实现方式
+  // 总而言之，使用 flexbox 来布局页面主体还是会遇到一些问题
+  -webkit-overflow-scrolling: auto;
 
   // introduce iOS style springy scrolling
   &:before,

src/scss/components/_form-range.scss

@@ -48,6 +48,7 @@ input[type="range"] {
     width: $range-thumb-height;
     height: $range-thumb-height;
     margin-top: -$margin;
+    border: none; // remove black border for Safari (iOS 9.2)
 
     @if hasValue($range-thumb-radius) {
       border-radius: $range-thumb-radius;