550 lines
18 KiB
CSS
550 lines
18 KiB
CSS
/* region INPUT */
|
|
.v-field {
|
|
display: grid;
|
|
grid-template-areas: "prepend-inner field clear append-inner";
|
|
grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
|
|
font-size: 16px;
|
|
letter-spacing: 0.009375em;
|
|
max-width: 100%;
|
|
border-radius: 4px;
|
|
contain: layout;
|
|
flex: 1 0;
|
|
grid-area: control;
|
|
position: relative;
|
|
--v-field-padding-start: 16px;
|
|
--v-field-padding-end: 16px;
|
|
--v-field-padding-top: 8px;
|
|
--v-field-padding-bottom: 4px;
|
|
--v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
|
|
--v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
|
|
}
|
|
.v-field--disabled {
|
|
opacity: var(--v-disabled-opacity);
|
|
pointer-events: none;
|
|
}
|
|
.v-field .v-chip {
|
|
--v-chip-height: 24px;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region MODIFIERS */
|
|
.v-field--prepended {
|
|
padding-inline-start: 12px;
|
|
}
|
|
.v-field--appended {
|
|
padding-inline-end: 12px;
|
|
}
|
|
.v-field--variant-solo, .v-field--variant-solo-filled {
|
|
background: rgb(var(--v-theme-surface));
|
|
border-color: transparent;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
|
|
}
|
|
.v-field--variant-solo-inverted {
|
|
background: rgb(var(--v-theme-surface));
|
|
border-color: transparent;
|
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
|
|
}
|
|
.v-field--variant-solo-inverted.v-field--focused {
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
}
|
|
.v-field--variant-filled {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
|
|
--v-input-control-height: 56px;
|
|
--v-field-padding-bottom: 4px;
|
|
}
|
|
|
|
.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
|
|
--v-input-control-height: 48px;
|
|
--v-field-padding-bottom: 0px;
|
|
}
|
|
|
|
.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
|
|
--v-input-control-height: 40px;
|
|
--v-field-padding-bottom: 0px;
|
|
}
|
|
|
|
.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
|
|
--v-field-padding-top: 0px;
|
|
}
|
|
.v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
|
|
--v-field-padding-bottom: 16px;
|
|
}
|
|
|
|
.v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
|
|
--v-field-padding-bottom: 12px;
|
|
}
|
|
|
|
.v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
|
|
--v-field-padding-bottom: 8px;
|
|
}
|
|
|
|
.v-field--variant-plain, .v-field--variant-underlined {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
|
|
--v-field-padding-start: 0px;
|
|
--v-field-padding-end: 0px;
|
|
}
|
|
.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
|
|
--v-input-control-height: 48px;
|
|
--v-field-padding-top: 4px;
|
|
--v-field-padding-bottom: 4px;
|
|
}
|
|
|
|
.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
|
|
--v-input-control-height: 40px;
|
|
--v-field-padding-top: 2px;
|
|
--v-field-padding-bottom: 0px;
|
|
}
|
|
|
|
.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
|
|
--v-input-control-height: 32px;
|
|
--v-field-padding-top: 0px;
|
|
--v-field-padding-bottom: 0px;
|
|
}
|
|
|
|
.v-field--flat {
|
|
box-shadow: none;
|
|
}
|
|
.v-field--rounded {
|
|
border-radius: 9999px;
|
|
}
|
|
.v-field.v-field--prepended {
|
|
--v-field-padding-start: 6px;
|
|
}
|
|
.v-field.v-field--appended {
|
|
--v-field-padding-end: 6px;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region ELEMENTS */
|
|
.v-field__input {
|
|
align-items: center;
|
|
color: inherit;
|
|
column-gap: 2px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
letter-spacing: 0.009375em;
|
|
opacity: var(--v-high-emphasis-opacity);
|
|
min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
|
|
min-width: 0;
|
|
padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
|
|
padding-top: var(--v-field-input-padding-top);
|
|
padding-bottom: var(--v-field-input-padding-bottom);
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.v-input--density-default .v-field__input {
|
|
row-gap: 8px;
|
|
}
|
|
|
|
.v-input--density-comfortable .v-field__input {
|
|
row-gap: 6px;
|
|
}
|
|
|
|
.v-input--density-compact .v-field__input {
|
|
row-gap: 4px;
|
|
}
|
|
|
|
.v-field__input input {
|
|
letter-spacing: inherit;
|
|
}
|
|
.v-field__input input::placeholder,
|
|
input.v-field__input::placeholder,
|
|
textarea.v-field__input::placeholder {
|
|
color: currentColor;
|
|
opacity: var(--v-disabled-opacity);
|
|
}
|
|
|
|
.v-field__input:focus, .v-field__input:active {
|
|
outline: none;
|
|
}
|
|
.v-field__input:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v-field__field {
|
|
flex: 1 0;
|
|
grid-area: field;
|
|
position: relative;
|
|
align-items: flex-start;
|
|
display: flex;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region AFFIXES */
|
|
.v-field__prepend-inner {
|
|
grid-area: prepend-inner;
|
|
padding-inline-end: var(--v-field-padding-after);
|
|
}
|
|
|
|
.v-field__clearable {
|
|
grid-area: clear;
|
|
}
|
|
|
|
.v-field__append-inner {
|
|
grid-area: append-inner;
|
|
padding-inline-start: var(--v-field-padding-after);
|
|
}
|
|
|
|
.v-field__append-inner,
|
|
.v-field__clearable,
|
|
.v-field__prepend-inner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-top: var(--v-input-padding-top, 8px);
|
|
}
|
|
.v-field--center-affix .v-field__append-inner,
|
|
.v-field--center-affix .v-field__clearable,
|
|
.v-field--center-affix .v-field__prepend-inner {
|
|
align-items: center;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.v-field.v-field--variant-underlined .v-field__append-inner,
|
|
.v-field.v-field--variant-underlined .v-field__clearable,
|
|
.v-field.v-field--variant-underlined .v-field__prepend-inner,
|
|
.v-field.v-field--variant-plain .v-field__append-inner,
|
|
.v-field.v-field--variant-plain .v-field__clearable,
|
|
.v-field.v-field--variant-plain .v-field__prepend-inner {
|
|
align-items: flex-start;
|
|
padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
|
|
padding-bottom: var(--v-field-padding-bottom, 4px);
|
|
}
|
|
|
|
.v-field--focused .v-field__prepend-inner,
|
|
.v-field--focused .v-field__append-inner {
|
|
opacity: 1;
|
|
}
|
|
|
|
.v-field__prepend-inner > .v-icon,
|
|
.v-field__append-inner > .v-icon,
|
|
.v-field__clearable > .v-icon {
|
|
opacity: var(--v-medium-emphasis-opacity);
|
|
}
|
|
.v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon,
|
|
.v-field--disabled .v-field__append-inner > .v-icon,
|
|
.v-field--error .v-field__append-inner > .v-icon,
|
|
.v-field--disabled .v-field__clearable > .v-icon,
|
|
.v-field--error .v-field__clearable > .v-icon {
|
|
opacity: 1;
|
|
}
|
|
.v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
|
|
.v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
|
|
.v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
|
|
color: rgb(var(--v-theme-error));
|
|
}
|
|
|
|
.v-field__clearable {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
margin-inline: 4px;
|
|
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-property: opacity, transform, width;
|
|
}
|
|
.v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
|
|
opacity: 1;
|
|
}
|
|
@media (hover: hover) {
|
|
.v-field:hover .v-field__clearable {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@media (hover: none) {
|
|
.v-field__clearable {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* endregion */
|
|
/* region LABEL */
|
|
.v-label.v-field-label {
|
|
contain: layout paint;
|
|
display: block;
|
|
margin-inline-start: var(--v-field-padding-start);
|
|
margin-inline-end: var(--v-field-padding-end);
|
|
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: var(--v-input-padding-top);
|
|
transform-origin: left center;
|
|
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-property: opacity, transform;
|
|
z-index: 1;
|
|
}
|
|
.v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
|
|
top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
|
|
}
|
|
.v-field--center-affix .v-label.v-field-label {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.v-field--active .v-label.v-field-label {
|
|
visibility: hidden;
|
|
}
|
|
.v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
|
|
opacity: 1;
|
|
}
|
|
.v-field--error:not(.v-field--disabled) .v-label.v-field-label {
|
|
color: rgb(var(--v-theme-error));
|
|
}
|
|
.v-label.v-field-label--floating {
|
|
--v-field-label-scale: 0.75em;
|
|
font-size: var(--v-field-label-scale);
|
|
visibility: hidden;
|
|
max-width: 100%;
|
|
}
|
|
.v-field--center-affix .v-label.v-field-label--floating {
|
|
transform: none;
|
|
}
|
|
.v-field.v-field--active .v-label.v-field-label--floating {
|
|
visibility: unset;
|
|
}
|
|
.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
|
top: 7px;
|
|
}
|
|
|
|
.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
|
top: 5px;
|
|
}
|
|
|
|
.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
|
top: 3px;
|
|
}
|
|
|
|
.v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
|
|
transform: translateY(-16px);
|
|
margin: 0;
|
|
top: var(--v-input-padding-top);
|
|
}
|
|
.v-field--variant-outlined .v-label.v-field-label--floating {
|
|
transform: translateY(-50%);
|
|
transform-origin: center;
|
|
position: static;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region OUTLINE */
|
|
.v-field__outline {
|
|
--v-field-border-width: 1px;
|
|
--v-field-border-opacity: 0.38;
|
|
align-items: stretch;
|
|
contain: layout;
|
|
display: flex;
|
|
height: 100%;
|
|
left: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
@media (hover: hover) {
|
|
.v-field:hover .v-field__outline {
|
|
--v-field-border-opacity: var(--v-high-emphasis-opacity);
|
|
}
|
|
}
|
|
.v-field--error:not(.v-field--disabled) .v-field__outline {
|
|
color: rgb(var(--v-theme-error));
|
|
}
|
|
.v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
|
|
--v-field-border-opacity: 1;
|
|
}
|
|
.v-field--variant-outlined.v-field--focused .v-field__outline {
|
|
--v-field-border-width: 2px;
|
|
}
|
|
.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
|
|
border-color: currentColor;
|
|
border-style: solid;
|
|
border-width: 0 0 var(--v-field-border-width);
|
|
opacity: var(--v-field-border-opacity);
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
|
|
border-color: currentColor;
|
|
border-style: solid;
|
|
border-width: 0 0 2px;
|
|
transform: scaleX(0);
|
|
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.v-field--variant-outlined .v-field__outline {
|
|
border-radius: inherit;
|
|
}
|
|
.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
|
|
border: 0 solid currentColor;
|
|
opacity: var(--v-field-border-opacity);
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.v-field--variant-outlined .v-field__outline__start {
|
|
flex: 0 0 12px;
|
|
border-top-width: var(--v-field-border-width);
|
|
border-bottom-width: var(--v-field-border-width);
|
|
border-inline-start-width: var(--v-field-border-width);
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
border-end-start-radius: inherit;
|
|
}
|
|
.v-field--rounded.v-field--variant-outlined .v-field__outline__start,
|
|
[class^=rounded-].v-field--variant-outlined .v-field__outline__start,
|
|
[class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
|
|
flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
|
|
}
|
|
|
|
.v-field--variant-outlined .v-field__outline__notch {
|
|
flex: none;
|
|
position: relative;
|
|
max-width: calc(100% - 12px);
|
|
}
|
|
.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
|
|
opacity: var(--v-field-border-opacity);
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.v-field--variant-outlined .v-field__outline__notch::before {
|
|
border-width: var(--v-field-border-width) 0 0;
|
|
}
|
|
.v-field--variant-outlined .v-field__outline__notch::after {
|
|
bottom: 0;
|
|
border-width: 0 0 var(--v-field-border-width);
|
|
}
|
|
.v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-field--variant-outlined .v-field__outline__end {
|
|
flex: 1;
|
|
border-top-width: var(--v-field-border-width);
|
|
border-bottom-width: var(--v-field-border-width);
|
|
border-inline-end-width: var(--v-field-border-width);
|
|
border-start-start-radius: 0;
|
|
border-start-end-radius: inherit;
|
|
border-end-end-radius: inherit;
|
|
border-end-start-radius: 0;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region LOADER */
|
|
.v-field__loader {
|
|
top: calc(100% - 2px);
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
overflow: hidden;
|
|
}
|
|
.v-field--variant-outlined .v-field__loader {
|
|
top: calc(100% - 3px);
|
|
}
|
|
|
|
/* endregion */
|
|
/* region OVERLAY */
|
|
.v-field__overlay {
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.v-field--variant-filled .v-field__overlay {
|
|
background-color: currentColor;
|
|
opacity: 0.04;
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.v-field--variant-filled.v-field--has-background .v-field__overlay {
|
|
opacity: 0;
|
|
}
|
|
@media (hover: hover) {
|
|
.v-field--variant-filled:hover .v-field__overlay {
|
|
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
|
}
|
|
}
|
|
.v-field--variant-filled.v-field--focused .v-field__overlay {
|
|
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
|
}
|
|
|
|
.v-field--variant-solo-filled .v-field__overlay {
|
|
background-color: currentColor;
|
|
opacity: 0.04;
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
@media (hover: hover) {
|
|
.v-field--variant-solo-filled:hover .v-field__overlay {
|
|
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
|
}
|
|
}
|
|
.v-field--variant-solo-filled.v-field--focused .v-field__overlay {
|
|
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
|
}
|
|
|
|
.v-field--variant-solo-inverted .v-field__overlay {
|
|
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
|
|
opacity: 0;
|
|
}
|
|
@media (hover: hover) {
|
|
.v-field--variant-solo-inverted:hover .v-field__overlay {
|
|
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
|
}
|
|
}
|
|
.v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
|
|
background-color: rgb(var(--v-theme-surface-variant));
|
|
opacity: 1;
|
|
}
|
|
|
|
/* endregion */
|
|
/* region MODIFIERS */
|
|
.v-field--reverse .v-field__field, .v-field--reverse .v-field__input {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.v-field--reverse .v-field__input, .v-field--reverse input {
|
|
text-align: end;
|
|
}
|
|
|
|
.v-input--disabled .v-field--variant-filled .v-field__outline::before,
|
|
.v-input--disabled .v-field--variant-underlined .v-field__outline::before {
|
|
border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
|
|
}
|
|
|
|
.v-field--loading .v-field__outline::after,
|
|
.v-field--loading .v-field__outline::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* endregion */ |