javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Input: allow label size overrides

Browse Source 
Input: allow label size overrides
This commit is contained in:
Shawn Taylor
2023-10-31 20:27:25 -04:00
parent 99f08a9578
commit e282058e23
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/input/input.md.outline.scss
View File

@@ -66,15 +66,20 @@
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
:host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
@include transform(translateY(-50%), scale(1));
@include transform-origin(start, top);
position: absolute;
top: 50%;
/**
* Label text should not extend
* beyond the bounds of the input.
*/
max-width: calc(100% - var(--padding-start) - var(--padding-end));
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
top 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/**
@@ -94,6 +99,7 @@
:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
@include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
@include margin(0);
top: 0;
/**
* Label text should not extend

9
core/src/components/select/select.md.outline.scss
View File

@@ -79,17 +79,18 @@
:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,
:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
@include transform(translateY(-50%), scale(1));
position: absolute;
top: 50%;
@include transform(translateY(-50%), scale(1));
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
top 150ms cubic-bezier(0.4, 0, 0.2, 1);
/**
* Label text should not extend
* beyond the bounds of the select.
*/
max-width: calc(100% - var(--padding-start) - var(--padding-end));
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
top 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/**
@@ -110,9 +111,9 @@
:host(.ion-focused.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
:host(.has-value.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper {
top: 0;
@include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
@include margin(0);
top: 0;
/**
* Label text should not extend