@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.5

package/src/components/Icons/play.vue

@@ -1,6 +1,6 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#172774" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M15.9099 11.6722C16.1671 11.8151 16.1671 12.1849 15.9099 12.3278L10.3071 15.4405C10.0572 15.5794 9.75 15.3986 9.75 15.1127V8.88732C9.75 8.60139 10.0572 8.42065 10.3071 8.55951L15.9099 11.6722Z" stroke="#172774" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#172774" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M15.9099 11.6722C16.1671 11.8151 16.1671 12.1849 15.9099 12.3278L10.3071 15.4405C10.0572 15.5794 9.75 15.3986 9.75 15.1127V8.88732C9.75 8.60139 10.0572 8.42065 10.3071 8.55951L15.9099 11.6722Z" stroke="#172774" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
 </template>

package/src/components/Input/Input.css

@@ -1,187 +1,187 @@
-.v-icon {
-  opacity: 1 !important;
-}
-
-.v-input__details {
-  color: var(--Dental-Blue-0);
-  opacity: 1 !important;
-}
-
-/* -------- Active and Focused Border States -------- */
-/* Custom border color for v-text-field */
-.v-field__outline {
-  opacity: 1; /* Set the opacity to 1 */
-  --v-field-border-opacity: 1; /* Ensure full opacity for the border */
-  color: var(--Soft-Concrete-1); /*  border color */
-}
-
-/* Active state border color */
-.v-field--active .v-field__outline {
-  color: var(--Soft-Concrete-1); /* Active border color */
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-/* Focused state border color */
-.v-field--focused .v-field__outline {
-  color: var(--Dental-Light-Blue-1); /* Focused border color */
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-/* Default placeholder color */
-.v-field__input::placeholder {
-  color: var(--Dental-Blue--4);
-  opacity: 1 !important;
-}
-
-.v-field--active .v-field__input::placeholder {
-  color: var(--Dental-Blue--4);
-  opacity: 1;
-}
-
-/* Default input text color */
-.v-field__input {
-  color: var(--Dental-Blue--4) !important;
-}
-
-.v-field--active .v-field__input {
-  color: var(--Dental-Blue-0) !important;
-}
-
-.v-field--focused .v-field__input {
-  color: var(--Dental-Blue-0) !important;
-}
-
-/* -------- Success State -------- */
-/* Text and border color for success */
-.is-success .v-field__input {
-  color: var(--Success-Green-1) !important; /* Text color */
-}
-
-/* Success state outline */
-.is-success .v-field__outline,
-.is-success .v-field__outline__start,
-.is-success .v-field__outline__end {
-  border-color: var(
-    --Success-Green-0
-  ) !important ; /* Apply success border color */
-  opacity: 1; /* Ensure visibility */
-}
-
-/* Also, for good measure, let's ensure the focus state works too */
-.is-success .v-field--focused .v-field__outline {
-  border-color: var(
-    --Success-Green-0
-  ); /* Apply success border color when focused */
-}
-
-/* Success state placeholder */
-.is-success .v-field__input::placeholder {
-  color: var(--Success-Green-1); /* Placeholder color */
-}
-
-.is-success .v-field--variant-outlined {
-  background: var(--Success-Green--1, #f3fdfc);
-}
-
-.is-success .v-icon {
-  color: var(--Success-Green-0); /* Your custom color */
-  opacity: 1;
-}
-
-.is-success .v-input__details {
-  color: var(--Success-Green-0);
-  opacity: 1 !important;
-}
-
-/* -------- Error State -------- */
-/* Text and border color for error */
-.is-error .v-field__input {
-  color: var(--Error-Red-0) !important; /* Text color */
-  opacity: 1;
-}
-
-/* Error border color */
-.is-error .v-field__outline,
-.is-error .v-field__outline__start,
-.is-error .v-field__outline__end {
-  border-color: var(--Error-Red-0) !important; /* Error border color */
-  opacity: 1; /* Ensure visibility */
-}
-
-/* Error state placeholder */
-.is-error .v-field__input::placeholder {
-  color: var(--Error-Red-0); /* Placeholder color */
-}
-
-.is-error .v-field--variant-outlined {
-  background: var(--Light-Gum--3, #fef9f9);
-}
-
-.is-error .v-icon {
-  color: var(--Error-Red-0); /* Your custom color */
-  opacity: 1;
-}
-
-.is-error .v-input__details {
-  color: var(--Error-Red-0);
-  opacity: 1;
-}
-
-/* -------- Warning State -------- */
-/* Text and border color for warning */
-.is-warning .v-field__input {
-  color: var(--Warm-Light-3) !important; /* Text color */
-}
-
-/* Warning border color */
-.is-warning .v-field__outline,
-.is-warning .v-field__outline__start,
-.is-warning .v-field__outline__end {
-  border-color: var(--Warning-0) !important ; /* Warning border color */
-}
-/* Warning state placeholder */
-.is-warning .v-field__input::placeholder {
-  color: var(--Warm-Light-3); /* Placeholder color */
-}
-
-.is-warning .v-field--variant-outlined {
-  background: var(--Warm-Light--2, #fffbf4);
-}
-
-.is-warning .v-icon {
-  color: var(--Warm-Light-3); /* Your custom color */
-}
-
-.is-warning .v-input__details {
-  color: var(--Warm-Light-3);
-  opacity: 1 !important;
-}
-
-.v-messages {
-  display: none;
-}
-
-.v-input__details {
-  justify-content: start !important;
-}
-
-.v-field--variant-outlined {
-  background: white;
-}
-
-.border-on-hover .v-field__outline {
-  opacity: 0;
-  --v-field-border-opacity: 0;
-}
-
-.border-on-hover:hover .v-field__outline {
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.border-on-hover .v-field--focused .v-field__outline {
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
+.v-icon {
+  opacity: 1 !important;
+}
+
+.v-input__details {
+  color: var(--Dental-Blue-0);
+  opacity: 1 !important;
+}
+
+/* -------- Active and Focused Border States -------- */
+/* Custom border color for v-text-field */
+.v-field__outline {
+  opacity: 1; /* Set the opacity to 1 */
+  --v-field-border-opacity: 1; /* Ensure full opacity for the border */
+  color: var(--Soft-Concrete-1); /*  border color */
+}
+
+/* Active state border color */
+.v-field--active .v-field__outline {
+  color: var(--Soft-Concrete-1); /* Active border color */
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+/* Focused state border color */
+.v-field--focused .v-field__outline {
+  color: var(--Dental-Light-Blue-1); /* Focused border color */
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+/* Default placeholder color */
+.v-field__input::placeholder {
+  color: var(--Dental-Blue--4);
+  opacity: 1 !important;
+}
+
+.v-field--active .v-field__input::placeholder {
+  color: var(--Dental-Blue--4);
+  opacity: 1;
+}
+
+/* Default input text color */
+.v-field__input {
+  color: var(--Dental-Blue--4) !important;
+}
+
+.v-field--active .v-field__input {
+  color: var(--Dental-Blue-0) !important;
+}
+
+.v-field--focused .v-field__input {
+  color: var(--Dental-Blue-0) !important;
+}
+
+/* -------- Success State -------- */
+/* Text and border color for success */
+.is-success .v-field__input {
+  color: var(--Success-Green-1) !important; /* Text color */
+}
+
+/* Success state outline */
+.is-success .v-field__outline,
+.is-success .v-field__outline__start,
+.is-success .v-field__outline__end {
+  border-color: var(
+    --Success-Green-0
+  ) !important ; /* Apply success border color */
+  opacity: 1; /* Ensure visibility */
+}
+
+/* Also, for good measure, let's ensure the focus state works too */
+.is-success .v-field--focused .v-field__outline {
+  border-color: var(
+    --Success-Green-0
+  ); /* Apply success border color when focused */
+}
+
+/* Success state placeholder */
+.is-success .v-field__input::placeholder {
+  color: var(--Success-Green-1); /* Placeholder color */
+}
+
+.is-success .v-field--variant-outlined {
+  background: var(--Success-Green--1, #f3fdfc);
+}
+
+.is-success .v-icon {
+  color: var(--Success-Green-0); /* Your custom color */
+  opacity: 1;
+}
+
+.is-success .v-input__details {
+  color: var(--Success-Green-0);
+  opacity: 1 !important;
+}
+
+/* -------- Error State -------- */
+/* Text and border color for error */
+.is-error .v-field__input {
+  color: var(--Error-Red-0) !important; /* Text color */
+  opacity: 1;
+}
+
+/* Error border color */
+.is-error .v-field__outline,
+.is-error .v-field__outline__start,
+.is-error .v-field__outline__end {
+  border-color: var(--Error-Red-0) !important; /* Error border color */
+  opacity: 1; /* Ensure visibility */
+}
+
+/* Error state placeholder */
+.is-error .v-field__input::placeholder {
+  color: var(--Error-Red-0); /* Placeholder color */
+}
+
+.is-error .v-field--variant-outlined {
+  background: var(--Light-Gum--3, #fef9f9);
+}
+
+.is-error .v-icon {
+  color: var(--Error-Red-0); /* Your custom color */
+  opacity: 1;
+}
+
+.is-error .v-input__details {
+  color: var(--Error-Red-0);
+  opacity: 1;
+}
+
+/* -------- Warning State -------- */
+/* Text and border color for warning */
+.is-warning .v-field__input {
+  color: var(--Warm-Light-3) !important; /* Text color */
+}
+
+/* Warning border color */
+.is-warning .v-field__outline,
+.is-warning .v-field__outline__start,
+.is-warning .v-field__outline__end {
+  border-color: var(--Warning-0) !important ; /* Warning border color */
+}
+/* Warning state placeholder */
+.is-warning .v-field__input::placeholder {
+  color: var(--Warm-Light-3); /* Placeholder color */
+}
+
+.is-warning .v-field--variant-outlined {
+  background: var(--Warm-Light--2, #fffbf4);
+}
+
+.is-warning .v-icon {
+  color: var(--Warm-Light-3); /* Your custom color */
+}
+
+.is-warning .v-input__details {
+  color: var(--Warm-Light-3);
+  opacity: 1 !important;
+}
+
+.v-messages {
+  display: none;
+}
+
+.v-input__details {
+  justify-content: start !important;
+}
+
+.v-field--variant-outlined {
+  background: white;
+}
+
+.border-on-hover .v-field__outline {
+  opacity: 0;
+  --v-field-border-opacity: 0;
+}
+
+.border-on-hover:hover .v-field__outline {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.border-on-hover .v-field--focused .v-field__outline {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}