@enki-tek/fms-web-components 0.0.58 → 0.0.60

package/components/Accordion/Accordion.svelte

@@ -53,7 +53,7 @@ export let stayOpen = true;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -249,7 +249,7 @@ export let stayOpen = true;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -438,7 +438,7 @@ export let stayOpen = true;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Accordion/AccordionItem.svelte

@@ -54,7 +54,7 @@ export let header;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -250,7 +250,7 @@ export let header;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -439,7 +439,7 @@ export let header;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Badge/Badge.svelte

@@ -59,7 +59,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -255,7 +255,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -444,7 +444,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Breadcrumb/Breadcrumb.svelte

@@ -69,7 +69,7 @@ let length = newBreadcrumbs.length;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -265,7 +265,7 @@ let length = newBreadcrumbs.length;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -454,7 +454,7 @@ let length = newBreadcrumbs.length;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/Button.scss

@@ -104,86 +104,173 @@
   color: $black !important;
 }
 
-.ebg-secondary,
-.eactive-secondary:active,
-.ehover-secondary:hover {
-  background-color: $secondary !important;
+// secondary color hover and acitve
+.ebg-secondary{
+  background-color: $secondary;
+}
+.ebg-secondary:hover,.ebg-secondary:focus {
+  background-color: $secondary-dark;
+  transition: all $transitionTimeHover;
 }
 
-.ebg-secondaryDark,
-.eactive-secondaryDark:active,
-.ehover-secondaryDark:hover {
+// secondaryDark color hover and acitve
+.ebg-secondaryDark{
   background-color: $secondary-dark;
 }
+.ebg-secondaryDark:hover,.ebg-secondaryDark:focus {
+  background-color: $secondary;
+  transition: all $transitionTimeHover;
+}
 
-.ebg-secondaryLight,
-.eactive-secondaryLight:active,
-.ehover-secondaryLight:hover {
+// secondaryLight color hover and acitve
+.ebg-secondaryLight{
   background-color: $secondary-light;
 }
+.ebg-secondaryLight:hover,.ebg-secondaryLight:focus {
+  background-color: $secondary;
+  transition: all $transitionTimeHover;
+}
+
 
+// primary color hover and acitve
 .ebg-primary {
   background-color: $primary;
 }
+.ebg-primary:hover,.ebg-primary:focus {
+  background-color: $primary-dark;
+  transition: all $transitionTimeHover;
+}
 
+// primaryDark color hover and acitve
 .ebg-primaryDark {
   background-color: $primary-dark;
 }
+.ebg-primaryDark:hover,.ebg-primaryDark:focus {
+  background-color: $primary;
+  transition: all $transitionTimeHover;
+}
 
+// primaryLight color hover and acitve
 .ebg-primaryLight {
   background-color: $primary-light;
 }
+.ebg-primaryLight:hover,.ebg-primaryLight:focus {
+    transition: all $transitionTimeHover;
+  background-color: $primary;
+  transition: all $transitionTimeHover;
+}
 
+// danger color hover and acitve
 .ebg-danger {
   background-color: $danger ;
 }
+.ebg-danger:hover,.ebg-danger:focus {
+    transition: all $transitionTimeHover;
+  background-color: $danger-dark ;
+}
 
+// dangerDark color hover and acitve
 .ebg-dangerDark {
   background-color: $danger-dark;
 }
+.ebg-dangerDark:hover,.ebg-dangerDark:focus {
+    transition: all $transitionTimeHover;
+  background-color: $danger;
+}
 
+// dangerLight color hover and acitve
 .ebg-dangerLight {
   background-color: $danger-light;
 }
+.ebg-dangerLight:hover,.ebg-dangerLight:focus {
+    transition: all $transitionTimeHover;
+  background-color: $danger;
+}
 
+// warning color hover and acitve
 .ebg-warning {
   background-color: $warning;
 }
+.ebg-warning:hover,.ebg-warning:focus {
+    transition: all $transitionTimeHover;
+  background-color: $warning-dark;
+}
 
+// warningDark color hover and acitve
 .ebg-warningDark {
   background-color: $warning-dark;
   color: $white !important;
 }
+.ebg-warningDark:hover,.ebg-warningDark:focus {
+    transition: all $transitionTimeHover;
+  background-color: $warning;
+  color: $white !important;
+}
 
+// warningLight color hover and acitve
 .ebg-warningLight {
   background-color: $warning-light;
 }
+.ebg-warningLight:hover,.ebg-warningLight:focus {
+    transition: all $transitionTimeHover;
+  background-color: $warning;
+}
 
-
+// info color hover and acitve
 .ebg-info {
   background-color: $info;
 }
-
+.ebg-info:hover,.ebg-info:focus {
+    transition: all $transitionTimeHover;
+  background-color: $info-dark;
+}
+// info color hover and acitve
 .ebg-infoDark {
   background-color: $info-dark;
 }
+.ebg-infoDark:hover,.ebg-infoDark:focus {
+    transition: all $transitionTimeHover;
+  background-color: $info;
+}
 
+// info color hover and acitve
 .ebg-infoLight {
   background-color: $info-light;
 }
+.ebg-infoLight:hover,.ebg-infoLight:focus {
+    transition: all $transitionTimeHover;
+  background-color: $info;
+}
 
-
+// success color hover and acitve
 .ebg-success {
   background-color: $success;
 }
+.ebg-success:hover,.ebg-success:focus {
+    transition: all $transitionTimeHover;
+  background-color: $success-dark;
+}
 
+// success color hover and acitve
 .ebg-successDark {
   background-color: $success-dark;
 }
+.ebg-successDark:hover,.ebg-successDark:focus {
+    transition: all $transitionTimeHover;
+  background-color: $success;
+}
 
+// success color hover and acitve
 .ebg-successLight {
   background-color: $success-light;
 }
+.ebg-successLight:hover,.ebg-successLight:focus {
+    transition: all $transitionTimeHover;
+  background-color: $success;
+}
+
+
+
 
 .ebg-gray100 {
   background-color: $gray-100;
@@ -639,46 +726,156 @@
 }
 
 
-//outline classess
 
+//outline classess
 .eoutline-secondary {
   outline: 1px solid $secondary;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-secondaryDark {
   outline: 1px solid $secondary-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-secondaryLight {
   outline: 1px solid $secondary-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-primary {
   outline: 1px solid $primary;
+    background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-primaryDark {
   outline: 1px solid $primary-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-primaryLight {
   outline: 1px solid $primary-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-danger {
   outline: 1px solid $danger;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-dangerDark {
   outline: 1px solid $danger-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-dangerLight {
   outline: 1px solid $danger-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-success {
   outline: 1px solid $success;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $success-light;
+    color: $success-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $success-light;
+    color: $success-dark;
+  }
 }
 
 .eoutline-successDark {
@@ -691,6 +888,17 @@
 
 .eoutline-info {
   outline: 1px solid $info;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $info-light;
+    color: $info-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $info-light;
+    color: $info-dark;
+  }
 }
 
 .eoutline-infoDark {
@@ -703,6 +911,17 @@
 
 .eoutline-warning {
   outline: 1px solid $warning;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $warning-light;
+    color: $warning-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $warning-light;
+    color: $warning-dark;
+  }
 }
 
 .eoutline-warningDark {