javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +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

118
ionic/components/picker/picker.ios.scss
View File

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