javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Bradley
2016-04-26 16:03:44 -05:00
parent 066ab712c0
commit aa9a667a3f
8 changed files with 932 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
ionic/components/picker/picker.md.scss
View File

@ -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);
}