mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
2273fb5d47
* feat(rtl): add translate3d support for directions * feat(rtl): add transform-origin support for directions * fix(transform): add missing origins * fix(transform): when given a percentage, calc on rtl * fix(transform-origin): be same as before * fix(translate3d): no double minus * fix(translate3d): use transform instead of cloning code * style(scss-lint): remove empty line * fix(merge): fix bad merge * refactor(transform-origin): nicer logic * style(): add eof line * fix(transform): remove unneeded mixin * feat(rtl): add transform mixin and str-split function * Merge remote-tracking branch 'remotes/upstream/rtl-transform' into transform-rtl # Conflicts: # src/themes/ionic.mixins.scss * fix(transform): fix string comparison
197 lines
5.7 KiB
SCSS
197 lines
5.7 KiB
SCSS
@import "../../themes/ionic.globals.md";
|
|
|
|
// Material Design Picker
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Height of the picker wrapper
|
|
$picker-md-height: 260px !default;
|
|
|
|
/// @prop - Border color of the picker wrapper
|
|
$picker-md-border-color: $list-md-border-color !default;
|
|
|
|
/// @prop - Background of the picker wrapper
|
|
$picker-md-background-color: $list-md-background-color !default;
|
|
|
|
/// @prop - Height of the picker toolbar
|
|
$picker-md-toolbar-height: 44px !default;
|
|
|
|
/// @prop - Background of the picker toolbar
|
|
$picker-md-toolbar-background-color: $picker-md-background-color !default;
|
|
|
|
/// @prop - Height of the picker button
|
|
$picker-md-button-height: $picker-md-toolbar-height !default;
|
|
|
|
/// @prop - Text color of the picker button
|
|
$picker-md-button-text-color: color($colors-md, primary) !default;
|
|
|
|
/// @prop - Background of the picker button
|
|
$picker-md-button-background-color: transparent !default;
|
|
|
|
// deprecated
|
|
$picker-md-column-padding: null !default;
|
|
|
|
/// @prop - Padding top of the picker column
|
|
$picker-md-column-padding-top: 0 !default;
|
|
|
|
/// @prop - Padding end of the picker column
|
|
$picker-md-column-padding-end: 8px !default;
|
|
|
|
/// @prop - Padding bottom of the picker column
|
|
$picker-md-column-padding-bottom: $picker-md-column-padding-top !default;
|
|
|
|
/// @prop - Padding start of the picker column
|
|
$picker-md-column-padding-start: $picker-md-column-padding-end !default;
|
|
|
|
// deprecated
|
|
$picker-md-option-padding: null !default;
|
|
|
|
/// @prop - Padding top of the picker option
|
|
$picker-md-option-padding-top: 0 !default;
|
|
|
|
/// @prop - Padding end of the picker option
|
|
$picker-md-option-padding-end: $picker-md-option-padding-top !default;
|
|
|
|
/// @prop - Padding bottom of the picker option
|
|
$picker-md-option-padding-bottom: $picker-md-option-padding-top !default;
|
|
|
|
/// @prop - Padding start of the picker option
|
|
$picker-md-option-padding-start: $picker-md-option-padding-end !default;
|
|
|
|
/// @prop - Text color of the picker option
|
|
$picker-md-option-text-color: $list-md-text-color !default;
|
|
|
|
/// @prop - Font size of the picker option
|
|
$picker-md-option-font-size: 22px !default;
|
|
|
|
/// @prop - Height of the picker option
|
|
$picker-md-option-height: 42px !default;
|
|
|
|
/// @prop - Offset y of the picker option
|
|
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
|
|
|
|
/// @prop - Text color of the selected picker option
|
|
$picker-md-option-selected-color: color($colors-md, primary) !default;
|
|
|
|
|
|
.picker-md .picker-wrapper {
|
|
height: $picker-md-height;
|
|
|
|
border-top: $hairlines-width solid $picker-md-border-color;
|
|
|
|
background: $picker-md-background-color;
|
|
}
|
|
|
|
.picker-md .picker-toolbar {
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
height: $picker-md-toolbar-height;
|
|
|
|
background: $picker-md-toolbar-background-color;
|
|
}
|
|
|
|
.picker-md .picker-button,
|
|
.picker-md .picker-button.activated {
|
|
@include margin(0);
|
|
|
|
height: $picker-md-button-height;
|
|
|
|
color: $picker-md-button-text-color;
|
|
background: $picker-md-button-background-color;
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
.picker-md .picker-columns {
|
|
height: $picker-md-height - $picker-md-toolbar-height;
|
|
|
|
perspective: 1800px;
|
|
}
|
|
|
|
.picker-md .picker-col {
|
|
transform-style: preserve-3d;
|
|
|
|
@include deprecated-variable(padding, $picker-md-column-padding) {
|
|
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
|
|
}
|
|
}
|
|
|
|
.picker-md .picker-prefix,
|
|
.picker-md .picker-suffix,
|
|
.picker-md .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-md .picker-opt {
|
|
@include margin(0);
|
|
|
|
height: 4.3rem;
|
|
|
|
font-size: $picker-md-option-font-size;
|
|
line-height: $picker-md-option-height;
|
|
color: $picker-md-option-text-color;
|
|
|
|
background: transparent;
|
|
|
|
transition-timing-function: ease-out;
|
|
|
|
backface-visibility: hidden;
|
|
|
|
pointer-events: auto;
|
|
|
|
@include deprecated-variable(padding, $picker-md-option-padding) {
|
|
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
|
|
}
|
|
}
|
|
|
|
.picker-md .picker-prefix,
|
|
.picker-md .picker-suffix,
|
|
.picker-md .picker-opt.picker-opt-selected {
|
|
|
|
color: $picker-md-option-selected-color;
|
|
}
|
|
|
|
.picker-md .picker-above-highlight {
|
|
@include position(0, null, null, 0);
|
|
@include transform(translate3d(0, 0, 90px));
|
|
|
|
position: absolute;
|
|
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%);
|
|
}
|
|
|
|
.picker-md .picker-below-highlight {
|
|
@include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
|
|
@include transform(translate3d(0, 0, 90px));
|
|
|
|
position: absolute;
|
|
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%);
|
|
}
|