You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Connected.Components/Styles/components/_inputlabel.scss

127 lines
2.8 KiB

2 years ago
.input-label {
display: block;
transform-origin: top left;
}
.input-label-inputcontrol {
top: 0;
left: 0;
position: absolute;
transform: translate(0, 24px) scale(1);
}
.input-label-margindense {
transform: translate(0, 21px) scale(1);
}
.input-label-shrink {
transform: translate(0, 1.5px) scale(0.75);
transform-origin: top left;
}
.input-label-animated {
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}
.input-label-filled {
z-index: 1;
transform: translate(12px, 20px) scale(1);
pointer-events: none;
&.input-label-margin-dense {
transform: translate(12px, 17px) scale(1);
}
}
.input-label-outlined {
transform: translate(14px, 20px) scale(1);
pointer-events: none;
background-color: var(--palette-surface);
padding: 0px 5px !important;
&.input-label-margin-dense {
transform: translate(14px, 12px) scale(1);
}
}
label.input-label.input-label-inputcontrol {
.shrink ~ & {
color: var(--palette-text-primary);
}
.input:focus-within ~ & {
color: var(--palette-primary);
}
.shrink ~ &,
.input:focus-within ~ & {
transform: translate(0, 1.5px) scale(0.75);
transform-origin: top left;
&.input-label-filled {
transform: translate(12px, 10px) scale(0.75);
&.input-label-margin-dense {
transform: translate(12px, 7px) scale(0.75);
}
}
&.input-label-outlined {
transform: translate(14px, -6px) scale(0.75);
}
}
.input:focus-within ~ &.input-error {
color: var(--palette-error);
}
}
.application-layout-rtl {
.input-label {
transform-origin: top right;
}
.input-label-inputcontrol {
left: unset;
right: 0;
}
.input-label-shrink {
transform-origin: top right;
}
.input-label-filled {
transform: translate(-12px, 20px) scale(1);
&.input-label-margin-dense {
transform: translate(-12px, 17px) scale(1);
}
}
.input-label-outlined {
transform: translate(-14px, 20px) scale(1);
&.input-label-margin-dense {
transform: translate(-14px, 12px) scale(1);
}
}
.shrink, .input:focus-within {
~ label.input-label.input-label-inputcontrol {
transform-origin: top right;
&.input-label-filled {
transform: translate(-12px, 10px) scale(0.75);
&.input-label-margin-dense {
transform: translate(-12px, 7px) scale(0.75);
}
}
&.input-label-outlined {
transform: translate(-14px, -6px) scale(0.75);
}
}
}
}