feat(picker): add ios/md/wp picker styles

ionic-team · Apr 26, 2016 · aa9a667 · aa9a667
1 parent 066ab71
commit aa9a667
Show file tree

Hide file tree

Showing 8 changed files with 932 additions and 153 deletions.
diff --git a/ionic/components/picker/picker.ios.scss b/ionic/components/picker/picker.ios.scss
@@ -5,45 +5,59 @@
 // --------------------------------------------------
 
 $picker-ios-height:                            260px !default;
-$picker-ios-background-color:                  #cfd5da !default;
+$picker-ios-border-color:                      $list-ios-border-color !default;
+$picker-ios-background-color:                  $list-ios-background-color !default;
 
 $picker-ios-toolbar-height:                    44px !default;
-$picker-ios-toolbar-background-color:          #f7f7f8 !default;
+$picker-ios-toolbar-background-color:          $picker-ios-background-color !default;
 
 $picker-ios-button-height:                     $picker-ios-toolbar-height !default;
-$picker-ios-button-text-color:                 color($colors-ios, primary) !default;
+$picker-ios-button-text-color:                 $link-ios-color !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-ios-column-padding:                    0 12px !default;
+
+$picker-ios-option-padding:                    0 10px !default;
+$picker-ios-option-text-color:                 $list-ios-text-color !default;
+$picker-ios-option-font-size:                  22px !default;
+$picker-ios-option-height:                     42px !default;
+$picker-ios-option-offset-y:                   (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
+
+$picker-highlight-opacity:                     .8 !default;
 
 
 .picker-wrapper {
   height: $picker-ios-height;
 
-  border-top: 1px solid #929499;
+  border-top: 1px solid $picker-ios-border-color;
 
   background: $picker-ios-background-color;
 }
 
-.hairlines .picker-wrapper {
-  border-width: $hairlines-width;
-}
-
 .picker-toolbar {
   display: flex;
 
   height: $picker-ios-toolbar-height;
+
+  border-bottom: 1px solid $picker-ios-border-color;
+
   background: $picker-ios-toolbar-background-color;
 }
 
+.hairlines .picker-wrapper,
+.hairlines .picker-toolbar {
+  border-width: $hairlines-width;
+}
+
 .picker-toolbar-button {
   flex: 1;
+
   text-align: right;
 }
 
 .picker-toolbar-cancel {
+  font-weight: normal;
+
   text-align: left;
 }
 
@@ -57,23 +71,85 @@ $picker-ios-option-line-height:                24px !default;
   background: $picker-ios-button-background-color;
 }
 
-.picker-offset {
-  transform: translateY($picker-ios-option-offset-y);
+.picker-columns {
+  height: $picker-ios-height - $picker-ios-toolbar-height;
+
+  perspective: 1800px;
 }
 
-.picker-column {
-  padding: 0 10px;
+.picker-col {
+  padding: $picker-ios-column-padding;
+
+  transform-style: preserve-3d;
 }
 
 .picker-prefix,
 .picker-suffix,
-.picker-options {
-  padding: 0 8px;
+.picker-opts {
+  top: $picker-ios-option-offset-y;
+
   font-size: $picker-ios-option-font-size;
-  line-height: $picker-ios-option-line-height;
+  line-height: $picker-ios-option-height;
+  color: $picker-ios-option-text-color;
+
+  transform-style: preserve-3d;
+
+  pointer-events: none;
 }
 
-.picker-prefix,
-.picker-suffix {
-  padding: 0
+.picker-opt {
+  margin: 0;
+  padding: $picker-ios-option-padding;
+
+  width: calc(100% - 24px);
+
+  font-size: $picker-ios-option-font-size;
+  line-height: $picker-ios-option-height;
+
+  background: transparent;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition-timing-function: ease-out;
+
+  backface-visibility: hidden;
+
+  pointer-events: auto;
+}
+
+.picker-above-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: block;
+
+  width: 100%;
+  height: $picker-ios-option-offset-y + 4px;
+
+  border-bottom: 1px solid $picker-ios-border-color;
+
+  background: linear-gradient(to bottom,
+                            rgba($picker-ios-background-color, 1) 20%,
+                            rgba($picker-ios-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
+}
+
+.picker-below-highlight {
+  position: absolute;
+  top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
+  left: 0;
+  z-index: 11;
+  display: block;
+
+  width: 100%;
+  height: $picker-ios-option-offset-y + $picker-ios-option-height;
+
+  border-top: 1px solid $picker-ios-border-color;
+
+  background: linear-gradient(to top,
+                           rgba($picker-ios-background-color, 1) 30%,
+                           rgba($picker-ios-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
 }
diff --git a/ionic/components/picker/picker.md.scss b/ionic/components/picker/picker.md.scss
@@ -3,3 +3,159 @@
 
 // Material Design Picker
 // --------------------------------------------------
+
+$picker-md-height:                            260px !default;
+$picker-md-border-color:                      $list-md-border-color !default;
+$picker-md-background-color:                  $list-md-background-color !default;
+
+$picker-md-toolbar-height:                    44px !default;
+$picker-md-toolbar-background-color:          $picker-md-background-color !default;
+
+$picker-md-button-height:                     $picker-md-toolbar-height !default;
+$picker-md-button-text-color:                 $link-md-color !default;
+$picker-md-button-background-color:           transparent !default;
+
+$picker-md-column-padding:                    0 12px !default;
+
+$picker-md-option-padding:                    0 10px !default;
+$picker-md-option-text-color:                 $list-md-text-color !default;
+$picker-md-option-font-size:                  18px !default;
+$picker-md-option-height:                     42px !default;
+$picker-md-option-offset-y:                   (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
+
+$picker-md-option-selected-font-size:         24px !default;
+$picker-md-option-selected-color:             $link-md-color !default;
+
+$picker-highlight-opacity:                     .8 !default;
+
+
+.picker-wrapper {
+  height: $picker-md-height;
+
+  border-top: 1px solid $picker-md-border-color;
+
+  background: $picker-md-background-color;
+}
+
+.picker-toolbar {
+  display: flex;
+
+  justify-content: flex-end;
+
+  height: $picker-md-toolbar-height;
+
+  background: $picker-md-toolbar-background-color;
+}
+
+.hairlines .picker-wrapper,
+.hairlines .picker-toolbar {
+  border-width: $hairlines-width;
+}
+
+.picker-button,
+.picker-button.activated {
+  margin: 0;
+
+  height: $picker-md-button-height;
+
+  color: $picker-md-button-text-color;
+  background: $picker-md-button-background-color;
+
+  box-shadow: none;
+}
+
+.picker-columns {
+  height: $picker-md-height - $picker-md-toolbar-height;
+
+  perspective: 1800px;
+}
+
+.picker-col {
+  padding: $picker-md-column-padding;
+
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: $picker-md-option-offset-y;
+
+  font-size: $picker-md-option-font-size;
+  line-height: $picker-md-option-height;
+  color: $picker-md-option-text-color;
+
+  transform-style: preserve-3d;
+
+  pointer-events: none;
+}
+
+.picker-opts ion-button-effect {
+  display: none;
+}
+
+.picker-opt {
+  margin: 0;
+  padding: $picker-md-option-padding;
+
+  width: calc(100% - 24px);
+
+  font-size: $picker-md-option-font-size;
+  line-height: $picker-md-option-height;
+
+  background: transparent;
+
+  transition-timing-function: ease-out;
+
+  backface-visibility: hidden;
+
+  pointer-events: auto;
+}
+
+.picker-opt .button-inner {
+  transition: 200ms;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opt-selected {
+  font-size: $picker-md-option-selected-font-size;
+
+  color: $picker-md-option-selected-color;
+}
+
+.picker-above-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  width: 100%;
+  height: $picker-md-option-offset-y + 4px;
+
+  border-bottom: 1px solid $picker-md-border-color;
+
+  background: linear-gradient(to bottom,
+                            rgba($picker-md-background-color, 1) 20%,
+                            rgba($picker-md-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
+}
+
+.picker-below-highlight {
+  position: absolute;
+  top: $picker-md-option-offset-y + $picker-md-option-height - 4;
+  left: 0;
+  z-index: 11;
+
+  width: 100%;
+  height: $picker-md-option-offset-y + $picker-md-option-height;
+
+  border-top: 1px solid $picker-md-border-color;
+
+  background: linear-gradient(to top,
+                           rgba($picker-md-background-color, 1) 30%,
+                           rgba($picker-md-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
+}