@enki-tek/fms-web-components 0.0.57 → 0.0.59

package/components/Button/Button.scss

@@ -104,86 +104,173 @@
   color: $black !important;
 }
 
-.ebg-secondary,
-.eactive-secondary:active,
-.ehover-secondary:hover {
+// secondary color hover and acitve
+.ebg-secondary{
   background-color: $secondary !important;
 }
+.ebg-secondary:hover,.ebg-secondary:focus {
+  background-color: $secondary-light;
+  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;
@@ -640,7 +727,6 @@
 
 
 //outline classess
-
 .eoutline-secondary {
   outline: 1px solid $secondary;
 }

package/components/Button/Button.svelte

@@ -9,10 +9,11 @@
 	export let size = '';
 	export let disabled =false;
 	export let className = "";
+	export let id='';
 
 	let buttonStyles = [className];
 	if (buttonConfig.hasOwnProperty(config)) {
-		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`,className];
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`,`ebtn-${shade}:hover`,`ebtn-${shade}:focus` ,`disabled`,className];
 	}
 
 	// icon button
@@ -26,7 +27,7 @@
 	}
 </script>
 
-<button {...$$restProps} {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
+<button {...$$restProps} {type} id={id} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
 	<slot>
 		{#if label}
 			{label}
@@ -124,67 +125,135 @@
   background-color: #ffffff !important;
   color: #000000 !important;
 }
-.ebg-secondary,
-.eactive-secondary:active,
-.ehover-secondary:hover {
+.ebg-secondary {
   background-color: #3AC82E !important;
 }
-.ebg-secondaryDark,
-.eactive-secondaryDark:active,
-.ehover-secondaryDark:hover {
+.ebg-secondary:hover, .ebg-secondary:focus {
+  background-color: #CBFFC7;
+  transition: all 0.3s;
+}
+.ebg-secondaryDark {
   background-color: #00A855;
 }
-.ebg-secondaryLight,
-.eactive-secondaryLight:active,
-.ehover-secondaryLight:hover {
+.ebg-secondaryDark:hover, .ebg-secondaryDark:focus {
+  background-color: #3AC82E;
+  transition: all 0.3s;
+}
+.ebg-secondaryLight {
   background-color: #CBFFC7;
 }
+.ebg-secondaryLight:hover, .ebg-secondaryLight:focus {
+  background-color: #3AC82E;
+  transition: all 0.3s;
+}
 .ebg-primary {
   background-color: #00AEE5;
 }
+.ebg-primary:hover, .ebg-primary:focus {
+  background-color: #007FD8;
+  transition: all 0.3s;
+}
 .ebg-primaryDark {
   background-color: #007FD8;
 }
+.ebg-primaryDark:hover, .ebg-primaryDark:focus {
+  background-color: #00AEE5;
+  transition: all 0.3s;
+}
 .ebg-primaryLight {
   background-color: #CEF3FF;
 }
+.ebg-primaryLight:hover, .ebg-primaryLight:focus {
+  transition: all 0.3s;
+  background-color: #00AEE5;
+  transition: all 0.3s;
+}
 .ebg-danger {
   background-color: #FE4747;
 }
+.ebg-danger:hover, .ebg-danger:focus {
+  transition: all 0.3s;
+  background-color: #B02A37;
+}
 .ebg-dangerDark {
   background-color: #B02A37;
 }
+.ebg-dangerDark:hover, .ebg-dangerDark:focus {
+  transition: all 0.3s;
+  background-color: #FE4747;
+}
 .ebg-dangerLight {
   background-color: #FE4747;
 }
+.ebg-dangerLight:hover, .ebg-dangerLight:focus {
+  transition: all 0.3s;
+  background-color: #FE4747;
+}
 .ebg-warning {
   background-color: #FFBA3A;
 }
+.ebg-warning:hover, .ebg-warning:focus {
+  transition: all 0.3s;
+  background-color: #997404;
+}
 .ebg-warningDark {
   background-color: #997404;
   color: #ffffff !important;
 }
+.ebg-warningDark:hover, .ebg-warningDark:focus {
+  transition: all 0.3s;
+  background-color: #FFBA3A;
+  color: #ffffff !important;
+}
 .ebg-warningLight {
   background-color: #FFF3CD;
 }
+.ebg-warningLight:hover, .ebg-warningLight:focus {
+  transition: all 0.3s;
+  background-color: #FFBA3A;
+}
 .ebg-info {
   background-color: #0DCAF0;
 }
+.ebg-info:hover, .ebg-info:focus {
+  transition: all 0.3s;
+  background-color: #087990;
+}
 .ebg-infoDark {
   background-color: #087990;
 }
+.ebg-infoDark:hover, .ebg-infoDark:focus {
+  transition: all 0.3s;
+  background-color: #0DCAF0;
+}
 .ebg-infoLight {
   background-color: #9EEAF9;
 }
+.ebg-infoLight:hover, .ebg-infoLight:focus {
+  transition: all 0.3s;
+  background-color: #0DCAF0;
+}
 .ebg-success {
   background-color: #00A96B;
 }
+.ebg-success:hover, .ebg-success:focus {
+  transition: all 0.3s;
+  background-color: #146C43;
+}
 .ebg-successDark {
   background-color: #146C43;
 }
+.ebg-successDark:hover, .ebg-successDark:focus {
+  transition: all 0.3s;
+  background-color: #00A96B;
+}
 .ebg-successLight {
   background-color: #D1E7DD;
 }
+.ebg-successLight:hover, .ebg-successLight:focus {
+  transition: all 0.3s;
+  background-color: #00A96B;
+}
 .ebg-gray100 {
   background-color: #F8F9FA;
 }

package/components/Button/Button.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Button extends SvelteComponentTyped<{
     [x: string]: any;
     size?: string | undefined;
+    id?: string | undefined;
     disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
@@ -34,6 +35,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: string | undefined;
+        id?: string | undefined;
         disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;

package/components/Header/Brand.svelte

@@ -48,6 +48,9 @@
   width: 45px;
   font-weight: bold;
 }
+.avatar-text {
+  color: black;
+}
 :global(.headerIcons i) {
   padding: 0 4px;
   font-size: 18px;

package/components/Header/Header.scss

@@ -22,6 +22,11 @@
     height:45px;
     width:45px;
     font-weight:bold;
+    
+}
+
+.avatar-text{
+    color: black ;
 }
 
 :global(.headerIcons i) {

package/components/Header/Header.svelte

@@ -50,6 +50,9 @@
   width: 45px;
   font-weight: bold;
 }
+.avatar-text {
+  color: black;
+}
 :global(.headerIcons i) {
   padding: 0 4px;
   font-size: 18px;

package/components/Header/HeaderItem.svelte

@@ -4,12 +4,22 @@
         NavLink,
         Icon
 	} from 'sveltestrap';
-    export let iconName ='gear';
+    export let iconName ='';
     export let link = "#";
+    export let type = " ";
+
 </script>
 
     <NavItem class='me-3' {...$$restProps}>
-        <NavLink href={link} class='headerIcons' on:click><Icon name={iconName}></Icon><slot></slot></NavLink>
+        <NavLink href={link} class='headerIcons' on:click>
+            {#if type === "icon"} 
+            <Icon name={iconName}></Icon>
+            {:else if type === "avatarText"}
+            <span class="avatar-text">
+                 <slot></slot>
+            </span>
+            {/if} 
+        </NavLink>
     </NavItem>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -39,6 +49,9 @@
   width: 45px;
   font-weight: bold;
 }
+.avatar-text {
+  color: black;
+}
 :global(.headerIcons i) {
   padding: 0 4px;
   font-size: 18px;

package/components/Header/HeaderItem.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class HeaderItem extends SvelteComponentTyped<{
     [x: string]: any;
     link?: string | undefined;
+    type?: string | undefined;
     iconName?: string | undefined;
 }, {
     click: MouseEvent;
@@ -21,6 +22,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         link?: string | undefined;
+        type?: string | undefined;
         iconName?: string | undefined;
     };
     events: {

package/components/Header/UserAvatar.svelte

@@ -47,6 +47,9 @@
   width: 45px;
   font-weight: bold;
 }
+.avatar-text {
+  color: black;
+}
 :global(.headerIcons i) {
   padding: 0 4px;
   font-size: 18px;

package/components/TextField/TextField.scss

@@ -5,11 +5,10 @@
 }
 
 :global(.custom-field) {
-    box-shadow: $mediumShadow;
+    box-shadow: none;
     color: $gray-500;
     line-height: 20px;
     display: flex;
-    padding: 16px;
     align-items: center;
     gap: 0.5rem;
     align-self: stretch;
@@ -17,7 +16,9 @@
     border: 1px solid $gray-300;
     background: $white;
 }
-
+:global(input[type='date']){
+    color: $gray-900;
+}
 :global(.form-control:focus) {
     box-shadow: none;
     border-color: $primary;

package/components/TextField/TextField.svelte

@@ -41,11 +41,10 @@
   font-family: Roboto;
 }
 :global(.custom-field) {
-  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: none;
   color: #adb5bd;
   line-height: 20px;
   display: flex;
-  padding: 16px;
   align-items: center;
   gap: 0.5rem;
   align-self: stretch;
@@ -53,6 +52,9 @@
   border: 1px solid #DEE2E6;
   background: #ffffff;
 }
+:global(input[type="date"]) {
+  color: #212529;
+}
 :global(.form-control:focus) {
   box-shadow: none;
   border-color: #00AEE5;

package/components/variable.scss

@@ -121,18 +121,6 @@ $lowShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
 $mediumShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.10);
 $highShadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.10);
 
-// $shadow-key-umbra-opacity:      0.20 !default;
-// $shadow-key-penumbra-opacity:   0.14 !default;
-// $shadow-ambient-shadow-opacity: 0.12 !default;
+// transition variable hover
 
-//$lowShadow:0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-//             0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-//             0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-
-//$mediumShadow:0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-//             0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-//             0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-
-//$highShadow:0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-//         0  6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-//         0  8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+$transitionTimeHover:.3s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",