Styleklassen Layout
Beachten Sie die Änderungen in den folgenden Standard-Layouts:
Material Dark
ix-login-otp {
/* -------------------------------------------------------------------------- */
/* BASE */
/* -------------------------------------------------------------------------- */
/** colors **/
--base__text__color: #dee3e4;
--base__background-color: #1b2122;
--base__accent__color: #81d3df;
--base__accent__color--hover: #65bac5;
/** layout **/
--base__border-radius: 4px;
--base__border-width: 1px;
--base__font-family: Roboto, Muli, Arial, Verdana, SansSerif;
--base__font-size: 15px;
--base__transition: all 0.5s ease;
/** controls **/
--base__control__height: 40px;
--base__control__spacing: 10px;
--base__control__border-color: #3f484a;
/* -------------------------------------------------------------------------- */
/* BUTTONS */
/* -------------------------------------------------------------------------- */
/** cancel/back **/
--button__cancel__background-color--hover: var(--base__accent__color--hover);
--button__cancel__background-color: transparent;
--button__cancel__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__cancel__border-radius: 100px;
--button__cancel__border: var(--base__border-width) solid var(--base__accent__color);
--button__cancel__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__cancel__box-shadow: none;
--button__cancel__color--hover: var(--base__background-color);
--button__cancel__color: var(--base__accent__color);
--button__cancel__font-weight: 500;
--button__cancel__height: var(--base__control__height);
--button__cancel__padding-inline: var(--base__control__spacing);
/** continue **/
--button__continue__background-color--hover: var(--base__accent__color--hover);
--button__continue__background-color: var(--base__accent__color);
--button__continue__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__continue__border-radius: 100px;
--button__continue__border: var(--base__border-width) solid var(--base__accent__color);
--button__continue__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__continue__box-shadow: none;
--button__continue__color--hover: var(--base__background-color);
--button__continue__color: var(--base__background-color);
--button__continue__font-weight: 500;
--button__continue__height: var(--base__control__height);
--button__continue__padding-inline: var(--base__control__spacing);
/** send **/
--button__send__background-color--hover: var(--base__accent__color--hover);
--button__send__background-color: var(--base__accent__color);
--button__send__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__send__border-radius: 100px;
--button__send__border: var(--base__border-width) solid var(--base__accent__color);
--button__send__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__send__box-shadow: none;
--button__send__color--hover: var(--base__background-color);
--button__send__color: var(--base__background-color);
--button__send__font-weight: 500;
--button__send__height: var(--base__control__height);
--button__send__padding-inline: var(--base__control__spacing);
/** link **/
--link__color--hover: var(--base__accent__color--hover);
--link__color: var(--base__accent__color);
--link__font-size: calc(var(--base__font-size) - 2px);
--link__font-weight: 500;
/* -------------------------------------------------------------------------- */
/* OTP SELECTION */
/* -------------------------------------------------------------------------- */
/** radio-selection **/
--radio__label__font-size: var(--base__font-size);
--radio__toggle__background-color--checked: var(--base__accent__color);
--radio__toggle__background-color: var(--base__background-color);
--radio__toggle__border--checked: var(--base__border-width) solid var(--base__text__color);
--radio__toggle__border: var(--base__border-width) solid var(--base__text__color);
--radio__toggle__color--dot: var(--base__accent__color);
--radio__toggle__color: var(--radio__toggle__background-color);
--radio__toggle__size: calc(var(--base__font-size) + 3px);
/* -------------------------------------------------------------------------- */
/* INPUT FIELDS */
/* -------------------------------------------------------------------------- */
/** input **/
--input__height: var(--base__control__height);
--input__font-size: var(--base__font-size);
--input__font-family: var(--base__font-family);
--input__border-width: var(--base__border-width);
--input__border-radius: var(--base__border-radius);
--input__border-color: var(--base__control__border-color);
--input__border-color--hover: var(--base__accent__color);
--input__border-color--focus: var(--base__accent__color);
--input__background-color: var(--base__background-color);
--input__background-color--hover: var(--base__background-color);
--input__background-color--focus: var(--base__background-color);
--input__color: var(--base__text__color);
--input__color--hover: var(--base__text__color);
--input__color--focus: var(--base__text__color);
/** dropdown/select **/
--select__height: var(--input__height);
--select__font-size: var(--input__font-size);
--select__font-family: var(--input__font-family);
--select__border-radius: var(--input__border-radius);
--select__padding-inline: var(--base__control__spacing);
--select__listbox__background-color: var(--input__background-color);
--select__listbox__border-color: var(--input__border-color);
--select__listbox__border-width: var(--input__border-width);
--select__option__background-color--selected: var(--base__accent__color);
--select__option__background-color: #2b3132;
--select__option__color--hover: var(--base__text__color);
--select__option__color--selected: var(--base__background-color);
--select__option__color: #dee3e488;
/* -------------------------------------------------------------------------- */
/* NOTIFICATIONS */
/* -------------------------------------------------------------------------- */
/** error **/
--notification__error__font-size: calc(var(--base__font-size) - 2px);
--notification__error__font-family: var(--base__font-family);
--notification__error__border-width: var(--base__border-width);
--notification__error__border-radius: var(--base__border-radius);
--notification__error__border-color: transparent;
--notification__error__accent__color: #93000a;
--notification__error__background-color: #93000a44;
--notification__error__text__color: var(--base__text__color);
--notification__error__text__padding: 0.5em 1em;
--notification__error__icon__padding-inline-start: 0.5em;
--notification__error__close-button__padding-inline-end: 0.5em;
--notification__error__close-button__color: var(--base__text__color);
/** info **/
--notification__info__font-size: calc(var(--base__font-size) - 2px);
--notification__info__font-family: var(--base__font-family);
--notification__info__border-width: var(--base__border-width);
--notification__info__border-radius: var(--base__border-radius);
--notification__info__border-color: transparent;
--notification__info__accent__color: var(--base__accent__color);
--notification__info__background-color: #2b3132;
--notification__info__text__color: var(--base__text__color);
--notification__info__text__padding: 0.5em 1em;
--notification__info__icon__padding-inline-start: 0.5em;
--notification__info__close-button__padding-inline-end: 0.5em;
--notification__info__close-button__color: var(--base__text__color);
}
Material Light
ix-login-otp {
/* -------------------------------------------------------------------------- */
/* BASE */
/* -------------------------------------------------------------------------- */
/** colors **/
--base__text__color: #171d1e;
--base__background-color: #e9eff0;
--base__accent__color: #006973;
--base__accent__color--hover: #1f7b84;
/** layout **/
--base__border-radius: 4px;
--base__border-width: 1px;
--base__font-family: Roboto, Muli, Arial, Verdana, SansSerif;
--base__font-size: 15px;
--base__transition: all 0.5s ease;
/** controls **/
--base__control__height: 40px;
--base__control__spacing: 10px;
--base__control__border-color: #bfc8ca;
/* -------------------------------------------------------------------------- */
/* BUTTONS */
/* -------------------------------------------------------------------------- */
/** cancel/back **/
--button__cancel__background-color--hover: var(--base__accent__color--hover);
--button__cancel__background-color: transparent;
--button__cancel__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__cancel__border-radius: 100px;
--button__cancel__border: var(--base__border-width) solid var(--base__accent__color);
--button__cancel__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__cancel__box-shadow: none;
--button__cancel__color--hover: var(--base__background-color);
--button__cancel__color: var(--base__accent__color);
--button__cancel__font-weight: 500;
--button__cancel__height: var(--base__control__height);
--button__cancel__padding-inline: var(--base__control__spacing);
/** continue **/
--button__continue__background-color--hover: var(--base__accent__color--hover);
--button__continue__background-color: var(--base__accent__color);
--button__continue__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__continue__border-radius: 100px;
--button__continue__border: var(--base__border-width) solid var(--base__accent__color);
--button__continue__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__continue__box-shadow: none;
--button__continue__color--hover: var(--base__background-color);
--button__continue__color: var(--base__background-color);
--button__continue__font-weight: 500;
--button__continue__height: var(--base__control__height);
--button__continue__padding-inline: var(--base__control__spacing);
/** send **/
--button__send__background-color--hover: var(--base__accent__color--hover);
--button__send__background-color: var(--base__accent__color);
--button__send__border--hover: var(--base__border-width) solid var(--base__accent__color--hover);
--button__send__border-radius: 100px;
--button__send__border: var(--base__border-width) solid var(--base__accent__color);
--button__send__box-shadow--hover: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
--button__send__box-shadow: none;
--button__send__color--hover: var(--base__background-color);
--button__send__color: var(--base__background-color);
--button__send__font-weight: 500;
--button__send__height: var(--base__control__height);
--button__send__padding-inline: var(--base__control__spacing);
/** link **/
--link__color--hover: var(--base__accent__color--hover);
--link__color: var(--base__accent__color);
--link__font-size: calc(var(--base__font-size) - 2px);
--link__font-weight: 500;
/* -------------------------------------------------------------------------- */
/* OTP SELECTION */
/* -------------------------------------------------------------------------- */
/** radio-selection **/
--radio__label__font-size: var(--base__font-size);
--radio__toggle__background-color--checked: var(--base__accent__color);
--radio__toggle__background-color: var(--base__background-color);
--radio__toggle__border--checked: var(--base__border-width) solid var(--base__text__color);
--radio__toggle__border: var(--base__border-width) solid var(--base__text__color);
--radio__toggle__color--dot: var(--base__accent__color);
--radio__toggle__color: var(--radio__toggle__background-color);
--radio__toggle__size: calc(var(--base__font-size) + 3px);
/* -------------------------------------------------------------------------- */
/* INPUT FIELDS */
/* -------------------------------------------------------------------------- */
/** input **/
--input__height: var(--base__control__height);
--input__font-size: var(--base__font-size);
--input__font-family: var(--base__font-family);
--input__border-width: var(--base__border-width);
--input__border-radius: var(--base__border-radius);
--input__border-color: var(--base__control__border-color);
--input__border-color--hover: var(--base__accent__color);
--input__border-color--focus: var(--base__accent__color);
--input__background-color: var(--base__background-color);
--input__background-color--hover: var(--base__background-color);
--input__background-color--focus: var(--base__background-color);
--input__color: var(--base__text__color);
--input__color--hover: var(--base__text__color);
--input__color--focus: var(--base__text__color);
/** dropdown/select **/
--select__height: var(--input__height);
--select__font-size: var(--input__font-size);
--select__font-family: var(--input__font-family);
--select__border-radius: var(--input__border-radius);
--select__padding-inline: var(--base__control__spacing);
--select__listbox__background-color: var(--input__background-color);
--select__listbox__border-color: var(--input__border-color);
--select__listbox__border-width: var(--input__border-width);
--select__option__background-color--selected: var(--base__accent__color);
--select__option__background-color: #d0d5d6;
--select__option__color--hover: var(--base__text__color);
--select__option__color--selected: var(--base__background-color);
--select__option__color: #171d1e88;
/* -------------------------------------------------------------------------- */
/* NOTIFICATIONS */
/* -------------------------------------------------------------------------- */
/** error **/
--notification__error__font-size: calc(var(--base__font-size) - 2px);
--notification__error__font-family: var(--base__font-family);
--notification__error__border-width: var(--base__border-width);
--notification__error__border-radius: var(--base__border-radius);
--notification__error__border-color: transparent;
--notification__error__accent__color: #ba1a1a;
--notification__error__background-color: #ba1a1a44;
--notification__error__text__color: var(--base__text__color);
--notification__error__text__padding: 0.5em 1em;
--notification__error__icon__padding-inline-start: 0.5em;
--notification__error__close-button__padding-inline-end: 0.5em;
--notification__error__close-button__color: var(--base__text__color);
/** info **/
--notification__info__font-size: calc(var(--base__font-size) - 2px);
--notification__info__font-family: var(--base__font-family);
--notification__info__border-width: var(--base__border-width);
--notification__info__border-radius: var(--base__border-radius);
--notification__info__border-color: transparent;
--notification__info__accent__color: var(--base__accent__color);
--notification__info__background-color: #00697344;
--notification__info__text__color: var(--base__text__color);
--notification__info__text__padding: 0.5em 1em;
--notification__info__icon__padding-inline-start: 0.5em;
--notification__info__close-button__padding-inline-end: 0.5em;
--notification__info__close-button__color: var(--base__text__color);
}
Senden Sie uns eine E-Mail