@zanichelli/albe-web-components 19.2.6 → 19.2.8-RC1

package/dist/collection/components/z-input/styles-general.css

@@ -0,0 +1,166 @@
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+/* GENERAL */
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input,
+textarea {
+  background: var(--color-form-background);
+  fill: var(--color-form-default-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+input,
+.textarea-wrapper {
+  border: var(--border-size-small) solid var(--color-form-surface04);
+  border-radius: var(--border-radius-small);
+  color: var(--color-form-default-text);
+}
+
+:host([size="small"]) input,
+:host([size="small"]) textarea,
+:host([size="x-small"]) input,
+:host([size="x-small"]) textarea {
+  font-size: var(--font-size-2);
+}
+
+:host.cursor-select input {
+  cursor: pointer;
+}
+
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:not(.readonly):hover {
+  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline-offset: -2px;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+:host:not([readonly="true"]) .textarea-wrapper:focus-within {
+  border-color: var(--color-form-active-primary);
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible:hover,
+.textarea-wrapper:not(.readonly):focus-within:hover {
+  outline-color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible + .icons-wrapper {
+  fill: var(--color-form-active-primary);
+}
+
+:host.active-select input {
+  border: var(--border-size-small) solid var(--color-form-active-primary);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  border-color: var(--color-form-surface03);
+  box-shadow: none;
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-form-success01);
+  background: var(--color-form-inverse-success);
+}
+
+.input-success:focus:focus-visible + .icons-wrapper,
+.input-success + .icons-wrapper {
+  fill: var(--color-form-success01);
+}
+
+.input-error {
+  border-color: var(--color-form-hover-error);
+  background: var(--color-form-inverse-error);
+}
+
+.input-error:focus:focus-visible + .icons-wrapper,
+.input-error + .icons-wrapper {
+  fill: var(--color-form-hover-error);
+}
+
+.input-warning {
+  border-color: var(--color-form-hover-warning);
+  background: var(--color-form-inverse-warning);
+}
+
+.input-warning:focus:focus-visible + .icons-wrapper,
+.input-warning + .icons-wrapper {
+  fill: var(--color-form-hover-warning);
+}
+
+:is(.input-success, .input-error, .input-warning):focus:focus-visible {
+  color: var(--color-form-default-text);
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.textarea-wrapper.readonly {
+  border-color: var(--color-form-surface03);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+/* DISABLED */
+:host([disabled]:not([disabled="false"])) input,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
+:host([disabled]:not([disabled="false"])) z-icon {
+  border-color: var(--color-form-disabled03);
+  box-shadow: none;
+  color: var(--color-form-disabled-text);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:host([disabled]:not([disabled="false"])) label.z-label {
+  color: var(--color-disabled03);
+}

package/dist/collection/components/z-input/styles-text.css

@@ -0,0 +1,87 @@
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--color-form-default-icon);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > .input-icon + .input-icon {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.reset-icon,
+.text-wrapper .icons-wrapper > button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > .input-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > .input-icon.small,
+.text-wrapper .icons-wrapper > .input-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.text-wrapper .icons-wrapper > button.input-icon:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}

package/dist/collection/components/z-input/styles-textarea.css

@@ -0,0 +1,19 @@
+.textarea-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--space-unit) * 1.5);
+}
+
+.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
+  background-color: var(--color-form-background);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  color: currentcolor;
+  resize: none;
+}