feat(picker): init picker

ionic/components.ios.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.ios",
   "components/menu/menu.ios",
   "components/modal/modal.ios",
+  "components/picker/picker.ios",
   "components/radio/radio.ios",
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",

ionic/components.md.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.md",
   "components/menu/menu.md",
   "components/modal/modal.md",
+  "components/picker/picker.md",
   "components/radio/radio.md",
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",

ionic/components.ts

@@ -1,51 +1,51 @@
-export * from './components/app/app'
-export * from './components/app/id'
-
-export * from './components/action-sheet/action-sheet'
-export * from './components/alert/alert'
-export * from './components/badge/badge'
-export * from './components/blur/blur'
-export * from './components/button/button'
-export * from './components/checkbox/checkbox'
-export * from './components/content/content'
-export * from './components/icon/icon'
-export * from './components/img/img'
-export * from './components/infinite-scroll/infinite-scroll'
-export * from './components/infinite-scroll/infinite-scroll-content'
-export * from './components/input/input'
-export * from './components/item/item'
-export * from './components/item/item-sliding'
-export * from './components/label/label'
-export * from './components/list/list'
-export * from './components/loading/loading'
-export * from './components/menu/menu-controller'
-export * from './components/menu/menu'
-export * from './components/menu/menu-types'
-export * from './components/menu/menu-toggle'
-export * from './components/menu/menu-close'
-export * from './components/modal/modal'
-export * from './components/nav/nav'
-export * from './components/nav/nav-controller'
-export * from './components/nav/view-controller'
-export * from './components/nav/nav-params'
-export * from './components/nav/nav-push'
-export * from './components/nav/nav-router'
-export * from './components/navbar/navbar'
-export * from './components/option/option'
-export * from './components/radio/radio-button'
-export * from './components/radio/radio-group'
-export * from './components/refresher/refresher'
-export * from './components/refresher/refresher-content'
-export * from './components/scroll/scroll'
-export * from './components/searchbar/searchbar'
-export * from './components/segment/segment'
-export * from './components/select/select'
-export * from './components/show-hide-when/show-hide-when'
-export * from './components/slides/slides'
-export * from './components/spinner/spinner'
-export * from './components/tabs/tabs'
-export * from './components/tabs/tab'
-export * from './components/tap-click/tap-click'
-export * from './components/toggle/toggle'
-export * from './components/toolbar/toolbar'
-export * from './components/virtual-scroll/virtual-scroll'
+export * from './components/app/app';
+export * from './components/app/id';
+export * from './components/action-sheet/action-sheet';
+export * from './components/alert/alert';
+export * from './components/badge/badge';
+export * from './components/blur/blur';
+export * from './components/button/button';
+export * from './components/checkbox/checkbox';
+export * from './components/content/content';
+export * from './components/icon/icon';
+export * from './components/img/img';
+export * from './components/infinite-scroll/infinite-scroll';
+export * from './components/infinite-scroll/infinite-scroll-content';
+export * from './components/input/input';
+export * from './components/item/item';
+export * from './components/item/item-sliding';
+export * from './components/label/label';
+export * from './components/list/list';
+export * from './components/loading/loading';
+export * from './components/menu/menu-controller';
+export * from './components/menu/menu';
+export * from './components/menu/menu-types';
+export * from './components/menu/menu-toggle';
+export * from './components/menu/menu-close';
+export * from './components/modal/modal';
+export * from './components/nav/nav';
+export * from './components/nav/nav-controller';
+export * from './components/nav/view-controller';
+export * from './components/nav/nav-params';
+export * from './components/nav/nav-push';
+export * from './components/nav/nav-router';
+export * from './components/navbar/navbar';
+export * from './components/option/option';
+export * from './components/picker/picker';
+export * from './components/radio/radio-button';
+export * from './components/radio/radio-group';
+export * from './components/refresher/refresher';
+export * from './components/refresher/refresher-content';
+export * from './components/scroll/scroll';
+export * from './components/searchbar/searchbar';
+export * from './components/segment/segment';
+export * from './components/select/select';
+export * from './components/show-hide-when/show-hide-when';
+export * from './components/slides/slides';
+export * from './components/spinner/spinner';
+export * from './components/tabs/tabs';
+export * from './components/tabs/tab';
+export * from './components/tap-click/tap-click';
+export * from './components/toggle/toggle';
+export * from './components/toolbar/toolbar';
+export * from './components/virtual-scroll/virtual-scroll';

ionic/components.wp.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.wp",
   "components/menu/menu.wp",
   "components/modal/modal.wp",
+  "components/picker/picker.wp",
   "components/radio/radio.wp",
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",

ionic/components/picker/picker.ios.scss

@@ -0,0 +1,79 @@
+@import "../../globals.ios";
+@import "./picker";
+
+// iOS Picker
+// --------------------------------------------------
+
+$picker-ios-height:                            260px !default;
+$picker-ios-background-color:                  #cfd5da !default;
+
+$picker-ios-toolbar-height:                    44px !default;
+$picker-ios-toolbar-background-color:          #f7f7f8 !default;
+
+$picker-ios-button-height:                     $picker-ios-toolbar-height !default;
+$picker-ios-button-text-color:                 color($colors-ios, primary) !default;
+$picker-ios-button-background-color:           transparent !default;
+
+$picker-ios-option-offset-y:                   90px !default;
+$picker-ios-option-font-size:                  18px !default;
+$picker-ios-option-line-height:                24px !default;
+
+
+.picker-wrapper {
+  height: $picker-ios-height;
+
+  border-top: 1px solid #929499;
+
+  background: $picker-ios-background-color;
+}
+
+.hairlines .picker-wrapper {
+  border-width: $hairlines-width;
+}
+
+.picker-toolbar {
+  display: flex;
+
+  height: $picker-ios-toolbar-height;
+  background: $picker-ios-toolbar-background-color;
+}
+
+.picker-toolbar-button {
+  flex: 1;
+  text-align: right;
+}
+
+.picker-toolbar-cancel {
+  text-align: left;
+}
+
+.picker-button,
+.picker-button.activated {
+  margin: 0;
+
+  height: $picker-ios-button-height;
+
+  color: $picker-ios-button-text-color;
+  background: $picker-ios-button-background-color;
+}
+
+.picker-offset {
+  transform: translateY($picker-ios-option-offset-y);
+}
+
+.picker-column {
+  padding: 0 10px;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-options {
+  padding: 0 8px;
+  font-size: $picker-ios-option-font-size;
+  line-height: $picker-ios-option-line-height;
+}
+
+.picker-prefix,
+.picker-suffix {
+  padding: 0
+}

ionic/components/picker/picker.md.scss

@@ -0,0 +1,5 @@
+@import "../../globals.md";
+@import "./picker";
+
+// Material Design Picker
+// --------------------------------------------------

ionic/components/picker/picker.scss

@@ -0,0 +1,72 @@
+@import "../../globals.core";
+
+// Picker
+// --------------------------------------------------
+
+$picker-width:                             100% !default;
+$picker-max-width:                         500px !default;
+
+
+ion-picker-cmp {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+  display: block;
+
+  width: $picker-width;
+  height: $picker-width;
+}
+
+.picker-toolbar {
+  z-index: 1;
+}
+
+.picker-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay-wrapper;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  margin: auto;
+
+  width: $picker-width;
+  max-width: $picker-max-width;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.picker-columns {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.picker-offset {
+  display: flex;
+}
+
+.picker-column {
+  flex: 1;
+}
+
+.picker-prefix {
+  flex: 1;
+  text-align: right;
+}
+
+.picker-suffix {
+  flex: 1;
+  text-align: left;
+}
+
+.picker-option {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}