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.
127 lines
2.8 KiB
127 lines
2.8 KiB
.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);
|
|
}
|
|
}
|
|
}
|
|
} |