@zanichelli/albe-web-components 9.2.1 → 9.2.2-beta

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

@@ -1,402 +1,402 @@
-:host {
-  display: inline-block;
-  width: inherit;
-}
-
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-
-/* GENERAL */
-:host input::-ms-clear,
-:host input::-ms-reveal {
-  display: none;
-}
-
-input,
-textarea,
-.textarea-wrapper {
-  box-sizing: border-box;
-  border: var(--border-size-small) solid var(--color-surface04);
-  background: var(--color-input-field01);
-  border-radius: var(--border-radius-small);
-  color: var(--color-text01);
-  fill: var(--color-icon02);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  outline: none;
-}
-
-:host([size="small"]) input,
-:host([size="small"]) textarea,
-:host([size="small"]) .textarea-wrapper,
-:host([size="x-small"]) input,
-:host([size="x-small"]) textarea,
-:host([size="x-small"]) .textarea-wrapper {
-  font-size: var(--font-size-2);
-}
-
-:host.cursor-select input {
-  cursor: pointer;
-}
-
-/* FOCUS */
-:host:not(.active-select) input:focus:focus-visible,
-.textarea-wrapper:focus-within {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-input:focus:focus-visible,
-textarea:focus:focus-visible {
-  color: var(--color-primary02);
-}
-
-:host.active-select input {
-  border: var(--border-size-small) solid var(--blue500);
-}
-
-:host.cursor-select input:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host input[readonly]:focus:focus-visible {
-  box-shadow: none;
-}
-
-/* FILLED */
-.filled {
-  border-color: var(--color-surface05);
-}
-
-/* STATUSES (success, warning, error) */
-.input-success {
-  border-color: var(--color-success01);
-  background: var(--color-success-inverse);
-  fill: var(--color-success01);
-}
-
-.input-error {
-  border-color: var(--color-error01);
-  background: var(--color-error-inverse);
-  fill: var(--color-error01);
-}
-
-.input-warning {
-  border-color: var(--color-warning01);
-  background: var(--color-warning-inverse);
-  fill: var(--color-warning01);
-}
-
-/* HOVER */
-input:hover,
-.textarea-wrapper:hover {
-  outline: var(--border-size-medium) solid var(--color-surface04);
-  outline-offset: -2px;
-}
-
-/* READONLY */
-:host:not(.active-select) input[readonly],
-.readonly {
-  border-color: var(--color-disabled01);
-  fill: var(--color-disabled01);
-  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-disabled01);
-  box-shadow: none;
-  color: var(--color-disabled02);
-  fill: var(--color-disabled01);
-  pointer-events: none;
-}
-
-:host([disabled]:not([disabled="false"])) input:hover {
-  border-width: var(--border-size-small);
-}
-
-/* PLACEHOLDER */
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-text05);
-}
-
-::-webkit-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-:-ms-textarea-placeholder {
-  color: var(--color-text05);
-}
-
-::placeholder {
-  color: var(--color-text05);
-}
-
-/* LABEL */
-label.input-label {
-  display: block;
-  padding-bottom: var(--space-unit);
-  color: var(--color-text02);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  text-align: left;
-  text-transform: uppercase;
-}
-
-:host([disabled]:not([disabled="false"])) label.input-label {
-  color: var(--color-disabled02);
-}
-
-.text-wrapper > div {
-  position: relative;
-  z-index: 1;
-  fill: var(--color-icon02);
-}
-
-.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.icon-button {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  pointer-events: initial;
-}
-
-.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-.text-wrapper .icons-wrapper > button.icon-button.hidden {
-  display: none;
-}
-
-.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
-.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
-  cursor: pointer;
-}
-
-.text-wrapper .icons-wrapper > button.icon-button > z-icon {
-  --z-icon-width: 18px;
-  --z-icon-height: 18px;
-
-  display: block;
-}
-
-.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
-.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
-/* Disable background color webkit */
-/* stylelint-disable property-no-vendor-prefix */
-.text-wrapper > div > input:-webkit-autofill,
-.text-wrapper > div > input:-webkit-autofill:hover,
-.text-wrapper > div > input:-webkit-autofill:focus,
-.text-wrapper > div > input:-webkit-autofill:active {
-  background: var(--color-white) !important;
-  background-clip: text !important;
-  -webkit-transition-delay: 99999s !important; /* trick: background color will be applied after 99999s */
-}
-
-.textarea-wrapper {
-  padding: calc(var(--space-unit) * 1.5);
-
-  /* Firefox scrollbar */
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-textarea::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-textarea::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-textarea::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-textarea {
-  width: 100%;
-  min-height: 132px;
-  padding: 0;
-  border: none;
-  margin: 0;
-  resize: none;
-}
-
-.radio-wrapper,
-.checkbox-wrapper {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--color-text01);
-  fill: var(--color-primary01);
-  font-family: var(--font-family-sans);
-}
-
-.radio-wrapper:hover,
-.checkbox-wrapper:hover {
-  color: var(--color-hover-primary);
-  fill: currentcolor;
-}
-
-.radio-wrapper > input,
-.checkbox-wrapper > input {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.radio-wrapper .radio-label,
-.checkbox-wrapper .checkbox-label {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: 1;
-  text-transform: inherit;
-}
-
-.radio-wrapper input:not(:disabled) + .radio-label,
-.checkbox-wrapper input:not(:disabled) + .checkbox-label {
-  cursor: pointer;
-}
-
-.radio-wrapper .radio-label z-icon,
-.checkbox-wrapper .checkbox-label z-icon {
-  cursor: pointer;
-  fill: inherit;
-}
-
-:host([size="small"]) .radio-wrapper .radio-label z-icon,
-:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
-:host([size="small"]) .radio-wrapper .radio-label,
-:host([size="small"]) .checkbox-wrapper .checkbox-label {
-  font-size: var(--font-size-2);
-}
-
-:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
-  --z-icon-width: 14px;
-  --z-icon-height: 14px;
-}
-
-:host([size="x-small"]) .radio-wrapper .radio-label,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
-  font-size: var(--font-size-1);
-}
-
-.radio-wrapper .radio-label.after,
-.checkbox-wrapper .checkbox-label.after {
-  flex-direction: row;
-}
-
-.radio-wrapper .radio-label.before,
-.checkbox-wrapper .checkbox-label.before {
-  flex-direction: row-reverse;
-}
-
-.radio-wrapper .radio-label.after > span,
-.checkbox-wrapper .checkbox-label.after > span {
-  margin-left: var(--space-unit);
-}
-
-.radio-wrapper .radio-label.before > span,
-.checkbox-wrapper .checkbox-label.before > span {
-  margin-right: var(--space-unit);
-}
-
-:host([size="small"]) .radio-wrapper .radio-label.after > span,
-:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
-:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-:host([size="small"]) .radio-wrapper .radio-label.before > span,
-:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
-:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
-  margin-right: calc(var(--space-unit) * 0.5);
-}
-
-/* focus */
-.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
-.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-focus-primary);
-}
-
-/* disabled */
-.radio-wrapper > input:disabled + .radio-label,
-.checkbox-wrapper > input:disabled + .checkbox-label {
-  color: var(--color-disabled02);
-}
-
-.radio-wrapper > input:disabled + .radio-label > z-icon,
-.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
-  cursor: default;
-  fill: var(--color-disabled01);
-}
-
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+/* GENERAL */
+:host input::-ms-clear,
+:host input::-ms-reveal {
+  display: none;
+}
+
+input,
+textarea,
+.textarea-wrapper {
+  box-sizing: border-box;
+  border: var(--border-size-small) solid var(--color-surface04);
+  background: var(--color-input-field01);
+  border-radius: var(--border-radius-small);
+  color: var(--color-text01);
+  fill: var(--color-icon02);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+:host([size="small"]) input,
+:host([size="small"]) textarea,
+:host([size="small"]) .textarea-wrapper,
+:host([size="x-small"]) input,
+:host([size="x-small"]) textarea,
+:host([size="x-small"]) .textarea-wrapper {
+  font-size: var(--font-size-2);
+}
+
+:host.cursor-select input {
+  cursor: pointer;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+.textarea-wrapper:focus-within {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+input:focus:focus-visible,
+textarea:focus:focus-visible {
+  color: var(--color-primary02);
+}
+
+:host.active-select input {
+  border: var(--border-size-small) solid var(--blue500);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  box-shadow: none;
+}
+
+/* FILLED */
+.filled {
+  border-color: var(--color-surface05);
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-success01);
+  background: var(--color-success-inverse);
+  fill: var(--color-success01);
+}
+
+.input-error {
+  border-color: var(--color-error01);
+  background: var(--color-error-inverse);
+  fill: var(--color-error01);
+}
+
+.input-warning {
+  border-color: var(--color-warning01);
+  background: var(--color-warning-inverse);
+  fill: var(--color-warning01);
+}
+
+/* HOVER */
+input:hover,
+.textarea-wrapper:hover {
+  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline-offset: -2px;
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.readonly {
+  border-color: var(--color-disabled01);
+  fill: var(--color-disabled01);
+  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-disabled01);
+  box-shadow: none;
+  color: var(--color-disabled02);
+  fill: var(--color-disabled01);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text05);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-text05);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-text05);
+}
+
+::placeholder {
+  color: var(--color-text05);
+}
+
+/* LABEL */
+label.input-label {
+  display: block;
+  padding-bottom: var(--space-unit);
+  color: var(--color-text02);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-1);
+  font-weight: var(--font-sb);
+  text-align: left;
+  text-transform: uppercase;
+}
+
+:host([disabled]:not([disabled="false"])) label.input-label {
+  color: var(--color-disabled02);
+}
+
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--color-icon02);
+}
+
+.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.icon-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
+.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+/* Disable background color webkit */
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill,
+.text-wrapper > div > input:-webkit-autofill:hover,
+.text-wrapper > div > input:-webkit-autofill:focus,
+.text-wrapper > div > input:-webkit-autofill:active {
+  background: var(--color-white) !important;
+  background-clip: text !important;
+  -webkit-transition-delay: 99999s !important; /* trick: background color will be applied after 99999s */
+}
+
+.textarea-wrapper {
+  padding: calc(var(--space-unit) * 1.5);
+
+  /* Firefox scrollbar */
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+textarea::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  resize: none;
+}
+
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-text01);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+}
+
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
+  color: var(--color-hover-primary);
+  fill: currentcolor;
+}
+
+.radio-wrapper > input,
+.checkbox-wrapper > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
+  text-transform: inherit;
+}
+
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
+  cursor: pointer;
+}
+
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
+  cursor: pointer;
+  fill: inherit;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
+  flex-direction: row;
+}
+
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
+  flex-direction: row-reverse;
+}
+
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
+  margin-left: var(--space-unit);
+}
+
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
+  margin-right: var(--space-unit);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
+/* focus */
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  border-radius: var(--border-radius-small);
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* disabled */
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
+  color: var(--color-disabled02);
+}
+
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
+  cursor: default;
+  fill: var(--color-disabled01);
+}
+