javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(many): add correct scale to stacked labels (#28163)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-09-13 13:46:02 -04:00
committed by GitHub
parent 53203dbfd5
commit 8cb878669e
154 changed files with 145 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,7 +90,7 @@
:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
:host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper {
@include transform(translateY(-32%), scale(#{$textarea-floating-label-scale}));
@include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
@include margin(0);
/**
@ -98,7 +98,7 @@
* beyond the bounds of the textarea.
*/
max-width: calc(
(100% - var(--padding-start) - var(--padding-end) - #{$textarea-md-floating-label-padding * 2}) / #{$textarea-floating-label-scale}
(100% - var(--padding-start) - var(--padding-end) - #{$textarea-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale}
);
}
@ -170,7 +170,7 @@
*/
@include padding(null, #{$textarea-md-floating-label-padding * 2}, null, null);
font-size: calc(1em * #{$textarea-floating-label-scale});
font-size: calc(1em * #{$form-control-label-stacked-scale});
opacity: 0;
pointer-events: none;

2
core/src/components/textarea/textarea.md.solid.scss
View File

@ -72,5 +72,5 @@
* Label text should not extend
* beyond the bounds of the textarea.
*/
max-width: calc(100% / #{$textarea-floating-label-scale});
max-width: calc(100% / #{$form-control-label-stacked-scale});
}

4
core/src/components/textarea/textarea.scss
View File

@ -693,11 +693,11 @@
:host(.textarea-label-placement-stacked) .label-text-wrapper,
:host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
:host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
@include transform(translateY(50%), scale(#{$textarea-floating-label-scale}));
@include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
/**
* Label text should not extend
* beyond the bounds of the textarea.
*/
max-width: calc(100% / #{$textarea-floating-label-scale});
max-width: calc(100% / #{$form-control-label-stacked-scale});
}

5
core/src/components/textarea/textarea.vars.scss
View File

@ -1,10 +1,5 @@
@import "../../themes/ionic.globals";
/// @prop - How much to scale the floating label by.
/// The value 0.75 is used to match the MD spec.
/// iOS does not have a floating label design spec, so we standardize on 0.75.
$textarea-floating-label-scale: 0.75 !default;
/// @prop - The bottom padding of the textarea element.
/// The value 8px is to add additional spacing for auto grow and scrollable textareas.
$textarea-padding-bottom: 8px !default;