@limetech/lime-elements
Version:
1,366 lines (1,319 loc) • 71.2 kB
CSS
@charset "UTF-8";
/**
* Note! This file is forwarded via `src/style/exports.scss`
* and exposed to consumers through the root `index.scss`.
*
* Consumers import it using:
* `@use '@limetech/lime-elements' as lime-elements;`
*
* Legacy import paths (`dist/scss/mixins`) are maintained
* for backward compatibility via copy rules in the Stencil config.
*/
/**
* This can be used on a trigger element that opens a dropdown menu or a popover.
*/
/**
* This mixin will mask out the content that is close to
* the edges of a scrollable area.
* - If the scrollable content has `overflow-y`, use `vertically`
* as an argument for `$direction`.
- If the scrollable content has `overflow-x`, use `horizontally`
* as an argument for `$direction`.
*
* For the visual effect to work smoothly, we need to make sure that
* the size of the fade-out edge effect is the same as the
* internal paddings of the scrollable area. Otherwise, content of a
* scrollable area that does not have a padding will fade out before
* any scrolling has been done.
* This is why this mixin already adds paddings, which automatically
* default to the size of the fade-out effect.
* This size defaults to `1rem`, but to override the size use
* `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
* when `vertically` argument is set, and use
* `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
* when `horizontally` argument is set.
* Of course you can also programmatically increase and decrease the
* size of these variables for each edge, based on the amount of
* scrolling that has been done by the user. In this case, make sure
* to add a custom padding where the mixin is used, to override
* the paddings that are automatically added by the mixin in the
* compiled CSS code.
*/
/**
* This mixin will add an animated underline to the bottom of an `a` elements.
* Note that you may need to add `all: unset;` –depending on your use case–
* before using this mixin.
*/
/**
* This mixin creates a cross-browser font stack.
* - `sans-serif` can be used for the UI of the components.
* - `monospace` can be used for code.
*
* ⚠️ If we change the font stacks, we need to update
* 1. the consumer documentation in `README.md`, and
* 2. the CSS variables of `--kompendium-example-font-family`
* in the `<style>` tag of `index.html`.
*/
/**
* This mixin is a hack, using old CSS syntax
* to enable you to truncate a piece of text,
* after a certain number of lines.
*/
/**
* This mixin will add a chessboard background pattern,
* typically used to visualize transparency.
*/
/**
* Make a container resizable by the user.
* This is used in the documentations and examples
* of some components, to demonstrate how the component
* behaves in a resizable container.
*/
/**
* Drag to reorder mixins
*/
/**
* The breakpoints below are used to create responsive designs
* in Lime's products. Therefore, they are here to get distributed
* to all components in other private repos, which rely on this `mixins`
* file, to create consistent styles.
*
* :::important
* In very rare cases you should used media queries!
* Nowadays, there are many better ways of achieving responsive design
* without media queries. For example, using CSS Grid, Flexbox, and their features.
* :::
*/
/**
* Media query mixins for responsive design based on screen width.
* Note that these mixins do not detect the device type!
*/
:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
color: rgb(var(--color-blue-default));
}
:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
background-color: rgb(var(--color-blue-default)) !important;
}
:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,
:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
color: rgb(var(--color-white));
}
:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
color: rgb(var(--color-green-default));
}
:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
background-color: rgb(var(--color-green-default)) !important;
}
:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
color: rgb(var(--color-white));
}
:host([type=email]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=email]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
color: rgb(var(--contrast-900));
}
:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
color: rgb(var(--color-white));
}
:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
z-index: 1;
}
:host([type=url]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
:host([type=email]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
:host([type=tel]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: calc(100% - 2.75rem);
}
:host([type=url]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
:host([type=email]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
:host([type=tel]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link {
width: 100% !important;
}
/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
:host([readonly]) .mdc-text-field__input {
opacity: 1;
-webkit-text-fill-color: rgba(var(--contrast-1400), 1);
}
:host([type=textarea]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__resizer {
pointer-events: all;
}
/**
* @prop --textarea-height: Height of the field when type is set to `textarea`
*/
:host(limel-input-field) {
position: relative;
display: flex;
flex-direction: column;
}
:host([hidden]) {
display: none;
}
:host([type=textarea]) {
height: var(--textarea-height, 100%);
}
:host([type=textarea]) limel-notched-outline {
flex-grow: 1;
}
:host([type=textarea]) .mdc-text-field.mdc-text-field--textarea {
height: var(--textarea-height, 100%);
}
:host([type=textarea]) .mdc-text-field.mdc-text-field--textarea .mdc-text-field__input::placeholder {
color: rgb(var(--contrast-900)) !important;
font-size: var(--limel-theme-default-font-size) !important;
font-family: inherit !important;
}
:host([type=textarea]) .mdc-text-field.mdc-text-field--textarea .mdc-text-field__input {
margin-top: 0.5rem;
margin-bottom: 0;
}
:host(limel-input-field:focus),
:host(limel-input-field:focus-visible),
:host(limel-input-field:focus-within) {
--limel-h-l-grid-template-rows-transition-speed: 0.46s;
--limel-h-l-grid-template-rows: 1fr;
}
:host(limel-input-field) {
--limel-h-l-grid-template-rows-transition-speed: 0.3s;
--limel-h-l-grid-template-rows: 0fr;
}
:host(limel-input-field:focus) limel-helper-line,
:host(limel-input-field:focus-visible) limel-helper-line,
:host(limel-input-field:focus-within) limel-helper-line,
:host(limel-input-field:hover) limel-helper-line {
will-change: grid-template-rows;
}
@keyframes mdc-ripple-fg-radius-in {
from {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
}
to {
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
}
@keyframes mdc-ripple-fg-opacity-in {
from {
animation-timing-function: linear;
opacity: 0;
}
to {
opacity: var(--mdc-ripple-fg-opacity, 0);
}
}
@keyframes mdc-ripple-fg-opacity-out {
from {
animation-timing-function: linear;
opacity: var(--mdc-ripple-fg-opacity, 0);
}
to {
opacity: 0;
}
}
.mdc-text-field--filled {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: transform, opacity;
}
.mdc-text-field--filled .mdc-text-field__ripple::before,
.mdc-text-field--filled .mdc-text-field__ripple::after {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: "";
}
.mdc-text-field--filled .mdc-text-field__ripple::before {
transition: opacity 15ms linear, background-color 15ms linear;
z-index: 1;
/* @alternate */
z-index: var(--mdc-ripple-z-index, 1);
}
.mdc-text-field--filled .mdc-text-field__ripple::after {
z-index: 0;
/* @alternate */
z-index: var(--mdc-ripple-z-index, 0);
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before {
transform: scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
top: 0;
/* @noflip */ /*rtl:ignore*/
left: 0;
transform: scale(0);
transform-origin: center center;
}
.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after {
top: var(--mdc-ripple-top, 0);
/* @noflip */ /*rtl:ignore*/
left: var(--mdc-ripple-left, 0);
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}
.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after {
animation: mdc-ripple-fg-opacity-out 150ms;
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-text-field--filled .mdc-text-field__ripple::before,
.mdc-text-field--filled .mdc-text-field__ripple::after {
top: calc(50% - 100%);
/* @noflip */ /*rtl:ignore*/
left: calc(50% - 100%);
width: 200%;
height: 200%;
}
.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-text-field__ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.mdc-text-field {
border-top-left-radius: 4px;
/* @alternate */
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 4px;
/* @alternate */
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
color: rgba(0, 0, 0, 0.6);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: rgba(0, 0, 0, 0.87);
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, 0.54);
}
}
@media all {
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.54);
}
}
.mdc-text-field .mdc-text-field__input {
caret-color: #6200ee;
/* @alternate */
caret-color: var(--mdc-theme-primary, #6200ee);
}
.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(0, 0, 0, 0.6);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {
color: rgba(0, 0, 0, 0.6);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, 0.54);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing, .mdc-text-field:not(.mdc-text-field--disabled) a.lime-trailing-icon-for-link {
color: rgba(0, 0, 0, 0.54);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, 0.6);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, 0.6);
}
.mdc-text-field .mdc-floating-label {
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.mdc-text-field {
display: inline-flex;
align-items: baseline;
padding: 0 16px;
position: relative;
box-sizing: border-box;
overflow: hidden;
/* @alternate */
will-change: opacity, transform, color;
}
.mdc-text-field__input {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
/* @alternate */
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
/* @alternate */
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: 0.009375em;
/* @alternate */
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
text-decoration: inherit;
/* @alternate */
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
/* @alternate */
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
min-width: 0;
border: none;
border-radius: 0;
background: none;
appearance: none;
padding: 0;
}
.mdc-text-field__input::-ms-clear {
display: none;
}
.mdc-text-field__input::-webkit-calendar-picker-indicator {
display: none;
}
.mdc-text-field__input:focus {
outline: none;
}
.mdc-text-field__input:invalid {
box-shadow: none;
}
@media all {
.mdc-text-field__input::placeholder {
transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
}
@media all {
.mdc-text-field__input:-ms-input-placeholder {
transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
}
@media all {
.mdc-text-field--no-label .mdc-text-field__input::placeholder, .mdc-text-field--focused .mdc-text-field__input::placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1;
}
}
@media all {
.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder, .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
transition-delay: 40ms;
transition-duration: 110ms;
opacity: 1;
}
}
.mdc-text-field__affix {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
/* @alternate */
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
/* @alternate */
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: 0.009375em;
/* @alternate */
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
text-decoration: inherit;
/* @alternate */
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
/* @alternate */
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
height: 28px;
transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
white-space: nowrap;
}
.mdc-text-field--label-floating .mdc-text-field__affix, .mdc-text-field--no-label .mdc-text-field__affix {
opacity: 1;
}
@supports (-webkit-hyphens: none) {
.mdc-text-field--outlined .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%;
}
}
.mdc-text-field__affix--prefix {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 2px;
}
[dir=rtl] .mdc-text-field__affix--prefix, .mdc-text-field__affix--prefix[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 2px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 12px;
}
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix, .mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 12px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-text-field__affix--suffix {
/* @noflip */ /*rtl:ignore*/
padding-left: 12px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-text-field__affix--suffix, .mdc-text-field__affix--suffix[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 12px;
/*rtl:end:ignore*/
}
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
/* @noflip */ /*rtl:ignore*/
padding-left: 2px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix, .mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 2px;
/*rtl:end:ignore*/
}
.mdc-text-field--filled .mdc-text-field__ripple::before,
.mdc-text-field--filled .mdc-text-field__ripple::after {
background-color: rgba(0, 0, 0, 0.87);
/* @alternate */
background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));
}
.mdc-text-field--filled:hover .mdc-text-field__ripple::before, .mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before {
opacity: 0.04;
/* @alternate */
opacity: var(--mdc-ripple-hover-opacity, 0.04);
}
.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before, .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before {
transition-duration: 75ms;
opacity: 0.12;
/* @alternate */
opacity: var(--mdc-ripple-focus-opacity, 0.12);
}
.mdc-text-field--filled {
height: 56px;
}
.mdc-text-field--filled::before {
display: inline-block;
width: 0;
height: 40px;
content: "";
vertical-align: 0;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: rgb(244.8, 244.8, 244.8);
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.42);
}
.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.87);
}
.mdc-text-field--filled .mdc-line-ripple::after {
border-bottom-color: #6200ee;
/* @alternate */
border-bottom-color: var(--mdc-theme-primary, #6200ee);
}
.mdc-text-field--filled .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 16px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-text-field--filled .mdc-floating-label, .mdc-text-field--filled .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 16px;
/*rtl:end:ignore*/
}
.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-106%) scale(0.75);
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
height: 100%;
}
.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
display: none;
}
.mdc-text-field--filled.mdc-text-field--no-label::before {
display: none;
}
@supports (-webkit-hyphens: none) {
.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
align-items: center;
align-self: center;
display: inline-flex;
height: 100%;
}
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-37.25px) scale(1);
}
.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-34.75px) scale(0.75);
}
.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
}
}
.mdc-text-field--outlined {
height: 56px;
}
.mdc-text-field--outlined .mdc-text-field__input {
height: 100%;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.87);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: #6200ee;
/* @alternate */
border-color: var(--mdc-theme-primary, #6200ee);
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: var(--mdc-shape-small, 4px);
}
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 0;
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
width: max(12px, var(--mdc-shape-small, 4px));
}
}
@supports (top: max(0%)) {
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
}
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 0;
}
[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: var(--mdc-shape-small, 4px);
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
.mdc-text-field--outlined {
/* @noflip */ /*rtl:ignore*/
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
@supports (top: max(0%)) {
.mdc-text-field--outlined {
/* @noflip */ /*rtl:ignore*/
padding-right: max(16px, var(--mdc-shape-small, 4px));
}
}
@supports (top: max(0%)) {
.mdc-text-field--outlined + .mdc-text-field-helper-line {
/* @noflip */ /*rtl:ignore*/
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
@supports (top: max(0%)) {
.mdc-text-field--outlined + .mdc-text-field-helper-line {
/* @noflip */ /*rtl:ignore*/
padding-right: max(16px, var(--mdc-shape-small, 4px));
}
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
}
@supports (top: max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
/* @noflip */ /*rtl:ignore*/
padding-right: max(16px, var(--mdc-shape-small, 4px));
}
}
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
/*rtl:begin:ignore*/
}
@supports (top: max(0%)) {
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
/* @noflip */ /*rtl:ignore*/
padding-left: max(16px, var(--mdc-shape-small, 4px));
}
}
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon, .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
}
@supports (top: max(0%)) {
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
/* @noflip */ /*rtl:ignore*/
padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon, .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
/*rtl:end:ignore*/
}
.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 1px;
}
.mdc-text-field--outlined .mdc-text-field__ripple::before,
.mdc-text-field--outlined .mdc-text-field__ripple::after {
content: none;
}
.mdc-text-field--outlined .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 4px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 4px;
/*rtl:end:ignore*/
}
.mdc-text-field--outlined {
overflow: visible;
}
.mdc-text-field--outlined .mdc-text-field__input {
display: flex;
border: none !important;
background-color: transparent;
}
.mdc-text-field--outlined .mdc-notched-outline {
z-index: 1;
}
.mdc-text-field--textarea .mdc-floating-label {
top: 19px;
}
.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
transform: none;
}
.mdc-text-field--textarea {
flex-direction: column;
align-items: center;
width: auto;
height: auto;
padding: 0;
transition: none;
}
.mdc-text-field--textarea .mdc-text-field__input {
flex-grow: 1;
height: auto;
min-height: 1.5rem;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
resize: none;
padding: 0 16px;
line-height: 1.5rem;
}
.mdc-text-field--textarea.mdc-text-field--filled::before {
display: none;
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
transform: translateY(-10.25px) scale(0.75);
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-textarea-filled {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
}
}
.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
margin-top: 23px;
margin-bottom: 9px;
}
.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px;
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0;
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
transform: translateY(-27.25px) scale(1);
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-24.75px) scale(0.75);
}
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
}
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
margin-top: 16px;
margin-bottom: 16px;
}
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
top: 18px;
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
margin-bottom: 2px;
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
display: inline-block;
width: 0;
height: 16px;
content: "";
vertical-align: -16px;
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
align-self: flex-end;
padding: 0 16px;
}
.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
display: none;
}
.mdc-text-field__resizer {
align-self: stretch;
display: inline-flex;
flex-direction: column;
flex-grow: 1;
max-height: 100%;
max-width: 100%;
min-height: 56px;
min-width: fit-content;
/* @alternate */
min-width: -moz-available;
/* @alternate */
min-width: -webkit-fill-available;
overflow: hidden;
resize: both;
}
.mdc-text-field--filled .mdc-text-field__resizer {
transform: translateY(-1px);
}
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {
transform: translateY(1px);
}
.mdc-text-field--outlined .mdc-text-field__resizer {
/* @noflip */ /*rtl:ignore*/
transform: translateX(-1px) translateY(-1px);
}
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer, .mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateX(1px) translateY(-1px);
/*rtl:end:ignore*/
}
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {
/* @noflip */ /*rtl:ignore*/
transform: translateX(1px) translateY(1px);
}
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input, [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter, .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl], .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateX(-1px) translateY(1px);
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
}
[dir=rtl] .mdc-text-field--with-leading-icon, .mdc-text-field--with-leading-icon[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 48px);
/* @noflip */ /*rtl:ignore*/
left: 48px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 48px;
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / 0.75 - 64px / 0.75);
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 36px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 36px;
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px);
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
/* @noflip */ /*rtl:ignore*/
transform: translateY(-37.25px) translateX(-32px) scale(1);
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateY(-37.25px) translateX(32px) scale(1);
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
/* @noflip */ /*rtl:ignore*/
transform: translateY(-34.75px) translateX(-32px) scale(0.75);
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl], .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateY(-34.75px) translateX(32px) scale(0.75);
/*rtl:end:ignore*/
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
}
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] {
/*rtl:begin:ignore*/
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1;
}
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] {
/*rtl:end:ignore*/
}
@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
}
}
.mdc-text-field--with-trailing-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-text-field--with-trailing-icon, .mdc-text-field--with-trailing-icon[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
/*rtl:end:ignore*/
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 64px);
}
.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / 0.75 - 64px / 0.75);
}
.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px);
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
max-width: calc(100% - 96px);
}
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
max-width: calc(100% / 0.75 - 96px / 0.75);
}
.mdc-text-field-helper-line {
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.mdc-text-field + .mdc-text-field-helper-line {
padding-right: 16px;
padding-left: 16px;
}
.mdc-form-field > .mdc-text-field + label {
align-self: flex-start;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
color: rgba(98, 0, 238, 0.87);
}
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
border-width: 2px;
}
.mdc-text-field--focused + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
opacity: 1;
}
.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 2px;
}
.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 0;
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid .mdc-text-field__input {
caret-color: #b00020;
/* @alternate */
caret-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing, .mdc-text-field--invalid:not(.mdc-text-field--disabled) a.lime-trailing-icon-for-link {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
opacity: 1;
}
.mdc-text-field--disabled .mdc-text-field__input {
color: rgba(0, 0, 0, 0.38);
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
color: rgba(0, 0, 0, 0.38);
}
}
@media all {
.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.38);
}
}
.mdc-text-field--disabled .mdc-floating-label {
color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-helper-text {
color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--disabled .mdc-text-field-character-counter,
.mdc-text-field--disabled + .mdc-text-field-helper-line .mdc-text-field-character-counter {
color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--disabled .mdc-text-field__icon--leading {
color: rgba(0, 0, 0, 0.3);
}
.mdc-text-field--disabled .mdc-text-field__icon--trailing, .mdc-text-field--disabled a.lime-trailing-icon-for-link {
color: rgba(0, 0, 0, 0.3);
}
.mdc-text-field--disabled .mdc-text-field__affix--prefix {
color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
color: rgba(0, 0, 0, 0.38);
}
.mdc-text-field--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.06);
}
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
.mdc-text-field--disabled .mdc-text-field__input::placeholder {
colo