javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): update popover interface to match MD spec on desktop, allow multiple values in popover interface (#23474)

Browse Source 
resolves #23657
resolves #15500
resolves #12310
This commit is contained in:
Brandy Carney
2021-07-20 11:23:00 -04:00
committed by GitHub
parent be219a2814
commit 2c07a1566b
28 changed files with 889 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/label/label.md.scss
View File

@ -47,6 +47,7 @@
transform 150ms $label-md-transition-timing-function;
}
:host-context(.ion-focused).label-floating,
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-has-value).label-floating {
@ -54,9 +55,10 @@
}
/**
* When translating the label inside of an ion-item with `fill="outline"`,
* When translating the label inside of an ion-item with `fill="outline"`,
* add pseudo-elements to imitate fieldset-like padding without shifting the label
*/
:host-context(.item-fill-outline.ion-focused).label-floating,
:host-context(.item-fill-outline.item-has-focus).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-fill-outline.item-has-value).label-floating {
@ -96,28 +98,38 @@
}
}
:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
@include transform(translateX(#{$item-md-fill-outline-label-translate-x}), translateY(-6px), scale(.75));
}
:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
@include transform(translateX(calc(-1 * #{$item-md-fill-outline-label-translate-x})), translateY(-6px), scale(.75));
}
:host-context(.ion-focused).label-stacked:not(.ion-color),
:host-context(.ion-focused).label-floating:not(.ion-color),
:host-context(.item-has-focus).label-stacked:not(.ion-color),
:host-context(.item-has-focus).label-floating:not(.ion-color) {
color: $label-md-text-color-focused;
}
:host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.ion-focused.ion-color).label-floating:not(.ion-color),
:host-context(.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-has-focus.ion-color).label-floating:not(.ion-color) {
color: #{current-color(contrast)};
}
:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color),
:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color),