@exakt/ui 0.0.4 → 0.0.5

package/dist/module.d.ts

@@ -9,8 +9,9 @@ interface ModuleOptions {
         blue?: string;
     };
     breakpoints: {
+        sm?: string;
         md?: string;
-        l?: string;
+        lg?: string;
         xl?: string;
     };
     borderRadius: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.4"
+  "version": "0.0.5"
 }

package/dist/module.mjs

@@ -10,8 +10,9 @@ const defaults = {
     blue: "#2196f3"
   },
   breakpoints: {
+    sm: "16em",
     md: "33em",
-    l: "48em",
+    lg: "48em",
     xl: "60em"
   },
   borderRadius: "8px",

package/dist/runtime/components/e/app-bars.vue

@@ -12,25 +12,27 @@
   </div>
 
   <div class="bar-container">
-    <e-container
-      class="bar-e-container"
-      :force-full-width="true"
-    >
+    <e-container class="bar-e-container" :force-full-width="true">
       <div class="rounded bar">
         <e-progress-linear
           :model-value="props.loading"
           class="md-and-up-only"
         />
-
-        <div class="md-and-up-only flex-stretch">
-          <slot name="center" />
-        </div>
-        <slot name="nav-items" />
-        <div class="md-and-up-only flex-stretch">
-          <slot
-            name="right"
-            class="fullwidth"
-          />
+        <div class="bar-content">
+      
+          <div class="bar-section">
+                <!-- Normally the logo -->
+            <div class="md-and-up-only flex-stretch">
+              <slot name="center" />
+            </div>
+            <!-- All the links-->
+            <slot name="nav-items" />
+          </div>
+
+          <!-- Normally the sign in button -->
+          <div class="md-and-up-only bar-section">
+            <slot name="right" class="fullwidth" />
+          </div>
         </div>
       </div>
     </e-container>
@@ -43,7 +45,6 @@ const props = withDefaults(
   }>(),
   { loading: false }
 );
-
 </script>
 
 <style lang="scss" scoped>
@@ -76,6 +77,18 @@ const props = withDefaults(
   z-index: 4;
 }
 
+.bar-content{
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  width: 100%;
+}
+
+.bar-section{
+  display:flex;
+  align-items: stretch;
+}
+
 @media screen and (max-width: ($e-md-screen-breakpoint)) {
   .title-bar {
     display: unset;
@@ -122,7 +135,17 @@ const props = withDefaults(
     width: 100%;
     height: 100%;
 
-    padding-bottom: calc(env(safe-area-insee-bottom));
+    padding-bottom: calc(env(safe-area-inset-bottom));
+  }
+
+  .bar-content{
+    justify-content: stretch;
+ 
+  }
+
+  .bar-section{
+    justify-content: stretch;
+    width: 100%;
   }
 }
 </style>

package/dist/runtime/components/e/container.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
-    class="container"
-    :class="{ 'no-btn-padding': noBtnPadding }"
-  >
-    <div
-      class="content"
-      :class="{ forceFullWidth }"
-    >
+  <div class="container" :class="{ 'no-btn-padding': noBtnPadding }">
+    <div class="content" :class="{ forceFullWidth }">
       <slot />
     </div>
   </div>
@@ -29,11 +23,15 @@ defineProps(["noBtnPadding", "forceFullWidth"]);
   $padding: 0rem;
 
   @media (min-width: $e-md-screen-breakpoint) {
-    width: calc(85% - $padding);
+    width: calc(100% - $padding);
+  }
+
+  @media (min-width: $e-lg-screen-breakpoint) {
+    width: calc(95% - $padding);
   }
 
-  @media (min-width: var(--e-l-screen-breakpoint)) {
-    width: calc(65% - $padding);
+  @media (min-width: $e-xl-screen-breakpoint) {
+    width: calc(85% - $padding);
   }
 }
 

package/dist/runtime/components/e/nav/btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-stretch">
+  <div class="flex-stretch nav-btn">
     <e-link
       :to="to"
       class="flex-stretch fullwidth"
@@ -74,6 +74,10 @@ const inactive = computed(() => {
 </script>
 
 <style scoped lang="scss">
+
+.nav-btn{
+  flex-grow: 1;
+}
 .button:first-child {
   aspect-ratio: unset;
 

package/dist/runtime/css/util.scss

@@ -143,6 +143,11 @@ body {
   width: 100%;
 }
 
+.fullsize {
+  @extend .fullheight;
+  @extend .fullwidth;
+}
+
 .text-center {
   text-align: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",