@enki-tek/fms-web-components 0.1.4 → 0.1.6

package/components/Accordion/Accordion.svelte

@@ -589,13 +589,15 @@ export let stayOpen = true;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Accordion/AccordionItem.svelte

@@ -590,13 +590,15 @@ export let header;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Badge/Badge.svelte

@@ -595,13 +595,15 @@ if (badgeConfig.hasOwnProperty(config)) {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Breadcrumb/Breadcrumb.svelte

@@ -605,13 +605,15 @@ let length = newBreadcrumbs.length;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Button/Button.svelte

@@ -1341,13 +1341,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardIcon.svelte

@@ -672,13 +672,15 @@ if (titleConfig.includes(titleLocation)) {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconBody.svelte

@@ -667,13 +667,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconSubtitle.svelte

@@ -676,13 +676,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconTitle.svelte

@@ -676,13 +676,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CheckBox/Checkbox.svelte

@@ -625,13 +625,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Dropdown/Dropdown.svelte

@@ -650,13 +650,15 @@ export let title = "Dropdowns";
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Dropdown/DropdownItem.svelte

@@ -643,13 +643,15 @@ export let disabled = false;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -724,13 +724,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavIcon.svelte

@@ -667,13 +667,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavItem.svelte

@@ -665,13 +665,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavLink.svelte

@@ -674,13 +674,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/Brand.svelte

@@ -77,7 +77,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
-  object-fit: contain;
+  object-fit: cover;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -653,13 +653,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/Header.scss

@@ -58,7 +58,7 @@
 :global(.userProfile img) {
 	width: 45px;
 	height: 45px;
-	object-fit: contain;
+	object-fit: cover;
 	border-radius: 50%;
 }
 

package/components/Header/Header.svelte

@@ -76,7 +76,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
-  object-fit: contain;
+  object-fit: cover;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -652,13 +652,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/HeaderItem.svelte

@@ -78,7 +78,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
-  object-fit: contain;
+  object-fit: cover;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -654,13 +654,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/UserAvatar.svelte

@@ -76,7 +76,7 @@
 :global(.userProfile img) {
   width: 45px;
   height: 45px;
-  object-fit: contain;
+  object-fit: cover;
   border-radius: 50%;
 }
 :global(.nav-link:focus, .nav-link:hover) {
@@ -652,13 +652,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Layout/Content.svelte

@@ -1,9 +1,13 @@
-<script>
-</script>
-
-<div class="container-fluid" style="margin-top:80px;background-color: #EBECEF;">
+<div class="container-fluid enki-main-content">
 	<div class="row">
 		<slot name="sidebar-menu" />
 		<slot />
 	</div>
 </div>
+
+<style>
+	.enki-main-content {
+		margin-top:77px;
+		background-color: #EBECEF;
+	}
+</style>

package/components/Layout/Page.svelte

@@ -2,11 +2,11 @@
 	import { Col, Row } from 'sveltestrap';
 </script>
 
-<main class="main-content">
+<div class="main-content">
 	<div
-		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
+		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
 	>
-		<Row class="pt-3 pb-2 m-2" style="width:100%">
+		<Row style="width:100%">
 			<Col md="4">
 				<header>
 					<div class="d-flex flex-row justify-content-start mt-2 title">
@@ -23,12 +23,12 @@
 		</Row>
 	</div>
 	<div>
-		<slot name="statuscard"/>
+		<slot name="statuscard" />
 	</div>
 	<div>
 		<slot />
 	</div>
-</main>
+</div>
 
 <style>
 	.screen-size-fix {

package/components/ModalWindow/Modal.svelte

@@ -591,13 +591,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalBody.svelte

@@ -589,13 +589,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalFooter.svelte

@@ -587,13 +587,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalHeader.svelte

@@ -592,13 +592,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/NotFound/NotFound.svelte

@@ -627,13 +627,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Pagination/Pagination.svelte

@@ -724,13 +724,15 @@ function nextPage() {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/RadioButton/RadioButton.svelte

@@ -607,13 +607,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Sidebar/SideBarMenu.svelte

@@ -24,7 +24,7 @@
 				aria-label="Close"
 			/>
 		</div>
-		<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto m-3">
+		<div class="offcanvas-body d-md-flex flex-column p-0 pt-3 overflow-y-auto m-3">
 			<slot />
 		</div>
 	</div>

package/components/Sidebar/Sidebar.svelte

@@ -749,13 +749,15 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Switches/Switch.svelte

@@ -598,13 +598,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Tab/Tab.svelte

@@ -618,13 +618,15 @@ export let tabs = [
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/TextField/TextField.svelte

@@ -626,13 +626,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Toast/Toast.svelte

@@ -662,13 +662,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Tooltip/Tooltip.svelte

@@ -605,13 +605,15 @@ const textAligns = {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/common.scss

@@ -794,25 +794,31 @@
 
 .sidebar {
     position: fixed;
-    top: 80px; /* Height of the navbar */
+    top: 73px;
+    /* Height of the navbar */
     bottom: 0;
     width: 315px;
     transition: transform 0.3s ease;
-  }  
-  .main-content {    
-    margin-left: 315px; /* Width of the sidebar */      
+}
+
+.main-content {
+    margin-left: 315px;
+    /* Width of the sidebar */
     flex: 1;
     overflow-y: auto;
     transition: margin-left 0.3s ease;
-  }
-  .main-content.collapsed {
+}
+
+.main-content.collapsed {
     margin-left: 0;
-  }
-  @media (max-width: 767px) {
+}
+
+@media (max-width: 767px) {
     .sidebar {
-      display: none !important;
+        display: none !important;
     }
+
     .main-content {
-      margin-left: 0;
-    }      
-  }
+        margin-left: 0;
+    }
+}

package/package.json

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